@uncinq/component-tokens 1.0.1 → 1.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.
Files changed (29) hide show
  1. package/README.md +4 -4
  2. package/dist/css/components/alert.css +1 -1
  3. package/dist/css/components/badge.css +1 -1
  4. package/dist/css/components/breadcrumb.css +1 -1
  5. package/dist/css/components/button.css +2 -2
  6. package/dist/css/components/card.css +1 -1
  7. package/dist/css/components/container.css +1 -1
  8. package/dist/css/components/details.css +1 -1
  9. package/dist/css/components/drawer.css +1 -1
  10. package/dist/css/components/dropdown.css +1 -1
  11. package/dist/css/components/embed.css +1 -1
  12. package/dist/css/components/figure.css +1 -1
  13. package/dist/css/components/heading.css +1 -1
  14. package/dist/css/components/hero.css +1 -1
  15. package/dist/css/components/item.css +1 -1
  16. package/dist/css/components/items.css +1 -1
  17. package/dist/css/components/link.css +1 -1
  18. package/dist/css/components/list.css +1 -1
  19. package/dist/css/components/logo.css +1 -1
  20. package/dist/css/components/map.css +1 -1
  21. package/dist/css/components/media.css +1 -1
  22. package/dist/css/components/modal.css +1 -1
  23. package/dist/css/components/nav.css +1 -1
  24. package/dist/css/components/pagination.css +1 -1
  25. package/dist/css/components/surtitle.css +1 -1
  26. package/dist/css/components/table.css +1 -1
  27. package/dist/css/index.css +25 -25
  28. package/package.json +1 -1
  29. package/tokens/components/button.json +1 -1
package/README.md CHANGED
@@ -97,13 +97,13 @@ The property mirrors the CSS property name, so the token reads the same way as t
97
97
 
98
98
  ## CSS cascade layers
99
99
 
100
- 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:
100
+ All tokens are declared inside `@layer tokens`, the lowest-priority layer in the stack. This means any project can override any token simply by declaring its own `@layer tokens` block after this package:
101
101
 
102
102
  ```css
103
103
  @import '@uncinq/component-tokens';
104
104
 
105
105
  /* your project overrides — same layer, wins by source order */
106
- @layer config {
106
+ @layer tokens {
107
107
  :root {
108
108
  --btn-color-background: var(--color-secondary);
109
109
  --hero-min-height: 80svh;
@@ -160,12 +160,12 @@ yarn add @uncinq/component-tokens
160
160
 
161
161
  ### CSS override (recommended)
162
162
 
163
- Re-declare any token inside `@layer config` after the import. Same layer, later source order wins:
163
+ Re-declare any token inside `@layer tokens` after the import. Same layer, later source order wins:
164
164
 
165
165
  ```css
166
166
  @import '@uncinq/component-tokens';
167
167
 
