@inchurch/matcha-theme 20.0.11 → 20.277.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 (116) hide show
  1. package/abstracts/_colors.scss +404 -404
  2. package/abstracts/_elevation.scss +102 -102
  3. package/abstracts/_functions.scss +1186 -1212
  4. package/abstracts/_media-breakpoint.scss +23 -23
  5. package/abstracts/_theme-api.scss +230 -0
  6. package/abstracts/_typography.scss +127 -127
  7. package/base/_reset.scss +438 -438
  8. package/components/app-page-header.scss +259 -0
  9. package/components/matcha-accordion.scss +293 -157
  10. package/components/matcha-audio-player.scss +1 -2
  11. package/components/matcha-autocomplete.scss +10 -11
  12. package/components/matcha-avatar.scss +173 -33
  13. package/components/matcha-badge.scss +15 -15
  14. package/components/matcha-breadcrumb.scss +231 -126
  15. package/components/matcha-button-toggle.scss +46 -2
  16. package/components/matcha-buttons.scss +908 -784
  17. package/components/matcha-calendar.scss +99 -35
  18. package/components/matcha-cards.scss +58 -33
  19. package/components/matcha-chart-card.scss +5 -12
  20. package/components/matcha-checkbox.scss +191 -490
  21. package/components/matcha-chip.scss +297 -212
  22. package/components/matcha-color-pick.scss +1 -2
  23. package/components/matcha-command-palette.scss +290 -63
  24. package/components/matcha-crop.scss +406 -172
  25. package/components/matcha-date.scss +81 -81
  26. package/components/matcha-divider.scss +86 -31
  27. package/components/matcha-draggable.scss +4 -5
  28. package/components/matcha-drawer.scss +207 -66
  29. package/components/matcha-drop-image.scss +14 -0
  30. package/components/matcha-drop-list.scss +87 -47
  31. package/components/matcha-emoji.scss +2 -2
  32. package/components/matcha-empty-state.scss +195 -83
  33. package/components/matcha-file-uploader.scss +462 -0
  34. package/components/matcha-flag.scss +93 -52
  35. package/components/matcha-footer.scss +67 -164
  36. package/components/matcha-form-field.scss +55 -3
  37. package/components/matcha-form-section.scss +100 -101
  38. package/components/matcha-header.scss +134 -325
  39. package/components/matcha-highlight.scss +65 -197
  40. package/components/matcha-hint-text.scss +25 -4
  41. package/components/matcha-horizontal-tree.scss +316 -317
  42. package/components/matcha-icon.scss +37 -45
  43. package/components/matcha-image.scss +2 -3
  44. package/components/matcha-list.scss +14 -15
  45. package/components/matcha-menu.scss +15 -2
  46. package/components/matcha-modal.scss +59 -86
  47. package/components/matcha-nav.scss +362 -231
  48. package/components/matcha-notification.scss +412 -197
  49. package/components/matcha-option.scss +98 -23
  50. package/components/matcha-page-builder.scss +16 -16
  51. package/components/matcha-paginator.scss +688 -235
  52. package/components/matcha-panel.scss +42 -27
  53. package/components/matcha-profile-card.scss +50 -50
  54. package/components/matcha-progress-bar.scss +257 -153
  55. package/components/matcha-radio.scss +244 -452
  56. package/components/matcha-scrollbar.scss +1 -2
  57. package/components/matcha-scrollbox-shadow.scss +120 -122
  58. package/components/matcha-section.scss +5 -9
  59. package/components/matcha-select-multiple.scss +56 -0
  60. package/components/matcha-select.scss +10 -10
  61. package/components/matcha-skeleton.scss +24 -7
  62. package/components/matcha-slide-toggle.scss +80 -301
  63. package/components/matcha-slider.scss +174 -77
  64. package/components/matcha-snack-bar.scss +123 -131
  65. package/components/matcha-spin.scss +12 -103
  66. package/components/matcha-spinner.scss +76 -57
  67. package/components/matcha-status-pill.scss +82 -0
  68. package/components/matcha-stepper.scss +376 -177
  69. package/components/matcha-table.scss +568 -785
  70. package/components/matcha-tabs.scss +622 -469
  71. package/components/matcha-text-editor.scss +78 -78
  72. package/components/matcha-time.scss +2 -2
  73. package/components/matcha-toolbar.scss +359 -206
  74. package/components/matcha-tooltip.scss +158 -62
  75. package/components/matcha-tree-view.scss +189 -0
  76. package/fonts/manrope/manrope-latin-ext.woff2 +0 -0
  77. package/fonts/manrope/manrope-latin.woff2 +0 -0
  78. package/layout/matcha-page-layout.scss +4 -4
  79. package/main.scss +237 -265
  80. package/package.json +1 -1
  81. package/tokens/_animations-tokens.scss +37 -37
  82. package/tokens/_breakpoints-tokens.scss +35 -26
  83. package/tokens/_color-tokens.scss +1149 -1152
  84. package/tokens/_css-custom-properties.scss +704 -568
  85. package/tokens/_primitives.scss +82 -0
  86. package/tokens/_semantic-aliases.scss +120 -0
  87. package/tokens/_spacing-tokens.scss +94 -94
  88. package/vendors/angular-editor.scss +56 -56
  89. package/vendors/angular-material-fixes.scss +297 -297
  90. package/vendors/charts.scss +92 -92
  91. package/vendors/ng5-slider.scss +56 -56
  92. package/vendors/ngx-material-timepicker.scss +50 -50
  93. package/components/matcha-uploader.scss +0 -215
  94. package/fonts/CircularStd-Black.eot +0 -0
  95. package/fonts/CircularStd-Black.svg +0 -3426
  96. package/fonts/CircularStd-Black.ttf +0 -0
  97. package/fonts/CircularStd-Black.woff +0 -0
  98. package/fonts/CircularStd-Black.woff2 +0 -0
  99. package/fonts/CircularStd-Bold.eot +0 -0
  100. package/fonts/CircularStd-Bold.otf +0 -0
  101. package/fonts/CircularStd-Bold.svg +0 -13532
  102. package/fonts/CircularStd-Bold.ttf +0 -0
  103. package/fonts/CircularStd-Bold.woff +0 -0
  104. package/fonts/CircularStd-Bold.woff2 +0 -0
  105. package/fonts/CircularStd-Medium.eot +0 -0
  106. package/fonts/CircularStd-Medium.otf +0 -0
  107. package/fonts/CircularStd-Medium.svg +0 -13511
  108. package/fonts/CircularStd-Medium.ttf +0 -0
  109. package/fonts/CircularStd-Medium.woff +0 -0
  110. package/fonts/CircularStd-Medium.woff2 +0 -0
  111. package/fonts/CircularStd-Regular.eot +0 -0
  112. package/fonts/CircularStd-Regular.otf +0 -0
  113. package/fonts/CircularStd-Regular.svg +0 -2378
  114. package/fonts/CircularStd-Regular.ttf +0 -0
  115. package/fonts/CircularStd-Regular.woff +0 -0
  116. package/fonts/CircularStd-Regular.woff2 +0 -0
