链接/cs

CSS 变量、公用事业和主题默认 链接 框架.

这是一个 CSS 仅限资产包 ——没有JavaScript,没有建设步骤. 它把设计学词汇 和Tailwind v4主题 原始人所有 @_linked/* 组件软件包和基于链接的应用程序消耗.

文件

建议的进口订单

在您应用程序的主主题文件中( 如. src/css/theme.css:

/* 1. Tailwind v4 layers — split-import pattern to substitute the LINCD preflight */
@layer theme, base, components, utilities;
@import 'tailwindcss/theme.css' layer(theme);
@import '@_linked/css/preflight.css';            /* substitutes Tailwind's bundled preflight */
@import 'tailwindcss/utilities.css' layer(utilities);

/* 2. Tailwind config (provides Linked component content paths) */
@config "@_linked/cli/tailwind.config.js";

/* 3. @_linked/css theme defaults + utility mixins */
@import '@_linked/css/theme-defaults.css';
@import '@_linked/css/utilities.css';

/* 4. Your app-specific overrides — brand palette, page-level surface tokens, dark mode */
@theme static {
  --color-primary-500: #116d8d; /* example brand color */
  /* ... */
}

:root {
  --bg-page: var(--color-gray-50);
  --bg-card: var(--color-white);
  /* ... */
}

为什么是拆分进口? 简称 @import 'tailwindcss'; 带泰风来 捆绑 飞行前,使用裸体 *, ::before, ::after 重置会擦去内含元素样式( e)<b>, (中文(简体) ), <em>, (中文(简体) ), <span>, (中文(简体) ), <a>, (中文(简体) ), <code>(见A/C.5/49/70,附件)。 对于提供丰富内容的app shells(chatbot消息,本体学描述,markdown-entered text),重置过于激进. @_linked/css/preflight.css 同一尾风预飞减倒入内向擦拭,通过 :not() 通用选择器上的排除。 单独导入地层让我们可以代替LINCD友好的飞行前.

在一个链接组件包的模块CSS(例如:. Toggle.module.css:

@import './helpers/mixins.css';
@import '@_linked/css/package.css';

.Root {
  padding: var(--toggle-padding-y, --spacing(1)) var(--toggle-padding-x, --spacing(2));
  /* ... */
}

组件包通常只需要 package.css 因为消费的应用提供了全部的主题. package.css 故意是最小的,所以它不会增加组件捆绑.

命名系统

@_linked/css 用途 两个有意命名层,两个链接式(都不是Tailwind-native):

国家第一/通用代号

实例: --bg-card, (中文(简体) ), --bg-modal, (中文(简体) ), --bg-page, (中文(简体) ), --spacing-card, (中文(简体) ), --shadow-card, (中文(简体) ), --radius-modal。 。 。 .

这些是页面/表层符号,由 utilities.css是因为 @utility 混合剂 它们与 Tailwind 通用类命名一致(bg-*, (中文(简体) ), shadow-*(见a/c.5/49/70,附件). 由消费的应用程序定义,一般在应用的主主题文件中.

构成部分一/具体符号

实例: --card-bg, (中文(简体) ), --popover-bg, (中文(简体) ), --modal-bg, (中文(简体) ), --surface-bg, (中文(简体) ), --button-primary-bg, (中文(简体) ), --field-border。 。 。 .

这些是原始成分 组件引用其默认值的状态符号,但会为精细的覆盖显示特定组件的符号. 定义 theme-defaults.css。 。 。 .

为什么两者

元件会分层 :

.Toggle {
  background: var(--toggle-bg, var(--control-bg, var(--bg-active)));
  /*          └─ component-specific  └─ component-group  └─ state */
}

Apps可以在任意一层上覆盖. 状态第一层保持了与Tailwind的公用惯例一致的链接变量命名;组件第一层给予组件作者精确的控制点.

已知差距

utilities.css是因为 @utility 混合参考状态- 首个符号( e)--bg-card, (中文(简体) ), --bg-modal, (中文(简体) ), --spacing-card等),为: 没有 定义 theme-defaults.css消费应用必须定义它们。 两只氯化萘 src/scss/theme.css 编辑 @_linked/cli 应用模板做到这一点。 如果您导入 utilities.css 没有应用程序定义的状态符号 @utility 混合到无声空值。 见后续构想: 文件/ideas/014-促进-cn-cs-toks-tons-cs-cs.md (单位:千美元) create_now 工作空间).

尾风 v4 对等依赖

此软件包声明 tailwindcss: "^4" 作为 peerDependency。链接的应用程序是围绕Tailwind v4构建的 - theme-defaults.css 用途 @theme, (中文(简体) ), @theme static, (中文(简体) ), @source inline(...),以及 --spacing()· ; utilities.css 用途 @utility。这些指令没有 Tailwind v4. 在您的应用程序中安装 Tailwind v4

yarn add tailwindcss@^4 @tailwindcss/postcss@^4

(Linked-CLI的应用软件已经与Tailwind v4通过过境 @_linked/cli. ) (中文(简体) )

今后的想法

• --focus-* 编号 : --disabled-* 符号命名空间 —— 说 @_linked/primitives 后CSS搅拌机(@define-mixin focus, (中文(简体) ), @define-mixin disabled)但除此之外,这些状态没有语义符号 --control-outline-*添加 --focus-bg, (中文(简体) ), --focus-ring-color, (中文(简体) ), --disabled-opacity 等作为一个框架默认,组件作者可以共享一致的焦点/缺陷外观,而无需每个组件重新声明.
• 暗模式框架默认 ——目前应用程序自有 [data-theme='dark'] 每个符号的块。 传输默认的深色调色板 theme-defaults.css 将减少重复;应用程序只能覆盖特定品牌的暗值。 见思想 013号 D11 (延迟).
• Token 目录 / 搜索用户界面 – 交互式文件,其中列出每个已发送的有活实例的符号. 可以自动生成自 theme-defaults.css。 。 。 .
• 调和 --bg-* (状态第一)与 --*-bg (构成部分一) ——长期,文件一为被贬损或统一命名. 跟踪后续行动 014 (英语)。 。 。 .

许可证

麻省理工学院.