@widescreen/medicore-theme 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.
- package/README.md +114 -0
- package/package.json +30 -0
- package/scss/_components.scss +166 -0
- package/scss/_layout.scss +53 -0
- package/scss/_material.scss +231 -0
- package/scss/_tokens.scss +102 -0
- package/scss/index.scss +36 -0
- package/scss/themes/_azure.scss +48 -0
- package/scss/themes/_magenta.scss +48 -0
- package/scss/themes/_rose.scss +48 -0
- package/scss/themes/_spring.scss +48 -0
- package/scss/themes/_teal.scss +39 -0
package/README.md
ADDED
|
@@ -0,0 +1,114 @@
|
|
|
1
|
+
# @widescreen/medicore-theme
|
|
2
|
+
|
|
3
|
+
MediCore design system for Angular Material v22 apps.
|
|
4
|
+
|
|
5
|
+
**Features**
|
|
6
|
+
- 5 colour themes: Teal (default), Rose, Azure, Magenta, Spring
|
|
7
|
+
- Light + Dark mode via `html.dark` class
|
|
8
|
+
- All Angular Material form fields, dialogs, tables, tabs, tooltips, selects styled
|
|
9
|
+
- Uniform 36px input height, vertical-centred labels, outlined focus ring
|
|
10
|
+
- Cards, KPI tiles, badges/chips, toggle-grid, empty-state, skeleton loaders
|
|
11
|
+
- Custom scrollbars, WCAG 2.2 focus indicators, responsive helpers
|
|
12
|
+
|
|
13
|
+
---
|
|
14
|
+
|
|
15
|
+
## Installation
|
|
16
|
+
|
|
17
|
+
```bash
|
|
18
|
+
npm install @widescreen/medicore-theme
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
---
|
|
22
|
+
|
|
23
|
+
## Usage
|
|
24
|
+
|
|
25
|
+
In your Angular app's `styles.scss`:
|
|
26
|
+
|
|
27
|
+
```scss
|
|
28
|
+
@use '@angular/material' as mat;
|
|
29
|
+
|
|
30
|
+
// 1 — Bootstrap Material M3 with your chosen palette
|
|
31
|
+
:root {
|
|
32
|
+
@include mat.theme((
|
|
33
|
+
color: (theme-type: light, primary: mat.$cyan-palette, tertiary: mat.$orange-palette),
|
|
34
|
+
typography: Inter,
|
|
35
|
+
density: -2,
|
|
36
|
+
));
|
|
37
|
+
}
|
|
38
|
+
html.dark {
|
|
39
|
+
@include mat.theme((
|
|
40
|
+
color: (theme-type: dark, primary: mat.$cyan-palette, tertiary: mat.$orange-palette),
|
|
41
|
+
typography: Inter,
|
|
42
|
+
density: -2,
|
|
43
|
+
));
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
@include mat.form-field-density(-5);
|
|
47
|
+
|
|
48
|
+
// 2 — Import the full MediCore theme
|
|
49
|
+
@use '@widescreen/medicore-theme/scss';
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
### Partial imports (pick only what you need)
|
|
53
|
+
|
|
54
|
+
```scss
|
|
55
|
+
@use '@widescreen/medicore-theme/scss/tokens'; // CSS variables only
|
|
56
|
+
@use '@widescreen/medicore-theme/scss/material'; // Material overrides
|
|
57
|
+
@use '@widescreen/medicore-theme/scss/components'; // Cards, badges, tables etc.
|
|
58
|
+
@use '@widescreen/medicore-theme/scss/layout'; // Page, form-grid, helpers
|
|
59
|
+
|
|
60
|
+
// Extra colour theme (on top of default teal)
|
|
61
|
+
@use '@widescreen/medicore-theme/scss/themes/rose';
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
---
|
|
65
|
+
|
|
66
|
+
## Switching themes at runtime
|
|
67
|
+
|
|
68
|
+
Add a class to `<html>`:
|
|
69
|
+
|
|
70
|
+
```ts
|
|
71
|
+
// Light → Dark
|
|
72
|
+
document.documentElement.classList.toggle('dark');
|
|
73
|
+
|
|
74
|
+
// Switch palette
|
|
75
|
+
document.documentElement.className = 'theme-rose'; // or theme-azure, theme-magenta, theme-spring
|
|
76
|
+
document.documentElement.classList.add('dark'); // combine with dark
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
---
|
|
80
|
+
|
|
81
|
+
## Colour themes
|
|
82
|
+
|
|
83
|
+
| Class | Primary | Accent |
|
|
84
|
+
|-------|---------|--------|
|
|
85
|
+
| *(default / `theme-teal`)* | Teal `#0a5a54` | Amber |
|
|
86
|
+
| `theme-rose` | Rose `#9f1239` | Red |
|
|
87
|
+
| `theme-azure` | Blue `#1d4ed8` | Sky |
|
|
88
|
+
| `theme-magenta` | Magenta `#a21caf` | Violet |
|
|
89
|
+
| `theme-spring` | Green `#15803d` | Teal |
|
|
90
|
+
|
|
91
|
+
---
|
|
92
|
+
|
|
93
|
+
## CSS tokens (selection)
|
|
94
|
+
|
|
95
|
+
```css
|
|
96
|
+
--mc-primary /* brand colour */
|
|
97
|
+
--mc-surface /* card/dialog background */
|
|
98
|
+
--mc-bg /* page background */
|
|
99
|
+
--mc-ink /* primary text */
|
|
100
|
+
--mc-ink-soft /* secondary text */
|
|
101
|
+
--mc-line /* borders */
|
|
102
|
+
--mc-radius /* 16px — card radius */
|
|
103
|
+
--mc-radius-sm /* 10px */
|
|
104
|
+
--mc-radius-xs /* 6px — button radius */
|
|
105
|
+
--mc-shadow-sm /* subtle card shadow */
|
|
106
|
+
--mc-shadow /* hover shadow */
|
|
107
|
+
--mc-transition /* 180ms ease */
|
|
108
|
+
```
|
|
109
|
+
|
|
110
|
+
---
|
|
111
|
+
|
|
112
|
+
## Versioning
|
|
113
|
+
|
|
114
|
+
`MAJOR.MINOR.PATCH` — semver. Install a specific version: `npm install @widescreen/medicore-theme@1.0.0`
|
package/package.json
ADDED
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@widescreen/medicore-theme",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"description": "MediCore design system — tokens, Angular Material overrides, components, 5 colour themes × light/dark. Drop-in theme for any Angular Material v22 app.",
|
|
5
|
+
"keywords": ["angular", "material", "design-system", "theme", "dark-mode", "scss", "medicore"],
|
|
6
|
+
"author": "widescreen98",
|
|
7
|
+
"license": "UNLICENSED",
|
|
8
|
+
"private": false,
|
|
9
|
+
"main": "scss/index.scss",
|
|
10
|
+
"exports": {
|
|
11
|
+
".": "./scss/index.scss",
|
|
12
|
+
"./scss": "./scss/index.scss",
|
|
13
|
+
"./scss/tokens": "./scss/_tokens.scss",
|
|
14
|
+
"./scss/material": "./scss/_material.scss",
|
|
15
|
+
"./scss/components": "./scss/_components.scss",
|
|
16
|
+
"./scss/layout": "./scss/_layout.scss",
|
|
17
|
+
"./scss/themes/teal": "./scss/themes/_teal.scss",
|
|
18
|
+
"./scss/themes/rose": "./scss/themes/_rose.scss",
|
|
19
|
+
"./scss/themes/azure": "./scss/themes/_azure.scss",
|
|
20
|
+
"./scss/themes/magenta": "./scss/themes/_magenta.scss",
|
|
21
|
+
"./scss/themes/spring": "./scss/themes/_spring.scss"
|
|
22
|
+
},
|
|
23
|
+
"files": ["scss/**/*.scss", "README.md"],
|
|
24
|
+
"peerDependencies": {
|
|
25
|
+
"@angular/material": ">=22.0.0"
|
|
26
|
+
},
|
|
27
|
+
"publishConfig": {
|
|
28
|
+
"access": "public"
|
|
29
|
+
}
|
|
30
|
+
}
|
|
@@ -0,0 +1,166 @@
|
|
|
1
|
+
// ================================================================
|
|
2
|
+
// MediCore — UI Components
|
|
3
|
+
// Cards, badges/chips, tables, toggle-grid, search-bar,
|
|
4
|
+
// empty-state, skeleton loaders, scrollbars
|
|
5
|
+
// ================================================================
|
|
6
|
+
|
|
7
|
+
// ── Base reset ────────────────────────────────────────────────────
|
|
8
|
+
html, body { height: 100%; }
|
|
9
|
+
*, *::before, *::after { box-sizing: border-box; }
|
|
10
|
+
body {
|
|
11
|
+
margin: 0;
|
|
12
|
+
font-family: Inter, 'Segoe UI', system-ui, sans-serif;
|
|
13
|
+
background: var(--mc-bg);
|
|
14
|
+
color: var(--mc-ink);
|
|
15
|
+
-webkit-font-smoothing: antialiased;
|
|
16
|
+
transition: background var(--mc-transition), color var(--mc-transition);
|
|
17
|
+
}
|
|
18
|
+
h1, h2, h3, h4 { letter-spacing: -0.02em; color: var(--mc-ink); }
|
|
19
|
+
|
|
20
|
+
// ── Skip navigation — WCAG 2.4.1 ─────────────────────────────────
|
|
21
|
+
.skip-nav {
|
|
22
|
+
position: fixed; top: -120%; left: 50%; transform: translateX(-50%);
|
|
23
|
+
z-index: 99999; padding: 12px 28px; background: var(--mc-primary); color: #fff;
|
|
24
|
+
border-radius: 0 0 var(--mc-radius-sm) var(--mc-radius-sm); font-weight: 700;
|
|
25
|
+
font-size: 0.9rem; text-decoration: none; transition: top 0.15s ease;
|
|
26
|
+
white-space: nowrap; box-shadow: var(--mc-shadow);
|
|
27
|
+
&:focus { top: 0; outline: 2px solid #fff; outline-offset: -4px; }
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
// ── Cards ─────────────────────────────────────────────────────────
|
|
31
|
+
.card {
|
|
32
|
+
background: var(--mc-surface);
|
|
33
|
+
border: 1px solid var(--mc-line);
|
|
34
|
+
border-radius: var(--mc-radius);
|
|
35
|
+
box-shadow: var(--mc-shadow-sm);
|
|
36
|
+
overflow: hidden;
|
|
37
|
+
transition: box-shadow var(--mc-transition);
|
|
38
|
+
&:hover { box-shadow: var(--mc-shadow); }
|
|
39
|
+
|
|
40
|
+
&-header {
|
|
41
|
+
padding: 16px 20px;
|
|
42
|
+
border-bottom: 1px solid var(--mc-line);
|
|
43
|
+
font-weight: 600; font-size: 0.95rem;
|
|
44
|
+
display: flex; align-items: center; gap: 8px;
|
|
45
|
+
color: var(--mc-ink);
|
|
46
|
+
}
|
|
47
|
+
&-body { padding: 20px; }
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
// ── KPI tiles ─────────────────────────────────────────────────────
|
|
51
|
+
.kpi-grid {
|
|
52
|
+
display: grid;
|
|
53
|
+
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
54
|
+
gap: 16px; margin-bottom: 24px;
|
|
55
|
+
}
|
|
56
|
+
.kpi {
|
|
57
|
+
background: var(--mc-surface);
|
|
58
|
+
border: 1px solid var(--mc-line);
|
|
59
|
+
border-radius: var(--mc-radius);
|
|
60
|
+
box-shadow: var(--mc-shadow-sm);
|
|
61
|
+
padding: 18px 20px 18px 22px;
|
|
62
|
+
border-left: 4px solid var(--mc-primary);
|
|
63
|
+
transition: box-shadow var(--mc-transition), transform var(--mc-transition);
|
|
64
|
+
|
|
65
|
+
&:hover { box-shadow: var(--mc-shadow); transform: translateY(-2px); }
|
|
66
|
+
.kpi-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--mc-ink-muted); font-weight: 700; margin-bottom: 6px; }
|
|
67
|
+
.kpi-value { font-size: 1.75rem; font-weight: 800; color: var(--mc-ink); line-height: 1.1; font-variant-numeric: tabular-nums; }
|
|
68
|
+
.kpi-hint { font-size: 0.77rem; color: var(--mc-ink-soft); margin-top: 4px; }
|
|
69
|
+
&.accent { border-left-color: var(--mc-accent); }
|
|
70
|
+
&.ok { border-left-color: var(--mc-ok); }
|
|
71
|
+
&.warn { border-left-color: var(--mc-warn); }
|
|
72
|
+
&.danger { border-left-color: var(--mc-danger); }
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
// ── Status chips / badges ─────────────────────────────────────────
|
|
76
|
+
.chip, .badge {
|
|
77
|
+
display: inline-flex; align-items: center; padding: 3px 10px;
|
|
78
|
+
border-radius: 999px; font-size: 0.72rem; font-weight: 700;
|
|
79
|
+
letter-spacing: 0.02em; white-space: nowrap; vertical-align: middle;
|
|
80
|
+
background: var(--mc-surface-alt); color: var(--mc-ink-soft);
|
|
81
|
+
border: 1px solid var(--mc-line);
|
|
82
|
+
|
|
83
|
+
&.scheduled, &.issued, &.ordered, &-info { background: var(--mc-info-subtle); color: var(--mc-info); border-color: transparent; }
|
|
84
|
+
&.in_progress, &.trial, &-warning { background: var(--mc-warn-subtle); color: var(--mc-warn); border-color: transparent; }
|
|
85
|
+
&.completed, &.paid, &.active, &-success { background: var(--mc-ok-subtle); color: var(--mc-ok); border-color: transparent; }
|
|
86
|
+
&.cancelled, &.suspended, &.void, &-danger { background: var(--mc-danger-subtle); color: var(--mc-danger); border-color: transparent; }
|
|
87
|
+
&-neutral { background: var(--mc-surface-alt); color: var(--mc-ink-muted); }
|
|
88
|
+
&.stat { background: var(--mc-danger); color: #fff; border-color: transparent; }
|
|
89
|
+
&.urgent { background: var(--mc-warn); color: #fff; border-color: transparent; }
|
|
90
|
+
&.system { background: var(--mc-primary-subtle); color: var(--mc-primary); border-color: transparent; }
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
// ── Table card ────────────────────────────────────────────────────
|
|
94
|
+
.table-card {
|
|
95
|
+
background: var(--mc-surface);
|
|
96
|
+
border: 1px solid var(--mc-line);
|
|
97
|
+
border-radius: var(--mc-radius);
|
|
98
|
+
box-shadow: var(--mc-shadow-sm);
|
|
99
|
+
overflow: auto;
|
|
100
|
+
overscroll-behavior: contain;
|
|
101
|
+
}
|
|
102
|
+
table.mat-mdc-table { width: 100%; background: transparent !important; }
|
|
103
|
+
|
|
104
|
+
// ── Toggle grid (module list) ─────────────────────────────────────
|
|
105
|
+
.toggle-grid {
|
|
106
|
+
display: grid;
|
|
107
|
+
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
|
|
108
|
+
gap: 12px;
|
|
109
|
+
}
|
|
110
|
+
.toggle-item {
|
|
111
|
+
display: flex; align-items: center; justify-content: space-between;
|
|
112
|
+
padding: 14px 16px; background: var(--mc-surface-alt);
|
|
113
|
+
border-radius: var(--mc-radius-sm); border: 1px solid var(--mc-line);
|
|
114
|
+
transition: box-shadow var(--mc-transition);
|
|
115
|
+
&:hover { box-shadow: var(--mc-shadow-xs); }
|
|
116
|
+
.mod-name { font-weight: 500; font-size: 0.875rem; text-transform: capitalize; }
|
|
117
|
+
.mod-icon { color: var(--mc-primary); margin-right: 10px; font-size: 20px; }
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
// ── Search bar ────────────────────────────────────────────────────
|
|
121
|
+
.search-bar {
|
|
122
|
+
display: flex; gap: 12px; margin-bottom: 16px;
|
|
123
|
+
mat-form-field { flex: 1; max-width: 360px; }
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
// ── Empty state ───────────────────────────────────────────────────
|
|
127
|
+
.empty-state {
|
|
128
|
+
display: flex; flex-direction: column; align-items: center;
|
|
129
|
+
justify-content: center; gap: 10px; padding: 64px 24px;
|
|
130
|
+
color: var(--mc-ink-muted); text-align: center;
|
|
131
|
+
.empty-icon { font-size: 3rem; width: 3rem; height: 3rem; opacity: 0.35; }
|
|
132
|
+
.empty-title { font-size: 1rem; font-weight: 700; color: var(--mc-ink-soft); margin: 0; }
|
|
133
|
+
.empty-sub { font-size: 0.85rem; margin: 0; max-width: 300px; }
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
// ── Skeleton loaders ──────────────────────────────────────────────
|
|
137
|
+
@keyframes mc-shimmer {
|
|
138
|
+
0% { transform: translateX(-100%); }
|
|
139
|
+
100% { transform: translateX(100%); }
|
|
140
|
+
}
|
|
141
|
+
%skeleton-base {
|
|
142
|
+
border-radius: var(--mc-radius-xs); background: var(--mc-line);
|
|
143
|
+
overflow: hidden; position: relative;
|
|
144
|
+
&::after {
|
|
145
|
+
content: ''; position: absolute; inset: 0;
|
|
146
|
+
background: linear-gradient(90deg, transparent 0%, var(--mc-surface-alt) 50%, transparent 100%);
|
|
147
|
+
will-change: transform; animation: mc-shimmer 1.5s ease-in-out infinite;
|
|
148
|
+
}
|
|
149
|
+
}
|
|
150
|
+
.skeleton { @extend %skeleton-base; }
|
|
151
|
+
.kpi-skeleton { @extend %skeleton-base; height: 100px; border-radius: var(--mc-radius); }
|
|
152
|
+
.chart-skeleton { @extend %skeleton-base; height: 280px; border-radius: var(--mc-radius-sm); }
|
|
153
|
+
.row-skeleton { @extend %skeleton-base; height: 46px; border-radius: 0; border-bottom: 1px solid var(--mc-line); }
|
|
154
|
+
|
|
155
|
+
// ── Scrollbars ────────────────────────────────────────────────────
|
|
156
|
+
:root { --sb-size: 6px; --sb-track: #ebebeb; --sb-thumb: #c4c4c4; --sb-thumb-h: #a0a0a0; }
|
|
157
|
+
html.dark { --sb-track: #252525; --sb-thumb: #444; --sb-thumb-h: #5a5a5a; }
|
|
158
|
+
* {
|
|
159
|
+
scrollbar-width: thin;
|
|
160
|
+
scrollbar-color: var(--sb-thumb) var(--sb-track);
|
|
161
|
+
&::-webkit-scrollbar { width: var(--sb-size); height: var(--sb-size); }
|
|
162
|
+
&::-webkit-scrollbar-track { background: var(--sb-track); border-radius: 99px; }
|
|
163
|
+
&::-webkit-scrollbar-thumb { background: var(--sb-thumb); border-radius: 99px; border: 1px solid var(--sb-track); }
|
|
164
|
+
&::-webkit-scrollbar-thumb:hover { background: var(--sb-thumb-h); }
|
|
165
|
+
&::-webkit-scrollbar-corner { background: var(--sb-track); }
|
|
166
|
+
}
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
// ================================================================
|
|
2
|
+
// MediCore — Layout helpers
|
|
3
|
+
// Page scaffold, form grids, toolbar, helpers, responsive
|
|
4
|
+
// ================================================================
|
|
5
|
+
|
|
6
|
+
// ── Page ──────────────────────────────────────────────────────────
|
|
7
|
+
.page {
|
|
8
|
+
padding: 28px 32px;
|
|
9
|
+
max-width: 1380px;
|
|
10
|
+
margin-inline: auto;
|
|
11
|
+
min-width: 0;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.page-header {
|
|
15
|
+
display: flex; align-items: center; justify-content: space-between;
|
|
16
|
+
margin-bottom: 24px;
|
|
17
|
+
h1 { margin: 0; font-size: 1.5rem; font-weight: 800; line-height: 1.2; color: var(--mc-ink); }
|
|
18
|
+
p { margin: 4px 0 0; color: var(--mc-ink-soft); font-size: 0.875rem; }
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
// ── Form grids ────────────────────────────────────────────────────
|
|
22
|
+
.form-grid {
|
|
23
|
+
display: grid !important;
|
|
24
|
+
grid-template-columns: 1fr 1fr;
|
|
25
|
+
gap: 14px 16px;
|
|
26
|
+
align-items: start;
|
|
27
|
+
.full { grid-column: 1 / -1; }
|
|
28
|
+
@media (max-width: 540px) { grid-template-columns: 1fr; .full { grid-column: 1; } }
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.two-col {
|
|
32
|
+
display: grid;
|
|
33
|
+
grid-template-columns: 1fr 1fr;
|
|
34
|
+
gap: 16px;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
// ── Helpers ───────────────────────────────────────────────────────
|
|
38
|
+
.toolbar-gap { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
|
|
39
|
+
.spacer { flex: 1 1 auto; }
|
|
40
|
+
.full { grid-column: 1 / -1; }
|
|
41
|
+
.muted { color: var(--mc-ink-soft); }
|
|
42
|
+
.mono { font-variant-numeric: tabular-nums; }
|
|
43
|
+
|
|
44
|
+
// ── Responsive ────────────────────────────────────────────────────
|
|
45
|
+
@media (max-width: 768px) {
|
|
46
|
+
.page { padding: 16px; }
|
|
47
|
+
.page-header h1 { font-size: 1.25rem; }
|
|
48
|
+
.two-col { grid-template-columns: 1fr; }
|
|
49
|
+
}
|
|
50
|
+
@media (max-width: 480px) {
|
|
51
|
+
.toolbar-gap { gap: 6px; }
|
|
52
|
+
.card { padding: 14px 16px; }
|
|
53
|
+
}
|
|
@@ -0,0 +1,231 @@
|
|
|
1
|
+
// ================================================================
|
|
2
|
+
// MediCore — Angular Material v22 / M3 overrides
|
|
3
|
+
// Import AFTER @use '@angular/material' as mat in your styles entry
|
|
4
|
+
// ================================================================
|
|
5
|
+
|
|
6
|
+
// ── Focus indicators — WCAG 2.4.7 / 2.4.11 / 2.4.12 ─────────────
|
|
7
|
+
:focus-visible {
|
|
8
|
+
outline: 3px solid var(--mc-focus-color);
|
|
9
|
+
outline-offset: 2px;
|
|
10
|
+
border-radius: var(--mc-radius-xs);
|
|
11
|
+
box-shadow: 0 0 0 1px var(--mc-surface);
|
|
12
|
+
}
|
|
13
|
+
:focus:not(:focus-visible) { outline: none; box-shadow: none; }
|
|
14
|
+
|
|
15
|
+
.mat-mdc-button-base:focus-visible,
|
|
16
|
+
.mat-mdc-icon-button:focus-visible,
|
|
17
|
+
.mat-mdc-fab:focus-visible {
|
|
18
|
+
outline: 3px solid var(--mc-focus-color) !important;
|
|
19
|
+
outline-offset: 2px !important;
|
|
20
|
+
box-shadow: 0 0 0 1px var(--mc-surface) !important;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
// WCAG 2.5.8 minimum target size
|
|
24
|
+
button:not([hidden]), a[role="button"],
|
|
25
|
+
[mat-icon-button], [mat-mini-fab],
|
|
26
|
+
.mat-mdc-icon-button { min-width: 24px; min-height: 24px; }
|
|
27
|
+
|
|
28
|
+
// ── Buttons ───────────────────────────────────────────────────────
|
|
29
|
+
.mat-mdc-raised-button,
|
|
30
|
+
.mat-mdc-flat-button,
|
|
31
|
+
.mat-mdc-outlined-button,
|
|
32
|
+
.mat-mdc-button,
|
|
33
|
+
[mat-flat-button], [mat-raised-button], [mat-stroked-button], [mat-button] {
|
|
34
|
+
font-size: 0.875rem !important;
|
|
35
|
+
font-weight: 600 !important;
|
|
36
|
+
letter-spacing: 0.01em !important;
|
|
37
|
+
border-radius: var(--mc-radius-xs) !important;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.mat-mdc-icon-button.mat-mdc-button-base {
|
|
41
|
+
--mdc-icon-button-state-layer-size: 40px;
|
|
42
|
+
width: 40px; height: 40px; padding: 8px;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.mat-mdc-flat-button[color="primary"],
|
|
46
|
+
.mat-mdc-unelevated-button[color="primary"],
|
|
47
|
+
button[mat-flat-button].mat-primary {
|
|
48
|
+
--mdc-filled-button-container-color: var(--mc-primary) !important;
|
|
49
|
+
--mdc-filled-button-label-text-color: #ffffff !important;
|
|
50
|
+
font-weight: 600; border-radius: var(--mc-radius-xs) !important;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.mat-mdc-outlined-button {
|
|
54
|
+
--mdc-outlined-button-outline-color: var(--mc-line-strong) !important;
|
|
55
|
+
--mdc-outlined-button-label-text-color: var(--mc-ink) !important;
|
|
56
|
+
font-weight: 600; border-radius: var(--mc-radius-xs) !important;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
// ── Input fields — uniform 36px height ───────────────────────────
|
|
60
|
+
.mat-mdc-form-field {
|
|
61
|
+
--mdc-outlined-text-field-container-height: 36px;
|
|
62
|
+
--mdc-filled-text-field-container-height: 36px;
|
|
63
|
+
--mat-form-field-container-vertical-padding: 7px;
|
|
64
|
+
}
|
|
65
|
+
.mat-mdc-form-field-hint-wrapper { padding-top: 4px !important; }
|
|
66
|
+
.mat-mdc-form-field:has(mat-hint) { margin-bottom: 8px; }
|
|
67
|
+
|
|
68
|
+
.mat-mdc-text-field-wrapper .mat-mdc-form-field-flex {
|
|
69
|
+
min-height: 36px !important;
|
|
70
|
+
align-items: center !important;
|
|
71
|
+
}
|
|
72
|
+
.mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline { min-height: 36px !important; }
|
|
73
|
+
.mat-mdc-form-field-infix { padding-top: 7px !important; padding-bottom: 7px !important; min-height: 0 !important; }
|
|
74
|
+
.mat-mdc-input-element { line-height: 22px !important; font-size: 14px !important; color: var(--mc-ink) !important; }
|
|
75
|
+
.mat-mdc-select-trigger { height: auto !important; line-height: 22px !important; }
|
|
76
|
+
.mat-mdc-select-value-text, .mat-mdc-select-placeholder { font-size: 14px !important; }
|
|
77
|
+
.mat-mdc-form-field-label, .mdc-floating-label { color: var(--mc-ink-soft) !important; }
|
|
78
|
+
.mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-text-field__input { color: var(--mc-ink) !important; }
|
|
79
|
+
|
|
80
|
+
// Email validation
|
|
81
|
+
input[type="email"]:not(:placeholder-shown):invalid { color: var(--mc-danger); }
|
|
82
|
+
.mat-mdc-form-field.ng-touched.ng-invalid .mat-mdc-input-element[type="email"] { color: var(--mc-danger); }
|
|
83
|
+
|
|
84
|
+
// Center floating label vertically on idle
|
|
85
|
+
.mdc-text-field--outlined .mdc-floating-label:not(.mdc-floating-label--float-above) {
|
|
86
|
+
top: 50% !important;
|
|
87
|
+
transform: translateY(-50%) !important;
|
|
88
|
+
font-size: 14px !important;
|
|
89
|
+
pointer-events: none !important;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
// Offset label when a matPrefix icon is present
|
|
93
|
+
.mdc-text-field--outlined.mdc-text-field--with-leading-icon .mdc-floating-label:not(.mdc-floating-label--float-above) { left: 48px !important; }
|
|
94
|
+
.mdc-text-field--outlined.mdc-text-field--with-leading-icon .mdc-floating-label--float-above { left: 0 !important; }
|
|
95
|
+
.mat-mdc-form-field:has(.mat-mdc-form-field-icon-prefix) .mdc-floating-label:not(.mdc-floating-label--float-above) { left: 48px !important; }
|
|
96
|
+
.mat-mdc-form-field:has(.mat-mdc-form-field-icon-prefix) .mdc-floating-label--float-above { left: 0 !important; }
|
|
97
|
+
|
|
98
|
+
// Outlined border & focus colours
|
|
99
|
+
.mat-mdc-form-field {
|
|
100
|
+
.mdc-notched-outline__leading { border-color: var(--mc-line) !important; border-radius: 6px 0 0 6px !important; }
|
|
101
|
+
.mdc-notched-outline__notch { border-color: var(--mc-line) !important; border-right: none; border-left: none; }
|
|
102
|
+
.mdc-notched-outline__trailing { border-color: var(--mc-line) !important; border-radius: 0 6px 6px 0 !important; }
|
|
103
|
+
|
|
104
|
+
&.mat-focused {
|
|
105
|
+
.mdc-notched-outline__leading,
|
|
106
|
+
.mdc-notched-outline__notch,
|
|
107
|
+
.mdc-notched-outline__trailing { border-color: var(--mc-primary) !important; border-width: 2px !important; }
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.mat-mdc-input-element, .mat-mdc-select-value-text, .mat-mdc-select-placeholder { font-size: 0.875rem !important; }
|
|
111
|
+
|
|
112
|
+
.mat-mdc-form-field-icon-prefix,
|
|
113
|
+
.mat-mdc-form-field-icon-suffix {
|
|
114
|
+
color: var(--mc-ink-soft);
|
|
115
|
+
mat-icon { font-size: 18px !important; width: 18px !important; height: 18px !important; }
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
// ── Select ────────────────────────────────────────────────────────
|
|
120
|
+
.mat-mdc-select-panel {
|
|
121
|
+
background: var(--mc-surface) !important;
|
|
122
|
+
border: 1px solid var(--mc-line) !important;
|
|
123
|
+
border-radius: var(--mc-radius-sm) !important;
|
|
124
|
+
box-shadow: var(--mc-shadow) !important;
|
|
125
|
+
}
|
|
126
|
+
.mat-mdc-option { min-height: 36px !important; font-size: 0.875rem !important; padding: 0 14px !important; color: var(--mc-ink) !important; }
|
|
127
|
+
.mat-mdc-option:hover:not(.mat-mdc-option-disabled) { background: var(--mc-surface-alt) !important; }
|
|
128
|
+
.mat-mdc-option.mdc-list-item--selected:not(.mat-mdc-option-multiple) {
|
|
129
|
+
background: var(--mc-primary-subtle) !important;
|
|
130
|
+
color: var(--mc-primary) !important;
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
// ── Menu ──────────────────────────────────────────────────────────
|
|
134
|
+
.mat-mdc-menu-panel {
|
|
135
|
+
background: var(--mc-surface) !important;
|
|
136
|
+
border: 1px solid var(--mc-line) !important;
|
|
137
|
+
border-radius: var(--mc-radius-sm) !important;
|
|
138
|
+
box-shadow: var(--mc-shadow) !important;
|
|
139
|
+
}
|
|
140
|
+
.mat-mdc-menu-item { color: var(--mc-ink) !important; }
|
|
141
|
+
.mat-mdc-menu-item:hover:not([disabled]) { background: var(--mc-surface-alt) !important; }
|
|
142
|
+
|
|
143
|
+
// ── Tooltip ───────────────────────────────────────────────────────
|
|
144
|
+
.mat-mdc-tooltip .mdc-tooltip__surface {
|
|
145
|
+
background: var(--mc-ink) !important;
|
|
146
|
+
color: var(--mc-surface) !important;
|
|
147
|
+
border-radius: var(--mc-radius-xs) !important;
|
|
148
|
+
font-size: 0.75rem !important;
|
|
149
|
+
padding: 6px 10px !important;
|
|
150
|
+
max-width: 280px !important;
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
// ── Dialog ────────────────────────────────────────────────────────
|
|
154
|
+
.mat-mdc-dialog-container .mdc-dialog__surface {
|
|
155
|
+
background: var(--mc-surface) !important;
|
|
156
|
+
color: var(--mc-ink) !important;
|
|
157
|
+
border-radius: var(--mc-radius) !important;
|
|
158
|
+
box-shadow: var(--mc-shadow-lg) !important;
|
|
159
|
+
}
|
|
160
|
+
.mat-mdc-dialog-title { color: var(--mc-ink) !important; font-weight: 700 !important; padding: 20px 24px 0 !important; margin-bottom: 0 !important; }
|
|
161
|
+
.mat-mdc-dialog-content {
|
|
162
|
+
color: var(--mc-ink) !important;
|
|
163
|
+
padding: 20px 24px 12px !important;
|
|
164
|
+
max-height: 75vh !important;
|
|
165
|
+
|
|
166
|
+
form, .dialog-body { display: flex; flex-direction: column; gap: 14px; }
|
|
167
|
+
.form-row, .two-col-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
|
|
168
|
+
> .mat-mdc-form-field { margin-bottom: 14px; &:last-of-type { margin-bottom: 0; } }
|
|
169
|
+
}
|
|
170
|
+
.mat-mdc-dialog-actions { padding: 10px 24px 18px !important; gap: 8px; min-height: unset !important; }
|
|
171
|
+
|
|
172
|
+
// ── Snackbar ──────────────────────────────────────────────────────
|
|
173
|
+
.mat-mdc-snack-bar-container {
|
|
174
|
+
--mdc-snackbar-container-color: var(--mc-surface);
|
|
175
|
+
--mdc-snackbar-supporting-text-color: var(--mc-ink);
|
|
176
|
+
border: 1px solid var(--mc-line) !important;
|
|
177
|
+
border-radius: var(--mc-radius-sm) !important;
|
|
178
|
+
box-shadow: var(--mc-shadow) !important;
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
// ── Tabs ──────────────────────────────────────────────────────────
|
|
182
|
+
.mat-mdc-tab-group { --mdc-tab-indicator-active-indicator-color: var(--mc-primary); }
|
|
183
|
+
.mat-mdc-tab .mdc-tab__text-label { color: var(--mc-ink-soft) !important; font-weight: 600; }
|
|
184
|
+
.mat-mdc-tab.mdc-tab--active .mdc-tab__text-label { color: var(--mc-primary) !important; }
|
|
185
|
+
.mat-mdc-tab-header { border-bottom: 1px solid var(--mc-line); }
|
|
186
|
+
.mat-mdc-tab-body-wrapper { transition: none !important; }
|
|
187
|
+
.mat-mdc-tab-body-content { transition-duration: 1ms !important; animation-duration: 1ms !important; }
|
|
188
|
+
.mat-mdc-tab-body.mat-mdc-tab-body-active .mat-mdc-tab-body-content { pointer-events: auto !important; }
|
|
189
|
+
|
|
190
|
+
// ── Tables ────────────────────────────────────────────────────────
|
|
191
|
+
.mat-mdc-header-row { background: var(--mc-surface-alt) !important; }
|
|
192
|
+
.mat-mdc-header-cell {
|
|
193
|
+
font-size: 0.69rem !important; font-weight: 700 !important; text-transform: uppercase;
|
|
194
|
+
letter-spacing: 0.08em; color: var(--mc-ink-muted) !important;
|
|
195
|
+
border-bottom: 2px solid var(--mc-line) !important;
|
|
196
|
+
white-space: nowrap; padding: 10px 16px !important;
|
|
197
|
+
}
|
|
198
|
+
.mat-mdc-row {
|
|
199
|
+
border-bottom: 1px solid var(--mc-line) !important;
|
|
200
|
+
transition: background var(--mc-transition);
|
|
201
|
+
&:hover { background: var(--mc-surface-alt) !important; }
|
|
202
|
+
&:last-child { border-bottom: none !important; }
|
|
203
|
+
}
|
|
204
|
+
.mat-mdc-cell { padding: 12px 16px !important; font-size: 0.875rem; color: var(--mc-ink); }
|
|
205
|
+
td.mat-mdc-cell, th.mat-mdc-header-cell { white-space: nowrap; }
|
|
206
|
+
|
|
207
|
+
// ── Paginator ─────────────────────────────────────────────────────
|
|
208
|
+
.mat-mdc-paginator {
|
|
209
|
+
background: var(--mc-surface-alt) !important;
|
|
210
|
+
border-top: 1px solid var(--mc-line);
|
|
211
|
+
color: var(--mc-ink-soft) !important;
|
|
212
|
+
border-radius: 0 0 var(--mc-radius) var(--mc-radius);
|
|
213
|
+
}
|
|
214
|
+
|
|
215
|
+
// ── Progress bar ──────────────────────────────────────────────────
|
|
216
|
+
.mat-mdc-progress-bar {
|
|
217
|
+
--mdc-linear-progress-active-indicator-color: var(--mc-primary);
|
|
218
|
+
--mdc-linear-progress-track-color: var(--mc-primary-subtle);
|
|
219
|
+
}
|
|
220
|
+
|
|
221
|
+
// ── Checkbox ──────────────────────────────────────────────────────
|
|
222
|
+
.mat-mdc-checkbox .mdc-checkbox__background { border-color: var(--mc-line-strong) !important; }
|
|
223
|
+
|
|
224
|
+
// ── Chip set ──────────────────────────────────────────────────────
|
|
225
|
+
.mat-mdc-chip { background: var(--mc-primary-subtle) !important; color: var(--mc-primary) !important; }
|
|
226
|
+
|
|
227
|
+
// ── Dark mode — calendar/date picker icon ─────────────────────────
|
|
228
|
+
html.dark input[type="date"]::-webkit-calendar-picker-indicator,
|
|
229
|
+
html.dark input[type="datetime-local"]::-webkit-calendar-picker-indicator {
|
|
230
|
+
filter: invert(0.75) brightness(1.2);
|
|
231
|
+
}
|
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
// ================================================================
|
|
2
|
+
// MediCore Design Tokens
|
|
3
|
+
// CSS custom properties for light + dark mode, 5 colour themes
|
|
4
|
+
// ================================================================
|
|
5
|
+
|
|
6
|
+
// ── Design Tokens — Light (default: Teal) ────────────────────────
|
|
7
|
+
:root {
|
|
8
|
+
--mc-bg: #eef6f5;
|
|
9
|
+
--mc-surface: #ffffff;
|
|
10
|
+
--mc-surface-alt: #f4fbfa;
|
|
11
|
+
--mc-overlay: rgb(10 40 38 / 40%);
|
|
12
|
+
|
|
13
|
+
--mc-ink: #0c1f1e;
|
|
14
|
+
--mc-ink-soft: #3d5c5a;
|
|
15
|
+
--mc-ink-muted: #5e7f7d;
|
|
16
|
+
|
|
17
|
+
--mc-primary: #0a5a54;
|
|
18
|
+
--mc-primary-hov: #083f3b;
|
|
19
|
+
--mc-primary-subtle: #e0f4f2;
|
|
20
|
+
--mc-accent: #7a4500;
|
|
21
|
+
--mc-accent-subtle: #fff3e0;
|
|
22
|
+
|
|
23
|
+
--mc-ok: #1a6e38;
|
|
24
|
+
--mc-ok-subtle: #e8f7ee;
|
|
25
|
+
--mc-warn: #7a4400;
|
|
26
|
+
--mc-warn-subtle: #fff8e6;
|
|
27
|
+
--mc-danger: #9b2218;
|
|
28
|
+
--mc-danger-subtle: #fbeaea;
|
|
29
|
+
--mc-info: #1a4d8c;
|
|
30
|
+
--mc-info-subtle: #e8effc;
|
|
31
|
+
|
|
32
|
+
--mc-line: #cfe0df;
|
|
33
|
+
--mc-line-strong: #a0bfbd;
|
|
34
|
+
--mc-shadow-xs: 0 1px 2px rgb(10 40 38 / 6%);
|
|
35
|
+
--mc-shadow-sm: 0 1px 4px rgb(10 40 38 / 8%), 0 4px 16px rgb(10 40 38 / 6%);
|
|
36
|
+
--mc-shadow: 0 2px 8px rgb(10 40 38 / 8%), 0 16px 40px rgb(10 40 38 / 8%);
|
|
37
|
+
--mc-shadow-lg: 0 8px 32px rgb(10 40 38 / 12%), 0 32px 64px rgb(10 40 38 / 10%);
|
|
38
|
+
|
|
39
|
+
--mc-focus-ring: 0 0 0 3px rgb(10 90 84 / 35%);
|
|
40
|
+
--mc-focus-color: #0a5a54;
|
|
41
|
+
--mc-transition: 180ms cubic-bezier(.4,0,.2,1);
|
|
42
|
+
|
|
43
|
+
--mc-radius: 16px;
|
|
44
|
+
--mc-radius-sm: 10px;
|
|
45
|
+
--mc-radius-xs: 6px;
|
|
46
|
+
|
|
47
|
+
--rail-width: 264px;
|
|
48
|
+
--rail-bg: linear-gradient(175deg, #042220 0%, #0a4a45 60%, #0d6060 100%);
|
|
49
|
+
--rail-text: #e8f6f5;
|
|
50
|
+
--rail-icon: #b8deda;
|
|
51
|
+
--rail-active-bg: rgb(255 255 255 / 14%);
|
|
52
|
+
--rail-active-text: #ffffff;
|
|
53
|
+
--rail-hover-bg: rgb(255 255 255 / 7%);
|
|
54
|
+
--topbar-bg: rgba(255,255,255,0.88);
|
|
55
|
+
--topbar-border: var(--mc-line);
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
// ── Dark mode overrides ───────────────────────────────────────────
|
|
59
|
+
html.dark {
|
|
60
|
+
--mc-bg: #0a1413;
|
|
61
|
+
--mc-surface: #121e1d;
|
|
62
|
+
--mc-surface-alt: #192b29;
|
|
63
|
+
--mc-overlay: rgb(0 0 0 / 65%);
|
|
64
|
+
|
|
65
|
+
--mc-ink: #dff0ee;
|
|
66
|
+
--mc-ink-soft: #8ab8b5;
|
|
67
|
+
--mc-ink-muted: #698f8c;
|
|
68
|
+
|
|
69
|
+
--mc-primary: #5ee8dc;
|
|
70
|
+
--mc-primary-hov: #82ede5;
|
|
71
|
+
--mc-primary-subtle: #0c2d2b;
|
|
72
|
+
--mc-accent: #f4b45a;
|
|
73
|
+
--mc-accent-subtle: #291800;
|
|
74
|
+
|
|
75
|
+
--mc-ok: #6bcf8a;
|
|
76
|
+
--mc-ok-subtle: #0b2014;
|
|
77
|
+
--mc-warn: #f4b45a;
|
|
78
|
+
--mc-warn-subtle: #281600;
|
|
79
|
+
--mc-danger: #f08078;
|
|
80
|
+
--mc-danger-subtle: #280e0c;
|
|
81
|
+
--mc-info: #6ea8f8;
|
|
82
|
+
--mc-info-subtle: #0c1c38;
|
|
83
|
+
|
|
84
|
+
--mc-line: #1c2f2d;
|
|
85
|
+
--mc-line-strong: #294442;
|
|
86
|
+
--mc-shadow-xs: 0 1px 2px rgb(0 0 0 / 22%);
|
|
87
|
+
--mc-shadow-sm: 0 1px 4px rgb(0 0 0 / 28%), 0 4px 16px rgb(0 0 0 / 20%);
|
|
88
|
+
--mc-shadow: 0 2px 8px rgb(0 0 0 / 32%), 0 16px 40px rgb(0 0 0 / 24%);
|
|
89
|
+
--mc-shadow-lg: 0 8px 32px rgb(0 0 0 / 40%), 0 32px 64px rgb(0 0 0 / 30%);
|
|
90
|
+
|
|
91
|
+
--mc-focus-ring: 0 0 0 3px rgb(94 232 220 / 40%);
|
|
92
|
+
--mc-focus-color: #5ee8dc;
|
|
93
|
+
|
|
94
|
+
--rail-bg: linear-gradient(175deg, #040d0c 0%, #0a2320 60%, #0e3530 100%);
|
|
95
|
+
--rail-text: #c2e8e5;
|
|
96
|
+
--rail-icon: #8ec8c4;
|
|
97
|
+
--rail-active-bg: rgb(94 232 220 / 13%);
|
|
98
|
+
--rail-active-text: #5ee8dc;
|
|
99
|
+
--rail-hover-bg: rgb(255 255 255 / 5%);
|
|
100
|
+
--topbar-bg: rgba(18,30,29,0.92);
|
|
101
|
+
--topbar-border: var(--mc-line);
|
|
102
|
+
}
|
package/scss/index.scss
ADDED
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
// ================================================================
|
|
2
|
+
// @widescreen/medicore-theme — Full theme entry point
|
|
3
|
+
//
|
|
4
|
+
// Usage in your Angular app's styles.scss:
|
|
5
|
+
//
|
|
6
|
+
// @use '@angular/material' as mat;
|
|
7
|
+
//
|
|
8
|
+
// // 1. Bootstrap Material M3 (pick your palette):
|
|
9
|
+
// :root { @include mat.theme((color: (theme-type: light, primary: mat.$cyan-palette, tertiary: mat.$orange-palette), typography: Inter, density: -2)); }
|
|
10
|
+
// html.dark { @include mat.theme((color: (theme-type: dark, primary: mat.$cyan-palette, tertiary: mat.$orange-palette), typography: Inter, density: -2)); }
|
|
11
|
+
//
|
|
12
|
+
// @include mat.form-field-density(-5);
|
|
13
|
+
//
|
|
14
|
+
// // 2. Import this theme:
|
|
15
|
+
// @use '@widescreen/medicore-theme/scss' as mc;
|
|
16
|
+
// @include mc.all();
|
|
17
|
+
//
|
|
18
|
+
// // Or import just what you need:
|
|
19
|
+
// @use '@widescreen/medicore-theme/scss/tokens';
|
|
20
|
+
// @use '@widescreen/medicore-theme/scss/material';
|
|
21
|
+
// @use '@widescreen/medicore-theme/scss/components';
|
|
22
|
+
// @use '@widescreen/medicore-theme/scss/layout';
|
|
23
|
+
// @use '@widescreen/medicore-theme/scss/themes/rose'; // optional extra theme
|
|
24
|
+
// ================================================================
|
|
25
|
+
|
|
26
|
+
@forward 'tokens';
|
|
27
|
+
@forward 'material';
|
|
28
|
+
@forward 'components';
|
|
29
|
+
@forward 'layout';
|
|
30
|
+
|
|
31
|
+
// All 5 colour themes — remove any you don't need
|
|
32
|
+
@forward 'themes/teal';
|
|
33
|
+
@forward 'themes/rose';
|
|
34
|
+
@forward 'themes/azure';
|
|
35
|
+
@forward 'themes/magenta';
|
|
36
|
+
@forward 'themes/spring';
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
// MediCore Theme — Azure & Blue
|
|
2
|
+
html.theme-azure {
|
|
3
|
+
--mc-bg: #f0f5ff;
|
|
4
|
+
--mc-surface: #ffffff;
|
|
5
|
+
--mc-surface-alt: #eef2fe;
|
|
6
|
+
--mc-ink: #060d1f;
|
|
7
|
+
--mc-ink-soft: #253d7a;
|
|
8
|
+
--mc-ink-muted: #4060a0;
|
|
9
|
+
--mc-line: #bfcfef;
|
|
10
|
+
--mc-line-strong: #96b0e8;
|
|
11
|
+
--mc-primary: #1d4ed8;
|
|
12
|
+
--mc-primary-hov: #1e40af;
|
|
13
|
+
--mc-primary-subtle: #eff6ff;
|
|
14
|
+
--mc-accent: #0369a1;
|
|
15
|
+
--mc-accent-subtle: #f0f9ff;
|
|
16
|
+
--mc-focus-color: #1d4ed8;
|
|
17
|
+
--mc-focus-ring: 0 0 0 3px rgb(29 78 216 / 30%);
|
|
18
|
+
--mc-shadow-xs: 0 1px 2px rgb(29 78 216 / 6%);
|
|
19
|
+
--mc-shadow-sm: 0 1px 4px rgb(29 78 216 / 8%), 0 4px 16px rgb(29 78 216 / 5%);
|
|
20
|
+
--mc-shadow: 0 2px 8px rgb(29 78 216 / 8%), 0 16px 40px rgb(29 78 216 / 6%);
|
|
21
|
+
--rail-bg: linear-gradient(175deg, #0c1a4a 0%, #1e3a8a 60%, #2563eb 100%);
|
|
22
|
+
--rail-icon: #93c5fd;
|
|
23
|
+
--rail-active-text: #ffffff;
|
|
24
|
+
--rail-active-bg: rgb(255 255 255 / 14%);
|
|
25
|
+
--topbar-bg: rgba(240,245,255,0.90);
|
|
26
|
+
}
|
|
27
|
+
html.dark.theme-azure {
|
|
28
|
+
--mc-primary: #60a5fa;
|
|
29
|
+
--mc-primary-hov: #93c5fd;
|
|
30
|
+
--mc-primary-subtle: #0a1628;
|
|
31
|
+
--mc-focus-color: #60a5fa;
|
|
32
|
+
--mc-focus-ring: 0 0 0 3px rgb(96 165 250 / 35%);
|
|
33
|
+
--rail-bg: linear-gradient(175deg, #050a1a 0%, #0f1f4a 60%, #1a3270 100%);
|
|
34
|
+
--rail-active-text: #60a5fa;
|
|
35
|
+
--rail-active-bg: rgb(96 165 250 / 13%);
|
|
36
|
+
--mc-bg: #060a14;
|
|
37
|
+
--mc-surface: #0c1422;
|
|
38
|
+
--mc-surface-alt: #111c30;
|
|
39
|
+
--mc-ink: #dce6f8;
|
|
40
|
+
--mc-ink-soft: #7a9ccc;
|
|
41
|
+
--mc-ink-muted: #5a7aa8;
|
|
42
|
+
--mc-line: #182440;
|
|
43
|
+
--mc-line-strong: #243560;
|
|
44
|
+
--mc-shadow-xs: 0 1px 2px rgb(0 0 0 / 30%);
|
|
45
|
+
--mc-shadow-sm: 0 1px 4px rgb(0 0 0 / 36%), 0 4px 16px rgb(0 0 0 / 24%);
|
|
46
|
+
--topbar-bg: rgba(12,20,34,0.92);
|
|
47
|
+
--topbar-border: var(--mc-line);
|
|
48
|
+
}
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
// MediCore Theme — Magenta & Violet
|
|
2
|
+
html.theme-magenta {
|
|
3
|
+
--mc-bg: #fef5ff;
|
|
4
|
+
--mc-surface: #ffffff;
|
|
5
|
+
--mc-surface-alt: #fdf0ff;
|
|
6
|
+
--mc-ink: #1a041d;
|
|
7
|
+
--mc-ink-soft: #5a1f62;
|
|
8
|
+
--mc-ink-muted: #7d3d88;
|
|
9
|
+
--mc-line: #f0c0f8;
|
|
10
|
+
--mc-line-strong: #e090f0;
|
|
11
|
+
--mc-primary: #a21caf;
|
|
12
|
+
--mc-primary-hov: #86198f;
|
|
13
|
+
--mc-primary-subtle: #fdf4ff;
|
|
14
|
+
--mc-accent: #7c3aed;
|
|
15
|
+
--mc-accent-subtle: #f5f3ff;
|
|
16
|
+
--mc-focus-color: #a21caf;
|
|
17
|
+
--mc-focus-ring: 0 0 0 3px rgb(162 28 175 / 30%);
|
|
18
|
+
--mc-shadow-xs: 0 1px 2px rgb(162 28 175 / 6%);
|
|
19
|
+
--mc-shadow-sm: 0 1px 4px rgb(162 28 175 / 8%), 0 4px 16px rgb(162 28 175 / 5%);
|
|
20
|
+
--mc-shadow: 0 2px 8px rgb(162 28 175 / 8%), 0 16px 40px rgb(162 28 175 / 6%);
|
|
21
|
+
--rail-bg: linear-gradient(175deg, #2e0038 0%, #7b0e8a 60%, #a61db5 100%);
|
|
22
|
+
--rail-icon: #e879f9;
|
|
23
|
+
--rail-active-text: #ffffff;
|
|
24
|
+
--rail-active-bg: rgb(255 255 255 / 14%);
|
|
25
|
+
--topbar-bg: rgba(254,245,255,0.90);
|
|
26
|
+
}
|
|
27
|
+
html.dark.theme-magenta {
|
|
28
|
+
--mc-primary: #e879f9;
|
|
29
|
+
--mc-primary-hov: #f0abfc;
|
|
30
|
+
--mc-primary-subtle: #220a28;
|
|
31
|
+
--mc-focus-color: #e879f9;
|
|
32
|
+
--mc-focus-ring: 0 0 0 3px rgb(232 121 249 / 35%);
|
|
33
|
+
--rail-bg: linear-gradient(175deg, #120018 0%, #2d0638 60%, #4a0c58 100%);
|
|
34
|
+
--rail-active-text: #e879f9;
|
|
35
|
+
--rail-active-bg: rgb(232 121 249 / 13%);
|
|
36
|
+
--mc-bg: #0f0614;
|
|
37
|
+
--mc-surface: #180a20;
|
|
38
|
+
--mc-surface-alt: #200d2b;
|
|
39
|
+
--mc-ink: #f0ddf5;
|
|
40
|
+
--mc-ink-soft: #b87ec8;
|
|
41
|
+
--mc-ink-muted: #8e5ca0;
|
|
42
|
+
--mc-line: #301040;
|
|
43
|
+
--mc-line-strong: #4a1860;
|
|
44
|
+
--mc-shadow-xs: 0 1px 2px rgb(0 0 0 / 30%);
|
|
45
|
+
--mc-shadow-sm: 0 1px 4px rgb(0 0 0 / 36%), 0 4px 16px rgb(0 0 0 / 24%);
|
|
46
|
+
--topbar-bg: rgba(24,10,32,0.92);
|
|
47
|
+
--topbar-border: var(--mc-line);
|
|
48
|
+
}
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
// MediCore Theme — Rose & Red
|
|
2
|
+
html.theme-rose {
|
|
3
|
+
--mc-bg: #fff5f6;
|
|
4
|
+
--mc-surface: #ffffff;
|
|
5
|
+
--mc-surface-alt: #fff0f1;
|
|
6
|
+
--mc-ink: #1f0509;
|
|
7
|
+
--mc-ink-soft: #5c2030;
|
|
8
|
+
--mc-ink-muted: #7d4050;
|
|
9
|
+
--mc-line: #fbc4cc;
|
|
10
|
+
--mc-line-strong: #f89aab;
|
|
11
|
+
--mc-primary: #9f1239;
|
|
12
|
+
--mc-primary-hov: #7f0f2d;
|
|
13
|
+
--mc-primary-subtle: #fff1f2;
|
|
14
|
+
--mc-accent: #b91c1c;
|
|
15
|
+
--mc-accent-subtle: #fef2f2;
|
|
16
|
+
--mc-focus-color: #9f1239;
|
|
17
|
+
--mc-focus-ring: 0 0 0 3px rgb(159 18 57 / 30%);
|
|
18
|
+
--mc-shadow-xs: 0 1px 2px rgb(159 18 57 / 6%);
|
|
19
|
+
--mc-shadow-sm: 0 1px 4px rgb(159 18 57 / 8%), 0 4px 16px rgb(159 18 57 / 5%);
|
|
20
|
+
--mc-shadow: 0 2px 8px rgb(159 18 57 / 8%), 0 16px 40px rgb(159 18 57 / 6%);
|
|
21
|
+
--rail-bg: linear-gradient(175deg, #3b0012 0%, #7f0f2d 60%, #be1248 100%);
|
|
22
|
+
--rail-icon: #fca5a5;
|
|
23
|
+
--rail-active-text: #ffffff;
|
|
24
|
+
--rail-active-bg: rgb(255 255 255 / 14%);
|
|
25
|
+
--topbar-bg: rgba(255,245,246,0.90);
|
|
26
|
+
}
|
|
27
|
+
html.dark.theme-rose {
|
|
28
|
+
--mc-primary: #fb7185;
|
|
29
|
+
--mc-primary-hov: #fda4af;
|
|
30
|
+
--mc-primary-subtle: #2d0a12;
|
|
31
|
+
--mc-focus-color: #fb7185;
|
|
32
|
+
--mc-focus-ring: 0 0 0 3px rgb(251 113 133 / 35%);
|
|
33
|
+
--rail-bg: linear-gradient(175deg, #1a0208 0%, #3b0a14 60%, #5c1022 100%);
|
|
34
|
+
--rail-active-text: #fb7185;
|
|
35
|
+
--rail-active-bg: rgb(251 113 133 / 13%);
|
|
36
|
+
--mc-bg: #130407;
|
|
37
|
+
--mc-surface: #1e080d;
|
|
38
|
+
--mc-surface-alt: #270c13;
|
|
39
|
+
--mc-ink: #f5dde0;
|
|
40
|
+
--mc-ink-soft: #c4848c;
|
|
41
|
+
--mc-ink-muted: #9a6068;
|
|
42
|
+
--mc-line: #3a1018;
|
|
43
|
+
--mc-line-strong: #5a1c26;
|
|
44
|
+
--mc-shadow-xs: 0 1px 2px rgb(0 0 0 / 30%);
|
|
45
|
+
--mc-shadow-sm: 0 1px 4px rgb(0 0 0 / 36%), 0 4px 16px rgb(0 0 0 / 24%);
|
|
46
|
+
--topbar-bg: rgba(30,8,13,0.92);
|
|
47
|
+
--topbar-border: var(--mc-line);
|
|
48
|
+
}
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
// MediCore Theme — Spring & Green
|
|
2
|
+
html.theme-spring {
|
|
3
|
+
--mc-bg: #f0fdf4;
|
|
4
|
+
--mc-surface: #ffffff;
|
|
5
|
+
--mc-surface-alt: #ebfcf0;
|
|
6
|
+
--mc-ink: #052010;
|
|
7
|
+
--mc-ink-soft: #1a5c30;
|
|
8
|
+
--mc-ink-muted: #306e48;
|
|
9
|
+
--mc-line: #bbf0cc;
|
|
10
|
+
--mc-line-strong: #86e0a0;
|
|
11
|
+
--mc-primary: #15803d;
|
|
12
|
+
--mc-primary-hov: #166534;
|
|
13
|
+
--mc-primary-subtle: #f0fdf4;
|
|
14
|
+
--mc-accent: #0f766e;
|
|
15
|
+
--mc-accent-subtle: #f0fdfa;
|
|
16
|
+
--mc-focus-color: #15803d;
|
|
17
|
+
--mc-focus-ring: 0 0 0 3px rgb(21 128 61 / 30%);
|
|
18
|
+
--mc-shadow-xs: 0 1px 2px rgb(21 128 61 / 6%);
|
|
19
|
+
--mc-shadow-sm: 0 1px 4px rgb(21 128 61 / 8%), 0 4px 16px rgb(21 128 61 / 5%);
|
|
20
|
+
--mc-shadow: 0 2px 8px rgb(21 128 61 / 8%), 0 16px 40px rgb(21 128 61 / 6%);
|
|
21
|
+
--rail-bg: linear-gradient(175deg, #052e16 0%, #14532d 60%, #166534 100%);
|
|
22
|
+
--rail-icon: #86efac;
|
|
23
|
+
--rail-active-text: #ffffff;
|
|
24
|
+
--rail-active-bg: rgb(255 255 255 / 14%);
|
|
25
|
+
--topbar-bg: rgba(240,253,244,0.90);
|
|
26
|
+
}
|
|
27
|
+
html.dark.theme-spring {
|
|
28
|
+
--mc-primary: #4ade80;
|
|
29
|
+
--mc-primary-hov: #86efac;
|
|
30
|
+
--mc-primary-subtle: #061a0c;
|
|
31
|
+
--mc-focus-color: #4ade80;
|
|
32
|
+
--mc-focus-ring: 0 0 0 3px rgb(74 222 128 / 35%);
|
|
33
|
+
--rail-bg: linear-gradient(175deg, #021008 0%, #062818 60%, #0a3d24 100%);
|
|
34
|
+
--rail-active-text: #4ade80;
|
|
35
|
+
--rail-active-bg: rgb(74 222 128 / 13%);
|
|
36
|
+
--mc-bg: #040e07;
|
|
37
|
+
--mc-surface: #09180c;
|
|
38
|
+
--mc-surface-alt: #0d2012;
|
|
39
|
+
--mc-ink: #d8f0de;
|
|
40
|
+
--mc-ink-soft: #72b882;
|
|
41
|
+
--mc-ink-muted: #508f60;
|
|
42
|
+
--mc-line: #122a18;
|
|
43
|
+
--mc-line-strong: #1c4028;
|
|
44
|
+
--mc-shadow-xs: 0 1px 2px rgb(0 0 0 / 30%);
|
|
45
|
+
--mc-shadow-sm: 0 1px 4px rgb(0 0 0 / 36%), 0 4px 16px rgb(0 0 0 / 24%);
|
|
46
|
+
--topbar-bg: rgba(9,24,12,0.92);
|
|
47
|
+
--topbar-border: var(--mc-line);
|
|
48
|
+
}
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
// MediCore Theme — Teal (default)
|
|
2
|
+
// Include this file OR let index.scss handle it via @use
|
|
3
|
+
|
|
4
|
+
:root,
|
|
5
|
+
html.theme-teal {
|
|
6
|
+
--mc-bg: #eef6f5;
|
|
7
|
+
--mc-surface: #ffffff;
|
|
8
|
+
--mc-surface-alt: #f4fbfa;
|
|
9
|
+
--mc-ink: #0c1f1e;
|
|
10
|
+
--mc-ink-soft: #3d5c5a;
|
|
11
|
+
--mc-ink-muted: #5e7f7d;
|
|
12
|
+
--mc-line: #cfe0df;
|
|
13
|
+
--mc-line-strong: #a0bfbd;
|
|
14
|
+
--mc-primary: #0a5a54;
|
|
15
|
+
--mc-primary-hov: #083f3b;
|
|
16
|
+
--mc-primary-subtle: #e0f4f2;
|
|
17
|
+
--mc-accent: #7a4500;
|
|
18
|
+
--mc-accent-subtle: #fff3e0;
|
|
19
|
+
--mc-focus-color: #0a5a54;
|
|
20
|
+
--mc-focus-ring: 0 0 0 3px rgb(10 90 84 / 35%);
|
|
21
|
+
--mc-shadow-xs: 0 1px 2px rgb(10 40 38 / 6%);
|
|
22
|
+
--mc-shadow-sm: 0 1px 4px rgb(10 40 38 / 8%), 0 4px 16px rgb(10 40 38 / 6%);
|
|
23
|
+
--mc-shadow: 0 2px 8px rgb(10 40 38 / 8%), 0 16px 40px rgb(10 40 38 / 8%);
|
|
24
|
+
--rail-bg: linear-gradient(175deg, #042220 0%, #0a4a45 60%, #0d6060 100%);
|
|
25
|
+
--rail-icon: #b8deda;
|
|
26
|
+
--rail-active-text: #ffffff;
|
|
27
|
+
--rail-active-bg: rgb(255 255 255 / 14%);
|
|
28
|
+
--topbar-bg: rgba(255,255,255,0.88);
|
|
29
|
+
}
|
|
30
|
+
html.dark.theme-teal {
|
|
31
|
+
--mc-primary: #5ee8dc;
|
|
32
|
+
--mc-primary-hov: #82ede5;
|
|
33
|
+
--mc-primary-subtle: #0c2d2b;
|
|
34
|
+
--mc-focus-color: #5ee8dc;
|
|
35
|
+
--mc-focus-ring: 0 0 0 3px rgb(94 232 220 / 40%);
|
|
36
|
+
--rail-bg: linear-gradient(175deg, #040d0c 0%, #0a2320 60%, #0e3530 100%);
|
|
37
|
+
--rail-active-text: #5ee8dc;
|
|
38
|
+
--rail-active-bg: rgb(94 232 220 / 13%);
|
|
39
|
+
}
|