wok-ui-ext 0.1.0

package/dist/tabs/style.css

@@ -0,0 +1,41 @@
+.wok-ui-ext-tabs {
+  display: flex;
+  flex-direction: column;
+}
+.wok-ui-ext-tabs .wok-ui-ext-tabs-nav {
+  display: flex;
+  gap: 16px;
+  border-bottom: 2px solid var(--border-medium);
+}
+.wok-ui-ext-tabs .wok-ui-ext-tabs-nav .wok-ui-ext-tabs-tab {
+  padding: 12px 24px;
+  font-weight: 600;
+  color: var(--text-tertiary);
+  cursor: pointer;
+  border: none;
+  border-bottom: 3px solid transparent;
+  margin-bottom: -2px;
+  background: transparent;
+  font-size: inherit;
+  font-family: inherit;
+  line-height: inherit;
+}
+.wok-ui-ext-tabs .wok-ui-ext-tabs-nav .wok-ui-ext-tabs-tab:hover:not(.active):not(.disabled) {
+  color: var(--text-secondary);
+}
+.wok-ui-ext-tabs .wok-ui-ext-tabs-nav .wok-ui-ext-tabs-tab.active {
+  color: var(--color-primary);
+  border-bottom-color: var(--color-primary);
+}
+.wok-ui-ext-tabs .wok-ui-ext-tabs-nav .wok-ui-ext-tabs-tab.disabled {
+  color: var(--text-muted);
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+.wok-ui-ext-tabs .wok-ui-ext-tabs-nav .wok-ui-ext-tabs-tab:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+}
+.wok-ui-ext-tabs .wok-ui-ext-tabs-content {
+  padding: 16px 0;
+}

package/dist/tag/index.d.ts

@@ -0,0 +1,53 @@
+import { DivModule, SubModulesOpt } from 'wok-ui';
+import { IconInput } from '../icons';
+import './style.less';
+export type TagType = 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info';
+export type TagSize = 'small' | 'default' | 'large';
+/**
+ * 标签组件
+ */
+export declare class Tag extends DivModule {
+    private selected;
+    private readonly checkable;
+    private readonly disabled;
+    private readonly onClose?;
+    private readonly onChange?;
+    private readonly onClick?;
+    /**
+     * 标签组件，用于状态标记和分类展示。
+     * @param opts
+     * @param opts.text 标签内容
+     * @param opts.type 语义类型：default 默认、primary 主要、success 成功、warning 警告、danger 危险、info 信息
+     * @param opts.plain 是否描边样式（透明底 + 语义色边框），默认 false 为浅色底样式
+     * @param opts.size 标签尺寸，默认 default
+     * @param opts.round 是否圆角，默认 true
+     * @param opts.closable 是否可关闭，显示关闭图标，点击后销毁标签并触发 onClose
+     * @param opts.icon 标签图标，可选
+     * @param opts.checkable 是否可选中，开启后点击切换选中状态
+     * @param opts.selected 初始选中状态，仅 checkable 时生效，默认 false
+     * @param opts.disabled 是否禁用，禁用后不可点击、不可切换、不可关闭
+     * @param opts.onClick 点击回调
+     * @param opts.onChange 选中状态变化回调，仅 checkable 时触发，参数为最新的选中状态
+     * @param opts.onClose 关闭回调，点击关闭图标时触发，标签随后会被销毁
+     */
+    constructor(opts: {
+        text: SubModulesOpt;
+        type?: TagType;
+        plain?: boolean;
+        size?: TagSize;
+        round?: boolean;
+        closable?: boolean;
+        icon?: IconInput;
+        checkable?: boolean;
+        selected?: boolean;
+        disabled?: boolean;
+        onClick?: (evt: MouseEvent) => void;
+        onChange?: (selected: boolean) => void;
+        onClose?: (evt: MouseEvent) => void;
+    });
+    /** 设置选中状态，仅 checkable 标签生效 */
+    setSelected(selected: boolean): void;
+    /** 获取当前选中状态 */
+    isSelected(): boolean;
+    private updateSelected;
+}

package/dist/tag/index.js

