nwl-components 1.7.1 → 1.8.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 +44 -1
- package/dist/nwl-components.es.js +668 -668
- package/dist/nwl-components.umd.js +5 -5
- package/dist/sort/style.css +137 -3
- package/dist/style.css +1 -1
- package/dist/tokens.css +133 -0
- package/package.json +12 -2
- package/sort/style.css +137 -3
- package/tokens.css +133 -0
package/sort/style.css
CHANGED
|
@@ -1,3 +1,137 @@
|
|
|
1
|
+
/* nwl-components design tokens: `import 'nwl-components/tokens.css'`.
|
|
2
|
+
Two tiers. Tier 1 is the raw palette: the only place where hex values appear. Tier 2 is the
|
|
3
|
+
semantic tokens: what components and app CSS use. The values are those the NAAT apps have
|
|
4
|
+
today, so loading this file changes nothing on screen; a later visual refresh only changes
|
|
5
|
+
values here. Dark theme only. */
|
|
6
|
+
|
|
7
|
+
/* Tier 1: raw palette. Use a raw name directly only for a value with no role of its own. */
|
|
8
|
+
:root {
|
|
9
|
+
/* greys, named by their channel value in hex: --nwl-grey-44 is #444 */
|
|
10
|
+
--nwl-black: #000;
|
|
11
|
+
--nwl-grey-11: #111;
|
|
12
|
+
--nwl-grey-22: #222;
|
|
13
|
+
--nwl-grey-33: #333;
|
|
14
|
+
--nwl-grey-44: #444;
|
|
15
|
+
--nwl-grey-55: #555;
|
|
16
|
+
--nwl-grey-66: #666;
|
|
17
|
+
--nwl-grey-77: #777;
|
|
18
|
+
--nwl-grey-7a: #7a7a7a;
|
|
19
|
+
--nwl-grey-80: #808080;
|
|
20
|
+
--nwl-grey-bb: #bbb;
|
|
21
|
+
--nwl-grey-cc: #ccc;
|
|
22
|
+
--nwl-grey-dd: #ddd;
|
|
23
|
+
--nwl-white: #fff;
|
|
24
|
+
|
|
25
|
+
/* white and black with transparency, named by their opacity in percent */
|
|
26
|
+
--nwl-white-25: #ffffff40;
|
|
27
|
+
--nwl-white-40: rgba(255, 255, 255, 0.4);
|
|
28
|
+
--nwl-white-75: rgba(255, 255, 255, 0.75);
|
|
29
|
+
--nwl-black-70: rgba(0, 0, 0, 0.7);
|
|
30
|
+
--nwl-black-80: rgba(0, 0, 0, 0.8);
|
|
31
|
+
|
|
32
|
+
/* colours */
|
|
33
|
+
--nwl-cyan: #57d1df;
|
|
34
|
+
--nwl-cyan-50: rgba(87, 209, 223, 0.5);
|
|
35
|
+
--nwl-cyan-15: rgba(87, 209, 223, 0.15);
|
|
36
|
+
--nwl-red: #c55;
|
|
37
|
+
--nwl-green: #8d8;
|
|
38
|
+
--nwl-amber: #fc6;
|
|
39
|
+
|
|
40
|
+
/* generic font families */
|
|
41
|
+
--nwl-sans-serif: sans-serif;
|
|
42
|
+
--nwl-monospace: ui-monospace, Menlo, Consolas, monospace;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
/* Tier 2: semantic tokens. */
|
|
46
|
+
:root {
|
|
47
|
+
/* backgrounds, darkest to lightest: viewer canvas, top bar, page, panels, selected rows and
|
|
48
|
+
menus, pressed or hovered controls, text fields; the overlay behind dialogs */
|
|
49
|
+
--nwl-bg-canvas: var(--nwl-black);
|
|
50
|
+
--nwl-bg-nav: var(--nwl-grey-11);
|
|
51
|
+
--nwl-bg: var(--nwl-grey-22);
|
|
52
|
+
--nwl-bg-surface: var(--nwl-grey-33);
|
|
53
|
+
--nwl-bg-elevated: var(--nwl-grey-44);
|
|
54
|
+
--nwl-bg-pressed: var(--nwl-grey-55);
|
|
55
|
+
--nwl-bg-input: transparent;
|
|
56
|
+
--nwl-bg-overlay: var(--nwl-black-70);
|
|
57
|
+
|
|
58
|
+
/* borders: dividers, controls and panels, push buttons */
|
|
59
|
+
--nwl-border-subtle: var(--nwl-grey-55);
|
|
60
|
+
--nwl-border: var(--nwl-grey-77);
|
|
61
|
+
--nwl-border-strong: var(--nwl-grey-dd);
|
|
62
|
+
|
|
63
|
+
/* text: main, secondary, muted or empty, placeholders, text on a light or accent background */
|
|
64
|
+
--nwl-text: var(--nwl-white);
|
|
65
|
+
--nwl-text-2: var(--nwl-white-75);
|
|
66
|
+
--nwl-text-3: var(--nwl-white-40);
|
|
67
|
+
--nwl-text-placeholder: var(--nwl-grey-cc);
|
|
68
|
+
--nwl-text-inverse: var(--nwl-black);
|
|
69
|
+
|
|
70
|
+
/* accent (selection, focus): the colour, hover or pressed, a tinted background, as text */
|
|
71
|
+
--nwl-accent: var(--nwl-cyan);
|
|
72
|
+
--nwl-accent-dim: var(--nwl-cyan-50);
|
|
73
|
+
--nwl-accent-subtle: var(--nwl-cyan-15);
|
|
74
|
+
--nwl-accent-fg: var(--nwl-cyan);
|
|
75
|
+
|
|
76
|
+
/* links and status colours */
|
|
77
|
+
--nwl-link: var(--nwl-white);
|
|
78
|
+
--nwl-link-hover: var(--nwl-white);
|
|
79
|
+
--nwl-danger: var(--nwl-red);
|
|
80
|
+
--nwl-success: var(--nwl-green);
|
|
81
|
+
--nwl-warning: var(--nwl-amber);
|
|
82
|
+
|
|
83
|
+
/* font families: the wordmark, everything else, data (file names, coordinates, IDs) */
|
|
84
|
+
--nwl-font-display: Roboto, var(--nwl-sans-serif);
|
|
85
|
+
--nwl-font-body: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, var(--nwl-sans-serif);
|
|
86
|
+
--nwl-font-mono: var(--nwl-monospace);
|
|
87
|
+
|
|
88
|
+
/* font sizes; the body text is --nwl-text-md */
|
|
89
|
+
--nwl-text-xs: 11px;
|
|
90
|
+
--nwl-text-sm: 12px;
|
|
91
|
+
--nwl-text-base: 13px;
|
|
92
|
+
--nwl-text-md: 14px;
|
|
93
|
+
--nwl-text-lg: 16px;
|
|
94
|
+
--nwl-text-xl: 22px;
|
|
95
|
+
--nwl-text-2xl: 28px;
|
|
96
|
+
--nwl-text-3xl: 36px;
|
|
97
|
+
--nwl-text-hero: 60px;
|
|
98
|
+
|
|
99
|
+
/* font weights; the wordmark is thin */
|
|
100
|
+
--nwl-weight-thin: 100;
|
|
101
|
+
--nwl-weight-light: 300;
|
|
102
|
+
--nwl-weight-regular: 400;
|
|
103
|
+
--nwl-weight-medium: 500;
|
|
104
|
+
--nwl-weight-semibold: 600;
|
|
105
|
+
--nwl-weight-bold: 700;
|
|
106
|
+
|
|
107
|
+
/* line heights */
|
|
108
|
+
--nwl-leading-tight: 1.2;
|
|
109
|
+
--nwl-leading-snug: 1.35;
|
|
110
|
+
--nwl-leading-normal: 1.5;
|
|
111
|
+
--nwl-leading-relaxed: 1.65;
|
|
112
|
+
|
|
113
|
+
/* spacing, on a 4px grid */
|
|
114
|
+
--nwl-space-1: 4px;
|
|
115
|
+
--nwl-space-2: 8px;
|
|
116
|
+
--nwl-space-3: 12px;
|
|
117
|
+
--nwl-space-4: 16px;
|
|
118
|
+
--nwl-space-5: 20px;
|
|
119
|
+
--nwl-space-6: 24px;
|
|
120
|
+
--nwl-space-8: 32px;
|
|
121
|
+
--nwl-space-10: 40px;
|
|
122
|
+
--nwl-space-12: 48px;
|
|
123
|
+
--nwl-space-16: 64px;
|
|
124
|
+
|
|
125
|
+
/* corner radii: controls, push buttons, round buttons and dots */
|
|
126
|
+
--nwl-radius-sm: 3px;
|
|
127
|
+
--nwl-radius-md: 6px;
|
|
128
|
+
--nwl-radius-round: 50%;
|
|
129
|
+
|
|
130
|
+
/* shadows: floating tool palettes, menus */
|
|
131
|
+
--nwl-shadow-sm: 2px 2px 5px var(--nwl-grey-80);
|
|
132
|
+
--nwl-shadow-md: 0 4px 12px var(--nwl-black-70);
|
|
133
|
+
}
|
|
134
|
+
|
|
1
135
|
/* Sortable headers: SortableTh.vue and sortableHeader() in sort.js */
|
|
2
136
|
/* the button carries the vertical padding; the th keeps Table's 1em gap to the next column */
|
|
3
137
|
th.nwl-sortable {
|
|
@@ -7,7 +141,7 @@ th.nwl-sortable:not(:last-child) {
|
|
|
7
141
|
padding-right: 1em;
|
|
8
142
|
}
|
|
9
143
|
th.nwl-sortable:hover {
|
|
10
|
-
background:
|
|
144
|
+
background: var(--nwl-bg-elevated);
|
|
11
145
|
}
|
|
12
146
|
.nwl-sort-button {
|
|
13
147
|
all: unset;
|
|
@@ -36,9 +170,9 @@ th.nwl-sortable:hover {
|
|
|
36
170
|
/* not the sort column: a neutral grey "sort" icon, brighter on hover;
|
|
37
171
|
the sort column: one arrow in the header's text colour */
|
|
38
172
|
.nwl-sort-indicator[data-state="none"] {
|
|
39
|
-
color:
|
|
173
|
+
color: var(--nwl-grey-7a);
|
|
40
174
|
}
|
|
41
175
|
.nwl-sort-button:hover .nwl-sort-indicator[data-state="none"],
|
|
42
176
|
.nwl-sort-button:focus-visible .nwl-sort-indicator[data-state="none"] {
|
|
43
|
-
color:
|
|
177
|
+
color: var(--nwl-grey-bb);
|
|
44
178
|
}
|
package/tokens.css
ADDED
|
@@ -0,0 +1,133 @@
|
|
|
1
|
+
/* nwl-components design tokens: `import 'nwl-components/tokens.css'`.
|
|
2
|
+
Two tiers. Tier 1 is the raw palette: the only place where hex values appear. Tier 2 is the
|
|
3
|
+
semantic tokens: what components and app CSS use. The values are those the NAAT apps have
|
|
4
|
+
today, so loading this file changes nothing on screen; a later visual refresh only changes
|
|
5
|
+
values here. Dark theme only. */
|
|
6
|
+
|
|
7
|
+
/* Tier 1: raw palette. Use a raw name directly only for a value with no role of its own. */
|
|
8
|
+
:root {
|
|
9
|
+
/* greys, named by their channel value in hex: --nwl-grey-44 is #444 */
|
|
10
|
+
--nwl-black: #000;
|
|
11
|
+
--nwl-grey-11: #111;
|
|
12
|
+
--nwl-grey-22: #222;
|
|
13
|
+
--nwl-grey-33: #333;
|
|
14
|
+
--nwl-grey-44: #444;
|
|
15
|
+
--nwl-grey-55: #555;
|
|
16
|
+
--nwl-grey-66: #666;
|
|
17
|
+
--nwl-grey-77: #777;
|
|
18
|
+
--nwl-grey-7a: #7a7a7a;
|
|
19
|
+
--nwl-grey-80: #808080;
|
|
20
|
+
--nwl-grey-bb: #bbb;
|
|
21
|
+
--nwl-grey-cc: #ccc;
|
|
22
|
+
--nwl-grey-dd: #ddd;
|
|
23
|
+
--nwl-white: #fff;
|
|
24
|
+
|
|
25
|
+
/* white and black with transparency, named by their opacity in percent */
|
|
26
|
+
--nwl-white-25: #ffffff40;
|
|
27
|
+
--nwl-white-40: rgba(255, 255, 255, 0.4);
|
|
28
|
+
--nwl-white-75: rgba(255, 255, 255, 0.75);
|
|
29
|
+
--nwl-black-70: rgba(0, 0, 0, 0.7);
|
|
30
|
+
--nwl-black-80: rgba(0, 0, 0, 0.8);
|
|
31
|
+
|
|
32
|
+
/* colours */
|
|
33
|
+
--nwl-cyan: #57d1df;
|
|
34
|
+
--nwl-cyan-50: rgba(87, 209, 223, 0.5);
|
|
35
|
+
--nwl-cyan-15: rgba(87, 209, 223, 0.15);
|
|
36
|
+
--nwl-red: #c55;
|
|
37
|
+
--nwl-green: #8d8;
|
|
38
|
+
--nwl-amber: #fc6;
|
|
39
|
+
|
|
40
|
+
/* generic font families */
|
|
41
|
+
--nwl-sans-serif: sans-serif;
|
|
42
|
+
--nwl-monospace: ui-monospace, Menlo, Consolas, monospace;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
/* Tier 2: semantic tokens. */
|
|
46
|
+
:root {
|
|
47
|
+
/* backgrounds, darkest to lightest: viewer canvas, top bar, page, panels, selected rows and
|
|
48
|
+
menus, pressed or hovered controls, text fields; the overlay behind dialogs */
|
|
49
|
+
--nwl-bg-canvas: var(--nwl-black);
|
|
50
|
+
--nwl-bg-nav: var(--nwl-grey-11);
|
|
51
|
+
--nwl-bg: var(--nwl-grey-22);
|
|
52
|
+
--nwl-bg-surface: var(--nwl-grey-33);
|
|
53
|
+
--nwl-bg-elevated: var(--nwl-grey-44);
|
|
54
|
+
--nwl-bg-pressed: var(--nwl-grey-55);
|
|
55
|
+
--nwl-bg-input: transparent;
|
|
56
|
+
--nwl-bg-overlay: var(--nwl-black-70);
|
|
57
|
+
|
|
58
|
+
/* borders: dividers, controls and panels, push buttons */
|
|
59
|
+
--nwl-border-subtle: var(--nwl-grey-55);
|
|
60
|
+
--nwl-border: var(--nwl-grey-77);
|
|
61
|
+
--nwl-border-strong: var(--nwl-grey-dd);
|
|
62
|
+
|
|
63
|
+
/* text: main, secondary, muted or empty, placeholders, text on a light or accent background */
|
|
64
|
+
--nwl-text: var(--nwl-white);
|
|
65
|
+
--nwl-text-2: var(--nwl-white-75);
|
|
66
|
+
--nwl-text-3: var(--nwl-white-40);
|
|
67
|
+
--nwl-text-placeholder: var(--nwl-grey-cc);
|
|
68
|
+
--nwl-text-inverse: var(--nwl-black);
|
|
69
|
+
|
|
70
|
+
/* accent (selection, focus): the colour, hover or pressed, a tinted background, as text */
|
|
71
|
+
--nwl-accent: var(--nwl-cyan);
|
|
72
|
+
--nwl-accent-dim: var(--nwl-cyan-50);
|
|
73
|
+
--nwl-accent-subtle: var(--nwl-cyan-15);
|
|
74
|
+
--nwl-accent-fg: var(--nwl-cyan);
|
|
75
|
+
|
|
76
|
+
/* links and status colours */
|
|
77
|
+
--nwl-link: var(--nwl-white);
|
|
78
|
+
--nwl-link-hover: var(--nwl-white);
|
|
79
|
+
--nwl-danger: var(--nwl-red);
|
|
80
|
+
--nwl-success: var(--nwl-green);
|
|
81
|
+
--nwl-warning: var(--nwl-amber);
|
|
82
|
+
|
|
83
|
+
/* font families: the wordmark, everything else, data (file names, coordinates, IDs) */
|
|
84
|
+
--nwl-font-display: Roboto, var(--nwl-sans-serif);
|
|
85
|
+
--nwl-font-body: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, var(--nwl-sans-serif);
|
|
86
|
+
--nwl-font-mono: var(--nwl-monospace);
|
|
87
|
+
|
|
88
|
+
/* font sizes; the body text is --nwl-text-md */
|
|
89
|
+
--nwl-text-xs: 11px;
|
|
90
|
+
--nwl-text-sm: 12px;
|
|
91
|
+
--nwl-text-base: 13px;
|
|
92
|
+
--nwl-text-md: 14px;
|
|
93
|
+
--nwl-text-lg: 16px;
|
|
94
|
+
--nwl-text-xl: 22px;
|
|
95
|
+
--nwl-text-2xl: 28px;
|
|
96
|
+
--nwl-text-3xl: 36px;
|
|
97
|
+
--nwl-text-hero: 60px;
|
|
98
|
+
|
|
99
|
+
/* font weights; the wordmark is thin */
|
|
100
|
+
--nwl-weight-thin: 100;
|
|
101
|
+
--nwl-weight-light: 300;
|
|
102
|
+
--nwl-weight-regular: 400;
|
|
103
|
+
--nwl-weight-medium: 500;
|
|
104
|
+
--nwl-weight-semibold: 600;
|
|
105
|
+
--nwl-weight-bold: 700;
|
|
106
|
+
|
|
107
|
+
/* line heights */
|
|
108
|
+
--nwl-leading-tight: 1.2;
|
|
109
|
+
--nwl-leading-snug: 1.35;
|
|
110
|
+
--nwl-leading-normal: 1.5;
|
|
111
|
+
--nwl-leading-relaxed: 1.65;
|
|
112
|
+
|
|
113
|
+
/* spacing, on a 4px grid */
|
|
114
|
+
--nwl-space-1: 4px;
|
|
115
|
+
--nwl-space-2: 8px;
|
|
116
|
+
--nwl-space-3: 12px;
|
|
117
|
+
--nwl-space-4: 16px;
|
|
118
|
+
--nwl-space-5: 20px;
|
|
119
|
+
--nwl-space-6: 24px;
|
|
120
|
+
--nwl-space-8: 32px;
|
|
121
|
+
--nwl-space-10: 40px;
|
|
122
|
+
--nwl-space-12: 48px;
|
|
123
|
+
--nwl-space-16: 64px;
|
|
124
|
+
|
|
125
|
+
/* corner radii: controls, push buttons, round buttons and dots */
|
|
126
|
+
--nwl-radius-sm: 3px;
|
|
127
|
+
--nwl-radius-md: 6px;
|
|
128
|
+
--nwl-radius-round: 50%;
|
|
129
|
+
|
|
130
|
+
/* shadows: floating tool palettes, menus */
|
|
131
|
+
--nwl-shadow-sm: 2px 2px 5px var(--nwl-grey-80);
|
|
132
|
+
--nwl-shadow-md: 0 4px 12px var(--nwl-black-70);
|
|
133
|
+
}
|