@inchurch/matcha-theme 21.3.3 → 22.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 (93) hide show
  1. package/abstracts/_colors.scss +236 -229
  2. package/abstracts/_elevation.scss +108 -108
  3. package/abstracts/_functions.scss +321 -321
  4. package/abstracts/_media-breakpoint.scss +26 -26
  5. package/abstracts/_theme-api.scss +219 -219
  6. package/abstracts/_typography.scss +128 -128
  7. package/base/_reset.scss +445 -432
  8. package/components/app-page-header.scss +260 -260
  9. package/components/matcha-accordion.scss +293 -293
  10. package/components/matcha-audio-player.scss +31 -31
  11. package/components/matcha-autocomplete.scss +145 -145
  12. package/components/matcha-avatar.scss +440 -301
  13. package/components/matcha-badge.scss +120 -120
  14. package/components/matcha-breadcrumb.scss +231 -231
  15. package/components/matcha-button-toggle.scss +384 -384
  16. package/components/matcha-buttons.scss +913 -913
  17. package/components/matcha-calendar.scss +218 -218
  18. package/components/matcha-cards.scss +230 -230
  19. package/components/matcha-chart-card.scss +53 -53
  20. package/components/matcha-checkbox.scss +255 -255
  21. package/components/matcha-chip.scss +292 -292
  22. package/components/matcha-color-pick.scss +34 -34
  23. package/components/matcha-command-palette.scss +316 -316
  24. package/components/matcha-crop.scss +406 -406
  25. package/components/matcha-date.scss +81 -81
  26. package/components/matcha-divider.scss +100 -100
  27. package/components/matcha-draggable.scss +23 -23
  28. package/components/matcha-drawer.scss +376 -376
  29. package/components/matcha-drop-image.scss +14 -14
  30. package/components/matcha-drop-list.scss +430 -430
  31. package/components/matcha-emoji.scss +69 -69
  32. package/components/matcha-empty-state.scss +230 -230
  33. package/components/matcha-file-uploader.scss +471 -471
  34. package/components/matcha-flag.scss +103 -103
  35. package/components/matcha-footer.scss +91 -91
  36. package/components/matcha-form-field.scss +606 -606
  37. package/components/matcha-form-section.scss +100 -100
  38. package/components/matcha-header.scss +135 -135
  39. package/components/matcha-highlight.scss +164 -164
  40. package/components/matcha-hint-text.scss +90 -90
  41. package/components/matcha-horizontal-tree.scss +316 -316
  42. package/components/matcha-icon.scss +98 -98
  43. package/components/matcha-image.scss +61 -61
  44. package/components/matcha-list.scss +211 -211
  45. package/components/matcha-menu.scss +99 -99
  46. package/components/matcha-modal.scss +210 -210
  47. package/components/matcha-nav.scss +581 -581
  48. package/components/matcha-notification.scss +413 -413
  49. package/components/matcha-option.scss +170 -170
  50. package/components/matcha-page-builder.scss +4196 -4196
  51. package/components/matcha-paginator.scss +689 -689
  52. package/components/matcha-panel.scss +194 -194
  53. package/components/matcha-profile-card.scss +50 -50
  54. package/components/matcha-progress-bar.scss +313 -313
  55. package/components/matcha-radio.scss +320 -320
  56. package/components/matcha-ripple.scss +7 -7
  57. package/components/matcha-scrollbar.scss +33 -33
  58. package/components/matcha-scrollbox-shadow.scss +120 -120
  59. package/components/matcha-section.scss +102 -102
  60. package/components/matcha-select-multiple.scss +56 -56
  61. package/components/matcha-select.scss +667 -667
  62. package/components/matcha-skeleton.scss +155 -155
  63. package/components/matcha-slide-toggle.scss +369 -369
  64. package/components/matcha-slider.scss +285 -285
  65. package/components/matcha-snack-bar.scss +259 -259
  66. package/components/matcha-spin.scss +164 -164
  67. package/components/matcha-spinner.scss +97 -97
  68. package/components/matcha-status-pill.scss +38 -18
  69. package/components/matcha-stepper.scss +376 -376
  70. package/components/matcha-table-cell.scss +74 -41
  71. package/components/matcha-table.scss +579 -578
  72. package/components/matcha-tabs.scss +600 -600
  73. package/components/matcha-text-editor.scss +105 -105
  74. package/components/matcha-time.scss +33 -33
  75. package/components/matcha-timepicker.scss +13 -13
  76. package/components/matcha-toolbar.scss +359 -359
  77. package/components/matcha-tooltip.scss +224 -224
  78. package/components/matcha-tree-view.scss +257 -212
  79. package/layout/matcha-page-layout.scss +778 -778
  80. package/main.scss +329 -329
  81. package/package.json +1 -1
  82. package/tokens/_animations-tokens.scss +37 -37
  83. package/tokens/_breakpoints-tokens.scss +35 -35
  84. package/tokens/_color-tokens.scss +274 -261
  85. package/tokens/_elevation-tokens.scss +33 -33
  86. package/tokens/_emit-tokens.scss +324 -324
  87. package/tokens/_material-palette.scss +1149 -1149
  88. package/tokens/_primitives.scss +98 -98
  89. package/tokens/_semantic-aliases.scss +120 -120
  90. package/tokens/_spacing-tokens.scss +94 -94
  91. package/tokens/_static-tokens.scss +137 -137
  92. package/tokens/_typography-tokens.scss +65 -65
  93. package/vendors/charts.scss +90 -90