@@ -0,0 +1,100 @@
+import { DivModule } from 'wok-ui';
+import { resolveIcon, IconTimes } from '../icons';
+import './style.css';
+/**
+ * 标签组件
+ */
+export class Tag extends DivModule {
+    /**
+     * 标签组件，用于状态标记和分类展示。
+     * @param opts
+     * @param opts.text 标签内容
+     * @param opts.type 语义类型：default 默认、primary 主要、success 成功、warning 警告、danger 危险、info 信息
+     * @param opts.plain 是否描边样式（透明底 + 语义色边框），默认 false 为浅色底样式
+     * @param opts.size 标签尺寸，默认 default
+     * @param opts.round 是否圆角，默认 true
+     * @param opts.closable 是否可关闭，显示关闭图标，点击后销毁标签并触发 onClose
+     * @param opts.icon 标签图标，可选
+     * @param opts.checkable 是否可选中，开启后点击切换选中状态
+     * @param opts.selected 初始选中状态，仅 checkable 时生效，默认 false
+     * @param opts.disabled 是否禁用，禁用后不可点击、不可切换、不可关闭
+     * @param opts.onClick 点击回调
+     * @param opts.onChange 选中状态变化回调，仅 checkable 时触发，参数为最新的选中状态
+     * @param opts.onClose 关闭回调，点击关闭图标时触发，标签随后会被销毁
+     */
+    constructor(opts) {
+        super('wok-ui-ext-tag');
+        this.selected = false;
+        this.checkable = !!opts.checkable;
+        this.disabled = !!opts.disabled;
+        this.selected = !!opts.selected;
+        this.onClick = opts.onClick;
+        this.onChange = opts.onChange;
+        this.onClose = opts.onClose;
+        if (opts.type && opts.type !== 'default') {
+            this.el.classList.add(`wok-ui-ext-tag-${opts.type}`);
+        }
+        if (opts.plain) {
+            this.el.classList.add('plain');
+        }
+        if (opts.size && opts.size !== 'default') {
+            this.el.classList.add(`wok-ui-ext-tag-${opts.size}`);
+        }
+        if (opts.round === false) {
+            this.el.classList.add('no-round');
+        }
+        if (this.checkable) {
+            this.el.classList.add('checkable');
+        }
+        if (this.selected) {
+            this.el.classList.add('selected');
+        }
+        if (this.disabled) {
+            this.el.classList.add('disabled');
+        }
+        if (opts.icon) {
+            this.addChild({ classNames: 'wok-ui-ext-tag-icon', children: resolveIcon(opts.icon) });
+        }
+        this.addChild({ classNames: 'wok-ui-ext-tag-text', children: opts.text });
+        if (opts.closable) {
+            this.addChild({
+                classNames: 'wok-ui-ext-tag-close',
+                children: new IconTimes(),
+                onClick: (evt) => {
+                    evt.stopPropagation();
+                    if (this.disabled) {
+                        return;
+                    }
+                    this.onClose?.(evt);
+                    this.destroy();
+                }
+            });
+        }
+        this.el.addEventListener('click', (evt) => {
+            if (this.disabled) {
+                return;
+            }
+            if (this.checkable) {
+                this.selected = !this.selected;
+                this.updateSelected();
+                this.onChange?.(this.selected);
+            }
+            this.onClick?.(evt);
+        });
+    }
+    /** 设置选中状态，仅 checkable 标签生效 */
+    setSelected(selected) {
+        if (!this.checkable || this.selected === selected) {
+            return;
+        }
+        this.selected = selected;
+        this.updateSelected();
+    }
+    /** 获取当前选中状态 */
+    isSelected() {
+        return this.selected;
+    }
+    updateSelected() {
+        this.el.classList.toggle('selected', this.selected);
+    }
+}

package/dist/tag/style.css

