@uncinq/component-tokens 0.1.1 → 0.1.3

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 (7) hide show
  1. package/package.json +1 -1
  2. package/tokens/component/button.css +6 -5
  3. package/tokens/component/details.css +6 -3
  4. package/tokens/component/dropdown.css +6 -2
  5. package/tokens/component/modal.css +25 -0
  6. package/tokens/component/nav.css +3 -3
  7. package/tokens/component/offcanvas.css +6 -5
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uncinq/component-tokens",
3
- "version": "0.1.1",
3
+ "version": "0.1.3",
4
4
  "description": "Framework-agnostic CSS design tokens — component layers.",
5
5
  "license": "MIT",
6
6
  "repository": {
package/tokens/component/button.css CHANGED
@@ -8,11 +8,12 @@
8
8
  --btn-border-width: var(--border-width-normal);
9
9
 
10
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);
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-border-hover: var(--color-brand);
15
+ --btn-color-text: var(--color-text-on-brand);
16
+ --btn-color-text-hover: var(--color-text-on-brand);
16
17
 
17
18
  /* Typography */
18
19
  --btn-font-size: var(--font-size-sm);
package/tokens/component/details.css CHANGED
@@ -1,15 +1,18 @@
1
1
  /* tokens/component/details.css */
2
2
  @layer config {
3
3
  :root {
4
- --details-color-bg: var(--color-bg);
5
- --details-color-border: var(--color-border);
6
4
  --details-border: var(--border-width-normal) var(--border-style-solid) var(--details-color-border);
7
5
  --details-border-radius: var(--radius-surface);
8
6
  --details-box-shadow: var(--shadow-sm);
9
7
  --details-box-shadow-hover: var(--shadow-center-md);
8
+ --details-color-bg: var(--color-bg);
9
+ --details-color-border: var(--color-border);
10
+ --details-color-border-open: var(--color-active);
11
+ --details-icon: var(--icon-chevron);
12
+ --details-icon-size: var(--size-16);
13
+ --details-margin: var(--spacing-sm);
10
14
  --details-padding: var(--spacing-sm);
11
15
  --details-summary-font-size: var(--font-size-md);
12
16
  --details-summary-font-weight: var(--font-weight-heading);
13
- --details-color-border-open: var(--color-active);
14
17
  }
15
18
  }
package/tokens/component/dropdown.css CHANGED
@@ -3,8 +3,8 @@
3
3
  :root {
4
4
 
5
5
  /* Colors — panel */
6
- --dropdown-color-bg: var(--color-bg);
7
- --dropdown-color-text: var(--color-text);
6
+ --dropdown-color-bg: var(--color-bg-surface);
7
+ --dropdown-color-text: var(--color-text-on-surface);
8
8
  --dropdown-color-border: var(--color-border);
9
9
 
10
10
  /* Layout */
@@ -25,6 +25,10 @@
25
25
  --dropdown-item-font-size: var(--font-size-xs);
26
26
  --dropdown-item-padding: var(--spacing-2xs);
27
27
 
28
+ /* Icon */
29
+ --dropdown-icon: var(--icon-chevron);
30
+ --dropdown-icon-size: var(--size-16);
31
+
28
32
  /* Transition — read by JS via getComputedStyle */
29
33
  --dropdown-transition-duration: var(--duration-fast);
30
34
  --dropdown-transition-easing: var(--easing-out);
package/tokens/component/modal.css ADDED
@@ -0,0 +1,25 @@
1
+ /* tokens/component/modal.css */
2
+ @layer config {
3
+ :root {
4
+ /* Colors */
5
+ --modal-color-bg: var(--color-bg-surface);
6
+ --modal-color-text: var(--color-text-on-surface);
7
+ --modal-color-border: var(--color-border);
8
+
9
+ /* Backdrop */
10
+ --modal-backdrop-blur: var(--blur-backdrop);
11
+ --modal-backdrop-color: var(--color-backdrop);
12
+
13
+ /* Layout */
14
+ --modal-max-height: none;
15
+ --modal-max-width: 30rem;
16
+ --modal-padding: var(--spacing-surface);
17
+ --modal-shadow: var(--shadow-surface);
18
+ --modal-radius: var(--radius-surface);
19
+ --modal-z-index: var(--z-index-modal);
20
+
21
+ /* Transition */
22
+ --modal-transition-duration: var(--duration-slow);
23
+ --modal-transition-easing: var(--easing-out-expo);
24
+ }
25
+ }
package/tokens/component/nav.css CHANGED
@@ -2,9 +2,9 @@
2
2
  @layer config {
3
3
  :root {
4
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);
5
+ --nav-color-text: var(--color-link);
6
+ --nav-color-text-hover: var(--color-link-hover);
7
+ --nav-color-text-active: var(--color-link-active);
8
8
  --nav-color-text-muted: var(--color-text-muted);
9
9
 
10
10
  /* Layout */
package/tokens/component/offcanvas.css CHANGED
@@ -2,12 +2,13 @@
2
2
  @layer config {
3
3
  :root {
4
4
  /* Colors */
5
- --offcanvas-color-bg: var(--color-bg);
6
- --offcanvas-color-text: var(--color-text);
5
+ --offcanvas-color-bg: var(--color-bg-surface);
6
+ --offcanvas-color-text: var(--color-text-on-surface);
7
7
  --offcanvas-color-border: var(--color-border);
8
8
 
9
9
  /* Backdrop */
10
- --offcanvas-backdrop-color: rgb(0 0 0 / 0.5);
10
+ --offcanvas-backdrop-blur: var(--blur-backdrop);
11
+ --offcanvas-backdrop-color: var(--color-backdrop);
11
12
 
12
13
  /* Position */
13
14
  --offcanvas-bottom: 0;
@@ -20,8 +21,8 @@
20
21
  --offcanvas-width: 320px;
21
22
  --offcanvas-height: 50vh;
22
23
  --offcanvas-padding: var(--spacing-surface);
23
- --offcanvas-shadow: var(--shadow-sm);
24
- --offcanvas-z-index: 200;
24
+ --offcanvas-shadow: var(--shadow-surface);
25
+ --offcanvas-z-index: var(--z-index-offcanvas);
25
26
 
26
27
  /* Transition — read by JS via getComputedStyle */
27
28
  --offcanvas-transition-duration: var(--duration-slow);