@akcelik/strct 0.1.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/LICENSE +21 -0
- package/README.md +99 -0
- package/fesm2022/akcelik-strct.mjs +5375 -0
- package/fesm2022/akcelik-strct.mjs.map +1 -0
- package/package.json +54 -0
- package/styles/_base.scss +46 -0
- package/styles/_forms.scss +53 -0
- package/styles/_tokens.scss +113 -0
- package/styles/theme.scss +10 -0
- package/types/akcelik-strct.d.ts +1375 -0
package/package.json
ADDED
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@akcelik/strct",
|
|
3
|
+
"version": "0.1.0",
|
|
4
|
+
"description": "UIStruct — a standalone Angular component library with a tokenised, multi-palette theme system, built for datacenter / infrastructure management UIs.",
|
|
5
|
+
"author": "Serkan Akcelik <serkan.akcelik@gmail.com>",
|
|
6
|
+
"license": "MIT",
|
|
7
|
+
"homepage": "https://github.com/akcelik/uistruct#readme",
|
|
8
|
+
"repository": {
|
|
9
|
+
"type": "git",
|
|
10
|
+
"url": "git+https://github.com/akcelik/uistruct.git"
|
|
11
|
+
},
|
|
12
|
+
"bugs": {
|
|
13
|
+
"url": "https://github.com/akcelik/uistruct/issues"
|
|
14
|
+
},
|
|
15
|
+
"keywords": [
|
|
16
|
+
"angular",
|
|
17
|
+
"component-library",
|
|
18
|
+
"ui",
|
|
19
|
+
"ux",
|
|
20
|
+
"design-system",
|
|
21
|
+
"components",
|
|
22
|
+
"theme",
|
|
23
|
+
"tokens",
|
|
24
|
+
"standalone",
|
|
25
|
+
"signals",
|
|
26
|
+
"datacenter",
|
|
27
|
+
"infrastructure",
|
|
28
|
+
"strct",
|
|
29
|
+
"uistruct"
|
|
30
|
+
],
|
|
31
|
+
"peerDependencies": {
|
|
32
|
+
"@angular/common": "^21.2.0",
|
|
33
|
+
"@angular/core": "^21.2.0",
|
|
34
|
+
"@angular/forms": "^21.2.0",
|
|
35
|
+
"@angular/platform-browser": "^21.2.0"
|
|
36
|
+
},
|
|
37
|
+
"dependencies": {
|
|
38
|
+
"tslib": "^2.3.0"
|
|
39
|
+
},
|
|
40
|
+
"exports": {
|
|
41
|
+
"./styles/*": "./styles/*",
|
|
42
|
+
"./package.json": {
|
|
43
|
+
"default": "./package.json"
|
|
44
|
+
},
|
|
45
|
+
".": {
|
|
46
|
+
"types": "./types/akcelik-strct.d.ts",
|
|
47
|
+
"default": "./fesm2022/akcelik-strct.mjs"
|
|
48
|
+
}
|
|
49
|
+
},
|
|
50
|
+
"sideEffects": false,
|
|
51
|
+
"module": "fesm2022/akcelik-strct.mjs",
|
|
52
|
+
"typings": "types/akcelik-strct.d.ts",
|
|
53
|
+
"type": "module"
|
|
54
|
+
}
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
// Base reset + element defaults for UIStruct. Consumers get this for free by
|
|
2
|
+
// importing `strct/styles/theme.scss`. Everything reads from the token layer.
|
|
3
|
+
|
|
4
|
+
*,
|
|
5
|
+
*::before,
|
|
6
|
+
*::after { box-sizing: border-box; }
|
|
7
|
+
|
|
8
|
+
html,
|
|
9
|
+
body { height: 100%; }
|
|
10
|
+
|
|
11
|
+
body {
|
|
12
|
+
margin: 0;
|
|
13
|
+
font-family: var(--font);
|
|
14
|
+
font-size: 14px;
|
|
15
|
+
line-height: 1.45;
|
|
16
|
+
color: var(--t1);
|
|
17
|
+
background: var(--bg-2);
|
|
18
|
+
-webkit-font-smoothing: antialiased;
|
|
19
|
+
text-rendering: optimizeLegibility;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
// Roomy, themable scrollbars (WebKit) that fade into the surface.
|
|
23
|
+
* {
|
|
24
|
+
scrollbar-width: thin;
|
|
25
|
+
scrollbar-color: var(--sb) transparent;
|
|
26
|
+
}
|
|
27
|
+
*::-webkit-scrollbar { width: 10px; height: 10px; }
|
|
28
|
+
*::-webkit-scrollbar-thumb {
|
|
29
|
+
background: var(--sb);
|
|
30
|
+
border-radius: 6px;
|
|
31
|
+
border: 2px solid transparent;
|
|
32
|
+
background-clip: padding-box;
|
|
33
|
+
}
|
|
34
|
+
*::-webkit-scrollbar-thumb:hover { background: var(--b3); background-clip: padding-box; }
|
|
35
|
+
|
|
36
|
+
a { color: var(--acc); text-decoration: none; }
|
|
37
|
+
a:hover { text-decoration: underline; }
|
|
38
|
+
|
|
39
|
+
code,
|
|
40
|
+
kbd,
|
|
41
|
+
.strct-mono { font-family: var(--mono); }
|
|
42
|
+
|
|
43
|
+
:focus-visible {
|
|
44
|
+
outline: 2px solid var(--acc50);
|
|
45
|
+
outline-offset: 2px;
|
|
46
|
+
}
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
// Shared styling for native form controls wearing the `strctInput` directive
|
|
2
|
+
// (which simply applies the `.strct-control` class). Kept in the theme layer so
|
|
3
|
+
// inputs / selects / textareas share one definition.
|
|
4
|
+
|
|
5
|
+
.strct-control {
|
|
6
|
+
display: block;
|
|
7
|
+
width: 100%;
|
|
8
|
+
font-family: var(--font);
|
|
9
|
+
font-size: 13px;
|
|
10
|
+
line-height: 1.3;
|
|
11
|
+
color: var(--t1);
|
|
12
|
+
background: var(--bg-2);
|
|
13
|
+
border: 1px solid var(--b2);
|
|
14
|
+
border-radius: 6px;
|
|
15
|
+
padding: 7px 10px;
|
|
16
|
+
transition: border-color .14s ease, box-shadow .14s ease, background .14s ease;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.strct-control::placeholder { color: var(--t3); }
|
|
20
|
+
|
|
21
|
+
.strct-control:hover { border-color: var(--b3); }
|
|
22
|
+
|
|
23
|
+
.strct-control:focus,
|
|
24
|
+
.strct-control:focus-visible {
|
|
25
|
+
outline: none;
|
|
26
|
+
border-color: var(--acc50);
|
|
27
|
+
box-shadow: 0 0 0 3px var(--acc18);
|
|
28
|
+
background: var(--bg-1);
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.strct-control:disabled {
|
|
32
|
+
opacity: .5;
|
|
33
|
+
cursor: not-allowed;
|
|
34
|
+
background: var(--bg-3);
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.strct-control[aria-invalid='true'] {
|
|
38
|
+
border-color: var(--crt);
|
|
39
|
+
}
|
|
40
|
+
.strct-control[aria-invalid='true']:focus {
|
|
41
|
+
box-shadow: 0 0 0 3px var(--crt-bg);
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
// Native <select> gets a custom chevron.
|
|
45
|
+
select.strct-control {
|
|
46
|
+
appearance: none;
|
|
47
|
+
padding-right: 30px;
|
|
48
|
+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
|
|
49
|
+
background-repeat: no-repeat;
|
|
50
|
+
background-position: right 9px center;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
textarea.strct-control { min-height: 76px; resize: vertical; }
|
|
@@ -0,0 +1,113 @@
|
|
|
1
|
+
// UIStruct design tokens.
|
|
2
|
+
// Six surface schemes = 3 palettes (arctic / ember / sage) x 2 modes (dark / light).
|
|
3
|
+
// Tokens are exposed as CSS custom properties bound to the `data-palette` and
|
|
4
|
+
// `data-theme` attributes on the document root, so a single attribute swap
|
|
5
|
+
// re-skins the entire component tree.
|
|
6
|
+
//
|
|
7
|
+
// Token groups:
|
|
8
|
+
// --bg-0..--bg-a surfaces (lowest -> raised/active) --hdr header surface
|
|
9
|
+
// --b1/--b2/--b3 hairline -> strong borders
|
|
10
|
+
// --t1..--t4 text (primary -> faint) --inv inverse text
|
|
11
|
+
// --acc + acc-* accent and its translucent tints
|
|
12
|
+
// --ok/--wrn/--crt semantic (success / warning / critical) + *-bg fills
|
|
13
|
+
// --sh/--shh resting / raised shadows --sb scrollbar thumb
|
|
14
|
+
|
|
15
|
+
// Default scheme (arctic / dark) so the library renders before any attribute is set.
|
|
16
|
+
:root,
|
|
17
|
+
[data-palette='arctic'][data-theme='dark'] {
|
|
18
|
+
--font: 'DM Sans', -apple-system, system-ui, sans-serif;
|
|
19
|
+
--mono: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;
|
|
20
|
+
--bg-0: #0e1015; --bg-1: #161920; --bg-2: #1c2028; --bg-3: #23282f; --bg-h: #272c35; --bg-a: #2e343e;
|
|
21
|
+
--b1: rgba(255,255,255,.055); --b2: rgba(255,255,255,.09); --b3: rgba(255,255,255,.14);
|
|
22
|
+
--t1: rgba(255,255,255,.90); --t2: rgba(255,255,255,.52); --t3: rgba(255,255,255,.28); --t4: rgba(255,255,255,.15);
|
|
23
|
+
--inv: #0e1015;
|
|
24
|
+
--acc: #7b9ec8; --acc-m: rgba(123,158,200,.12); --acc-s: rgba(123,158,200,.06);
|
|
25
|
+
--acc50: rgba(123,158,200,.50); --acc30: rgba(123,158,200,.30); --acc18: rgba(123,158,200,.18);
|
|
26
|
+
--ok: #7da87e; --ok-bg: rgba(125,168,126,.12);
|
|
27
|
+
--wrn: #bfae6a; --wrn-bg: rgba(191,174,106,.12);
|
|
28
|
+
--crt: #b87872; --crt-bg: rgba(184,120,114,.12);
|
|
29
|
+
--hdr: #12141a;
|
|
30
|
+
--sh: 0 1px 3px rgba(0,0,0,.5), 0 0 0 1px var(--b1);
|
|
31
|
+
--shh: 0 4px 20px rgba(0,0,0,.55), 0 0 0 1px var(--b2);
|
|
32
|
+
--sb: rgba(255,255,255,.08); --dn: rgba(255,255,255,.06);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
[data-palette='arctic'][data-theme='light'] {
|
|
36
|
+
--bg-0: #f3f4f6; --bg-1: #ffffff; --bg-2: #f8f9fb; --bg-3: #eef0f3; --bg-h: #f0f1f4; --bg-a: #e6e8ec;
|
|
37
|
+
--b1: rgba(0,0,0,.05); --b2: rgba(0,0,0,.09); --b3: rgba(0,0,0,.15);
|
|
38
|
+
--t1: rgba(0,0,0,.90); --t2: rgba(0,0,0,.62); --t3: rgba(0,0,0,.42); --t4: rgba(0,0,0,.14);
|
|
39
|
+
--inv: #ffffff;
|
|
40
|
+
--acc: #5a7ea3; --acc-m: rgba(90,126,163,.10); --acc-s: rgba(90,126,163,.05);
|
|
41
|
+
--acc50: rgba(90,126,163,.50); --acc30: rgba(90,126,163,.30); --acc18: rgba(90,126,163,.18);
|
|
42
|
+
--ok: #5e8a60; --ok-bg: rgba(94,138,96,.12);
|
|
43
|
+
--wrn: #9a8a3e; --wrn-bg: rgba(154,138,62,.12);
|
|
44
|
+
--crt: #a0635c; --crt-bg: rgba(160,99,92,.12);
|
|
45
|
+
--hdr: #1c2330;
|
|
46
|
+
--sh: 0 1px 3px rgba(0,0,0,.06), 0 0 0 1px var(--b1);
|
|
47
|
+
--shh: 0 4px 14px rgba(0,0,0,.09), 0 0 0 1px var(--b2);
|
|
48
|
+
--sb: rgba(0,0,0,.10); --dn: rgba(0,0,0,.04);
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
[data-palette='ember'][data-theme='dark'] {
|
|
52
|
+
--bg-0: #12100d; --bg-1: #1a1714; --bg-2: #211e1a; --bg-3: #2a2621; --bg-h: #302b25; --bg-a: #37312a;
|
|
53
|
+
--b1: rgba(255,235,210,.055); --b2: rgba(255,235,210,.09); --b3: rgba(255,235,210,.14);
|
|
54
|
+
--t1: rgba(255,240,220,.88); --t2: rgba(255,235,210,.50); --t3: rgba(255,230,200,.27); --t4: rgba(255,225,195,.14);
|
|
55
|
+
--inv: #12100d;
|
|
56
|
+
--acc: #c49a6c; --acc-m: rgba(196,154,108,.12); --acc-s: rgba(196,154,108,.06);
|
|
57
|
+
--acc50: rgba(196,154,108,.50); --acc30: rgba(196,154,108,.30); --acc18: rgba(196,154,108,.18);
|
|
58
|
+
--ok: #8aaa7a; --ok-bg: rgba(138,170,122,.12);
|
|
59
|
+
--wrn: #c4b060; --wrn-bg: rgba(196,176,96,.12);
|
|
60
|
+
--crt: #bf7e72; --crt-bg: rgba(191,126,114,.12);
|
|
61
|
+
--hdr: #15120f;
|
|
62
|
+
--sh: 0 1px 3px rgba(0,0,0,.5), 0 0 0 1px var(--b1);
|
|
63
|
+
--shh: 0 4px 20px rgba(0,0,0,.55), 0 0 0 1px var(--b2);
|
|
64
|
+
--sb: rgba(255,235,210,.08); --dn: rgba(255,235,210,.05);
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
[data-palette='ember'][data-theme='light'] {
|
|
68
|
+
--bg-0: #f5f2ee; --bg-1: #fdfcfa; --bg-2: #f9f7f4; --bg-3: #f0ece7; --bg-h: #eee9e3; --bg-a: #e5e0d8;
|
|
69
|
+
--b1: rgba(80,50,20,.06); --b2: rgba(80,50,20,.10); --b3: rgba(80,50,20,.16);
|
|
70
|
+
--t1: rgba(50,35,20,.90); --t2: rgba(60,40,20,.64); --t3: rgba(70,50,30,.44); --t4: rgba(80,55,30,.14);
|
|
71
|
+
--inv: #fdfcfa;
|
|
72
|
+
--acc: #96724e; --acc-m: rgba(150,114,78,.10); --acc-s: rgba(150,114,78,.05);
|
|
73
|
+
--acc50: rgba(150,114,78,.50); --acc30: rgba(150,114,78,.30); --acc18: rgba(150,114,78,.18);
|
|
74
|
+
--ok: #5e8a56; --ok-bg: rgba(94,138,86,.12);
|
|
75
|
+
--wrn: #9a8838; --wrn-bg: rgba(154,136,56,.12);
|
|
76
|
+
--crt: #a0605a; --crt-bg: rgba(160,96,90,.12);
|
|
77
|
+
--hdr: #2a2118;
|
|
78
|
+
--sh: 0 1px 3px rgba(40,25,10,.07), 0 0 0 1px var(--b1);
|
|
79
|
+
--shh: 0 4px 14px rgba(40,25,10,.10), 0 0 0 1px var(--b2);
|
|
80
|
+
--sb: rgba(60,40,20,.10); --dn: rgba(60,40,20,.04);
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
[data-palette='sage'][data-theme='dark'] {
|
|
84
|
+
--bg-0: #0d1210; --bg-1: #141a17; --bg-2: #1a211e; --bg-3: #222a26; --bg-h: #283530; --bg-a: #2f3b36;
|
|
85
|
+
--b1: rgba(210,240,225,.055); --b2: rgba(210,240,225,.09); --b3: rgba(210,240,225,.14);
|
|
86
|
+
--t1: rgba(220,242,230,.88); --t2: rgba(210,235,220,.50); --t3: rgba(200,228,215,.27); --t4: rgba(195,222,210,.14);
|
|
87
|
+
--inv: #0d1210;
|
|
88
|
+
--acc: #7aab90; --acc-m: rgba(122,171,144,.12); --acc-s: rgba(122,171,144,.06);
|
|
89
|
+
--acc50: rgba(122,171,144,.50); --acc30: rgba(122,171,144,.30); --acc18: rgba(122,171,144,.18);
|
|
90
|
+
--ok: #82aa82; --ok-bg: rgba(130,170,130,.12);
|
|
91
|
+
--wrn: #b8ac6a; --wrn-bg: rgba(184,172,106,.12);
|
|
92
|
+
--crt: #b07a74; --crt-bg: rgba(176,122,116,.12);
|
|
93
|
+
--hdr: #101815;
|
|
94
|
+
--sh: 0 1px 3px rgba(0,0,0,.5), 0 0 0 1px var(--b1);
|
|
95
|
+
--shh: 0 4px 20px rgba(0,0,0,.55), 0 0 0 1px var(--b2);
|
|
96
|
+
--sb: rgba(210,240,225,.08); --dn: rgba(210,240,225,.05);
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
[data-palette='sage'][data-theme='light'] {
|
|
100
|
+
--bg-0: #f2f5f3; --bg-1: #fafcfb; --bg-2: #f5f8f6; --bg-3: #eaf0ec; --bg-h: #e8eeea; --bg-a: #dfe6e1;
|
|
101
|
+
--b1: rgba(20,60,40,.06); --b2: rgba(20,60,40,.10); --b3: rgba(20,60,40,.16);
|
|
102
|
+
--t1: rgba(18,45,30,.90); --t2: rgba(25,55,38,.64); --t3: rgba(30,60,42,.44); --t4: rgba(35,65,45,.14);
|
|
103
|
+
--inv: #fafcfb;
|
|
104
|
+
--acc: #4e8a68; --acc-m: rgba(78,138,104,.10); --acc-s: rgba(78,138,104,.05);
|
|
105
|
+
--acc50: rgba(78,138,104,.50); --acc30: rgba(78,138,104,.30); --acc18: rgba(78,138,104,.18);
|
|
106
|
+
--ok: #568a58; --ok-bg: rgba(86,138,88,.12);
|
|
107
|
+
--wrn: #8a8038; --wrn-bg: rgba(138,128,56,.12);
|
|
108
|
+
--crt: #9a5e58; --crt-bg: rgba(154,94,88,.12);
|
|
109
|
+
--hdr: #1a2820;
|
|
110
|
+
--sh: 0 1px 3px rgba(10,30,20,.07), 0 0 0 1px var(--b1);
|
|
111
|
+
--shh: 0 4px 14px rgba(10,30,20,.10), 0 0 0 1px var(--b2);
|
|
112
|
+
--sb: rgba(20,60,40,.10); --dn: rgba(20,60,40,.04);
|
|
113
|
+
}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
// UIStruct theme entry point.
|
|
2
|
+
// Import once in a consuming application's global stylesheet:
|
|
3
|
+
// @use 'strct/styles/theme';
|
|
4
|
+
// then set `data-palette` ('arctic' | 'ember' | 'sage') and
|
|
5
|
+
// `data-theme` ('dark' | 'light') on the <html> element (StrctThemeService
|
|
6
|
+
// does this for you).
|
|
7
|
+
|
|
8
|
+
@use 'tokens';
|
|
9
|
+
@use 'base';
|
|
10
|
+
@use 'forms';
|