斯提普语( S)@fungi.computer/stipe(中文(简体) )

Stipe是Tailwind CSS v4和菊花UI 5. CSS-第一主题层. 一个 样式表给你一套维护的菊花UI主题, 一个命名的间隔尺度, 自我托管的字体, 和框材符号的小型词汇, 阴影、牌和插图颜色.

一些打字的助手坐在CSS旁边. 他们切换和观看 data-theme 属性,项目终端颜色 latte 财务报告和审定财务报表 mocha,构建习惯 可嵌入的属性 embed 主题和样式 来自同一主题的组件.

史提普不在你的应用状态 您拥有主题持续, 存储, 事件 和组件. 盖子 正在创建 React 组件库 在它的顶部.

安装或设置

npm install @fungi.computer/stipe

斯提普带来 tailwindcss (单位:千美元) daisyui 5作为依附关系. 它的样式表是 尾风源,所以您的主机用尾风 v4 编译它( 例如: @tailwindcss/vite 或者说 @tailwindcss/postcss) (中文(简体) ). 一揽子措施仅是无害环境管理.

条目:

• @fungi.computer/stipe:被键入的帮助和常数.
• @fungi.computer/stipe/theme数字 : applyTheme, (中文(简体) ), getTheme 财务报告和审定财务报表 subscribeTheme 他们自己.
• @fungi.computer/stipe/pierre/trees页:1 pierreTreesStyle 预测.
• @fungi.computer/stipe/styles.css:主题、符号和相距尺度.
• @fungi.computer/stipe/pierre/trees.css: 主机的主样式表 只有皮耶树.
• @fungi.computer/stipe/fonts.css, (中文(简体) ), fonts-sans.css, (中文(简体) ), fonts-mono.css 财务报告和审定财务报表 fonts-display.css:自发托管字体面.

快开始

导入样式表一次, 然后设置并观看主题 。 此浏览器片断 在状态元素中显示当前主题并切换页面到 mocha数字 :

import { applyTheme, getTheme, subscribeTheme } from "@fungi.computer/stipe";
import "@fungi.computer/stipe/styles.css";

function watchThemeStatus(status: Element): () => void {
  status.replaceChildren(getTheme() ?? "latte");
  return subscribeTheme((theme) => status.replaceChildren(theme));
}

const status = document.querySelector("[data-theme-status]");
if (status) {
  const stopObserving = watchThemeStatus(status);
  applyTheme("mocha");
  // Call stopObserving() when you tear down this view.
}

没有 data-theme,页面遵循读者的外观设置 latte (轻)或 mocha (深处). 间距公用设施,如 p-lg 财务报告和审定财务报表 gap-sm 马上工作.

核心概念

主题

设置一个已发送的主题 data-theme 或在一个元素上.

