@akcelik/strct 0.7.2 → 0.8.1
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 +31 -14
- package/fesm2022/akcelik-strct.mjs +81 -38
- package/fesm2022/akcelik-strct.mjs.map +1 -1
- package/package.json +1 -1
- package/styles/_base.scss +8 -0
- package/styles/_tokens.scss +34 -12
- package/types/akcelik-strct.d.ts +7 -1
package/README.md
CHANGED
|
@@ -11,6 +11,7 @@ attribute swap re-skins the whole library.
|
|
|
11
11
|
- Standalone components, signal inputs, `OnPush` everywhere
|
|
12
12
|
- `ControlValueAccessor` support on every form control
|
|
13
13
|
- No runtime CSS framework dependency
|
|
14
|
+
- WCAG-AA text contrast · OS-aware theming · `prefers-contrast` / `prefers-reduced-motion` honoured
|
|
14
15
|
|
|
15
16
|
## Install
|
|
16
17
|
|
|
@@ -44,7 +45,7 @@ external request and nothing else to load.
|
|
|
44
45
|
Set the scheme on the document root (or let `StrctThemeService` manage it):
|
|
45
46
|
|
|
46
47
|
```html
|
|
47
|
-
<html data-palette="arctic" data-theme="dark">
|
|
48
|
+
<html data-palette="arctic" data-theme="dark"></html>
|
|
48
49
|
```
|
|
49
50
|
|
|
50
51
|
```ts
|
|
@@ -52,10 +53,14 @@ import { StrctThemeService } from '@akcelik/strct';
|
|
|
52
53
|
|
|
53
54
|
const theme = inject(StrctThemeService);
|
|
54
55
|
theme.setPalette('ember'); // 'arctic' | 'ember' | 'sage'
|
|
55
|
-
theme.setMode('light');
|
|
56
|
+
theme.setMode('light'); // 'dark' | 'light' (persisted to localStorage)
|
|
56
57
|
theme.toggleMode();
|
|
57
58
|
```
|
|
58
59
|
|
|
60
|
+
By default `StrctThemeService` follows the operating system's light/dark
|
|
61
|
+
preference (`prefers-color-scheme`) — and tracks it live — until the user makes an
|
|
62
|
+
explicit choice, which is then persisted and wins.
|
|
63
|
+
|
|
59
64
|
Drop the ready-made switcher anywhere:
|
|
60
65
|
|
|
61
66
|
```html
|
|
@@ -66,17 +71,17 @@ Drop the ready-made switcher anywhere:
|
|
|
66
71
|
|
|
67
72
|
Import only what you use — every component is standalone.
|
|
68
73
|
|
|
69
|
-
| Area
|
|
70
|
-
|
|
71
|
-
| Layout
|
|
72
|
-
| Controls
|
|
73
|
-
| Surfaces
|
|
74
|
-
| Navigation
|
|
75
|
-
| Forms
|
|
76
|
-
| Data
|
|
77
|
-
| Charts
|
|
78
|
-
| Feedback
|
|
79
|
-
| Foundations | `strct-icon` (datacenter icon set + status `badge`), `strct-theme-switcher`
|
|
74
|
+
| Area | Components |
|
|
75
|
+
| ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
76
|
+
| Layout | `strct-shell`, `strct-header`, `strct-footer`, `strct-vertical-nav`, `strct-nav` / `strct-nav-item`, `strct-rail` (collapsible icon nav), `strct-login` |
|
|
77
|
+
| Controls | `button[strct-button]`, `strct-button-group`, `strct-speed-dial`, `strct-badge`, `strct-tag`, `strct-avatar`, `strct-progress`, `strct-spinner`, `strct-skeleton` |
|
|
78
|
+
| Surfaces | `strct-card` (+ header/block/footer), `strct-accordion`, `strct-tabs`, `strct-tree`, `strct-modal`, `strct-drawer` (edge-anchored panel), `strct-dropdown`, `strct-context-menu` (+ `strct-submenu`), `strct-wizard`, `strct-divider` |
|
|
79
|
+
| Navigation | `strct-breadcrumb` / `strct-breadcrumb-item`, `strct-pagination` |
|
|
80
|
+
| Forms | `strctInput`, `strct-checkbox`, `strct-toggle`, `strct-radio-group` / `strct-radio`, `strct-range`, `strct-combobox`, `strct-cascade-select`, `strct-datepicker`, `strct-password`, `strct-file`, `strct-color-picker`, `strct-rating`, `strct-chips`, `strct-input-otp`, `strct-knob`, `strct-input-mask` |
|
|
81
|
+
| Data | `strct-table`, `strct-datagrid` (sort / select / expandable rows / detail pane / batch bar / per-row kebab menu / resizable / column chooser), `strct-timeline` / `strct-timeline-item`, `strct-stack` / `strct-stack-item` |
|
|
82
|
+
| Charts | `strct-sparkline`, `strct-chart` (line / area / bar), `strct-donut`, `strct-gauge` |
|
|
83
|
+
| Feedback | `strct-alert`, `strctTooltip`, `strct-signpost`, `strct-toast-outlet` + `StrctToastService` |
|
|
84
|
+
| Foundations | `strct-icon` (datacenter icon set + status `badge`), `strct-theme-switcher` |
|
|
80
85
|
|
|
81
86
|
### Examples
|
|
82
87
|
|
|
@@ -104,7 +109,19 @@ Components reference these CSS variables only — never hard-coded colors:
|
|
|
104
109
|
|
|
105
110
|
`--bg-0..--bg-a` surfaces · `--hdr` header · `--b1/--b2/--b3` borders ·
|
|
106
111
|
`--t1..--t4` text · `--inv` inverse · `--acc` (+ `--acc-m/-s/50/30/18`) accent ·
|
|
107
|
-
`--
|
|
112
|
+
`--success / --warning / --critical` semantic (+ `*-bg`) · `--sh / --shh` shadows · `--sb` scrollbar.
|
|
113
|
+
|
|
114
|
+
## Accessibility & eye comfort
|
|
115
|
+
|
|
116
|
+
Reviewed against WCAG and display-ergonomics / vision science to limit eye strain
|
|
117
|
+
in long, all-day console sessions:
|
|
118
|
+
|
|
119
|
+
- **WCAG AA text contrast** — `--t1/--t2/--t3` all meet AA (≥ 4.5:1) in every
|
|
120
|
+
palette and mode, with a preserved `t1 > t2 > t3` hierarchy.
|
|
121
|
+
- **OS-aware theming** — follows `prefers-color-scheme` until an explicit choice.
|
|
122
|
+
- **`prefers-contrast: more`** — stronger borders, text and focus ring on request.
|
|
123
|
+
- **`prefers-reduced-motion`** — animations collapse to instant state changes.
|
|
124
|
+
- **12px type-size floor**, 1.5 body line-height, softened (non-pure-white) light surfaces.
|
|
108
125
|
|
|
109
126
|
## License
|
|
110
127
|
|