package/components/matcha-text-editor.scss CHANGED
@@ -2,94 +2,94 @@
2
2
  matcha-text-editor .sun-editor,
3
3
  matcha-text-editor .sun-editor-editable {
4
4
  // ── Backgrounds ──────────────────────────────────────────────────────
5
- --se-main-background-color: #{getBackground($theme)};
6
- --se-edit-background-color: #{getSurface($theme)};
7
- --se-edit-background-pre: #{getBackground($theme)};
8
- --se-modal-background-color: #{getSurface($theme)};
9
- --se-controller-background-color: #{getSurface($theme)};
10
- --se-code-view-background-color: #{getBackground($theme)};
11
- --se-code-view-line-background-color: #{getSurface($theme)};
12
- --se-markdown-view-background-color: #{getBackground($theme)};
13
- --se-markdown-view-line-background-color:#{getSurface($theme)};
14
- --se-table-picker-color: #{getSurface($theme)};
15
- --se-doc-background: #{getBackground($theme)};
5
+ --se-main-background-color: var(--matcha-color-bg);
6
+ --se-edit-background-color: var(--matcha-color-surface);
7
+ --se-edit-background-pre: var(--matcha-color-bg);
8
+ --se-modal-background-color: var(--matcha-color-surface);
9
+ --se-controller-background-color: var(--matcha-color-surface);
10
+ --se-code-view-background-color: var(--matcha-color-bg);
11
+ --se-code-view-line-background-color: var(--matcha-color-surface);
12
+ --se-markdown-view-background-color: var(--matcha-color-bg);
13
+ --se-markdown-view-line-background-color:var(--matcha-color-surface);
14
+ --se-table-picker-color: var(--matcha-color-surface);
15
+ --se-doc-background: var(--matcha-color-bg);
16
16
 
17
17
  // ── Text / foreground ─────────────────────────────────────────────
18
- --se-main-color: #{getForeground($theme)};
19
- --se-main-font-color: #{getForeground($theme)};
20
- --se-main-color-lighter: #{getForegroundAlpha($theme)};
21
- --se-edit-font-color: #{getForeground($theme)};
22
- --se-edit-font-pre: #{getForegroundAlpha($theme)};
23
- --se-edit-font-quote: #{getForegroundAlpha($theme)};
24
- --se-modal-color: #{getForeground($theme)};
25
- --se-controller-color: #{getForeground($theme)};
26
- --se-dropdown-font-color: #{getForeground($theme)};
27
- --se-statusbar-font-color: #{getForegroundAlpha($theme)};
28
- --se-code-view-color: #{getForeground($theme)};
29
- --se-code-view-line-color: #{getForegroundAlpha($theme)};
30
- --se-markdown-view-color: #{getForeground($theme)};
31
- --se-markdown-view-line-color:#{getForegroundAlpha($theme)};
32
- --se-caret-color: #{getForeground($theme)};
33
- --se-placeholder-color: #{getDisabled($theme)};
18
+ --se-main-color: var(--matcha-color-fg);
19
+ --se-main-font-color: var(--matcha-color-fg);
20
+ --se-main-color-lighter: var(--matcha-color-fg-alpha);
21
+ --se-edit-font-color: var(--matcha-color-fg);
22
+ --se-edit-font-pre: var(--matcha-color-fg-alpha);
23
+ --se-edit-font-quote: var(--matcha-color-fg-alpha);
24
+ --se-modal-color: var(--matcha-color-fg);
25
+ --se-controller-color: var(--matcha-color-fg);
26
+ --se-dropdown-font-color: var(--matcha-color-fg);
27
+ --se-statusbar-font-color: var(--matcha-color-fg-alpha);
28
+ --se-code-view-color: var(--matcha-color-fg);
29
+ --se-code-view-line-color: var(--matcha-color-fg-alpha);
30
+ --se-markdown-view-color: var(--matcha-color-fg);
31
+ --se-markdown-view-line-color:var(--matcha-color-fg-alpha);
32
+ --se-caret-color: var(--matcha-color-fg);
33
+ --se-placeholder-color: var(--matcha-color-disabled);
34
34
 
35
35
  // ── Borders / dividers ────────────────────────────────────────────
36
- --se-main-border-color: #{getDisabled($theme)};
37
- --se-main-divider-color: #{getDisabled($theme)};
38
- --se-main-outline-color: #{getDisabled($theme)};
39
- --se-main-out-color: #{getDisabled($theme)};
40
- --se-main-shadow-color: #{getDisabled($theme)};
41
- --se-modal-border-color: #{getDisabled($theme)};
42
- --se-controller-border-color: #{getDisabled($theme)};
43
- --se-input-btn-border-color: #{getDisabled($theme)};
44
- --se-edit-border-light: #{getDisabled($theme)};
45
- --se-edit-border-dark: #{getDisabled($theme)};
46
- --se-edit-border-dark-n1: #{getDisabled($theme)};
47
- --se-edit-border-dark-n2: #{getDisabled($theme)};
48
- --se-edit-border-table: #{getDisabled($theme)};
49
- --se-edit-hr-color: #{getDisabled($theme)};
50
- --se-table-picker-border-color: #{getDisabled($theme)};
36
+ --se-main-border-color: var(--matcha-color-disabled);
37
+ --se-main-divider-color: var(--matcha-color-disabled);
38
+ --se-main-outline-color: var(--matcha-color-disabled);
39
+ --se-main-out-color: var(--matcha-color-disabled);
40
+ --se-main-shadow-color: var(--matcha-color-disabled);
41
+ --se-modal-border-color: var(--matcha-color-disabled);
42
+ --se-controller-border-color: var(--matcha-color-disabled);
43
+ --se-input-btn-border-color: var(--matcha-color-disabled);
44
+ --se-edit-border-light: var(--matcha-color-disabled);
45
+ --se-edit-border-dark: var(--matcha-color-disabled);
46
+ --se-edit-border-dark-n1: var(--matcha-color-disabled);
47
+ --se-edit-border-dark-n2: var(--matcha-color-disabled);
48
+ --se-edit-border-table: var(--matcha-color-disabled);
49
+ --se-edit-hr-color: var(--matcha-color-disabled);
50
+ --se-table-picker-border-color: var(--matcha-color-disabled);
51
51
 
52
52
  // ── Active / accent ───────────────────────────────────────────────
53
- --se-active-color: #{getAccent($theme)};
54
- --se-active-hover-color: #{getAccent($theme)};
55
- --se-active-dark-color: #{getAccent($theme)};
56
- --se-active-dark2-color: #{getAccent($theme)};
57
- --se-active-dark3-color: #{getAccent($theme)};
58
- --se-active-dark4-color: #{getAccent($theme)};
59
- --se-active-dark5-color: #{getAccent($theme)};
60
- --se-active-light-color: #{getAccentAlpha($theme)};
61
- --se-active-light2-color: #{getAccentAlpha($theme)};
62
- --se-active-light3-color: #{getAccentAlpha($theme)};
63
- --se-active-light4-color: #{getAccentAlpha($theme)};
64
- --se-active-light5-color: #{getAccentAlpha($theme)};
65
- --se-active-light6-color: #{getAccentAlpha($theme)};
66
- --se-edit-active: #{getAccent($theme)};
67
- --se-edit-hover: #{getAccentAlpha($theme)};
68
- --se-edit-hr-on-back: #{getAccentAlpha($theme)};
69
- --se-edit-anchor: #{getAccent($theme)};
70
- --se-edit-anchor-on-back: #{getAccentAlpha($theme)};
71
- --se-edit-anchor-on-font: #{getAccent($theme)};
72
- --se-table-picker-highlight-color: #{getAccentAlpha($theme)};
73
- --se-table-picker-highlight-border-color: #{getAccent($theme)};
74
- --se-loading-color: #{getAccent($theme)};
75
- --se-drag-caret-color: #{getAccent($theme)};
53
+ --se-active-color: var(--matcha-color-accent);
54
+ --se-active-hover-color: var(--matcha-color-accent);
55
+ --se-active-dark-color: var(--matcha-color-accent);
56
+ --se-active-dark2-color: var(--matcha-color-accent);
57
+ --se-active-dark3-color: var(--matcha-color-accent);
58
+ --se-active-dark4-color: var(--matcha-color-accent);
59
+ --se-active-dark5-color: var(--matcha-color-accent);
60
+ --se-active-light-color: var(--matcha-color-accent-alpha);
61
+ --se-active-light2-color: var(--matcha-color-accent-alpha);
62
+ --se-active-light3-color: var(--matcha-color-accent-alpha);
63
+ --se-active-light4-color: var(--matcha-color-accent-alpha);
64
+ --se-active-light5-color: var(--matcha-color-accent-alpha);
65
+ --se-active-light6-color: var(--matcha-color-accent-alpha);
66
+ --se-edit-active: var(--matcha-color-accent);
67
+ --se-edit-hover: var(--matcha-color-accent-alpha);
68
+ --se-edit-hr-on-back: var(--matcha-color-accent-alpha);
69
+ --se-edit-anchor: var(--matcha-color-accent);
70
+ --se-edit-anchor-on-back: var(--matcha-color-accent-alpha);
71
+ --se-edit-anchor-on-font: var(--matcha-color-accent);
72
+ --se-table-picker-highlight-color: var(--matcha-color-accent-alpha);
73
+ --se-table-picker-highlight-border-color: var(--matcha-color-accent);
74
+ --se-loading-color: var(--matcha-color-accent);
75
+ --se-drag-caret-color: var(--matcha-color-accent);
76
76
 
77
77
  // ── Modals / overlays ─────────────────────────────────────────────
78
- --se-modal-anchor-color: #{getAccent($theme)};
79
- --se-overlay-background-color: #{getBackground($theme)};
80
- --se-modal-file-input-background-color: #{getBackground($theme)};
81
- --se-modal-input-disabled-background-color: #{getDisabled($theme)};
82
- --se-modal-input-disabled-color: #{getForegroundAlpha($theme)};
83
- --se-modal-preview-color: #{getForegroundAlpha($theme)};
78
+ --se-modal-anchor-color: var(--matcha-color-accent);
79
+ --se-overlay-background-color: var(--matcha-color-bg);
80
+ --se-modal-file-input-background-color: var(--matcha-color-bg);
81
+ --se-modal-input-disabled-background-color: var(--matcha-color-disabled);
82
+ --se-modal-input-disabled-color: var(--matcha-color-fg-alpha);
83
+ --se-modal-preview-color: var(--matcha-color-fg-alpha);
84
84
 
85
85
  // ── Hover states ──────────────────────────────────────────────────
86
- --se-hover-color: #{getForeground($theme)};
87
- --se-hover-dark-color: #{getForegroundAlpha($theme)};
88
- --se-hover-dark2-color: #{getForegroundAlpha($theme)};
89
- --se-hover-dark3-color: #{getForegroundAlpha($theme)};
90
- --se-hover-light-color: #{getDisabled($theme)};
91
- --se-hover-light2-color: #{getDisabled($theme)};
92
- --se-hover-light3-color: #{getDisabled($theme)};
86
+ --se-hover-color: var(--matcha-color-fg);
87
+ --se-hover-dark-color: var(--matcha-color-fg-alpha);
88
+ --se-hover-dark2-color: var(--matcha-color-fg-alpha);
89
+ --se-hover-dark3-color: var(--matcha-color-fg-alpha);
90
+ --se-hover-light-color: var(--matcha-color-disabled);
91
+ --se-hover-light2-color: var(--matcha-color-disabled);
92
+ --se-hover-light3-color: var(--matcha-color-disabled);
93
93
  }
94
94
  }
95
95
 
package/components/matcha-time.scss CHANGED
@@ -13,13 +13,13 @@
13
13
  cursor: pointer;
14
14
 
15
15
  &::placeholder {
16
- color: getGrey($theme);
16
+ color: var(--matcha-color-text-muted);
17
17
  }
18
18
 
19
19
  &:disabled {
20
20
  cursor: not-allowed;
21
21
  opacity: 0.6;
22
- color: getGrey($theme);
22
+ color: var(--matcha-color-text-muted);
23
23
  }
24
24
  }
25
25