@uncinq/component-tokens 0.4.0 → 1.0.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 (74) hide show
  1. package/README.md +107 -55
  2. package/{tokens/component → dist/css/components}/alert.css +5 -1
  3. package/{tokens/component → dist/css/components}/badge.css +8 -4
  4. package/{tokens/component → dist/css/components}/breadcrumb.css +9 -12
  5. package/dist/css/components/button.css +36 -0
  6. package/dist/css/components/card.css +31 -0
  7. package/dist/css/components/container.css +23 -0
  8. package/dist/css/components/details.css +26 -0
  9. package/dist/css/components/drawer.css +26 -0
  10. package/dist/css/components/dropdown.css +30 -0
  11. package/dist/css/components/embed.css +17 -0
  12. package/dist/css/components/figure.css +13 -0
  13. package/dist/css/components/heading.css +11 -0
  14. package/dist/css/components/hero.css +20 -0
  15. package/dist/css/components/item.css +44 -0
  16. package/dist/css/components/items.css +13 -0
  17. package/{tokens/component → dist/css/components}/link.css +6 -2
  18. package/dist/css/components/list.css +15 -0
  19. package/dist/css/components/logo.css +16 -0
  20. package/dist/css/components/map.css +13 -0
  21. package/dist/css/components/media.css +11 -0
  22. package/dist/css/components/modal.css +22 -0
  23. package/dist/css/components/nav.css +21 -0
  24. package/dist/css/components/pagination.css +26 -0
  25. package/dist/css/components/surtitle.css +21 -0
  26. package/dist/css/components/table.css +15 -0
  27. package/package.json +19 -8
  28. package/tokens/components/alert.json +26 -0
  29. package/tokens/components/badge.json +42 -0
  30. package/tokens/components/breadcrumb.json +56 -0
  31. package/tokens/components/button.json +138 -0
  32. package/tokens/components/card.json +108 -0
  33. package/tokens/components/container.json +66 -0
  34. package/tokens/components/details.json +90 -0
  35. package/tokens/components/drawer.json +78 -0
  36. package/tokens/components/dropdown.json +105 -0
  37. package/tokens/components/embed.json +40 -0
  38. package/tokens/components/figure.json +24 -0
  39. package/tokens/components/heading.json +14 -0
  40. package/tokens/components/hero.json +56 -0
  41. package/tokens/components/item.json +176 -0
  42. package/tokens/components/items.json +20 -0
  43. package/tokens/components/link.json +24 -0
  44. package/tokens/components/list.json +36 -0
  45. package/tokens/components/logo.json +34 -0
  46. package/tokens/components/map.json +26 -0
  47. package/tokens/components/media.json +14 -0
  48. package/tokens/components/modal.json +62 -0
  49. package/tokens/components/nav.json +62 -0
  50. package/tokens/components/pagination.json +86 -0
  51. package/tokens/components/surtitle.json +58 -0
  52. package/tokens/components/table.json +36 -0
  53. package/tokens/component/button.css +0 -54
  54. package/tokens/component/card.css +0 -42
  55. package/tokens/component/container.css +0 -26
  56. package/tokens/component/details.css +0 -20
  57. package/tokens/component/drawer.css +0 -31
  58. package/tokens/component/dropdown.css +0 -38
  59. package/tokens/component/embed.css +0 -20
  60. package/tokens/component/figure.css +0 -9
  61. package/tokens/component/heading.css +0 -11
  62. package/tokens/component/hero.css +0 -25
  63. package/tokens/component/item.css +0 -58
  64. package/tokens/component/items.css +0 -9
  65. package/tokens/component/list.css +0 -15
  66. package/tokens/component/logo.css +0 -15
  67. package/tokens/component/map.css +0 -9
  68. package/tokens/component/media.css +0 -7
  69. package/tokens/component/modal.css +0 -25
  70. package/tokens/component/nav.css +0 -22
  71. package/tokens/component/pagination.css +0 -31
  72. package/tokens/component/surtitle.css +0 -17
  73. package/tokens/component/table.css +0 -11
  74. /package/{tokens → dist/css}/index.css +0 -0
