@uncinq/component-tokens 0.1.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.
- package/LICENSE +21 -0
- package/README.md +180 -0
- package/package.json +37 -0
- package/tokens/component/alert.css +10 -0
- package/tokens/component/badge.css +13 -0
- package/tokens/component/breadcrumb.css +14 -0
- package/tokens/component/button.css +33 -0
- package/tokens/component/card.css +39 -0
- package/tokens/component/container.css +26 -0
- package/tokens/component/details.css +15 -0
- package/tokens/component/dropdown.css +33 -0
- package/tokens/component/embed.css +12 -0
- package/tokens/component/figure.css +9 -0
- package/tokens/component/heading.css +11 -0
- package/tokens/component/hero.css +28 -0
- package/tokens/component/item.css +44 -0
- package/tokens/component/items.css +7 -0
- package/tokens/component/link.css +8 -0
- package/tokens/component/list.css +15 -0
- package/tokens/component/logo.css +15 -0
- package/tokens/component/map.css +9 -0
- package/tokens/component/media.css +7 -0
- package/tokens/component/nav.css +20 -0
- package/tokens/component/offcanvas.css +30 -0
- package/tokens/component/pagination.css +24 -0
- package/tokens/component/surtitle.css +16 -0
- package/tokens/component/table.css +11 -0
- package/tokens/index.css +25 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 Un Cinq
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,180 @@
|
|
|
1
|
+
# @uncinq/component-tokens
|
|
2
|
+
|
|
3
|
+
> Component-scoped CSS design tokens for Un Cinq projects — layer 3 of the design token architecture.
|
|
4
|
+
|
|
5
|
+
<img width="1280" height="640" alt="share-component-tokens" src="https://github.com/user-attachments/assets/ef2387ee-2c45-4706-9e28-0f0341a100ed" />
|
|
6
|
+
|
|
7
|
+
## What are component tokens?
|
|
8
|
+
|
|
9
|
+
Component tokens are CSS custom properties scoped to a specific UI component. They sit at the top of the [DTCG](https://tr.designtokens.org/format/) three-layer model:
|
|
10
|
+
|
|
11
|
+
```text
|
|
12
|
+
primitive → semantic → component
|
|
13
|
+
(raw values) (purpose) (component-scoped)
|
|
14
|
+
```
|
|
15
|
+
|
|
16
|
+
Where primitive and semantic tokens are provided by [@uncinq/design-tokens](https://github.com/uncinq/design-tokens), component tokens map those semantic values to specific parts of a component:
|
|
17
|
+
|
|
18
|
+
```css
|
|
19
|
+
/* semantic token from @uncinq/design-tokens */
|
|
20
|
+
--color-brand: var(--color-indigo-600);
|
|
21
|
+
|
|
22
|
+
/* component token from @uncinq/component-tokens */
|
|
23
|
+
--btn-color-bg: var(--color-brand);
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
A component token answers: **"which semantic value does this part of this component use?"**
|
|
27
|
+
|
|
28
|
+
---
|
|
29
|
+
|
|
30
|
+
## Naming convention
|
|
31
|
+
|
|
32
|
+
All component tokens follow the pattern: `--{component}-{category?}-{property}`
|
|
33
|
+
|
|
34
|
+
```text
|
|
35
|
+
--{component} --btn
|
|
36
|
+
-{category} --btn-color
|
|
37
|
+
-{property} --btn-color-bg
|
|
38
|
+
-{state} --btn-color-bg-hover
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
### Rules
|
|
42
|
+
|
|
43
|
+
- **Lowercase kebab-case** — always
|
|
44
|
+
- **Component name first** — `--btn-*`, `--badge-*`, `--hero-*`
|
|
45
|
+
- **`color-*` for all color values** — background, border, text all use `color-` prefix
|
|
46
|
+
- **States at the end** — `-hover`, `-focus`, `-active`, `-disabled`
|
|
47
|
+
- **Reference semantic tokens** — never raw values; always `var(--semantic-token)`
|
|
48
|
+
- **Alphabetical order** — tokens within a file are sorted alphabetically; group related tokens with a comment when the component has many properties:
|
|
49
|
+
|
|
50
|
+
```css
|
|
51
|
+
/* Border */
|
|
52
|
+
--btn-border-radius: var(--radius-control);
|
|
53
|
+
--btn-border-width: var(--border-width-normal);
|
|
54
|
+
|
|
55
|
+
/* Color */
|
|
56
|
+
--btn-color-bg: var(--color-brand);
|
|
57
|
+
--btn-color-text: var(--color-text-on-brand);
|
|
58
|
+
|
|
59
|
+
/* Spacing */
|
|
60
|
+
--btn-gap: var(--spacing-sm);
|
|
61
|
+
--btn-padding: var(--spacing-control);
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
### Examples
|
|
65
|
+
|
|
66
|
+
```css
|
|
67
|
+
--btn-color-bg: var(--color-brand);
|
|
68
|
+
--btn-color-text: var(--color-text-on-brand);
|
|
69
|
+
--btn-border-radius: var(--radius-control);
|
|
70
|
+
--btn-padding: var(--spacing-control);
|
|
71
|
+
|
|
72
|
+
--badge-border-radius: var(--radius-sm);
|
|
73
|
+
--badge-color-bg: var(--color-bg-muted);
|
|
74
|
+
|
|
75
|
+
--hero-color-bg: var(--color-bg);
|
|
76
|
+
--hero-min-height: 50svh;
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
---
|
|
80
|
+
|
|
81
|
+
## CSS cascade layers
|
|
82
|
+
|
|
83
|
+
All tokens are declared inside `@layer config`, the lowest-priority layer in the stack. This means any project can override any token simply by declaring its own `@layer config` block after this package:
|
|
84
|
+
|
|
85
|
+
```css
|
|
86
|
+
@import '@uncinq/component-tokens';
|
|
87
|
+
|
|
88
|
+
/* your project overrides — same layer, wins by source order */
|
|
89
|
+
@layer config {
|
|
90
|
+
:root {
|
|
91
|
+
--btn-color-bg: var(--color-secondary);
|
|
92
|
+
--hero-min-height: 80svh;
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
```
|
|
96
|
+
|
|
97
|
+
---
|
|
98
|
+
|
|
99
|
+
## Prerequisites
|
|
100
|
+
|
|
101
|
+
This package references semantic tokens from [@uncinq/design-tokens](https://github.com/uncinq/design-tokens). Import it before this package:
|
|
102
|
+
|
|
103
|
+
```css
|
|
104
|
+
@import '@uncinq/design-tokens';
|
|
105
|
+
@import '@uncinq/component-tokens';
|
|
106
|
+
```
|
|
107
|
+
|
|
108
|
+
---
|
|
109
|
+
|
|
110
|
+
## Installation
|
|
111
|
+
|
|
112
|
+
```bash
|
|
113
|
+
npm install @uncinq/component-tokens
|
|
114
|
+
# or
|
|
115
|
+
yarn add @uncinq/component-tokens
|
|
116
|
+
```
|
|
117
|
+
|
|
118
|
+
### Usage — full import
|
|
119
|
+
|
|
120
|
+
```css
|
|
121
|
+
@import '@uncinq/design-tokens';
|
|
122
|
+
@import '@uncinq/component-tokens';
|
|
123
|
+
```
|
|
124
|
+
|
|
125
|
+
### Usage — per component
|
|
126
|
+
|
|
127
|
+
```css
|
|
128
|
+
@import '@uncinq/design-tokens';
|
|
129
|
+
@import '@uncinq/component-tokens/tokens/component/button.css';
|
|
130
|
+
@import '@uncinq/component-tokens/tokens/component/badge.css';
|
|
131
|
+
```
|
|
132
|
+
|
|
133
|
+
### Usage — CDN (no build step)
|
|
134
|
+
|
|
135
|
+
```html
|
|
136
|
+
<link rel="stylesheet" href="https://unpkg.com/@uncinq/design-tokens/tokens/index.css">
|
|
137
|
+
<link rel="stylesheet" href="https://unpkg.com/@uncinq/component-tokens/tokens/index.css">
|
|
138
|
+
```
|
|
139
|
+
|
|
140
|
+
---
|
|
141
|
+
|
|
142
|
+
## File structure
|
|
143
|
+
|
|
144
|
+
```text
|
|
145
|
+
tokens/
|
|
146
|
+
index.css ← imports all component token files
|
|
147
|
+
component/
|
|
148
|
+
alert.css ← alert / notification banner
|
|
149
|
+
badge.css ← badge / pill / tag
|
|
150
|
+
breadcrumb.css ← breadcrumb navigation
|
|
151
|
+
button.css ← button (all variants)
|
|
152
|
+
card.css ← card (alias → item tokens)
|
|
153
|
+
container.css ← layout container + grid columns
|
|
154
|
+
details.css ← <details> / accordion
|
|
155
|
+
dropdown.css ← dropdown menu
|
|
156
|
+
embed.css ← video / iframe embed wrapper
|
|
157
|
+
figure.css ← <figure> + <figcaption>
|
|
158
|
+
heading.css ← heading typography scale
|
|
159
|
+
hero.css ← hero / banner section
|
|
160
|
+
item.css ← item (canonical card-like unit)
|
|
161
|
+
items.css ← items grid / list wrapper
|
|
162
|
+
link.css ← inline link
|
|
163
|
+
list.css ← styled list
|
|
164
|
+
logo.css ← logotype
|
|
165
|
+
map.css ← embedded map
|
|
166
|
+
media.css ← media object (image + text)
|
|
167
|
+
nav.css ← navigation bar
|
|
168
|
+
offcanvas.css ← off-canvas panel / drawer
|
|
169
|
+
pagination.css ← pagination control
|
|
170
|
+
surtitle.css ← small label above a heading
|
|
171
|
+
table.css ← data table
|
|
172
|
+
```
|
|
173
|
+
|
|
174
|
+
---
|
|
175
|
+
|
|
176
|
+
## References
|
|
177
|
+
|
|
178
|
+
- [DTCG specification](https://tr.designtokens.org/format/) — W3C Community Group draft
|
|
179
|
+
- [@uncinq/design-tokens](https://github.com/uncinq/design-tokens) — primitive + semantic layers
|
|
180
|
+
- [MDN: CSS cascade layers](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers)
|
package/package.json
ADDED
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@uncinq/component-tokens",
|
|
3
|
+
"version": "0.1.0",
|
|
4
|
+
"description": "Framework-agnostic CSS design tokens — component layers.",
|
|
5
|
+
"license": "MIT",
|
|
6
|
+
"repository": {
|
|
7
|
+
"type": "git",
|
|
8
|
+
"url": "https://github.com/uncinq/component-tokens.git"
|
|
9
|
+
},
|
|
10
|
+
"homepage": "https://github.com/uncinq/component-tokens#readme",
|
|
11
|
+
"author": {
|
|
12
|
+
"name": "Un Cinq",
|
|
13
|
+
"url": "https://uncinq.dev/"
|
|
14
|
+
},
|
|
15
|
+
"keywords": [
|
|
16
|
+
"design-tokens",
|
|
17
|
+
"component-tokens",
|
|
18
|
+
"css",
|
|
19
|
+
"custom-properties",
|
|
20
|
+
"design-system"
|
|
21
|
+
],
|
|
22
|
+
"files": [
|
|
23
|
+
"tokens/"
|
|
24
|
+
],
|
|
25
|
+
"exports": {
|
|
26
|
+
".": "./tokens/index.css",
|
|
27
|
+
"./tokens/index.css": "./tokens/index.css",
|
|
28
|
+
"./tokens/component/*": "./tokens/component/*"
|
|
29
|
+
},
|
|
30
|
+
"style": "./tokens/index.css",
|
|
31
|
+
"peerDependencies": {
|
|
32
|
+
"@uncinq/design-tokens": "*"
|
|
33
|
+
},
|
|
34
|
+
"publishConfig": {
|
|
35
|
+
"access": "public"
|
|
36
|
+
}
|
|
37
|
+
}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
/* tokens/component/badge.css */
|
|
2
|
+
@layer config {
|
|
3
|
+
:root {
|
|
4
|
+
--badge-color-border: transparent;
|
|
5
|
+
--badge-border-radius: var(--radius-pill);
|
|
6
|
+
--badge-border-style: solid;
|
|
7
|
+
--badge-border-width: 0;
|
|
8
|
+
--badge-font-size: var(--font-size-2xs);
|
|
9
|
+
--badge-font-weight: var(--font-weight-control);
|
|
10
|
+
--badge-padding-x: var(--spacing-xs);
|
|
11
|
+
--badge-padding-y: var(--spacing-2xs);
|
|
12
|
+
}
|
|
13
|
+
}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
/* tokens/component/breadcrumb.css */
|
|
2
|
+
@layer config {
|
|
3
|
+
:root {
|
|
4
|
+
--breadcrumb-color-border: var(--color-border);
|
|
5
|
+
--breadcrumb-border-width: var(--border-width-normal);
|
|
6
|
+
--breadcrumb-color-text: var(--color-text-muted);
|
|
7
|
+
--breadcrumb-color-text-active: var(--color-text);
|
|
8
|
+
--breadcrumb-color-separator: var(--color-text-muted);
|
|
9
|
+
--breadcrumb-font-size: var(--font-size-xs);
|
|
10
|
+
--breadcrumb-gap: var(--spacing-xs);
|
|
11
|
+
--breadcrumb-separator: "/";
|
|
12
|
+
--breadcrumb-padding: var(--spacing-xs);
|
|
13
|
+
}
|
|
14
|
+
}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
/* tokens/component/button.css */
|
|
2
|
+
@layer config {
|
|
3
|
+
:root {
|
|
4
|
+
|
|
5
|
+
/* Border */
|
|
6
|
+
--btn-border-radius: var(--radius-control);
|
|
7
|
+
--btn-border-style: var(--border-style-solid);
|
|
8
|
+
--btn-border-width: var(--border-width-normal);
|
|
9
|
+
|
|
10
|
+
/* Color */
|
|
11
|
+
--btn-color-bg: var(--color-brand);
|
|
12
|
+
--btn-color-bg-hover: var(--color-brand-hover);
|
|
13
|
+
--btn-color-border: var(--color-brand);
|
|
14
|
+
--btn-color-text: var(--color-text-on-brand);
|
|
15
|
+
--btn-color-text-hover: var(--color-text-on-brand);
|
|
16
|
+
|
|
17
|
+
/* Typography */
|
|
18
|
+
--btn-font-size: var(--font-size-sm);
|
|
19
|
+
--btn-font-weight: var(--font-weight-control);
|
|
20
|
+
|
|
21
|
+
/* Spacing */
|
|
22
|
+
--btn-gap: var(--spacing-sm);
|
|
23
|
+
--btn-padding: var(--spacing-control);
|
|
24
|
+
|
|
25
|
+
/* Text decoration */
|
|
26
|
+
--btn-color-text-decoration: transparent;
|
|
27
|
+
--btn-color-text-decoration-hover: transparent;
|
|
28
|
+
--btn-text-decoration-line: underline;
|
|
29
|
+
|
|
30
|
+
/* Transitions */
|
|
31
|
+
--btn-transition: var(--transition-normal);
|
|
32
|
+
}
|
|
33
|
+
}
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
/* tokens/component/card.css */
|
|
2
|
+
/* Aliases for backwards compatibility — canonical tokens are --item-* */
|
|
3
|
+
@layer config {
|
|
4
|
+
:root {
|
|
5
|
+
|
|
6
|
+
/* Border */
|
|
7
|
+
--card-border-radius: var(--item-border-radius);
|
|
8
|
+
--card-border-style: var(--item-border-style);
|
|
9
|
+
--card-border-width: var(--item-border-width);
|
|
10
|
+
|
|
11
|
+
/* Button */
|
|
12
|
+
--card-btn-color-bg: var(--item-btn-color-bg);
|
|
13
|
+
--card-btn-border-width: var(--item-btn-border-width);
|
|
14
|
+
--card-btn-color-text: var(--item-btn-color-text);
|
|
15
|
+
|
|
16
|
+
/* Color */
|
|
17
|
+
--card-color-bg: var(--item-color-bg);
|
|
18
|
+
--card-color-border: var(--item-color-border);
|
|
19
|
+
--card-color-text: var(--item-color-text);
|
|
20
|
+
--card-color-text-muted: var(--item-color-text-muted);
|
|
21
|
+
--card-color-title: var(--item-color-title);
|
|
22
|
+
|
|
23
|
+
/* Font */
|
|
24
|
+
--card-font-size-title: var(--item-font-size-title);
|
|
25
|
+
--card-font-weight-title: var(--item-font-weight-title);
|
|
26
|
+
--card-line-height-title: var(--item-line-height-title);
|
|
27
|
+
|
|
28
|
+
/* Spacing */
|
|
29
|
+
--card-gap: var(--item-gap);
|
|
30
|
+
--card-padding: var(--item-padding);
|
|
31
|
+
|
|
32
|
+
/* Media */
|
|
33
|
+
--card-media-color-bg: var(--item-media-color-bg);
|
|
34
|
+
--card-media-ratio: var(--item-media-ratio);
|
|
35
|
+
|
|
36
|
+
/* Shadow */
|
|
37
|
+
--card-shadow: var(--item-shadow);
|
|
38
|
+
}
|
|
39
|
+
}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
/* tokens/component/container.css */
|
|
2
|
+
@layer config {
|
|
3
|
+
:root {
|
|
4
|
+
|
|
5
|
+
/* Container */
|
|
6
|
+
--container-max-width-mobile: 100%;
|
|
7
|
+
--container-max-width-tablet: var(--size-tablet);
|
|
8
|
+
--container-max-width-tablet-wide: var(--size-tablet-wide);
|
|
9
|
+
--container-max-width-laptop: var(--size-laptop);
|
|
10
|
+
--container-max-width-desktop: var(--size-desktop);
|
|
11
|
+
|
|
12
|
+
/* Grid */
|
|
13
|
+
--columns: 12;
|
|
14
|
+
--gap: var(--spacing-sm);
|
|
15
|
+
--gutter: var(--spacing-md);
|
|
16
|
+
--grid-column: var(--grid-column-mobile);
|
|
17
|
+
|
|
18
|
+
/* Grid spans */
|
|
19
|
+
--grid-column-mobile: var(--span-full);
|
|
20
|
+
--grid-column-tablet: var(--span-half);
|
|
21
|
+
--grid-column-tablet-wide: var(--span-third);
|
|
22
|
+
--grid-column-laptop: var(--span-quarter);
|
|
23
|
+
--grid-column-desktop: var(--span-quarter);
|
|
24
|
+
|
|
25
|
+
}
|
|
26
|
+
}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
/* tokens/component/details.css */
|
|
2
|
+
@layer config {
|
|
3
|
+
:root {
|
|
4
|
+
--details-color-bg: var(--color-bg);
|
|
5
|
+
--details-color-border: var(--color-border);
|
|
6
|
+
--details-border: var(--border-width-normal) var(--border-style-solid) var(--details-color-border);
|
|
7
|
+
--details-border-radius: var(--radius-surface);
|
|
8
|
+
--details-box-shadow: var(--shadow-sm);
|
|
9
|
+
--details-box-shadow-hover: var(--shadow-center-md);
|
|
10
|
+
--details-padding: var(--spacing-sm);
|
|
11
|
+
--details-summary-font-size: var(--font-size-md);
|
|
12
|
+
--details-summary-font-weight: var(--font-weight-heading);
|
|
13
|
+
--details-color-border-open: var(--color-active);
|
|
14
|
+
}
|
|
15
|
+
}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
/* tokens/component/dropdown.css */
|
|
2
|
+
@layer config {
|
|
3
|
+
:root {
|
|
4
|
+
|
|
5
|
+
/* Colors — panel */
|
|
6
|
+
--dropdown-color-bg: var(--color-bg);
|
|
7
|
+
--dropdown-color-text: var(--color-text);
|
|
8
|
+
--dropdown-color-border: var(--color-border);
|
|
9
|
+
|
|
10
|
+
/* Layout */
|
|
11
|
+
--dropdown-min-width: 180px;
|
|
12
|
+
--dropdown-padding: var(--size-4);
|
|
13
|
+
--dropdown-z-index: 50;
|
|
14
|
+
|
|
15
|
+
/* Appearance */
|
|
16
|
+
--dropdown-border-width: var(--border-width-normal);
|
|
17
|
+
--dropdown-border-style: var(--border-style-solid);
|
|
18
|
+
--dropdown-border-radius: var(--radius-surface);
|
|
19
|
+
--dropdown-shadow: var(--shadow-sm);
|
|
20
|
+
|
|
21
|
+
/* Item */
|
|
22
|
+
--dropdown-item-color-bg: var(--color-bg);
|
|
23
|
+
--dropdown-item-color-bg-hover: var(--color-bg-muted);
|
|
24
|
+
--dropdown-item-border-radius: var(--radius-xs);
|
|
25
|
+
--dropdown-item-font-size: var(--font-size-xs);
|
|
26
|
+
--dropdown-item-padding: var(--spacing-2xs);
|
|
27
|
+
|
|
28
|
+
/* Transition — read by JS via getComputedStyle */
|
|
29
|
+
--dropdown-transition-duration: var(--duration-fast);
|
|
30
|
+
--dropdown-transition-easing: var(--easing-out);
|
|
31
|
+
--dropdown-translate-y: -4px;
|
|
32
|
+
}
|
|
33
|
+
}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
/* tokens/component/embed.css */
|
|
2
|
+
@layer config {
|
|
3
|
+
:root {
|
|
4
|
+
--embed-ratio: var(--ratio-16-9);
|
|
5
|
+
--embed-color-border: var(--color-border);
|
|
6
|
+
--embed-border-radius: var(--radius-none);
|
|
7
|
+
--embed-border-style: var(--border-style-solid);
|
|
8
|
+
--embed-border-width: 0;
|
|
9
|
+
--embed-box-shadow: none;
|
|
10
|
+
--embed-max-width: 100%;
|
|
11
|
+
}
|
|
12
|
+
}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
/* tokens/component/heading.css */
|
|
2
|
+
@layer config {
|
|
3
|
+
:root {
|
|
4
|
+
--heading-gap: var(--spacing-xs);
|
|
5
|
+
--heading-margin-bottom: var(--spacing-md);
|
|
6
|
+
--heading-margin-bottom-tablet: var(--spacing-md);
|
|
7
|
+
--heading-margin-bottom-tablet-wide: var(--spacing-md);
|
|
8
|
+
--heading-margin-bottom-laptop: var(--spacing-lg);
|
|
9
|
+
--heading-margin-bottom-desktop: var(--spacing-xl);
|
|
10
|
+
}
|
|
11
|
+
}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
/* tokens/component/hero.css */
|
|
2
|
+
@layer config {
|
|
3
|
+
:root {
|
|
4
|
+
/* Colors */
|
|
5
|
+
--hero-color-bg: var(--color-bg);
|
|
6
|
+
--hero-color-text: var(--color-text);
|
|
7
|
+
--hero-color-title: var(--color-text);
|
|
8
|
+
--hero-color-link: var(--color-text);
|
|
9
|
+
|
|
10
|
+
/* Layout */
|
|
11
|
+
--hero-min-height: 400px;
|
|
12
|
+
--hero-min-height-tablet: 600px;
|
|
13
|
+
--hero-min-height-desktop: 800px;
|
|
14
|
+
|
|
15
|
+
/* Spacing */
|
|
16
|
+
--hero-gap: var(--spacing-sm);
|
|
17
|
+
--hero-padding: var(--spacing-md) 0;
|
|
18
|
+
|
|
19
|
+
/* Content column width (no media) */
|
|
20
|
+
--hero-content-max-width: 60ch;
|
|
21
|
+
|
|
22
|
+
/* Cover darken */
|
|
23
|
+
--hero-cover-brightness: 0.3;
|
|
24
|
+
|
|
25
|
+
/* Typography */
|
|
26
|
+
--hero-font-size-title: var(--font-size-heading-01);
|
|
27
|
+
}
|
|
28
|
+
}
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
/* tokens/component/item.css */
|
|
2
|
+
@layer config {
|
|
3
|
+
:root {
|
|
4
|
+
|
|
5
|
+
/* Border */
|
|
6
|
+
--item-border-radius: var(--radius-surface);
|
|
7
|
+
--item-border-style: var(--border-style-solid);
|
|
8
|
+
--item-border-width: var(--border-width-normal);
|
|
9
|
+
|
|
10
|
+
/* Button */
|
|
11
|
+
--item-btn-color-bg: transparent;
|
|
12
|
+
--item-btn-border-width: 0;
|
|
13
|
+
--item-btn-color-text: var(--color-brand);
|
|
14
|
+
--item-btn-padding: 0;
|
|
15
|
+
--item-btn-text-decoration: var(--text-decoration-none);
|
|
16
|
+
--item-btn-text-decoration-hover: var(--text-decoration-underline);
|
|
17
|
+
|
|
18
|
+
/* Color */
|
|
19
|
+
--item-color-bg: var(--color-bg);
|
|
20
|
+
--item-color-border: var(--color-border);
|
|
21
|
+
--item-color-text: var(--color-text);
|
|
22
|
+
--item-color-text-muted: var(--color-text-muted);
|
|
23
|
+
--item-color-title: var(--color-text);
|
|
24
|
+
|
|
25
|
+
/* Font */
|
|
26
|
+
--item-font-size-title: var(--font-size-md);
|
|
27
|
+
--item-font-weight-title: var(--font-weight-heading);
|
|
28
|
+
--item-line-height-title: var(--line-height-heading);
|
|
29
|
+
|
|
30
|
+
/* Spacing */
|
|
31
|
+
--item-gap: var(--spacing-sm);
|
|
32
|
+
--item-padding: var(--spacing-surface);
|
|
33
|
+
|
|
34
|
+
/* Media */
|
|
35
|
+
--item-media-color-bg: var(--media-color-bg);
|
|
36
|
+
--item-media-ratio: var(--media-ratio);
|
|
37
|
+
|
|
38
|
+
/* Shadow */
|
|
39
|
+
--item-shadow: var(--shadow-sm);
|
|
40
|
+
--item-shadow-hover: var(--shadow-md);
|
|
41
|
+
|
|
42
|
+
--item-transition: box-shadow var(--duration-normal) var(--easing-default)
|
|
43
|
+
}
|
|
44
|
+
}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
/* tokens/component/list.css */
|
|
2
|
+
@layer config {
|
|
3
|
+
:root {
|
|
4
|
+
|
|
5
|
+
/* Label */
|
|
6
|
+
--list-label-font-weight: var(--font-weight-bold);
|
|
7
|
+
--list-label-margin-bottom: var(--spacing-2xs);
|
|
8
|
+
|
|
9
|
+
/* Item */
|
|
10
|
+
--list-item-font-size: var(--font-size-sm);
|
|
11
|
+
--list-item-gap: var(--spacing-2xs);
|
|
12
|
+
--list-item-marker: '-';
|
|
13
|
+
--list-item-marker-gap: var(--spacing-2xs);
|
|
14
|
+
}
|
|
15
|
+
}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
/* tokens/component/logo.css */
|
|
2
|
+
@layer config {
|
|
3
|
+
:root {
|
|
4
|
+
/* Image */
|
|
5
|
+
--logo-height: 1.5rem;
|
|
6
|
+
--logo-height-tablet: 2rem;
|
|
7
|
+
|
|
8
|
+
/* Text fallback (when no image) */
|
|
9
|
+
--logo-color: var(--color-text);
|
|
10
|
+
--logo-font-family: var(--font-heading);
|
|
11
|
+
--logo-font-size: var(--font-size-md);
|
|
12
|
+
--logo-font-weight: var(--font-weight-heading);
|
|
13
|
+
--logo-letter-spacing: var(--letter-spacing-normal);
|
|
14
|
+
}
|
|
15
|
+
}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
/* tokens/component/nav.css */
|
|
2
|
+
@layer config {
|
|
3
|
+
:root {
|
|
4
|
+
/* Colors */
|
|
5
|
+
--nav-color-text: var(--color-text);
|
|
6
|
+
--nav-color-text-hover: var(--color-brand);
|
|
7
|
+
--nav-color-text-active: var(--color-active);
|
|
8
|
+
--nav-color-text-muted: var(--color-text-muted);
|
|
9
|
+
|
|
10
|
+
/* Layout */
|
|
11
|
+
--nav-gap: 0px;
|
|
12
|
+
--nav-padding-x: var(--spacing-xs);
|
|
13
|
+
--nav-padding-y: var(--spacing-xs);
|
|
14
|
+
|
|
15
|
+
/* Typography */
|
|
16
|
+
--nav-font-size: var(--font-size-text);
|
|
17
|
+
--nav-font-size-title: var(--font-size-md);
|
|
18
|
+
--nav-font-weight-title: var(--font-weight-heading);
|
|
19
|
+
}
|
|
20
|
+
}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
/* tokens/component/offcanvas.css */
|
|
2
|
+
@layer config {
|
|
3
|
+
:root {
|
|
4
|
+
/* Colors */
|
|
5
|
+
--offcanvas-color-bg: var(--color-bg);
|
|
6
|
+
--offcanvas-color-text: var(--color-text);
|
|
7
|
+
--offcanvas-color-border: var(--color-border);
|
|
8
|
+
|
|
9
|
+
/* Backdrop */
|
|
10
|
+
--offcanvas-backdrop-color: rgb(0 0 0 / 0.5);
|
|
11
|
+
|
|
12
|
+
/* Position */
|
|
13
|
+
--offcanvas-bottom: 0;
|
|
14
|
+
--offcanvas-end: 0;
|
|
15
|
+
--offcanvas-start: auto;
|
|
16
|
+
--offcanvas-top: 0;
|
|
17
|
+
--offcanvas-translate: translateX(100%);
|
|
18
|
+
|
|
19
|
+
/* Layout */
|
|
20
|
+
--offcanvas-width: 320px;
|
|
21
|
+
--offcanvas-height: 50vh;
|
|
22
|
+
--offcanvas-padding: var(--spacing-surface);
|
|
23
|
+
--offcanvas-shadow: var(--shadow-sm);
|
|
24
|
+
--offcanvas-z-index: 200;
|
|
25
|
+
|
|
26
|
+
/* Transition — read by JS via getComputedStyle */
|
|
27
|
+
--offcanvas-transition-duration: var(--duration-slow);
|
|
28
|
+
--offcanvas-transition-easing: var(--easing-out-expo);
|
|
29
|
+
}
|
|
30
|
+
}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
/* tokens/component/pagination.css */
|
|
2
|
+
@layer config {
|
|
3
|
+
:root {
|
|
4
|
+
/* Layout */
|
|
5
|
+
--pagination-gap: var(--spacing-3xs);
|
|
6
|
+
|
|
7
|
+
/* Item (page number) */
|
|
8
|
+
--pagination-item-size: 2.25rem;
|
|
9
|
+
--pagination-item-font-size: var(--font-size-sm);
|
|
10
|
+
--pagination-item-font-weight: var(--font-weight-normal);
|
|
11
|
+
--pagination-item-border-radius: var(--radius-sm);
|
|
12
|
+
--pagination-item-color-bg: transparent;
|
|
13
|
+
--pagination-item-color-text: var(--color-text);
|
|
14
|
+
--pagination-item-color-bg-hover: var(--color-bg-muted);
|
|
15
|
+
--pagination-item-color-text-hover: var(--color-text);
|
|
16
|
+
|
|
17
|
+
/* Active item */
|
|
18
|
+
--pagination-item-color-bg-active: var(--color-brand);
|
|
19
|
+
--pagination-item-color-text-active: var(--color-text-on-brand);
|
|
20
|
+
|
|
21
|
+
/* Disabled (nav controls) */
|
|
22
|
+
--pagination-disabled-opacity: var(--opacity-disabled);
|
|
23
|
+
}
|
|
24
|
+
}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
/* tokens/component/surtitle.css */
|
|
2
|
+
@layer config {
|
|
3
|
+
:root {
|
|
4
|
+
--surtitle-border-radius: 0;
|
|
5
|
+
--surtitle-border-width: 0;
|
|
6
|
+
--surtitle-color: var(--color-text-muted);
|
|
7
|
+
--surtitle-color-bg: transparent;
|
|
8
|
+
--surtitle-color-border: transparent;
|
|
9
|
+
--surtitle-font-size: var(--font-size-xs);
|
|
10
|
+
--surtitle-font-weight: var(--font-weight-bold);
|
|
11
|
+
--surtitle-letter-spacing: var(--letter-spacing-large);
|
|
12
|
+
--surtitle-line-height: var(--line-height-normal);
|
|
13
|
+
--surtitle-padding: 0;
|
|
14
|
+
--surtitle-text-transform: uppercase;
|
|
15
|
+
}
|
|
16
|
+
}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
/* tokens/component/table.css */
|
|
2
|
+
@layer config {
|
|
3
|
+
:root {
|
|
4
|
+
--table-cell-padding-x: var(--spacing-sm);
|
|
5
|
+
--table-cell-padding-y: var(--spacing-xs);
|
|
6
|
+
--table-color-border: var(--color-border);
|
|
7
|
+
--table-color-bg-header: var(--color-bg-muted);
|
|
8
|
+
--table-color-bg-striped: var(--color-bg-muted);
|
|
9
|
+
--table-font-size: var(--font-size-sm);
|
|
10
|
+
}
|
|
11
|
+
}
|
package/tokens/index.css
ADDED
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
/* tokens/index.css */
|
|
2
|
+
@import 'component/alert.css';
|
|
3
|
+
@import 'component/badge.css';
|
|
4
|
+
@import 'component/breadcrumb.css';
|
|
5
|
+
@import 'component/button.css';
|
|
6
|
+
@import 'component/card.css';
|
|
7
|
+
@import 'component/container.css';
|
|
8
|
+
@import 'component/details.css';
|
|
9
|
+
@import 'component/dropdown.css';
|
|
10
|
+
@import 'component/embed.css';
|
|
11
|
+
@import 'component/figure.css';
|
|
12
|
+
@import 'component/heading.css';
|
|
13
|
+
@import 'component/hero.css';
|
|
14
|
+
@import 'component/item.css';
|
|
15
|
+
@import 'component/items.css';
|
|
16
|
+
@import 'component/link.css';
|
|
17
|
+
@import 'component/list.css';
|
|
18
|
+
@import 'component/logo.css';
|
|
19
|
+
@import 'component/map.css';
|
|
20
|
+
@import 'component/media.css';
|
|
21
|
+
@import 'component/nav.css';
|
|
22
|
+
@import 'component/offcanvas.css';
|
|
23
|
+
@import 'component/pagination.css';
|
|
24
|
+
@import 'component/surtitle.css';
|
|
25
|
+
@import 'component/table.css';
|