pasika 0.1.4 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (72) hide show
  1. package/README.md +40 -55
  2. package/dist/eslint/pasika/index.d.ts +18 -0
  3. package/dist/eslint/pasika/index.js +21 -3
  4. package/dist/eslint/pasika/rules/enforce-barrel-exports.d.ts +9 -0
  5. package/dist/eslint/pasika/rules/enforce-barrel-exports.js +78 -0
  6. package/dist/eslint/pasika/rules/enforce-cn-merge.d.ts +9 -0
  7. package/dist/eslint/pasika/rules/enforce-cn-merge.js +84 -0
  8. package/dist/eslint/pasika/rules/enforce-cva-variant-props.d.ts +9 -0
  9. package/dist/eslint/pasika/rules/enforce-cva-variant-props.js +76 -0
  10. package/dist/eslint/pasika/rules/filename-case.d.ts +2 -0
  11. package/dist/eslint/pasika/rules/filename-case.js +100 -0
  12. package/dist/eslint/pasika/rules/import-boundaries.d.ts +2 -0
  13. package/dist/eslint/pasika/rules/{organization-imports.js → import-boundaries.js} +11 -1
  14. package/dist/eslint/pasika/rules/no-arbitrary-tailwind.d.ts +9 -0
  15. package/dist/eslint/pasika/rules/no-arbitrary-tailwind.js +107 -0
  16. package/dist/eslint/pasika/rules/no-mixed-concerns.d.ts +9 -0
  17. package/dist/eslint/pasika/rules/no-mixed-concerns.js +84 -0
  18. package/package.json +5 -16
  19. package/claude/hooks/.vulyk +0 -3
  20. package/claude/hooks/AGENTS.md +0 -3
  21. package/claude/hooks/CLAUDE.md +0 -1
  22. package/claude/hooks/claude-hooks.md +0 -30
  23. package/claude/hooks/notification.sh +0 -38
  24. package/claude/hooks/protect-files.sh +0 -21
  25. package/claude/hooks/status-line/index.js +0 -57
  26. package/claude/scripts/render-settings.ts +0 -223
  27. package/claude/settings.base.json +0 -38
  28. package/dist/claude/scripts/render-settings.js +0 -145
  29. package/dist/eslint/pasika/rules/organization-imports.d.ts +0 -2
  30. package/dist/eslint.config.js +0 -7
  31. package/dist/scripts/pasika.js +0 -59
  32. package/docs/agent-conventions.md +0 -21
  33. package/docs/claude/hooks.md +0 -30
  34. package/docs/code-organization-guide/code-organization-guide.md +0 -65
  35. package/docs/code-organization-guide/references/application-architecture-reference.md +0 -107
  36. package/docs/code-organization-guide/rules/component-placement-rule.md +0 -135
  37. package/docs/code-organization-guide/rules/configuration-rule.md +0 -42
  38. package/docs/code-organization-guide/rules/constants-rule.md +0 -77
  39. package/docs/code-organization-guide/rules/exports-and-imports-rule.md +0 -81
  40. package/docs/code-organization-guide/rules/folder-nesting-rule.md +0 -83
  41. package/docs/code-organization-guide/rules/hook-extraction-rule.md +0 -142
  42. package/docs/code-organization-guide/rules/interactive-component-rule.md +0 -100
  43. package/docs/code-organization-guide/rules/jsx-hygiene-rule.md +0 -68
  44. package/docs/code-organization-guide/rules/locales-rule.md +0 -55
  45. package/docs/code-organization-guide/rules/nameable-visual-concept-rule.md +0 -66
  46. package/docs/code-organization-guide/rules/native-prop-forwarding-rule.md +0 -38
  47. package/docs/code-organization-guide/rules/no-mixed-concerns-rule.md +0 -64
  48. package/docs/code-organization-guide/rules/repeated-structure-rule.md +0 -93
  49. package/docs/code-organization-guide/rules/smart-vs-dumb-component-rule.md +0 -116
  50. package/docs/code-organization-guide/rules/sole-state-owner-rule.md +0 -102
  51. package/docs/code-organization-guide/rules/types-and-schemas-rule.md +0 -138
  52. package/docs/code-organization-guide/rules/utilities-rule.md +0 -87
  53. package/docs/documentation-guide/_templates/guide.md +0 -19
  54. package/docs/documentation-guide/_templates/reference.md +0 -17
  55. package/docs/documentation-guide/_templates/rule.md +0 -21
  56. package/docs/documentation-guide/documentation-guide.md +0 -13
  57. package/docs/documentation-guide/references/documentation-types-reference.md +0 -9
  58. package/docs/documentation-guide/rules/guide-creation-rule.md +0 -112
  59. package/docs/documentation-guide/rules/reference-creation-rule.md +0 -132
  60. package/docs/documentation-guide/rules/rule-creation-rule.md +0 -81
  61. package/docs/documentation-guide/rules/template-usage-rule.md +0 -48
  62. package/docs/shadcn-theme.md +0 -121
  63. package/docs/styling-guide/rules/class-composition-rule.md +0 -32
  64. package/docs/styling-guide/rules/color-role-naming-rule.md +0 -115
  65. package/docs/styling-guide/rules/component-state-rule.md +0 -26
  66. package/docs/styling-guide/rules/component-variant-rule.md +0 -128
  67. package/docs/styling-guide/rules/global-style-system-rule.md +0 -63
  68. package/docs/styling-guide/rules/style-placement-rule.md +0 -49
  69. package/docs/styling-guide/rules/tailwind-utility-rule.md +0 -48
  70. package/docs/styling-guide/rules/theme-and-utility-definition-rule.md +0 -129
  71. package/docs/styling-guide/rules/theme-token-rule.md +0 -32
  72. package/docs/styling-guide/styling-guide.md +0 -17