package/tokens/component/item.css DELETED
@@ -1,58 +0,0 @@
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
- /* Content */
31
- --item-gap: var(--spacing-sm);
32
- --item-order: none;
33
- --item-padding-x: var(--spacing-card);
34
- --item-padding-y: var(--spacing-card);
35
-
36
- /* Media */
37
- --item-media-color-bg: var(--media-color-bg);
38
- --item-media-order: -2;
39
- --item-media-ratio: var(--media-ratio);
40
-
41
- /* Metas */
42
- --item-metas-color-bg: var(--item-color-bg);
43
- --item-metas-border: var(--border-width-normal) var(--border-style-solid) var(--color-border);
44
- --item-metas-border-end: 0;
45
- --item-metas-border-start: 0;
46
- --item-metas-font-size: var(--font-size-2xs);
47
- --item-metas-order: -1;
48
- --item-metas-padding-x: var(--spacing-card);
49
- --item-metas-padding-y: var(--spacing-card) 0;
50
-
51
- /* Shadow */
52
- --item-shadow: var(--shadow-sm);
53
- --item-shadow-hover: var(--shadow-md);
54
-
55
- /* Transition */
56
- --item-transition: box-shadow var(--duration-normal) var(--easing-default);
57
- }
58
- }
package/tokens/component/items.css DELETED
@@ -1,9 +0,0 @@
1
- /* tokens/component/items.css */
2
- @layer config {
3
- :root {
4
- --items-cols: auto-fill;
5
- --items-gap: var(--gap);
6
- --items-max-width: 100%;
7
- --items-min-width: 30ch;
8
- }
9
- }
package/tokens/component/list.css DELETED
@@ -1,15 +0,0 @@
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
- }
package/tokens/component/logo.css DELETED
@@ -1,15 +0,0 @@
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-family-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
- }
package/tokens/component/map.css DELETED
@@ -1,9 +0,0 @@
1
- /* tokens/component/map.css */
2
- @layer config {
3
- :root {
4
- --map-color-bg: var(--color-bg-muted);
5
- --map-margin-block: var(--spacing-md);
6
- --map-ratio: var(--ratio-21-9);
7
- --map-ratio-mobile: var(--ratio-4-3);
8
- }
9
- }
package/tokens/component/media.css DELETED
@@ -1,7 +0,0 @@
1
- /* tokens/component/media.css */
2
- @layer config {
3
- :root {
4
- --media-color-bg: var(--color-bg-media);
5
- --media-ratio: var(--ratio-16-9);
6
- }
7
- }
package/tokens/component/modal.css DELETED
@@ -1,25 +0,0 @@
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 DELETED
@@ -1,22 +0,0 @@
1
- /* tokens/component/nav.css */
2
- @layer config {
3
- :root {
4
- /* Colors */
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
- --nav-color-text-muted: var(--color-text-muted);
9
-
10
- /* Layout */
11
- --nav-gap: 0;
12
- --nav-margin-x: 0;
13
- --nav-margin-y: 0;
14
- --nav-padding-x: var(--spacing-xs);
15
- --nav-padding-y: var(--spacing-xs);
16
-
17
- /* Typography */
18
- --nav-font-size: var(--font-size-text);
19
- --nav-font-size-title: var(--font-size-md);
20
- --nav-font-weight-title: var(--font-weight-heading);
21
- }
22
- }
package/tokens/component/pagination.css DELETED
@@ -1,31 +0,0 @@
1
- /* tokens/component/pagination.css */
2
- @layer config {
3
- :root {
4
- /* Layout */
5
- --pagination-gap: var(--spacing-2xs);
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
- /* Icons */
25
- --pagination-icon-size: var(--icon-size);
26
- --pagination-icon-first: var(--icon-arrow-skip);
27
- --pagination-icon-last: var(--icon-arrow-skip);
28
- --pagination-icon-next: var(--icon-arrow);
29
- --pagination-icon-previous: var(--icon-arrow);
30
- }
31
- }
package/tokens/component/surtitle.css DELETED
@@ -1,17 +0,0 @@
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-margin-block: 0 var(--spacing-2xs);
14
- --surtitle-padding: 0;
15
- --surtitle-text-transform: uppercase;
16
- }
17
- }
package/tokens/component/table.css DELETED
@@ -1,11 +0,0 @@
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 → dist/css}/index.css RENAMED
File without changes