STIPE_THEMES 列出所运出调色板: Daisy light 财务报告和审定财务报表 dark, (中文(简体) ), 加号 latte, (中文(简体) ), mocha, (中文(简体) ), readout, (中文(简体) ), readout-night, (中文(简体) ), field-guide, (中文(简体) ), field-guide-night, (中文(简体) ), embed, (中文(简体) ), embed-dark, (中文(简体) ), phosphor, (中文(简体) ), codec, (中文(简体) ), pirate-radio, (中文(简体) ), pirate-radio-night, (中文(简体) ), coin,以及 coin-night咨询家庭补充: consulting, (中文(简体) ), consulting-night, (中文(简体) ), consulting-riso-latte,以及 consulting-riso-glomzy,每个有明确的 -ink 反相为相. 一个窝 咨询主题选择自己的颜色道. coin 是街机柜:奶油 (或 coin-night深紫色的纸 一出金色的 墨水轮廓 硬的 和沉入槽的按钮。 这是一个完整的调色板; 应用它 到一个类似 latte而不是一个控制. chamfer 是一个嵌入式完成 继承所附调色板和打字。 按钮角色保持独立 说吧 这个 vishnu 完成保留主机调色板和用品卡梯度 面相 外观 外观 阴影 空状态边框和悬浮运动. 完整的嵌入调色板重置这些值,平地表面卡保持其 平凡的脸 这个 paper 完成继承其附带的调色板和用品 游戏-窗口线条工作,硬阴影,以及控制深度. 嵌入式完整调色板 重置材料覆盖; 另一部分完成继承 。 这个 ember 财务报告和审定财务报表 tide 锡特继承了字段制导的纸张和打字功能,同时更改初级 和口音颜色。 它们的配对光/暗值跟随相接的颜色 计划。 在这个构成中, tape 选择黑纸, 单空卡 尸体和一个红色的录音线; sunrise 供应现有的金边并洗涤. 戴上这些 GameCard 将完成的卡片保留为本地卡片。 序列化 主题选项使用 stipeThemeSchema (一) Zod enum; StipeTheme 是其推断 类型。 Daisy的其他演示主题没有被捆绑. 主机仍然可以添加自定义 调色板并通过 DOM 助手应用其名称.

生成的 Stipe API 参考 列出类型导出. applyTheme 接受任何非空的 Daisy 主题名称,并且 getTheme 读取 根当前 data-theme 数值. subscribeTheme 只监视这个属性 并返回清理函数;在没有 DOM 或 MutationObserver。主题更改不会发出存储或全球事件. terminalPalette 返回未知主题的调色板; Pierre 和 Gooey 出口只是有限度的预测.

applyTheme(theme, root?) 套装 data-theme 或关于根元素,或 元素通过. getTheme(root?) 读它. subscribeTheme(listener, root?) 只监视该属性并返回清理函数。 这些是简单的DOM 帮手 Stipe没有JavaScript主题提供者,也没有符号对象格式.

终端调色板

斯提佩拥有珊瑚终端锡(Stipe)#f98284) (中文(简体) ). terminalPalette("latte") 财务报告和审定财务报表 terminalPalette("mocha") 返回适合的已冻结语义和 ANSI 颜色套件 xterm.js等终端仿真器. 返回其它主题名称 undefined编辑 真菌文字标记艺术生活在 灯笼。 。 。 .

命名间隔

样式表通过 Tailwind 的间隔命名空间提供一个基于雷姆的网格:

使用诸如 px-xs, (中文(简体) ), py-sm, (中文(简体) ), gap-md 财务报告和审定财务报表 p-lg。普通CSS可用于 var(--spacing-sm)。主题更改保留这些值. STIPE_SPACING_NAMES 导出类合并配置的名称, Caps 已经使用它们 . 零,自动布局,比例大小和测量几何保持其 普通CSS含义. 这些标志提供间隔。 它们不会束缚面板 将内容调整到固定高度.

字体

主样式表映射 Nunito 到 font-sans 和枫花单曲 font-mono。 。 。 . 使用 sans 语音进行接口复制和控制 。 保持单机状态 值、代码和标识符。 编辑页面还获取 Fraunces for font-display,没有你能够做的 font-handwritten 和格伦泽·戈蒂施 页:1 font-nameplate。 。 。 .

光靠 Tailwind 编译不会装入字体 。 装有资产捆绑器的东道主 作为 Vite 导入 @fungi.computer/stipe/fonts.css 装上它们。 它提到 与 Stipe 软件包相对的捆绑 WOFF2 文件, 所以每个主机的资产构建 发自内心 努尼托船作为独立的拉丁,拉丁扩展, 仅用于匹配的西里尔、西里尔扩展和越南子集 语句。 正常的Nunito重量200至900和枫树单子重量200至800 font-display: swap。没有 Google 字体请求或运行时字体依赖性 需要帮助. 字体来源 记录来源和校验和.

材料主题

斯提普总是发泄出泰尔温德的 --color-black 财务报告和审定财务报表 --color-white 结束点。 特别工作组 光线和α口罩即使主机没有使用黑色或 白色公用事业类。 Caps拥有几何和深度计算.

Stipe 定义了菊花上的一些物质属性 私家侦探 --depth, (中文(简体) ), --noise,半径和颜色变量。 帽子用普通组件读取 规则,不选择单个主题:

框架和阴影覆盖重置到 initial 每个 data-theme 边界。 对于 这些未注册的自定义属性,选择组件的 var() 倒计时。 这并不意味着一个零宽框架. none 明确删除 图像或阴影。 Stock DisyUI主题不需要定义这些属性.

框架宽度是装饰,而不是内容被补丁或被击中的目标. 在帽, Surface 供给相框, Screen 显示面孔,和 Display 编曲 都带了垫子. --depth: 0 删除垫片的物理间隔。 纹理 是一种装饰性的CSS图像,与菊花UI的噪音相分离. 不要用它来携带 读者需要的信息.

嵌入主题

embed 财务报告和审定财务报表 embed-dark 用于在他人页面中设置部件。 这个 主机选择一个( 例如 prefers-color-scheme)并适用 embedThemeProperties({ accent, fontFamily }) 组合元素 style.setProperty拥有者 #rrggbb 口音驱动 DaisyUI 主和 口音。 发音. readableContentColor 由WCAG亮度选取黑色或白色内容, 因此,初级文本总是达到4.5:1. 已提供的字体家族列表出现之前 system-ui。如果没有一个主题 system-ui。您的主机解析了口音 和字体列表,然后将其输入. EMBED_THEME_TOKENS 重复默认 菊花UI外表面的染色体颜色,如阴影中的发射装置 树根.

说明颜色

--stipe-art-{coral,blue,mint,grape,yellow,cream,ink,inkcap,graphite} 为: 插图角色,与控件状态颜色相分离。 每个都有明显的光线 和黑暗默认 light-dark() 并在每个主题边界重排. 主题可以取代这些角色来重塑艺术品. 页面使用的绘图 --stipe-sketch-ink. 图中切出眼睛的使用情况 --color-base-100 直接说.

嵌入主题并完成

你会筑巢 data-theme 在另一个主题中。 完整的调色板宣布其 自己的打字机和墨水在主题边界上变音,所以筑巢 latte 内部 pirate-radio 恢复 latte 排字术. 仅完成值继承 颜色, color-scheme,字体,按钮半径和哑墨. 它设置 --root-bg: transparent 所以菊花UI不画 新的一页后面,和 只声明其改变的物质值.

CSS通过DOM继承,而不是通过React门户网站. 对话框、下降和 在 Caps 中弹出组合框 container 选项。 对话框和下拉 还使用主机 OverlayRoot 提供目的地;没有目的地 回到文件正文。 弹出组合框使用其清晰 container 或文件正文。 对于嵌入式主题,请选择内部未剪接的目的地 那个主题。 具有剪接、变形或遏制功能的祖先可以影响 定位,所以选择传送门容器作为您覆盖布局的一部分.

读出

readout 财务报告和审定财务报表 readout-night 是独立的光和暗的显示调色板. 他们使用乐器 sans Prose, Maple Mono 铬和代码, 晕倒一像素 区域规则和行规则,以及零起/陷入阴影。 他们延长同样的斯提普 材料钩; 盖几何和相互作用保持不变。 装满斯提普 fonts.css 为两个家庭。 代码消费者在代码中禁用结扎 介绍. terminalPalette() 提供相应的语义语法 颜色因此 docs 适配器不维护第二个调色板 .

海盗电台

pirate-radio 是一个完整的可嵌入式奶油纸盘 有橙红色斑点 颜色、单一标签、严格的规则和程序印刷纹理. pirate-radio-night 倒置为暖墨黑相纸. 它使用文书 Anton是标题 以及每个单角色的出发单曲, 包括标签和数字。 没有外部字体请求或光栅纹理 需要帮助.

主题设置了通用 Caps 钩子,而不是添加组件道具 : --caps-heading-font, (中文(简体) ), --caps-heading-weight, (中文(简体) ), --caps-heading-case, (中文(简体) ), --caps-heading-tracking (默认) -0.025em, (中文(简体) ), 0.02em 这里, --caps-heading-line-height (1.2 这里), --caps-label-font (这里是莫诺), --caps-card-image, (中文(简体) ), --caps-window-image 财务报告和审定财务报表 --caps-print-texture-size每一个 保留未设置时的前一个显示. --font-numeric 默认为 var(--font-mono) 在每个主题边界上, Caps 的数字读取使用 带有表格数字. --stipe-font-synthesis 保留其它浏览器默认值 主题和 none 这里,所以只有普通字体不会得到合成重量 或斜体。 CSS运动使用简短的60/90/140/200毫秒按下时间 过度射击。 所有这些重设在嵌入式主题边界.

贝壳层尺度

斯提普用品 --stipe-layer-desktop (0个), --stipe-layer-windows (10), (中文(简体) ), --stipe-layer-chrome (20个), --stipe-layer-popover (30个), --stipe-layer-dialog (40个), --stipe-layer-toast (50个)和 --stipe-layer-tooltip (60)Maosaico拥有贝壳根并消耗了这个 缩放。 组件选择一个命名的门户层; 窗口焦点排序仍为本地 到窗口根处。 比例尺不跨越一帧边界.

这个 --stipe-overlay-shadow-outset 符號是小 CSS- 像素津贴 (4px) 围绕所测量的覆盖内容。 被隔离的仪表板包括进 区域中,主机从兄弟相机App帧中切出,保留了一点阴影.

运动词汇

每一个主题边界重排运动, 这样嵌入主题不会继承外部 春来. 会期(squish, (中文(简体) ), fast, (中文(简体) ), normal, (中文(简体) ), slow, (中文(简体) ), spring-duration, (中文(简体) ), stagger)使用CSS毫秒或秒. --stipe-motion-bounce (0-1) (中文(简体) ), --stipe-motion-stretch 财务报告和审定财务报表 --stipe-motion-steps 是无单位的。 距离, 模糊,摇动和引信使用像素. 新闻旅行 --stipe-press-depth 以像素计 财务报告和审定财务报表 --stipe-press-scale 是无单位尺度。 进入/退出放宽使用 --stipe-motion-ease 编号 : --stipe-motion-ease-exit。 。 。 .

队长 @fungi.computer/caps/lib/motion 出口 readMotion(element) 用于事件 操作员和 useMotion(ref) 用于现场反应控制。 都读了元素的 计算出代号,包括嵌入式超载. 钩子观察主题/ 类/ 样式 其元素和祖先的变化加上OS运动偏好; 使用稳定 集装箱参考,不是每帧动画儿童。 读者返回毫秒 和像素; 减少运动有零出行,回弹,拉伸,模糊和摇晃 120m的不透明持续时间逐渐淡出. 消费者必须选择不透明的动画 何时 reduced 这是真的。 CSS CSS 持续时间和动画控件使用这些相同的 标志。 在运动减少的情况下,CSS的过渡限于短不透明 淡出,空间密钥框被压制,列表 FLIP 跳过移动甚至 但逐渐衰减的寿命仍为零。 主题感觉值仍然需要视觉 注册.

API 参考

生成的 Stipe API 参考 列出每个类型 导出:主题助手, terminalPalette, (中文(简体) ), embedThemeProperties, (中文(简体) ), readableContentColor, (中文(简体) ), EMBED_THEME_TOKENS, (中文(简体) ), pierreTreesStyle, (中文(简体) ), STIPE_GOOEY_FILTER, (中文(简体) ), STIPE_SPACING_NAMES 财务报告和审定财务报表 STIPE_TOKEN_NAMES。 。 。 .

实例

通过在斯提普后添加材料覆盖来平整已存在的调色板 样式表,普通菊花UI自定义主题旁边:

@import "@fungi.computer/stipe/styles.css";

[data-theme="my-theme"] {
  --depth: 0;
  --noise: 0;
  --stipe-surface-frame-width: 1px;
  --stipe-surface-frame-image: linear-gradient(
    var(--color-base-300),
    var(--color-base-300)
  );
  --stipe-shadow-raised: none;
  --stipe-shadow-inset: none;
  --stipe-shadow-edge: none;
}

主题 :

import { embedThemeProperties } from "@fungi.computer/stipe";

const widget = document.querySelector<HTMLElement>("#widget");
if (widget) {
  const dark = matchMedia("(prefers-color-scheme: dark)").matches;
  widget.dataset.theme = dark ? "embed-dark" : "embed";
  const properties = embedThemeProperties({
    accent: "#2f9e44",
    fontFamily: "Inter",
  });
  for (const [name, value] of Object.entries(properties)) {
    widget.style.setProperty(name, value);
  }
}

输入终端仿真器当前主题的颜色 :

import { getTheme, terminalPalette } from "@fungi.computer/stipe";

const palette = terminalPalette(getTheme() ?? "latte");
if (palette) {
  console.log(palette.background, palette.foreground, palette.red);
}

从活动主题中样式一个 Pierre 文件树 :

import { pierreTreesStyle } from "@fungi.computer/stipe/pierre/trees";

const treeStyle = pierreTreesStyle({ compact: false, itemHeight: 28 });

限制和错误

• applyTheme 掷出 TypeError 用于空的或仅白空的主题名称。 这个 接受任何其他名称,不检查该名称的主题是否存在.
• 没有提供根或全球文件, applyTheme 没有目标 getTheme 返回时 null。设置和阅读主题不需要 MutationObserver。 。 。 .
• subscribeTheme 返回目标或目标时的无操作清理 MutationObserver 无法使用。 它报告非空属性变化, 不是初始值 或属性去除; 读取初始值为 getTheme。 。 。 .
• 主题更改不会发出存储或全局事件 。 坚持自己的选择 你吗.
• terminalPalette 返回时 undefined 用于除 latte 财务报告和审定财务报表 mocha。 。 。 .
• readableContentColor 掷出 TypeError 除非颜色是 #rrggbb。 。 。 .
• pierreTreesStyle 掷出 RangeError 对于一个不限高的项目 和积极的.
• 不要再次导入 Tailwind 或复制 Stipe 的令牌表 主持人。 字体 URL 相对主机自身的资产构建, 因此一个主机不能 共享另一个主机的字体文件.
• Stipe没有反应,路由,状态,命令,副本或政策API.

贡献和许可证

Stipe的测试涵盖主题助手,嵌入对比度,终端调色板 间距缩放和样式表的符号和动作。 在单簧管,运行他们 从软件包目录中 pnpm test,则 pnpm run lint 财务报告和审定财务报表 pnpm run typecheck。当添加完整的调色板时,请将其名称保留在 完整 palette 默认值 styles.css。不添加仅完成的数值到 列表或引入第二个主题属性.

代码是MIT。 见 自由主义组合字体保留其 SIL 打开字体 许可证1.1 纽尼托执照, (中文(简体) ), 枫花摩诺牌照 财务报告和审定财务报表 安东的执照。其他捆绑字体都有自己的 -OFL.txt 文件输入 fonts/。 。 。 .