@@ -0,0 +1,134 @@
+.wok-ui-ext-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 24px;
+  padding: 0 12px;
+  border-radius: var(--radius-full);
+  border: 1px solid transparent;
+  background-color: var(--border-light);
+  color: var(--text-secondary);
+  font-size: var(--font-size-xs);
+  line-height: 1;
+  white-space: nowrap;
+  max-width: 100%;
+  box-sizing: border-box;
+  user-select: none;
+  transition: background-color var(--transition-speed), color var(--transition-speed), border-color var(--transition-speed);
+}
+.wok-ui-ext-tag > .wok-ui-ext-tag-icon {
+  display: inline-flex;
+  flex-shrink: 0;
+}
+.wok-ui-ext-tag > .wok-ui-ext-tag-icon > .wok-ui-svg-icon {
+  font-size: 12px;
+}
+.wok-ui-ext-tag .wok-ui-ext-tag-text {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.wok-ui-ext-tag.no-round {
+  border-radius: var(--radius-sm);
+}
+.wok-ui-ext-tag.wok-ui-ext-tag-primary {
+  background-color: var(--color-primary-light);
+  color: var(--color-primary-dark);
+}
+.wok-ui-ext-tag.wok-ui-ext-tag-success {
+  background-color: var(--color-success-light);
+  color: var(--color-success);
+}
+.wok-ui-ext-tag.wok-ui-ext-tag-warning {
+  background-color: var(--color-warning-light);
+  color: var(--color-warning);
+}
+.wok-ui-ext-tag.wok-ui-ext-tag-danger {
+  background-color: var(--color-danger-light);
+  color: var(--color-danger);
+}
+.wok-ui-ext-tag.wok-ui-ext-tag-info {
+  background-color: var(--color-info-light);
+  color: var(--color-info);
+}
+.wok-ui-ext-tag.plain {
+  background-color: transparent;
+  border-color: var(--border-medium);
+}
+.wok-ui-ext-tag.plain.wok-ui-ext-tag-primary {
+  border-color: var(--color-primary);
+  color: var(--color-primary-dark);
+}
+.wok-ui-ext-tag.plain.wok-ui-ext-tag-success {
+  border-color: var(--color-success);
+  color: var(--color-success);
+}
+.wok-ui-ext-tag.plain.wok-ui-ext-tag-warning {
+  border-color: var(--color-warning);
+  color: var(--color-warning);
+}
+.wok-ui-ext-tag.plain.wok-ui-ext-tag-danger {
+  border-color: var(--color-danger);
+  color: var(--color-danger);
+}
+.wok-ui-ext-tag.plain.wok-ui-ext-tag-info {
+  border-color: var(--color-info);
+  color: var(--color-info);
+}
+.wok-ui-ext-tag.wok-ui-ext-tag-small {
+  height: 20px;
+  padding: 0 8px;
+}
+.wok-ui-ext-tag.wok-ui-ext-tag-large {
+  height: 32px;
+  padding: 0 16px;
+  font-size: var(--font-size-small);
+}
+.wok-ui-ext-tag.checkable {
+  cursor: pointer;
+}
+.wok-ui-ext-tag.selected {
+  background-color: var(--color-primary);
+  border-color: var(--color-primary);
+  color: #fff;
+}
+.wok-ui-ext-tag.selected.wok-ui-ext-tag-success {
+  background-color: var(--color-success);
+  border-color: var(--color-success);
+}
+.wok-ui-ext-tag.selected.wok-ui-ext-tag-warning {
+  background-color: var(--color-warning);
+  border-color: var(--color-warning);
+}
+.wok-ui-ext-tag.selected.wok-ui-ext-tag-danger {
+  background-color: var(--color-danger);
+  border-color: var(--color-danger);
+}
+.wok-ui-ext-tag.selected.wok-ui-ext-tag-info {
+  background-color: var(--color-info);
+  border-color: var(--color-info);
+}
+.wok-ui-ext-tag.selected .wok-ui-ext-tag-close {
+  color: #fff;
+}
+.wok-ui-ext-tag .wok-ui-ext-tag-close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  cursor: pointer;
+  opacity: 0.6;
+  margin-right: -4px;
+  transition: opacity var(--transition-speed);
+}
+.wok-ui-ext-tag .wok-ui-ext-tag-close:hover {
+  opacity: 1;
+}
+.wok-ui-ext-tag .wok-ui-ext-tag-close > .wok-ui-svg-icon {
+  font-size: 11px;
+}
+.wok-ui-ext-tag.disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}

package/dist/text/index.d.ts