168
- @layer config {
168
+ @layer tokens {
169
169
  :root {
170
170
  --btn-color-background: var(--color-secondary);
171
171
  --btn-border-radius: 0;
package/dist/css/components/alert.css CHANGED
@@ -3,7 +3,7 @@
3
3
  */
4
4
 
5
5
  /* components/alert.css */
6
- @layer config {
6
+ @layer tokens {
7
7
  :root {
8
8
  --alert-border-radius: var(--radius-none);
9
9
  --alert-border-style: var(--border-style-normal);
package/dist/css/components/badge.css CHANGED
@@ -3,7 +3,7 @@
3
3
  */
4
4
 
5
5
  /* components/badge.css */
6
- @layer config {
6
+ @layer tokens {
7
7
  :root {
8
8
  --badge-border-radius: var(--radius-pill);
9
9
  --badge-border-style: solid;
package/dist/css/components/breadcrumb.css CHANGED
@@ -3,7 +3,7 @@
3
3
  */
4
4
 
5
5
  /* components/breadcrumb.css */
6
- @layer config {
6
+ @layer tokens {
7
7
  :root {
8
8
  --breadcrumb-border-style: var(--border-style-normal);
9
9
  --breadcrumb-border-width: var(--border-width-sm);
package/dist/css/components/button.css CHANGED
@@ -3,7 +3,7 @@
3
3
  */
4
4
 
5
5
  /* components/button.css */
6
- @layer config {
6
+ @layer tokens {
7
7
  :root {
8
8
  --btn-border-radius: var(--radius-control);
9
9
  --btn-border-style: var(--border-style-normal);
@@ -11,7 +11,7 @@
11
11
  --btn-color-background: var(--color-brand);
12
12
  --btn-color-background-hover: var(--color-brand-hover);
13
13
  --btn-color-border: var(--color-brand);
14
- --btn-color-border-hover: var(--color-brand);
14
+ --btn-color-border-hover: var(--color-brand-hover);
15
15
  --btn-color-text: var(--color-text-on-brand);
16
16
  --btn-color-text-hover: var(--color-text-on-brand);
17
17
  --btn-color-text-decoration: transparent;
package/dist/css/components/card.css CHANGED
@@ -3,7 +3,7 @@
3
3
  */
4
4
 
5
5
  /* components/card.css */
6
- @layer config {
6
+ @layer tokens {
7
7
  :root {
8
8
  --card-border-radius: var(--item-border-radius);
9
9
  --card-border-style: var(--item-border-style);
package/dist/css/components/container.css CHANGED
@@ -3,7 +3,7 @@
3
3
  */
4
4
 
5
5
  /* components/container.css */
6
- @layer config {
6
+ @layer tokens {
7
7
  :root {
8
8
  --columns: 12;
9
9
  --container-max-width-mobile: 100%;
package/dist/css/components/details.css CHANGED
@@ -3,7 +3,7 @@
3
3
  */
4
4
 
5
5
  /* components/details.css */
6
- @layer config {
6
+ @layer tokens {
7
7
  :root {
8
8
  --details-border-radius: var(--radius-surface);
9
9
  --details-box-shadow: var(--shadow-sm);
package/dist/css/components/drawer.css CHANGED
@@ -3,7 +3,7 @@
3
3
  */
4
4
 
5
5
  /* components/drawer.css */
6
- @layer config {
6
+ @layer tokens {
7
7
  :root {
8
8
  --drawer-backdrop-blur: var(--blur-backdrop);
9
9
  --drawer-backdrop-color: var(--color-backdrop);
package/dist/css/components/dropdown.css CHANGED
@@ -3,7 +3,7 @@
3
3
  */
4
4
 
5
5
  /* components/dropdown.css */
6
- @layer config {
6
+ @layer tokens {
7
7
  :root {
8
8
  --dropdown-border-radius: var(--radius-surface);
9
9
  --dropdown-border-style: var(--border-style-normal);
package/dist/css/components/embed.css CHANGED
@@ -3,7 +3,7 @@
3
3
  */
4
4
 
5
5
  /* components/embed.css */
6
- @layer config {
6
+ @layer tokens {
7
7
  :root {
8
8
  --embed-border-radius: var(--radius-none);
9
9
  --embed-border-style: var(--border-style-normal);
package/dist/css/components/figure.css CHANGED
@@ -3,7 +3,7 @@
3
3
  */
4
4
 
5
5
  /* components/figure.css */
6
- @layer config {
6
+ @layer tokens {
7
7
  :root {
8
8
  --figure-figcaption-font-size: var(--font-size-sm);
9
9
  --figure-figcaption-gap: var(--spacing-xs);
package/dist/css/components/heading.css CHANGED
@@ -3,7 +3,7 @@
3
3
  */
4
4
 
5
5
  /* components/heading.css */
6
- @layer config {
6
+ @layer tokens {
7
7
  :root {
8
8
  --heading-gap: var(--spacing-xs);
9
9
  --heading-margin-block-end: var(--spacing-fluid-md);
package/dist/css/components/hero.css CHANGED
@@ -3,7 +3,7 @@
3
3
  */
4
4
 
5
5
  /* components/hero.css */
6
- @layer config {
6
+ @layer tokens {
7
7
  :root {
8
8
  --hero-color-background: var(--color-background);
9
9
  --hero-color-link: var(--color-text);
package/dist/css/components/item.css CHANGED
@@ -3,7 +3,7 @@
3
3
  */
4
4
 
5
5
  /* components/item.css */
6
- @layer config {
6
+ @layer tokens {
7
7
  :root {
8
8
  --item-border-radius: var(--radius-surface);
9
9
  --item-border-style: var(--border-style-normal);
package/dist/css/components/items.css CHANGED
@@ -3,7 +3,7 @@
3
3
  */
4
4
 
5
5
  /* components/items.css */
6
- @layer config {
6
+ @layer tokens {
7
7
  :root {
8
8
  --items-cols: auto-fill;
9
9
  --items-gap: var(--gap);
package/dist/css/components/link.css CHANGED
@@ -3,7 +3,7 @@
3
3
  */
4
4
 
5
5
  /* components/link.css */
6
- @layer config {
6
+ @layer tokens {
7
7
  :root {
8
8
  --link-color-text-decoration: initial;
9
9
  --link-color-text-decoration-hover: transparent;
package/dist/css/components/list.css CHANGED
@@ -3,7 +3,7 @@
3
3
  */
4
4
 
5
5
  /* components/list.css */
6
- @layer config {
6
+ @layer tokens {
7
7
  :root {
8
8
  --list-item-font-size: var(--font-size-sm);
9
9
  --list-item-gap: var(--spacing-2xs);
package/dist/css/components/logo.css CHANGED
@@ -3,7 +3,7 @@
3
3
  */
4
4
 
5
5
  /* components/logo.css */
6
- @layer config {
6
+ @layer tokens {
7
7
  :root {
8
8
  --logo-color: var(--color-text);
9
9
  --logo-font-family: var(--font-family-heading);
package/dist/css/components/map.css CHANGED
@@ -3,7 +3,7 @@
3
3
  */
4
4
 
5
5
  /* components/map.css */
6
- @layer config {
6
+ @layer tokens {
7
7
  :root {
8
8
  --map-color-background: var(--color-background-muted);
9
9
  --map-margin-block: var(--spacing-md);
package/dist/css/components/media.css CHANGED
@@ -3,7 +3,7 @@
3
3
  */
4
4
 
5
5
  /* components/media.css */
6
- @layer config {
6
+ @layer tokens {
7
7
  :root {
8
8
  --media-color-background: var(--color-background-media);
9
9
  --media-ratio: var(--ratio-video);
package/dist/css/components/modal.css CHANGED
@@ -3,7 +3,7 @@
3
3
  */
4
4
 
5
5
  /* components/modal.css */
6
- @layer config {
6
+ @layer tokens {
7
7
  :root {
8
8
  --modal-backdrop-blur: var(--blur-backdrop);
9
9
  --modal-backdrop-color: var(--color-backdrop);
package/dist/css/components/nav.css CHANGED
@@ -3,7 +3,7 @@
3
3
  */
4
4
 
5
5
  /* components/nav.css */
6
- @layer config {
6
+ @layer tokens {
7
7
  :root {
8
8
  --nav-color-text: var(--color-link);
9
9
  --nav-color-text-active: var(--color-link-active);
package/dist/css/components/pagination.css CHANGED
@@ -3,7 +3,7 @@
3
3
  */
4
4
 
5
5
  /* components/pagination.css */
6
- @layer config {
6
+ @layer tokens {
7
7
  :root {
8
8
  --pagination-disabled-opacity: var(--opacity-disabled);
9
9
  --pagination-gap: var(--spacing-2xs);
package/dist/css/components/surtitle.css CHANGED
@@ -3,7 +3,7 @@
3
3
  */
4
4
 
5
5
  /* components/surtitle.css */
6
- @layer config {
6
+ @layer tokens {
7
7
  :root {
8
8
  --surtitle-border-radius: 0;
9
9
  --surtitle-border-width: 0;
package/dist/css/components/table.css CHANGED
@@ -3,7 +3,7 @@
3
3
  */
4
4
 
5
5
  /* components/table.css */
6
- @layer config {
6
+ @layer tokens {
7
7
  :root {
8
8
  --table-cell-padding-inline: var(--spacing-sm);
9
9
  --table-cell-padding-block: var(--spacing-xs);
package/dist/css/index.css CHANGED
@@ -1,26 +1,26 @@
1
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/drawer.css';
10
- @import 'component/dropdown.css';
11
- @import 'component/embed.css';
12
- @import 'component/figure.css';
13
- @import 'component/heading.css';
14
- @import 'component/hero.css';
15
- @import 'component/item.css';
16
- @import 'component/items.css';
17
- @import 'component/link.css';
18
- @import 'component/list.css';
19
- @import 'component/logo.css';
20
- @import 'component/map.css';
21
- @import 'component/media.css';
22
- @import 'component/modal.css';
23
- @import 'component/nav.css';
24
- @import 'component/pagination.css';
25
- @import 'component/surtitle.css';
26
- @import 'component/table.css';
2
+ @import 'components/alert.css';
3
+ @import 'components/badge.css';
4
+ @import 'components/breadcrumb.css';
5
+ @import 'components/button.css';
6
+ @import 'components/card.css';
7
+ @import 'components/container.css';
8
+ @import 'components/details.css';
9
+ @import 'components/drawer.css';
10
+ @import 'components/dropdown.css';
11
+ @import 'components/embed.css';
12
+ @import 'components/figure.css';
13
+ @import 'components/heading.css';
14
+ @import 'components/hero.css';
15
+ @import 'components/item.css';
16
+ @import 'components/items.css';
17
+ @import 'components/link.css';
18
+ @import 'components/list.css';
19
+ @import 'components/logo.css';
20
+ @import 'components/map.css';
21
+ @import 'components/media.css';
22
+ @import 'components/modal.css';
23
+ @import 'components/nav.css';
24
+ @import 'components/pagination.css';
25
+ @import 'components/surtitle.css';
26
+ @import 'components/table.css';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uncinq/component-tokens",
3
- "version": "1.0.1",
3
+ "version": "1.1.0",
4
4
  "description": "Framework-agnostic CSS design tokens — component layers.",
5
5
  "license": "MIT",
6
6
  "repository": {
package/tokens/components/button.json CHANGED
@@ -31,7 +31,7 @@
31
31
  "$type": "color"
32
32
  },
33
33
  "hover": {
34
- "$value": "{color.brand.default}",
34
+ "$value": "{color.brand.hover}",
35
35
  "$type": "color"
36
36
  }
37
37
  },