@@ -1,21 +0,0 @@
1
- # [Rule Name] Rule
2
-
3
- [What problem does this rule solve?]
4
-
5
- - [Requirement using MUST, MUST NOT, SHOULD, SHOULD NOT, or MAY]
6
-
7
- ## Incorrect — [Concise example description]
8
-
9
- ```[lang]
10
- // code
11
- ```
12
-
13
- Why: [What makes this incorrect?]
14
-
15
- ## Correct — [Concise example description]
16
-
17
- ```[lang]
18
- // code
19
- ```
20
-
21
- Why: [What makes this correct?]
@@ -1,13 +0,0 @@
1
- # Documentation Guide
2
-
3
- This guide explains how to create Rules, References, and Guides in this repository.
4
-
5
- ## How To Create a Document
6
-
7
- Run this whenever you add a new doc to the repository.
8
-
9
- 1. Pick the document kind from the [Documentation Types Reference](references/documentation-types-reference.md) so you know the right template.
10
- 2. Follow the [Template Usage Rule](rules/template-usage-rule.md) so the doc has no leftover bracketed prompts.
11
- 3. For a Guide, follow the [Guide Creation Rule](rules/guide-creation-rule.md) so the doc has the correct shape, naming, and folder layout.
12
- 4. For a Rule, follow the [Rule Creation Rule](rules/rule-creation-rule.md) so the doc has the correct shape, naming, and vocabulary.
13
- 5. For a Reference, follow the [Reference Creation Rule](rules/reference-creation-rule.md) so the doc has the correct shape, naming, and folder layout.
@@ -1,9 +0,0 @@
1
- # Documentation Types Reference
2
-
3
- Use this reference to look up the three standard Markdown document kinds in this repository. Their templates are in `docs/documentation-guide/_templates/`.
4
-
5
- | Kind | Shape | Template |
6
- | --------- | ----------------------------------------------------------------------------------------------- | ------------------------------------------------ |
7
- | Guide | A workflow-oriented document with one or more `## How To [...]` sections. | `guide.md` |
8
- | Rule | An opinionated project rule that states required, forbidden, recommended, or optional behavior. | `rule.md` |
9
- | Reference | Lookup material such as a table, hierarchy, configuration block, glossary, or catalog. | `reference.md` |
@@ -1,112 +0,0 @@
1
- # Guide Creation Rule
2
-
3
- Guides without a consistent creation process invent their own structure. This rule defines how to create a Guide document.
4
-
5
- - Each How To step MUST be concise and use one sentence.
6
- - A Guide MAY reference Rules, References, and other Guides.
7
- - Each How To step MUST link at most one documentation file total, whether that file is a Rule, Reference, or Guide.
8
- - When a step links a Rule, Reference, or Guide, the step MUST name the concrete decision or result the reader will have after reading it.
9
- - A step that links another Guide MUST link directly to the relevant How To section.
10
- - How To sections MUST NOT nest inside other How To sections.
11
- - Guide file names MUST match the document title in kebab-case and use the `-guide` suffix (e.g., `foo-guide.md`).
12
- - A Guide with private support files MUST become a folder named the same as its entry-point file, without the `.md` extension.
13
- - Private Rule files for a Guide MUST live in a `rules/` subfolder inside the Guide's folder.
14
- - Private Reference files for a Guide MUST live in a `references/` subfolder inside the Guide's folder.
15
-
16
- ## Incorrect — Private Documents Mixed at the Guide Root
17
-
18
- ```text
19
- feature-workflow-guide/
20
- ├── feature-workflow-guide.md
21
- ├── naming-rule.md
22
- └── option-reference.md
23
- ```
24
-
25
- Why: mixed Markdown files turn the doc folder into an undifferentiated list once the doc grows.
26
-
27
- ## Correct — Private Documents Grouped by Kind
28
-
29
- ```text
30
- feature-workflow-guide/
31
- ├── feature-workflow-guide.md
32
- ├── rules/
33
- │ └── naming-rule.md
34
- └── references/
35
- └── option-reference.md
36
- ```
37
-
38
- Why: private support files stay colocated with the entry point while being grouped by document kind.
39
-
40
- ## Incorrect — Step Links to Multiple Documents
41
-
42
- ```markdown
43
- 1. Follow the [Naming Rule](rules/naming-rule.md) and the [Layout Rule](rules/layout-rule.md) so the doc looks right.
44
- ```
45
-
46
- Why: step links two Rules and does not name a concrete decision or result.
47
-
48
- ## Correct — Step Links to One Document
49
-
50
- ```markdown
51
- 1. Follow the [Naming Rule](rules/naming-rule.md) so the doc has a predictable file name.
52
- ```
53
-
54
- Why: step links one Rule and names the concrete result the reader will have.
55
-
56
- ## Incorrect — Nested How To Section
57
-
58
- ```markdown
59
- ## How To Deploy
60
-
61
- 1. Build the project.
62
- ### How To Build
63
- 1. Run the build script.
64
- ```
65
-
66
- Why: a How To section nests inside a step of another How To section.
67
-
68
- ## Correct — Flat How To Sections
69
-
70
- ```markdown
71
- ## How To Deploy
72
-
73
- 1. Follow [How To Build](#how-to-build) to build the project.
74
-
75
- ## How To Build
76
-
77
- 1. Run the build script.
78
- ```
79
-
80
- Why: How To sections stay flat and reference each other via links.
81
-
82
- ## Incorrect — Multi-Sentence Step
83
-
84
- ```markdown
85
- 1. First, check the configuration file. Then verify all required fields are present. After that, confirm none of the fields contain invalid values.
86
- ```
87
-
88
- Why: step uses multiple sentences instead of one concise sentence.
89
-
90
- ## Correct — Concise Step
91
-
92
- ```markdown
93
- 1. Run the config check script.
94
- ```
95
-
96
- Why: step is one concise sentence with a concrete action.
97
-
98
- ## Incorrect — Guide Link Omits Its How To Section
99
-
100
- ```markdown
101
- 1. Follow the [Build Guide](build-guide.md) to build the project.
102
- ```
103
-
104
- Why: link points at a Guide file but does not anchor to a specific How To section, so the reader lands on the guide's introduction and has to search for the relevant workflow.
105
-
106
- ## Correct — Guide Link Targets Its How To Section
107
-
108
- ```markdown
109
- 1. Follow [How To Build](build-guide.md#how-to-build) to build the project.
110
- ```
111
-
112
- Why: link anchors to the specific How To section, so the reader lands directly on the relevant workflow.
@@ -1,132 +0,0 @@
1
- # Reference Creation Rule
2
-
3
- References without a consistent creation process scatter lookup material. This rule defines how to create a Reference document.
4
-
5
- - Reference file names MUST match the document title in kebab-case and use the `-reference` suffix (e.g., `foo-reference.md`).
6
- - A Reference MUST NOT link to Rules, Guides, or other References.
7
- - A Reference MUST NOT use RFC 2119 vocabulary (`MUST`, `MUST NOT`, `SHOULD`, `SHOULD NOT`, `MAY`), because lookup material describes what exists rather than imposing requirements.
8
- - A Reference document overview and each section overview MUST contain one or two short sentences.
9
- - A Reference with a single lookup block MUST NOT add a section heading for it.
10
- - A Reference with two or more lookup blocks MUST add a section heading for every block, including the first.
11
-
12
- ## Incorrect — Reference Links to Another Document
13
-
14
- ```markdown
15
- - See the [Naming Rule](../rules/naming-rule.md) for the file naming conventions.
16
- ```
17
-
18
- Why: reference body contains a reference to another Rule.
19
-
20
- ## Correct — Reference States the Lookup Fact Directly
21
-
22
- ```markdown
23
- - File names are kebab-case, match the document title, and have a `-reference` suffix.
24
- ```
25
-
26
- Why: reference states lookup content directly without linking to its source.
27
-
28
- ## Incorrect — Reference Uses Requirement Vocabulary
29
-
30
- ```markdown
31
- | Layer | Contents |
32
- | ----- | ------------------------------------------------- |
33
- | `app` | Routing files only — a route MUST NOT hold a util |
34
- ```
35
-
36
- Why: the cell carries RFC 2119 vocabulary, so a Reference asserts a requirement that only a Rule can own, and the same constraint ends up stated in two documents.
37
-
38
- ## Correct — Reference Describes Existing Content
39
-
40
- ```markdown
41
- | Layer | Contents |
42
- | ----- | ------------------ |
43
- | `app` | Routing files only |
44
- ```
45
-
46
- Why: the cell describes what the layer holds, leaving the requirement to the Rule that owns it.
47
-
48
- ## Incorrect — Single Lookup Block Has a Heading
49
-
50
- ```markdown
51
- # Option Reference
52
-
53
- Use this reference to choose between the two supported project sizes when starting a new initiative.
54
-
55
- ## Options
56
-
57
- Pick the size that matches the team's headcount and timeline.
58
-
59
- | Option | Use Case |
60
- | ------ | -------------- |
61
- | A | Small projects |
62
- | B | Large projects |
63
- ```
64
-
65
- Why: section heading is unnecessary and forces a duplicated intro covering what the reference is for and what the group contains.
66
-
67
- ## Correct — Single Lookup Block Has No Heading
68
-
69
- ```markdown
70
- # Option Reference
71
-
72
- Use this reference to choose between the two supported project sizes when starting a new initiative.
73
-
74
- | Option | Use Case |
75
- | ------ | -------------- |
76
- | A | Small projects |
77
- | B | Large projects |
78
- ```
79
-
80
- Why: single lookup block sits directly under the intro without a heading.
81
-
82
- ## Incorrect — First of Multiple Lookup Blocks Has No Heading
83
-
84
- ```markdown
85
- # Option Reference
86
-
87
- Use this reference to look up the supported project sizes and the review gates each one requires.
88
-
89
- | Option | Use Case |
90
- | ------ | -------------- |
91
- | A | Small projects |
92
- | B | Large projects |
93
-
94
- ## Review Gates
95
-
96
- Each size carries a different approval bar.
97
-
98
- | Option | Approvals |
99
- | ------ | --------- |
100
- | A | 1 |
101
- | B | 2 |
102
- ```
103
-
104
- Why: the reference has two lookup blocks but only the second is headed, so the first table reads as part of the intro and cannot be scanned or linked as a group of its own.
105
-
106
- ## Correct — Every Lookup Block Has a Heading
107
-
108
- ```markdown
109
- # Option Reference
110
-
111
- Use this reference to look up the supported project sizes and the review gates each one requires.
112
-
113
- ## Project Sizes
114
-
115
- Pick the size that matches the team's headcount and timeline.
116
-
117
- | Option | Use Case |
118
- | ------ | -------------- |
119
- | A | Small projects |
120
- | B | Large projects |
121
-
122
- ## Review Gates
123
-
124
- Each size carries a different approval bar.
125
-
126
- | Option | Approvals |
127
- | ------ | --------- |
128
- | A | 1 |
129
- | B | 2 |
130
- ```
131
-
132
- Why: both lookup blocks are headed, so they read as peers and each is independently scannable and linkable.
@@ -1,81 +0,0 @@
1
- # Rule Creation Rule
2
-
3
- Rules without a consistent creation process invent their own structure and enforcement language. This rule defines how to create a Rule document.
4
-
5
- - Rule file names MUST match the document title in kebab-case and use the `-rule` suffix (e.g., `foo-rule.md`).
6
- - A Rule MUST contain at least one bullet point that uses [RFC 2119 vocabulary](https://datatracker.ietf.org/doc/html/rfc2119) (`MUST`, `MUST NOT`, `SHOULD`, `SHOULD NOT`, `MAY`).
7
- - RFC 2119 vocabulary MUST appear only in bullet points, so the bullet list is the single place a requirement is stated.
8
- - Prose outside bullet points — intros, `Why:` explanations, table cells, and code comments — MUST restate a requirement in plain language instead of repeating RFC 2119 vocabulary.
9
- - `MUST` MUST mean required.
10
- - `MUST NOT` MUST mean forbidden.
11
- - `SHOULD` MUST mean recommended, with exceptions possible.
12
- - `SHOULD NOT` MUST mean discouraged, with exceptions possible.
13
- - `MAY` MUST mean optional.
14
- - A Rule MUST contain at least one Incorrect/Correct pair.
15
- - A Rule MAY contain multiple Incorrect/Correct pairs.
16
- - An Incorrect/Correct pair MUST add a concise description after an em dash in both headings, so readers can scan the examples by decision.
17
- - A Rule MUST NOT link to References, Guides, or other Rules.
18
-
19
- ## Incorrect — Lowercase Requirement Words
20
-
21
- ```markdown
22
- - Authors must remove unused sections.
23
- - New docs should use the -rule suffix.
24
- ```
25
-
26
- Why: lower-case "must" and "should" do not carry RFC 2119 meaning.
27
-
28
- ## Correct — RFC 2119 Requirement Words
29
-
30
- ```markdown
31
- - Authors MUST remove unused sections.
32
- - New docs SHOULD use the -rule suffix.
33
- ```
34
-
35
- Why: uppercase keywords carry their canonical RFC 2119 meaning.
36
-
37
- ## Incorrect — Rule Links to a Reference
38
-
39
- ```markdown
40
- - Rule bodies MUST follow the guidance in the [Vocabulary Reference](../references/vocabulary-reference.md).
41
- ```
42
-
43
- Why: rule contains a reference to another Reference.
44
-
45
- ## Correct — Rule States Its Vocabulary Directly
46
-
47
- ```markdown
48
- - Rule bodies MUST use RFC 2119 vocabulary: MUST, MUST NOT, SHOULD, SHOULD NOT, or MAY.
49
- ```
50
-
51
- Why: rule states requirements directly without referencing other docs.
52
-
53
- ## Incorrect — Requirement Repeated in an Explanation
54
-
55
- ```markdown
56
- - A helper file MUST use named exports.
57
-
58
- ## Incorrect — Default Export
59
-
60
- // helper.ts
61
- export default function sum(a, b) {}
62
-
63
- Why: a helper file MUST use named exports, so `export default` is not allowed here.
64
- ```
65
-
66
- Why: the explanation repeats the bullet's requirement word, so the requirement now lives in two places and a later edit can leave the bullet and the explanation disagreeing about what is required.
67
-
68
- ## Correct — Requirement Explained in Plain Language
69
-
70
- ```markdown
71
- - A helper file MUST use named exports.
72
-
73
- ## Incorrect — Default Export
74
-
75
- // helper.ts
76
- export default function sum(a, b) {}
77
-
78
- Why: helper files use named exports only, so `export default` does not belong here.
79
- ```
80
-
81
- Why: the bullet is the only place the requirement is stated, and the explanation describes the example in plain language.
@@ -1,48 +0,0 @@
1
- # Template Usage Rule
2
-
3
- Authoring without a template makes every doc invent its own title, orientation, and section shape. This rule keeps new docs predictable. Templates for each document kind live in `../_templates/`.
4
-
5
- - Authors MUST start from the template for the chosen document kind.
6
- - Authors MUST replace each bracketed prompt with the final title, explanation, step, or lookup content it asks for.
7
- - Authors MUST delete template branches that do not apply to the document being written.
8
-
9
- ## Incorrect — Template Prompts and Unused Branches Kept
10
-
11
- ```markdown
12
- # Example Guide
13
-
14
- [1-2 short sentences explaining the underlying idea behind this guide and why it matters.]
15
-
16
- ## How To Do Something
17
-
18
- [What does this accomplish? When should it run?]
19
-
20
- 1. [Step 1]
21
- 2. [Step 2]
22
-
23
- ## How To Another Workflow
24
-
25
- [What does this accomplish? When should it run?]
26
-
27
- 1. [Step 1]
28
- 2. [Step 2]
29
- ```
30
-
31
- Why: committed doc still contains bracketed prompts, and the unused "Another Workflow" section was not deleted.
32
-
33
- ## Correct — Template Prompts Replaced and Unused Branches Removed
34
-
35
- ```markdown
36
- # Example Guide
37
-
38
- This guide shows how to do something useful. It matters because doing it wrong breaks the build.
39
-
40
- ## How To Do Something
41
-
42
- Run this before every release.
43
-
44
- 1. Check the config.
45
- 2. Run the deploy script.
46
- ```
47
-
48
- Why: all bracketed prompts are replaced, unused template branches are deleted, and no leftover brackets remain.
@@ -1,121 +0,0 @@
1
- # shadcn Theme
2
-
3
- Use this profile when a project uses shadcn UI tokens as its theme baseline.
4
-
5
- ## File structure
6
-
7
- Read the theme file by section:
8
-
9
- 1. `@theme inline` exposes CSS variables to Tailwind utilities.
10
- 2. `:root` defines light-mode token values.
11
- 3. `.dark` defines dark-mode token values.
12
- 4. `@layer base` applies default page, border, and outline styling.
13
-
14
- Component authors write utilities such as `bg-primary`, `text-primary-foreground`, and `rounded-lg`. Tailwind resolves those utilities through the tokens registered in `@theme inline`. Do not write generated CSS by hand.
15
-
16
- ## Registered Tailwind tokens
17
-
18
- `@theme inline` maps project CSS variables to Tailwind token names. The categories below mirror the groups in a standard shadcn `globals.css`.
19
-
20
- | Category | CSS variables | Utility examples |
21
- |---|---|---|
22
- | Page defaults | `--color-background`, `--color-foreground` | `bg-background`, `text-foreground` |
23
- | Content surfaces | `--color-card`, `--color-card-foreground`, `--color-popover`, `--color-popover-foreground` | `bg-card text-card-foreground`, `bg-popover text-popover-foreground` |
24
- | Action and state surfaces | `--color-primary`, `--color-primary-foreground`, `--color-secondary`, `--color-secondary-foreground`, `--color-muted`, `--color-muted-foreground`, `--color-accent`, `--color-accent-foreground`, `--color-destructive` | `bg-primary text-primary-foreground`, `bg-muted text-muted-foreground`, `bg-destructive text-white` |
25
- | Borders, form fields, focus | `--color-border`, `--color-input`, `--color-ring` | `border`, `border-input`, `ring-ring`, `outline-ring/50` |
26
- | Charts | `--color-chart-1` through `--color-chart-5` | `bg-chart-1`, `text-chart-2` |
27
- | Sidebar | `--color-sidebar`, `--color-sidebar-foreground`, `--color-sidebar-primary`, `--color-sidebar-primary-foreground`, `--color-sidebar-accent`, `--color-sidebar-accent-foreground`, `--color-sidebar-border`, `--color-sidebar-ring` | `bg-sidebar`, `text-sidebar-foreground`, `border-sidebar-border` |
28
- | Radius | `--radius-sm`, `--radius-md`, `--radius-lg`, `--radius-xl`, `--radius-2xl`, `--radius-3xl`, `--radius-4xl` | `rounded-sm`, `rounded-md`, `rounded-lg`, `rounded-xl`, `rounded-2xl`, `rounded-3xl`, `rounded-4xl` |
29
-
30
- ## Value tokens
31
-
32
- `:root` and `.dark` define the actual values for the same semantic tokens. The token names stay stable; only the values change between theme modes.
33
-
34
- ### Page defaults
35
-
36
- | Token | Use |
37
- |---|---|
38
- | `background` | App/page background |
39
- | `foreground` | Default app text |
40
-
41
- Use together as `bg-background text-foreground`.
42
-
43
- ### Content surfaces
44
-
45
- | Token pair | Use |
46
- |---|---|
47
- | `card` / `card-foreground` | Card or elevated surface content |
48
- | `popover` / `popover-foreground` | Floating surfaces like menus, tooltips, dialogs |
49
-
50
- Use as `bg-card text-card-foreground` and `bg-popover text-popover-foreground`.
51
-
52
- ### Action and state surfaces
53
-
54
- | Token pair | Use |
55
- |---|---|
56
- | `primary` / `primary-foreground` | Main action or selected/high-emphasis filled state |
57
- | `secondary` / `secondary-foreground` | Supporting action or lower-emphasis filled state |
58
- | `muted` / `muted-foreground` | Subtle surface and de-emphasized content |
59
- | `accent` / `accent-foreground` | Transient hover, active, or current-row surface |
60
- | `destructive` | Destructive action or error surface |
61
-
62
- Fresh shadcn components use fixed white foreground on destructive filled surfaces:
63
-
64
- ```tsx
65
- <Button className="bg-destructive text-white" />
66
- ```
67
-
68
- ### Borders, form fields, and focus
69
-
70
- | Token | shadcn use | Utility examples |
71
- |---|---|---|
72
- | `border` | Default borders and separators | `border`, `border-b` |
73
- | `input` | Form-control border color and input-like surface treatment | `border-input`, `dark:bg-input/30`, `dark:border-input`, `dark:hover:bg-input/50` |
74
- | `ring` | Focus border, ring, and outline color | `focus-visible:border-ring`, `focus-visible:ring-ring/50`, `focus-visible:outline-ring`, `outline-ring/50` |
75
-
76
- The base layer already applies `border-border` and `outline-ring/50`; component code usually needs only the structural border utility (`border`, `border-b`, etc.) unless it is using another border role or overriding a competing border-color class.
77
-
78
- ### Charts
79
-
80
- `chart-1` through `chart-5` are palette slots for charts and data visualizations. They are not app surface tokens and do not imply foreground pairs.
81
-
82
- ### Sidebar
83
-
84
- Sidebar tokens are scoped versions of the same shadcn roles for sidebar UI:
85
-
86
- - `sidebar` / `sidebar-foreground`
87
- - `sidebar-primary` / `sidebar-primary-foreground`
88
- - `sidebar-accent` / `sidebar-accent-foreground`
89
- - `sidebar-border`
90
- - `sidebar-ring`
91
-
92
- ### Radius
93
-
94
- `radius` is the base radius value. `@theme inline` derives Tailwind radius utilities from it.
95
-
96
- ## Base layer
97
-
98
- shadcn applies default app chrome in `@layer base`:
99
-
100
- ```css
101
- @layer base {
102
- * {
103
- @apply border-border outline-ring/50;
104
- }
105
- body {
106
- @apply bg-background text-foreground;
107
- }
108
- }
109
- ```
110
-
111
- The base layer applies `border-border` and `outline-ring/50` globally. Plain `border`, `border-b`, etc. inherit the default border color when no competing border-color class is present. Add an explicit border color for another role, such as `border-input`, `border-primary`, `border-destructive`, or `focus-visible:border-ring`, or when overriding a component variant such as `border-transparent`.
112
-
113
- ## Adding tokens
114
-
115
- Treat fresh shadcn tokens as the baseline. Add project-specific tokens only when the project explicitly adopts an extension beyond shadcn defaults, and document that extension outside this baseline profile.
116
-
117
- ## Update trigger
118
-
119
- Re-check this document when the [shadcn changelog](https://ui.shadcn.com/docs/changelog) changes the theme token contract, default theme CSS, or generated component styling conventions.
120
-
121
- When re-checking, verify the affected claims against current shadcn docs and generated registry components before editing this document.
@@ -1,32 +0,0 @@
1
- # Class Composition Rule
2
-
3
- Class conditions and caller overrides need one consistent merge point so ordering stays understandable and conflicting Tailwind utilities resolve correctly.
4
-
5
- - Components MUST use `cn` or the project's equivalent class-merging helper for conditional classes and a consumer-provided `className`.
6
- - Components MUST NOT concatenate class strings with template literals or `+` when any part is conditional.
7
- - A consumer-provided `className` MUST contain only outer-layout utilities: margins, width constraints, permitted height constraints, and flex or grid item placement.
8
- - Permitted height constraints MUST be limited to `h-full`, `h-auto`, `min-h-*`, and `max-h-*`; fixed component heights MUST use a typed component API or an external wrapper.
9
- - A consumer-provided `className` MUST NOT change padding, internal gaps, fixed height, colors, typography, borders, radius, shadows, effects, positioning, inset, or z-index.
10
- - A component MUST expose supported internal appearance and fixed-size choices through typed props rather than consumer classes.
11
- - Components SHOULD group long static class lists by concern inside `cn`.
12
- - Components MAY keep a short, fully static `className` string inline.
13
-
14
- ## Incorrect — Conditional Classes Concatenated Manually
15
-
16
- ```tsx
17
- <button className={"rounded px-3 " + (active ? "bg-primary" : "bg-muted")} />
18
- ```
19
-
20
- Why: the condition and merge order are embedded in a string expression, which becomes difficult to extend with consumer overrides.
21
-
22
- ## Correct — Conditional Classes Merged with `cn`
23
-
24
- ```tsx
25
- export default function Card({ className, ...props }: CardProps): React.JSX.Element {
26
- return <article className={cn("surface-card rounded-lg p-4", className)} {...props} />;
27
- }
28
-
29
- <Card className="w-full max-w-lg self-center" />;
30
- ```
31
-
32
- Why: every class source is explicit, and a consumer can add outer layout such as `w-full max-w-lg self-center` without reconstructing the card's internal treatment.