package/components/matcha-badge.scss CHANGED
@@ -1,120 +1,120 @@
1
- // =============================================================================
2
- // matcha-badge.scss — Badge component (Dot, Count, Label)
3
- // Aligned with Figma matcha/badge: Tipo(3) × Cor(5) = 13 variants
4
- // =============================================================================
5
-
6
- // ── Structural ──────────────────────────────────────────────────────────────
7
-
8
- .matcha-badge-container {
9
- position: relative;
10
- display: inline-flex;
11
- }
12
-
13
- .matcha-badge {
14
- position: absolute;
15
- z-index: 1;
16
- display: inline-flex;
17
- align-items: center;
18
- justify-content: center;
19
- font-weight: var(--matcha-weight-bold, 700);
20
- white-space: nowrap;
21
- pointer-events: none;
22
- border-radius: var(--matcha-radius-pill, 9999px);
23
- animation: matcha-badge-in 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
24
-
25
- // Default position: top-right (offset negativo = -space-050 / -4px)
26
- top: calc(-1 * var(--matcha-space-050, 4px));
27
- right: calc(-1 * var(--matcha-space-050, 4px));
28
-
29
- &.matcha-badge--top-left { top: calc(-1 * var(--matcha-space-050, 4px)); right: auto; left: calc(-1 * var(--matcha-space-050, 4px)); }
30
- &.matcha-badge--bottom-right { top: auto; bottom: calc(-1 * var(--matcha-space-050, 4px)); right: calc(-1 * var(--matcha-space-050, 4px)); }
31
- &.matcha-badge--bottom-left { top: auto; bottom: calc(-1 * var(--matcha-space-050, 4px)); right: auto; left: calc(-1 * var(--matcha-space-050, 4px)); }
32
- }
33
-
34
- // ── Dot ──
35
- .matcha-badge--dot {
36
- width: var(--matcha-badge-dot-size, 10px);
37
- height: var(--matcha-badge-dot-size, 10px);
38
- border-width: var(--matcha-border-thin, 2px);
39
- border-style: solid;
40
- }
41
-
42
- // ── Count — Figma Tipo=Count: 20×20 pad 1/4, text 11/400/14 (caption)
43
- .matcha-badge--count {
44
- min-width: var(--matcha-space-250, 20px);
45
- height: var(--matcha-space-250, 20px);
46
- padding: 1px var(--matcha-space-050, 4px);
47
- font-size: var(--matcha-text-p-tiny, 11px);
48
- line-height: var(--matcha-leading-p-tiny, 14px);
49
- font-weight: var(--matcha-weight-regular, 400);
50
- letter-spacing: 0;
51
- border-width: var(--matcha-border-thin, 2px);
52
- border-style: solid;
53
- }
54
-
55
- // ── Label — Figma Tipo=Label: pad 2/8, text 11/400/14 (caption)
56
- .matcha-badge--label {
57
- position: static;
58
- padding: var(--matcha-space-025, 2px) var(--matcha-space-100, 8px);
59
- font-size: var(--matcha-text-p-tiny, 11px);
60
- line-height: var(--matcha-leading-p-tiny, 14px);
61
- font-weight: var(--matcha-weight-regular, 400);
62
- gap: var(--matcha-space-050, 4px);
63
- }
64
-
65
- // ── Inline ──
66
- .matcha-badge--inline {
67
- position: static;
68
- }
69
-
70
- // ── Hidden ──
71
- .matcha-badge--hidden {
72
- display: none;
73
- }
74
-
75
- // ── Animation ──
76
- @keyframes matcha-badge-in {
77
- 0% { transform: scale(0); }
78
- 60% { transform: scale(1.2); }
79
- 100% { transform: scale(1); }
80
- }
81
-
82
- @media (prefers-reduced-motion: reduce) {
83
- .matcha-badge { animation: none; }
84
- }
85
-
86
- // =============================================================================
87
- // Theme mixin
88
- // =============================================================================
89
-
90
- @mixin matcha-badge-theme($theme) {
91
- .matcha-badge--accent {
92
- background-color: var(--matcha-color-badge-bg, var(--matcha-color-accent));
93
- color: var(--matcha-color-badge-fg, var(--matcha-color-accent-contrast));
94
- }
95
-
96
- .matcha-badge--danger {
97
- background-color: var(--matcha-color-badge-danger-bg, var(--matcha-color-danger));
98
- color: var(--matcha-color-badge-danger-fg, var(--matcha-color-danger-contrast));
99
- }
100
-
101
- .matcha-badge--warn {
102
- background-color: var(--matcha-color-badge-warn-bg, var(--matcha-color-warn));
103
- color: var(--matcha-color-badge-warn-fg, var(--matcha-color-warn-contrast));
104
- }
105
-
106
- .matcha-badge--success {
107
- background-color: var(--matcha-color-badge-success-bg, var(--matcha-color-success));
108
- color: var(--matcha-color-badge-success-fg, var(--matcha-color-success-contrast));
109
- }
110
-
111
- .matcha-badge--info {
112
- background-color: var(--matcha-color-badge-info-bg, var(--matcha-color-info));
113
- color: var(--matcha-color-badge-info-fg, var(--matcha-color-info-contrast));
114
- }
115
-
116
- .matcha-badge--dot,
117
- .matcha-badge--count {
118
- border-color: var(--matcha-color-badge-border);
119
- }
120
- }
1
+ // =============================================================================
2
+ // matcha-badge.scss — Badge component (Dot, Count, Label)
3
+ // Aligned with Figma matcha/badge: Tipo(3) × Cor(5) = 13 variants
4
+ // =============================================================================
5
+
6
+ // ── Structural ──────────────────────────────────────────────────────────────
7
+
8
+ .matcha-badge-container {
9
+ position: relative;
10
+ display: inline-flex;
11
+ }
12
+
13
+ .matcha-badge {
14
+ position: absolute;
15
+ z-index: 1;
16
+ display: inline-flex;
17
+ align-items: center;
18
+ justify-content: center;
19
+ font-weight: var(--matcha-weight-bold, 700);
20
+ white-space: nowrap;
21
+ pointer-events: none;
22
+ border-radius: var(--matcha-radius-pill, 9999px);
23
+ animation: matcha-badge-in 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
24
+
25
+ // Default position: top-right (offset negativo = -space-050 / -4px)
26
+ top: calc(-1 * var(--matcha-space-050, 4px));
27
+ right: calc(-1 * var(--matcha-space-050, 4px));
28
+
29
+ &.matcha-badge--top-left { top: calc(-1 * var(--matcha-space-050, 4px)); right: auto; left: calc(-1 * var(--matcha-space-050, 4px)); }
30
+ &.matcha-badge--bottom-right { top: auto; bottom: calc(-1 * var(--matcha-space-050, 4px)); right: calc(-1 * var(--matcha-space-050, 4px)); }
31
+ &.matcha-badge--bottom-left { top: auto; bottom: calc(-1 * var(--matcha-space-050, 4px)); right: auto; left: calc(-1 * var(--matcha-space-050, 4px)); }
32
+ }
33
+
34
+ // ── Dot ──
35
+ .matcha-badge--dot {
36
+ width: var(--matcha-badge-dot-size, 10px);
37
+ height: var(--matcha-badge-dot-size, 10px);
38
+ border-width: var(--matcha-border-thin, 2px);
39
+ border-style: solid;
40
+ }
41
+
42
+ // ── Count — Figma Tipo=Count: 20×20 pad 1/4, text 11/400/14 (caption)
43
+ .matcha-badge--count {
44
+ min-width: var(--matcha-space-250, 20px);
45
+ height: var(--matcha-space-250, 20px);
46
+ padding: 1px var(--matcha-space-050, 4px);
47
+ font-size: var(--matcha-text-p-tiny, 11px);
48
+ line-height: var(--matcha-leading-p-tiny, 14px);
49
+ font-weight: var(--matcha-weight-regular, 400);
50
+ letter-spacing: 0;
51
+ border-width: var(--matcha-border-thin, 2px);
52
+ border-style: solid;
53
+ }
54
+
55
+ // ── Label — Figma Tipo=Label: pad 2/8, text 11/400/14 (caption)
56
+ .matcha-badge--label {
57
+ position: static;
58
+ padding: var(--matcha-space-025, 2px) var(--matcha-space-100, 8px);
59
+ font-size: var(--matcha-text-p-tiny, 11px);
60
+ line-height: var(--matcha-leading-p-tiny, 14px);
61
+ font-weight: var(--matcha-weight-regular, 400);
62
+ gap: var(--matcha-space-050, 4px);
63
+ }
64
+
65
+ // ── Inline ──
66
+ .matcha-badge--inline {
67
+ position: static;
68
+ }
69
+
70
+ // ── Hidden ──
71
+ .matcha-badge--hidden {
72
+ display: none;
73
+ }
74
+
75
+ // ── Animation ──
76
+ @keyframes matcha-badge-in {
77
+ 0% { transform: scale(0); }
78
+ 60% { transform: scale(1.2); }
79
+ 100% { transform: scale(1); }
80
+ }
81
+
82
+ @media (prefers-reduced-motion: reduce) {
83
+ .matcha-badge { animation: none; }
84
+ }
85
+
86
+ // =============================================================================
87
+ // Theme mixin
88
+ // =============================================================================
89
+
90
+ @mixin matcha-badge-theme($theme) {
91
+ .matcha-badge--accent {
92
+ background-color: var(--matcha-color-badge-bg, var(--matcha-color-accent));
93
+ color: var(--matcha-color-badge-fg, var(--matcha-color-accent-contrast));
94
+ }
95
+
96
+ .matcha-badge--danger {
97
+ background-color: var(--matcha-color-badge-danger-bg, var(--matcha-color-danger));
98
+ color: var(--matcha-color-badge-danger-fg, var(--matcha-color-danger-contrast));
99
+ }
100
+
101
+ .matcha-badge--warn {
102
+ background-color: var(--matcha-color-badge-warn-bg, var(--matcha-color-warn));
103
+ color: var(--matcha-color-badge-warn-fg, var(--matcha-color-warn-contrast));
104
+ }
105
+
106
+ .matcha-badge--success {
107
+ background-color: var(--matcha-color-badge-success-bg, var(--matcha-color-success));
108
+ color: var(--matcha-color-badge-success-fg, var(--matcha-color-success-contrast));
109
+ }
110
+
111
+ .matcha-badge--info {
112
+ background-color: var(--matcha-color-badge-info-bg, var(--matcha-color-info));
113
+ color: var(--matcha-color-badge-info-fg, var(--matcha-color-info-contrast));
114
+ }
115
+
116
+ .matcha-badge--dot,
117
+ .matcha-badge--count {
118
+ border-color: var(--matcha-color-badge-border);
119
+ }
120
+ }