@@ -0,0 +1,104 @@
+import { Module } from 'wok-ui';
+import './style.less';
+/**
+ * 文本对齐方式
+ */
+export type TextAlign = 'left' | 'center' | 'right';
+/**
+ * 文本组件基础选项
+ */
+interface TextOptions {
+    text: string;
+    align?: TextAlign;
+    onClick?: (evt: MouseEvent) => void;
+}
+/**
+ * 标题组件基础类 - 使用 heading 元素 (h1-h6)
+ */
+declare abstract class HeadingComponent extends Module {
+    constructor(tagName: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6', className: string, opts: string | TextOptions);
+}
+/**
+ * 内联文本组件基础类 - 使用 span 元素
+ */
+declare abstract class SpanComponent extends Module {
+    constructor(className: string, opts: string | TextOptions);
+}
+/**
+ * 大标题组件 - H1
+ * 用于页面主标题、模块标题
+ */
+export declare class TitleLarge extends HeadingComponent {
+    constructor(opts: string | TextOptions);
+}
+/**
+ * 标准标题组件 - H2
+ * 用于卡片标题、区域标题
+ */
+export declare class Title extends HeadingComponent {
+    constructor(opts: string | TextOptions);
+}
+/**
+ * 副标题组件 - H3
+ * 用于标题辅助说明、分类标题
+ */
+export declare class Subtitle extends HeadingComponent {
+    constructor(opts: string | TextOptions);
+}
+/**
+ * 正文文本组件 - span
+ * 用于主要内容、描述文字
+ */
+export declare class BodyText extends SpanComponent {
+    constructor(opts: string | TextOptions);
+}
+/**
+ * 次要文本组件 - span
+ * 用于辅助信息、说明文字
+ */
+export declare class SecondaryText extends SpanComponent {
+    constructor(opts: string | TextOptions);
+}
+/**
+ * 三级文本组件 - span
+ * 用于备注、附加信息
+ */
+export declare class TertiaryText extends SpanComponent {
+    constructor(opts: string | TextOptions);
+}
+/**
+ * 小型文本组件 - span
+ * 用于标签、时间戳
+ */
+export declare class SmallText extends SpanComponent {
+    constructor(opts: string | TextOptions);
+}
+/**
+ * 超小文本组件 - span
+ * 用于角标、提示文字
+ */
+export declare class TinyText extends SpanComponent {
+    constructor(opts: string | TextOptions);
+}
+/**
+ * 弱化文本组件 - span
+ * 用于占位符提示、非重要信息
+ */
+export declare class MutedText extends SpanComponent {
+    constructor(opts: string | TextOptions);
+}
+/**
+ * 禁用文本组件 - span
+ * 用于禁用状态的文字显示
+ */
+export declare class DisabledText extends Module {
+    constructor(opts: string | Omit<TextOptions, 'onClick'>);
+}
+/**
+ * 强调文本组件 - span
+ * 用于重点内容突出显示
+ */
+export declare class StrongText extends SpanComponent {
+    constructor(opts: string | TextOptions);
+}
+export {};

package/dist/text/index.js

@@ -0,0 +1,143 @@
+import { Module } from 'wok-ui';
+import './style.css';
+/**
+ * 标题组件基础类 - 使用 heading 元素 (h1-h6)
+ */
+class HeadingComponent extends Module {
+    constructor(tagName, className, opts) {
+        super(document.createElement(tagName));
+        const options = typeof opts === 'string' ? { text: opts } : opts;
+        this.el.classList.add(className);
+        this.el.innerText = options.text;
+        if (options.align) {
+            this.el.style.textAlign = options.align;
+        }
+        if (options.onClick) {
+            this.el.addEventListener('click', options.onClick);
+            this.el.classList.add('clickable');
+        }
+    }
+}
+/**
+ * 内联文本组件基础类 - 使用 span 元素
+ */
+class SpanComponent extends Module {
+    constructor(className, opts) {
+        super(document.createElement('span'));
+        const options = typeof opts === 'string' ? { text: opts } : opts;
+        this.el.classList.add(className);
+        this.el.innerText = options.text;
+        if (options.align) {
+            this.el.style.textAlign = options.align;
+        }
+        if (options.onClick) {
+            this.el.addEventListener('click', options.onClick);
+            this.el.classList.add('clickable');
+        }
+    }
+}
+/**
+ * 大标题组件 - H1
+ * 用于页面主标题、模块标题
+ */
+export class TitleLarge extends HeadingComponent {
+    constructor(opts) {
+        super('h1', 'wok-ui-ext-text-title-large', opts);
+    }
+}
+/**
+ * 标准标题组件 - H2
+ * 用于卡片标题、区域标题
+ */
+export class Title extends HeadingComponent {
+    constructor(opts) {
+        super('h2', 'wok-ui-ext-text-title', opts);
+    }
+}
+/**
+ * 副标题组件 - H3
+ * 用于标题辅助说明、分类标题
+ */
+export class Subtitle extends HeadingComponent {
+    constructor(opts) {
+        super('h3', 'wok-ui-ext-text-subtitle', opts);
+    }
+}
+/**
+ * 正文文本组件 - span
+ * 用于主要内容、描述文字
+ */
+export class BodyText extends SpanComponent {
+    constructor(opts) {
+        super('wok-ui-ext-text-body', opts);
+    }
+}
+/**
+ * 次要文本组件 - span
+ * 用于辅助信息、说明文字
+ */
+export class SecondaryText extends SpanComponent {
+    constructor(opts) {
+        super('wok-ui-ext-text-secondary', opts);
+    }
+}
+/**
+ * 三级文本组件 - span
+ * 用于备注、附加信息
+ */
+export class TertiaryText extends SpanComponent {
+    constructor(opts) {
+        super('wok-ui-ext-text-tertiary', opts);
+    }
+}
+/**
+ * 小型文本组件 - span
+ * 用于标签、时间戳
+ */
+export class SmallText extends SpanComponent {
+    constructor(opts) {
+        super('wok-ui-ext-text-small', opts);
+    }
+}
+/**
+ * 超小文本组件 - span
+ * 用于角标、提示文字
+ */
+export class TinyText extends SpanComponent {
+    constructor(opts) {
+        super('wok-ui-ext-text-tiny', opts);
+    }
+}
+/**
+ * 弱化文本组件 - span
+ * 用于占位符提示、非重要信息
+ */
+export class MutedText extends SpanComponent {
+    constructor(opts) {
+        super('wok-ui-ext-text-muted', opts);
+    }
+}
+/**
+ * 禁用文本组件 - span
+ * 用于禁用状态的文字显示
+ */
+export class DisabledText extends Module {
+    constructor(opts) {
+        super(document.createElement('span'));
+        const options = typeof opts === 'string' ? { text: opts } : opts;
+        this.el.classList.add('wok-ui-ext-text-disabled');
+        this.el.innerText = options.text;
+        if (options.align) {
+            this.el.style.textAlign = options.align;
+        }
+    }
+}
+/**
+ * 强调文本组件 - span
+ * 用于重点内容突出显示
+ */
+export class StrongText extends SpanComponent {
+    constructor(opts) {
+        super('wok-ui-ext-text-strong', opts);
+    }
+}

package/dist/text/style.css

@@ -0,0 +1,113 @@
+/* ===== 文本组件样式 ===== */
+[class*='wok-ui-ext-text-'] {
+  margin: 0;
+  padding: 0;
+  display: inline-block;
+}
+h1.wok-ui-ext-text-title-large,
+h2.wok-ui-ext-text-title,
+h3.wok-ui-ext-text-subtitle {
+  display: block;
+}
+.wok-ui-ext-text-title-large {
+  font-size: var(--font-size-title-large);
+  font-weight: var(--font-weight-semibold);
+  color: var(--text-primary);
+  line-height: 1.4;
+}
+.wok-ui-ext-text-title {
+  font-size: var(--font-size-title);
+  font-weight: var(--font-weight-semibold);
+  color: var(--text-primary);
+  line-height: 1.4;
+}
+.wok-ui-ext-text-subtitle {
+  font-size: var(--font-size-body);
+  font-weight: var(--font-weight-medium);
+  color: var(--text-secondary);
+  line-height: 1.5;
+}
+.wok-ui-ext-text-body {
+  font-size: var(--font-size-body);
+  font-weight: var(--font-weight-normal);
+  color: var(--text-primary);
+  line-height: 1.6;
+}
+.wok-ui-ext-text-secondary {
+  font-size: var(--font-size-body);
+  font-weight: var(--font-weight-normal);
+  color: var(--text-secondary);
+  line-height: 1.6;
+}
+.wok-ui-ext-text-tertiary {
+  font-size: var(--font-size-small);
+  font-weight: var(--font-weight-normal);
+  color: var(--text-tertiary);
+  line-height: 1.5;
+}
+.wok-ui-ext-text-small {
+  font-size: var(--font-size-small);
+  font-weight: var(--font-weight-normal);
+  color: var(--text-muted);
+  line-height: 1.5;
+}
+.wok-ui-ext-text-tiny {
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-normal);
+  color: var(--text-muted);
+  line-height: 1.4;
+}
+.wok-ui-ext-text-muted {
+  font-weight: var(--font-weight-normal);
+  color: var(--text-muted);
+  line-height: 1.5;
+}
+.wok-ui-ext-text-disabled {
+  font-weight: var(--font-weight-normal);
+  color: var(--text-disabled);
+  line-height: 1.5;
+  cursor: not-allowed;
+}
+.wok-ui-ext-text-strong {
+  font-size: var(--font-size-body);
+  font-weight: var(--font-weight-semibold);
+  color: var(--text-primary);
+  line-height: 1.6;
+}
+.wok-ui-ext-text-title-large.clickable,
+.wok-ui-ext-text-title.clickable,
+.wok-ui-ext-text-subtitle.clickable,
+.wok-ui-ext-text-body.clickable,
+.wok-ui-ext-text-secondary.clickable,
+.wok-ui-ext-text-tertiary.clickable,
+.wok-ui-ext-text-small.clickable,
+.wok-ui-ext-text-tiny.clickable,
+.wok-ui-ext-text-muted.clickable,
+.wok-ui-ext-text-strong.clickable {
+  cursor: pointer;
+  transition: opacity var(--transition-speed);
+}
+.wok-ui-ext-text-title-large.clickable:hover,
+.wok-ui-ext-text-title.clickable:hover,
+.wok-ui-ext-text-subtitle.clickable:hover,
+.wok-ui-ext-text-body.clickable:hover,
+.wok-ui-ext-text-secondary.clickable:hover,
+.wok-ui-ext-text-tertiary.clickable:hover,
+.wok-ui-ext-text-small.clickable:hover,
+.wok-ui-ext-text-tiny.clickable:hover,
+.wok-ui-ext-text-muted.clickable:hover,
+.wok-ui-ext-text-strong.clickable:hover {
+  opacity: 0.8;
+}
+.wok-ui-ext-text-title-large.clickable:active,
+.wok-ui-ext-text-title.clickable:active,
+.wok-ui-ext-text-subtitle.clickable:active,
+.wok-ui-ext-text-body.clickable:active,
+.wok-ui-ext-text-secondary.clickable:active,
+.wok-ui-ext-text-tertiary.clickable:active,
+.wok-ui-ext-text-small.clickable:active,
+.wok-ui-ext-text-tiny.clickable:active,
+.wok-ui-ext-text-muted.clickable:active,
+.wok-ui-ext-text-strong.clickable:active {
+  opacity: 0.6;
+}

package/dist/theme/index.d.ts

@@ -0,0 +1,14 @@
+import type { ThemeName, ThemeConfig } from './types';
+export type { ThemeName, ThemeConfig };
+/** 获取所有主题名称 */
+export declare function getAllThemes(): ThemeName[];
+/** 获取指定主题的完整配置，不传 name 则返回当前主题 */
+export declare function getTheme(name?: ThemeName): ThemeConfig;
+/** 自定义主题配置，合并到指定主题中。若修改的是当前主题，自动重新应用 */
+export declare function setTheme(name: ThemeName, config: Partial<ThemeConfig>): void;
+/**
+ * 应用主题
+ * 1. 通过 setColor 更新 wok-ui 框架组件的颜色
+ * 2. 通过 style.setProperty 更新 lib CSS 变量
+ */
+export declare function applyTheme(name: ThemeName): void;