@uncinq/component-tokens 1.0.2 → 1.1.0

package/README.md

@@ -97,13 +97,13 @@ The property mirrors the CSS property name, so the token reads the same way as t
 
 ## CSS cascade layers
 
-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:
+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:
 
 ```css
 @import '@uncinq/component-tokens';
 
 /* your project overrides — same layer, wins by source order */
-@layer config {
+@layer tokens {
   :root {
     --btn-color-background: var(--color-secondary);
     --hero-min-height: 80svh;
@@ -160,12 +160,12 @@ yarn add @uncinq/component-tokens
 
 ### CSS override (recommended)
 
-Re-declare any token inside `@layer config` after the import. Same layer, later source order wins:
+Re-declare any token inside `@layer tokens` after the import. Same layer, later source order wins:
 
 ```css
 @import '@uncinq/component-tokens';
 
-@layer config {
+@layer tokens {
   :root {
     --btn-color-background: var(--color-secondary);
     --btn-border-radius: 0;

package/dist/css/components/alert.css

@@ -3,7 +3,7 @@
  */
 
 /* components/alert.css */
-@layer config {
+@layer tokens {
   :root {
     --alert-border-radius: var(--radius-none);
     --alert-border-style: var(--border-style-normal);

package/dist/css/components/badge.css

@@ -3,7 +3,7 @@
  */
 
 /* components/badge.css */
-@layer config {
+@layer tokens {
   :root {
     --badge-border-radius: var(--radius-pill);
     --badge-border-style: solid;

package/dist/css/components/breadcrumb.css

@@ -3,7 +3,7 @@
  */
 
 /* components/breadcrumb.css */
-@layer config {
+@layer tokens {
   :root {
     --breadcrumb-border-style: var(--border-style-normal);
     --breadcrumb-border-width: var(--border-width-sm);

package/dist/css/components/button.css

@@ -3,7 +3,7 @@
  */
 
 /* components/button.css */
-@layer config {
+@layer tokens {
   :root {
     --btn-border-radius: var(--radius-control);
     --btn-border-style: var(--border-style-normal);
@@ -11,7 +11,7 @@
     --btn-color-background: var(--color-brand);
     --btn-color-background-hover: var(--color-brand-hover);
     --btn-color-border: var(--color-brand);
-    --btn-color-border-hover: var(--color-brand);
+    --btn-color-border-hover: var(--color-brand-hover);
     --btn-color-text: var(--color-text-on-brand);
     --btn-color-text-hover: var(--color-text-on-brand);
     --btn-color-text-decoration: transparent;

package/dist/css/components/card.css

@@ -3,7 +3,7 @@
  */
 
 /* components/card.css */
-@layer config {
+@layer tokens {
   :root {
     --card-border-radius: var(--item-border-radius);
     --card-border-style: var(--item-border-style);

package/dist/css/components/container.css

@@ -3,7 +3,7 @@
  */
 
 /* components/container.css */
-@layer config {
+@layer tokens {
   :root {
     --columns: 12;
     --container-max-width-mobile: 100%;

package/dist/css/components/details.css

@@ -3,7 +3,7 @@
  */
 
 /* components/details.css */
-@layer config {
+@layer tokens {
   :root {
     --details-border-radius: var(--radius-surface);
     --details-box-shadow: var(--shadow-sm);

package/dist/css/components/drawer.css

@@ -3,7 +3,7 @@
  */
 
 /* components/drawer.css */
-@layer config {
+@layer tokens {
   :root {
     --drawer-backdrop-blur: var(--blur-backdrop);
     --drawer-backdrop-color: var(--color-backdrop);

package/dist/css/components/dropdown.css

@@ -3,7 +3,7 @@
  */
 
 /* components/dropdown.css */
-@layer config {
+@layer tokens {
   :root {
     --dropdown-border-radius: var(--radius-surface);
     --dropdown-border-style: var(--border-style-normal);

package/dist/css/components/embed.css

@@ -3,7 +3,7 @@
  */
 
 /* components/embed.css */
-@layer config {
+@layer tokens {
   :root {
     --embed-border-radius: var(--radius-none);
     --embed-border-style: var(--border-style-normal);

package/dist/css/components/figure.css

@@ -3,7 +3,7 @@
  */
 
 /* components/figure.css */
-@layer config {
+@layer tokens {
   :root {
     --figure-figcaption-font-size: var(--font-size-sm);
     --figure-figcaption-gap: var(--spacing-xs);

package/dist/css/components/heading.css

@@ -3,7 +3,7 @@
  */
 
 /* components/heading.css */
-@layer config {
+@layer tokens {
   :root {
     --heading-gap: var(--spacing-xs);
     --heading-margin-block-end: var(--spacing-fluid-md);

package/dist/css/components/hero.css

@@ -3,7 +3,7 @@
  */
 
 /* components/hero.css */
-@layer config {
+@layer tokens {
   :root {
     --hero-color-background: var(--color-background);
     --hero-color-link: var(--color-text);

package/dist/css/components/item.css

@@ -3,7 +3,7 @@
  */
 
 /* components/item.css */
-@layer config {
+@layer tokens {
   :root {
     --item-border-radius: var(--radius-surface);
     --item-border-style: var(--border-style-normal);

package/dist/css/components/items.css

@@ -3,7 +3,7 @@
  */
 
 /* components/items.css */
-@layer config {
+@layer tokens {
   :root {
     --items-cols: auto-fill;
     --items-gap: var(--gap);

package/dist/css/components/link.css

@@ -3,7 +3,7 @@
  */
 
 /* components/link.css */
-@layer config {
+@layer tokens {
   :root {
     --link-color-text-decoration: initial;
     --link-color-text-decoration-hover: transparent;

package/dist/css/components/list.css

@@ -3,7 +3,7 @@
  */
 
 /* components/list.css */
-@layer config {
+@layer tokens {
   :root {
     --list-item-font-size: var(--font-size-sm);
     --list-item-gap: var(--spacing-2xs);

package/dist/css/components/logo.css

@@ -3,7 +3,7 @@
  */
 
 /* components/logo.css */
-@layer config {
+@layer tokens {
   :root {
     --logo-color: var(--color-text);
     --logo-font-family: var(--font-family-heading);

package/dist/css/components/map.css

@@ -3,7 +3,7 @@
  */
 
 /* components/map.css */
-@layer config {
+@layer tokens {
   :root {
     --map-color-background: var(--color-background-muted);
     --map-margin-block: var(--spacing-md);

package/dist/css/components/media.css

@@ -3,7 +3,7 @@
  */
 
 /* components/media.css */
-@layer config {
+@layer tokens {
   :root {
     --media-color-background: var(--color-background-media);
     --media-ratio: var(--ratio-video);

package/dist/css/components/modal.css

@@ -3,7 +3,7 @@
  */
 
 /* components/modal.css */
-@layer config {
+@layer tokens {
   :root {
     --modal-backdrop-blur: var(--blur-backdrop);
     --modal-backdrop-color: var(--color-backdrop);

package/dist/css/components/nav.css

@@ -3,7 +3,7 @@
  */
 
 /* components/nav.css */
-@layer config {
+@layer tokens {
   :root {
     --nav-color-text: var(--color-link);
     --nav-color-text-active: var(--color-link-active);

package/dist/css/components/pagination.css

@@ -3,7 +3,7 @@
  */
 
 /* components/pagination.css */
-@layer config {
+@layer tokens {
   :root {
     --pagination-disabled-opacity: var(--opacity-disabled);
     --pagination-gap: var(--spacing-2xs);

package/dist/css/components/surtitle.css

@@ -3,7 +3,7 @@
  */
 
 /* components/surtitle.css */
-@layer config {
+@layer tokens {
   :root {
     --surtitle-border-radius: 0;
     --surtitle-border-width: 0;

package/dist/css/components/table.css

@@ -3,7 +3,7 @@
  */
 
 /* components/table.css */
-@layer config {
+@layer tokens {
   :root {
     --table-cell-padding-inline: var(--spacing-sm);
     --table-cell-padding-block: var(--spacing-xs);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uncinq/component-tokens",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "Framework-agnostic CSS design tokens — component layers.",
   "license": "MIT",
   "repository": {

package/tokens/components/button.json

@@ -31,7 +31,7 @@
           "$type": "color" 
         },
         "hover":   { 
-          "$value": "{color.brand.default}", 
+          "$value": "{color.brand.hover}", 
           "$type": "color" 
         }
       },