refactor: migrate legacy wire namespace to wrn
This commit is contained in:
@@ -1,7 +1,7 @@
|
||||
/**
|
||||
* Theme system - design tokens that work SSR and client-side.
|
||||
*
|
||||
* Tokens are plain CSS custom properties (`--wire-<key>`) so they cascade and
|
||||
* Tokens are plain CSS custom properties (`--wrn-<key>`) so they cascade and
|
||||
* can be overridden by user CSS. Each theme is a flat token map; the framework
|
||||
* ships default `light`/`dark` sets and the user's config deep-merges over them.
|
||||
*
|
||||
@@ -58,7 +58,7 @@ export function defineThemeTokens<T extends ThemeTokens>(tokens: T): T {
|
||||
}
|
||||
|
||||
export function themeVar(token: ThemeToken, fallback?: string): string {
|
||||
return `var(--wire-${token}${fallback ? `, ${fallback}` : ""})`;
|
||||
return `var(--wrn-${token}${fallback ? `, ${fallback}` : ""})`;
|
||||
}
|
||||
|
||||
export const THEME_PALETTE_NAMES = [
|
||||
@@ -90,7 +90,7 @@ export interface CustomThemePalette {
|
||||
|
||||
export interface ThemeAccentConfig {
|
||||
/**
|
||||
* Accent used when no `wire-accent` cookie is present.
|
||||
* Accent used when no `wrn-accent` cookie is present.
|
||||
*
|
||||
* - Omitted: use the named `palette`, or `blue` when no palette is configured.
|
||||
* - `false`: keep the configured base palette until the user explicitly picks an accent.
|
||||
@@ -105,7 +105,7 @@ export interface ThemeConfig {
|
||||
palette?: ThemePaletteName | CustomThemePalette;
|
||||
/** Runtime accent/palette switcher configuration. */
|
||||
accent?: ThemeAccentConfig;
|
||||
/** Name of the theme used when no `wire-theme` cookie is present. */
|
||||
/** Name of the theme used when no `wrn-theme` cookie is present. */
|
||||
default?: string;
|
||||
/** Named token maps. Deep-merged over the framework's built-in light/dark. */
|
||||
themes?: Record<string, ThemeTokens>;
|
||||
@@ -120,8 +120,8 @@ export interface ResolvedTheme {
|
||||
}
|
||||
|
||||
/** Cookies used by the SSR renderer and client runtime. */
|
||||
export const THEME_COOKIE = "wire-theme";
|
||||
export const ACCENT_COOKIE = "wire-accent";
|
||||
export const THEME_COOKIE = "wrn-theme";
|
||||
export const ACCENT_COOKIE = "wrn-accent";
|
||||
export const THEME_CSS_HREF = "/__wrnexus/theme.css";
|
||||
export const THEME_CSS_PREFIX = "/__wrnexus/theme/";
|
||||
export const THEME_JS_HREF = "/__wrnexus/theme.js";
|
||||
@@ -248,7 +248,7 @@ function semanticColorTokens(
|
||||
[`color-${name}-text`]: dark ? colorMix(color, 64, "white") : colorMix(color, 82, "black"),
|
||||
/*
|
||||
* hover and contrast are generated for every semantic colour, not just
|
||||
* primary and secondary. Components referenced --wire-color-danger-hover
|
||||
* primary and secondary. Components referenced --wrn-color-danger-hover
|
||||
* and the rest for a long time with nothing defining them, so those states
|
||||
* simply did not paint.
|
||||
*
|
||||
@@ -517,7 +517,7 @@ export function resolveAccentName(
|
||||
function tokensToDeclarations(tokens: ThemeTokens): string {
|
||||
return Object.entries(tokens)
|
||||
.map(([key, value]) =>
|
||||
key === "color-scheme" ? `color-scheme:${value};` : `--wire-${key}:${value};`,
|
||||
key === "color-scheme" ? `color-scheme:${value};` : `--wrn-${key}:${value};`,
|
||||
)
|
||||
.join("");
|
||||
}
|
||||
@@ -528,12 +528,12 @@ function selectorValue(value: string): string {
|
||||
|
||||
function globalThemeCss(): string {
|
||||
return (
|
||||
'\nhtml,body{font-family:var(--wire-font-sans,"Plus Jakarta Sans",ui-sans-serif,system-ui,sans-serif);}\n' +
|
||||
":root{--wire-radius-sm:0.55rem;--wire-radius-md:0.9rem;--wire-radius-lg:1.35rem;" +
|
||||
"--wire-shadow-1:0 1px 2px color-mix(in srgb, black 22%, transparent)," +
|
||||
'\nhtml,body{font-family:var(--wrn-font-sans,"Plus Jakarta Sans",ui-sans-serif,system-ui,sans-serif);}\n' +
|
||||
":root{--wrn-radius-sm:0.55rem;--wrn-radius-md:0.9rem;--wrn-radius-lg:1.35rem;" +
|
||||
"--wrn-shadow-1:0 1px 2px color-mix(in srgb, black 22%, transparent)," +
|
||||
"0 10px 30px color-mix(in srgb, black 14%, transparent);" +
|
||||
"--wire-shadow-2:0 10px 30px color-mix(in srgb, black 18%, transparent);" +
|
||||
"--wire-shadow-3:0 24px 64px color-mix(in srgb, black 24%, transparent);}\n" +
|
||||
"--wrn-shadow-2:0 10px 30px color-mix(in srgb, black 18%, transparent);" +
|
||||
"--wrn-shadow-3:0 24px 64px color-mix(in srgb, black 24%, transparent);}\n" +
|
||||
"wrn-slot{display:contents;}\n" +
|
||||
"[data-for]{display:none !important;}\n"
|
||||
);
|
||||
@@ -610,8 +610,8 @@ export function renderThemeCss(theme: ResolvedTheme): string {
|
||||
}
|
||||
|
||||
/**
|
||||
* Generate the client theme runtime. It exposes `window.wireTheme` and
|
||||
* `window.wireAccent`, and binds theme/accent controls.
|
||||
* Generate the client theme runtime. It exposes `window.wrnTheme` and
|
||||
* `window.wrnAccent`, and binds theme/accent controls.
|
||||
*
|
||||
* The runtime changes only data attributes and cookies. It never writes inline
|
||||
* CSS variables and never uses localStorage, so CSS and SSR remain the single
|
||||
@@ -676,15 +676,15 @@ export function renderThemeRuntime(theme: ResolvedTheme): string {
|
||||
|
||||
function syncThemeButtons(root){
|
||||
var current=getTheme();
|
||||
(root||document).querySelectorAll("[data-wire-theme-set]").forEach(function(node){
|
||||
node.setAttribute("aria-pressed",String(node.getAttribute("data-wire-theme-set")===current));
|
||||
(root||document).querySelectorAll("[data-wrn-theme-set]").forEach(function(node){
|
||||
node.setAttribute("aria-pressed",String(node.getAttribute("data-wrn-theme-set")===current));
|
||||
});
|
||||
}
|
||||
|
||||
function syncAccentButtons(root){
|
||||
var current=getAccent();
|
||||
(root||document).querySelectorAll("[data-wire-accent-set]").forEach(function(node){
|
||||
node.setAttribute("aria-pressed",String(node.getAttribute("data-wire-accent-set")===current));
|
||||
(root||document).querySelectorAll("[data-wrn-accent-set]").forEach(function(node){
|
||||
node.setAttribute("aria-pressed",String(node.getAttribute("data-wrn-accent-set")===current));
|
||||
});
|
||||
}
|
||||
|
||||
@@ -722,31 +722,31 @@ export function renderThemeRuntime(theme: ResolvedTheme): string {
|
||||
function bind(root){
|
||||
var target=root||document;
|
||||
|
||||
target.querySelectorAll("[data-wire-theme-toggle]").forEach(function(node){
|
||||
if(node.__wireThemeBound)return;
|
||||
node.__wireThemeBound=1;
|
||||
target.querySelectorAll("[data-wrn-theme-toggle]").forEach(function(node){
|
||||
if(node.__wrnThemeBound)return;
|
||||
node.__wrnThemeBound=1;
|
||||
node.addEventListener("click",toggleTheme);
|
||||
});
|
||||
|
||||
target.querySelectorAll("[data-wire-theme-set]").forEach(function(node){
|
||||
if(node.__wireThemeBound)return;
|
||||
node.__wireThemeBound=1;
|
||||
target.querySelectorAll("[data-wrn-theme-set]").forEach(function(node){
|
||||
if(node.__wrnThemeBound)return;
|
||||
node.__wrnThemeBound=1;
|
||||
node.addEventListener("click",function(){
|
||||
setTheme(node.getAttribute("data-wire-theme-set"));
|
||||
setTheme(node.getAttribute("data-wrn-theme-set"));
|
||||
});
|
||||
});
|
||||
|
||||
target.querySelectorAll("[data-wire-accent-set]").forEach(function(node){
|
||||
if(node.__wireAccentBound)return;
|
||||
node.__wireAccentBound=1;
|
||||
target.querySelectorAll("[data-wrn-accent-set]").forEach(function(node){
|
||||
if(node.__wrnAccentBound)return;
|
||||
node.__wrnAccentBound=1;
|
||||
node.addEventListener("click",function(){
|
||||
setAccent(node.getAttribute("data-wire-accent-set"));
|
||||
setAccent(node.getAttribute("data-wrn-accent-set"));
|
||||
});
|
||||
});
|
||||
|
||||
target.querySelectorAll("[data-wire-accent-clear]").forEach(function(node){
|
||||
if(node.__wireAccentBound)return;
|
||||
node.__wireAccentBound=1;
|
||||
target.querySelectorAll("[data-wrn-accent-clear]").forEach(function(node){
|
||||
if(node.__wrnAccentBound)return;
|
||||
node.__wrnAccentBound=1;
|
||||
node.addEventListener("click",clearAccent);
|
||||
});
|
||||
|
||||
@@ -761,7 +761,7 @@ export function renderThemeRuntime(theme: ResolvedTheme): string {
|
||||
var initialAccent=getAccent();
|
||||
if(initialAccent&&!el.hasAttribute("data-accent"))el.setAttribute("data-accent",initialAccent);
|
||||
|
||||
window.wireTheme={
|
||||
window.wrnTheme={
|
||||
get:getTheme,
|
||||
set:setTheme,
|
||||
toggle:toggleTheme,
|
||||
@@ -769,7 +769,7 @@ export function renderThemeRuntime(theme: ResolvedTheme): string {
|
||||
themes:THEMES.slice()
|
||||
};
|
||||
|
||||
window.wireAccent={
|
||||
window.wrnAccent={
|
||||
get:getAccent,
|
||||
set:setAccent,
|
||||
clear:clearAccent,
|
||||
|
||||
Reference in New Issue
Block a user