@antadesign/anta 0.1.1-dev.2 → 0.1.1-dev.4
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.md +21 -0
- package/README.md +30 -8
- package/dist/elements/a-icon.css +17 -15
- package/dist/elements/a-icon.shapes.css +278 -258
- package/dist/elements/a-icon.shapes.d.ts +5 -1
- package/dist/elements/a-icon.shapes.js +5 -0
- package/dist/elements/a-progress.css +69 -64
- package/dist/elements/a-text.css +76 -74
- package/dist/generate-icons.mjs +16 -4
- package/dist/reset.css +115 -0
- package/dist/{anta_global_tokens.css → tokens.css} +22 -70
- package/package.json +7 -4
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export declare const ICON_SHAPES: readonly ["arrow-left-to-line", "arrow-left", "arrow-narrow-down", "arrow-narrow-up-down", "arrow-narrow-up", "arrow-right", "arrow-top-right", "asterisk", "book-open", "braces", "bug", "calendar", "case-sensitive", "chat", "check", "chevron-down", "chevron-left", "chevron-right", "chevron-up", "chevrons-right", "circle-check", "circle-large", "circle", "click", "clock", "cloud-upload", "copy", "corner-down-right", "cube", "dots-vertical", "download", "edit", "education-disk", "external-link", "file-down", "file", "filter", "folder-close", "folder-open", "folder-tree", "github-logo", "gitlab-logo", "hat-glasses", "heart-handshake", "help-disk", "history-tree", "history", "home", "hourglass", "info", "jira-logo", "linear-logo", "link", "list-detail-view", "maximize", "megaphone", "menu", "minimize", "minus", "more", "move-horizontal", "not-equal", "play", "plus", "presentation", "refresh", "regex", "repeat", "rss", "runs-history", "scroll-text", "search-check", "search", "send", "sparkles", "swatch-book", "text-highlight", "text-initial", "timer", "trash", "trello-logo", "view", "warning-triangle", "webhook", "workflow", "x"];
|
|
1
|
+
export declare const ICON_SHAPES: readonly ["arrow-left-to-line", "arrow-left", "arrow-narrow-down", "arrow-narrow-up-down", "arrow-narrow-up", "arrow-right", "arrow-top-right", "asterisk", "book-open", "braces", "bug", "calendar", "case-sensitive", "chat", "check", "chevron-down", "chevron-left", "chevron-right", "chevron-up", "chevrons-right", "circle-check", "circle-large", "circle", "click", "clock", "cloud-upload", "copy", "corner-down-right", "cube", "dots-vertical", "download", "edit", "education-disk", "external-link", "file-down", "file", "filter", "folder-close", "folder-open", "folder-tree", "github-logo", "gitlab-logo", "hat-glasses", "heart-handshake", "help-disk", "history-tree", "history", "home", "hourglass", "info", "jira-logo", "linear-logo", "link", "list-detail-view", "maximize", "megaphone", "menu", "minimize", "minus", "moon", "more", "move-horizontal", "not-equal", "play", "plus", "presentation", "refresh-ccw-dot", "refresh", "regex", "repeat", "rss", "runs-history", "scroll-text", "search-check", "search", "send", "sparkles", "sun", "swatch-book", "table-2", "text-highlight", "text-initial", "timer", "trash", "trello-logo", "view", "warning-triangle", "webhook", "workflow", "x"];
|
|
2
2
|
export declare const ICON_SYNONYMS: Readonly<Record<string, readonly string[]>>;
|
|
3
3
|
declare module '@antadesign/anta' {
|
|
4
4
|
interface IconShapes {
|
|
@@ -61,12 +61,14 @@ declare module '@antadesign/anta' {
|
|
|
61
61
|
'menu': true;
|
|
62
62
|
'minimize': true;
|
|
63
63
|
'minus': true;
|
|
64
|
+
'moon': true;
|
|
64
65
|
'more': true;
|
|
65
66
|
'move-horizontal': true;
|
|
66
67
|
'not-equal': true;
|
|
67
68
|
'play': true;
|
|
68
69
|
'plus': true;
|
|
69
70
|
'presentation': true;
|
|
71
|
+
'refresh-ccw-dot': true;
|
|
70
72
|
'refresh': true;
|
|
71
73
|
'regex': true;
|
|
72
74
|
'repeat': true;
|
|
@@ -77,7 +79,9 @@ declare module '@antadesign/anta' {
|
|
|
77
79
|
'search': true;
|
|
78
80
|
'send': true;
|
|
79
81
|
'sparkles': true;
|
|
82
|
+
'sun': true;
|
|
80
83
|
'swatch-book': true;
|
|
84
|
+
'table-2': true;
|
|
81
85
|
'text-highlight': true;
|
|
82
86
|
'text-initial': true;
|
|
83
87
|
'timer': true;
|
|
@@ -58,12 +58,14 @@ const ICON_SHAPES = [
|
|
|
58
58
|
"menu",
|
|
59
59
|
"minimize",
|
|
60
60
|
"minus",
|
|
61
|
+
"moon",
|
|
61
62
|
"more",
|
|
62
63
|
"move-horizontal",
|
|
63
64
|
"not-equal",
|
|
64
65
|
"play",
|
|
65
66
|
"plus",
|
|
66
67
|
"presentation",
|
|
68
|
+
"refresh-ccw-dot",
|
|
67
69
|
"refresh",
|
|
68
70
|
"regex",
|
|
69
71
|
"repeat",
|
|
@@ -74,7 +76,9 @@ const ICON_SHAPES = [
|
|
|
74
76
|
"search",
|
|
75
77
|
"send",
|
|
76
78
|
"sparkles",
|
|
79
|
+
"sun",
|
|
77
80
|
"swatch-book",
|
|
81
|
+
"table-2",
|
|
78
82
|
"text-highlight",
|
|
79
83
|
"text-initial",
|
|
80
84
|
"timer",
|
|
@@ -133,6 +137,7 @@ const ICON_SYNONYMS = {
|
|
|
133
137
|
"case-sensitive": ["aA", "capitalize", "case"],
|
|
134
138
|
"text-highlight": ["mark", "highlight"],
|
|
135
139
|
"list-detail-view": ["list", "items"],
|
|
140
|
+
"table-2": ["table", "grid", "data", "spreadsheet", "rows", "columns"],
|
|
136
141
|
"folder-open": ["directory", "browse"],
|
|
137
142
|
"folder-close": ["directory"],
|
|
138
143
|
"folder-tree": ["hierarchy", "structure", "tree"],
|
|
@@ -1,65 +1,70 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
1
|
+
@layer anta {
|
|
2
|
+
a-progress {
|
|
3
|
+
--progress-bg: var(--bg-block);
|
|
4
|
+
--progress-border-color: var(--border-2);
|
|
5
|
+
--progress-indicator-bg: var(--bg-spot);
|
|
6
|
+
/* Right-edge fade: from the indicator's own bg to the border
|
|
7
|
+
colour, both opaque. Two opaque endpoints + `in oklch`
|
|
8
|
+
interpolation give a perceptually-uniform fade with no alpha
|
|
9
|
+
pre-multiplication artefacts. Tone variants automatically
|
|
10
|
+
re-tint because both endpoint tokens (`--progress-indicator-bg`,
|
|
11
|
+
`--progress-border-color`) get re-aliased per tone. */
|
|
12
|
+
--progress-indicator-edge: linear-gradient(
|
|
13
|
+
90deg in oklch,
|
|
14
|
+
var(--progress-indicator-bg) 0%,
|
|
15
|
+
var(--progress-border-color) 100%
|
|
16
|
+
);
|
|
17
|
+
--progress-text-color: var(--text-2);
|
|
18
|
+
--progress-hint-color: var(--text-3);
|
|
19
|
+
|
|
20
|
+
display: block;
|
|
21
|
+
container-type: inline-size;
|
|
22
|
+
padding: 4px 8px;
|
|
23
|
+
min-height: 8px;
|
|
24
|
+
background: var(--progress-bg);
|
|
25
|
+
/* Per-component reset, same spirit as Tailwind preflight: declare
|
|
26
|
+
width / style / colour at a known state so a consumer only has
|
|
27
|
+
to change ONE property to opt in. Writing `border-width: 4px`
|
|
28
|
+
in your own CSS (or via the Anta playground's CSS tab) gives a
|
|
29
|
+
4px solid themed border immediately — no need to also specify
|
|
30
|
+
`border-style: solid` or `border-color`. */
|
|
31
|
+
border: 0px solid var(--progress-border-color);
|
|
32
|
+
border-radius: 0;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
a-progress[tone="info"] {
|
|
36
|
+
--progress-bg: var(--bg-block-info);
|
|
37
|
+
--progress-border-color: var(--border-2-info);
|
|
38
|
+
--progress-indicator-bg: var(--bg-spot-info);
|
|
39
|
+
--progress-text-color: var(--text-2-info);
|
|
40
|
+
--progress-hint-color: var(--text-3-info);
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
a-progress-label {
|
|
44
|
+
display: flex;
|
|
45
|
+
align-items: flex-start;
|
|
46
|
+
gap: 0.5ch;
|
|
47
|
+
font-variant-numeric: tabular-nums;
|
|
48
|
+
font-feature-settings: 'ss02', 'ss05';
|
|
49
|
+
letter-spacing: 0.03em;
|
|
50
|
+
font-size: 13px;
|
|
51
|
+
line-height: 16px;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
a-progress-number {
|
|
55
|
+
flex-shrink: 0;
|
|
56
|
+
color: var(--progress-text-color);
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
a-progress-text {
|
|
60
|
+
flex: 1 1 auto;
|
|
61
|
+
min-width: 0;
|
|
62
|
+
color: var(--progress-text-color);
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
a-progress-hint {
|
|
66
|
+
flex-shrink: 0;
|
|
67
|
+
margin-left: auto;
|
|
68
|
+
color: var(--progress-hint-color);
|
|
69
|
+
}
|
|
65
70
|
}
|
package/dist/elements/a-text.css
CHANGED
|
@@ -1,75 +1,77 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
a-text[priority="
|
|
28
|
-
a-text[priority="
|
|
29
|
-
a-text[priority="
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
a-text[tone="brand"]
|
|
37
|
-
a-text[tone="brand"][priority="
|
|
38
|
-
a-text[tone="brand"][priority="
|
|
39
|
-
a-text[tone="brand"][priority="
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
a-text[tone="success"]
|
|
43
|
-
a-text[tone="success"][priority="
|
|
44
|
-
a-text[tone="success"][priority="
|
|
45
|
-
a-text[tone="success"][priority="
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
a-text[tone="critical"]
|
|
49
|
-
a-text[tone="critical"][priority="
|
|
50
|
-
a-text[tone="critical"][priority="
|
|
51
|
-
a-text[tone="critical"][priority="
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
a-text[tone="warning"]
|
|
55
|
-
a-text[tone="warning"][priority="
|
|
56
|
-
a-text[tone="warning"][priority="
|
|
57
|
-
a-text[tone="warning"][priority="
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
a-text[tone="info"]
|
|
61
|
-
a-text[tone="info"][priority="
|
|
62
|
-
a-text[tone="info"][priority="
|
|
63
|
-
a-text[tone="info"][priority="
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
a-text a:
|
|
73
|
-
|
|
74
|
-
|
|
1
|
+
@layer anta {
|
|
2
|
+
a-text {
|
|
3
|
+
--text-color: var(--text-1);
|
|
4
|
+
--text-link-color: var(--link-color);
|
|
5
|
+
--text-link-hover: var(--link-color-hover);
|
|
6
|
+
|
|
7
|
+
display: block;
|
|
8
|
+
color: var(--text-color);
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
a-text[inline] {
|
|
12
|
+
display: inline-block;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
/* Truncation, the expandable mask, the chevron button, and the
|
|
16
|
+
expanded-state toggle live in shadow DOM — see
|
|
17
|
+
src/elements/a-text.ts. The one external concern is `min-width: 0`:
|
|
18
|
+
the host needs it to shrink inside flex/grid parents so the inner
|
|
19
|
+
clamp can actually clip content. */
|
|
20
|
+
a-text[truncate] {
|
|
21
|
+
min-width: 0;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
/* Neutral priority overrides. Levels 1 & 2 keep the brand link color;
|
|
25
|
+
levels 3-5 mute the link to currentColor and step the hover up by one
|
|
26
|
+
level (3→2, 4→3, 5→4). */
|
|
27
|
+
a-text[priority="secondary"] { --text-color: var(--text-2); }
|
|
28
|
+
a-text[priority="tertiary"] { --text-color: var(--text-3); --text-link-color: currentColor; --text-link-hover: var(--text-2); }
|
|
29
|
+
a-text[priority="quaternary"] { --text-color: var(--text-4); --text-link-color: currentColor; --text-link-hover: var(--text-3); }
|
|
30
|
+
a-text[priority="quinary"] { --text-color: var(--text-5); --text-link-color: currentColor; --text-link-hover: var(--text-4); }
|
|
31
|
+
|
|
32
|
+
/* Tinted — text color uses --text-{N}-{tone} tokens; links are always
|
|
33
|
+
muted (currentColor) and hover steps up one level of the same tint.
|
|
34
|
+
Level 1 has no level above; hover keeps the color, only the underline
|
|
35
|
+
alpha changes. */
|
|
36
|
+
a-text[tone="brand"] { --text-color: var(--text-1-brand); --text-link-color: currentColor; --text-link-hover: var(--text-1-brand); }
|
|
37
|
+
a-text[tone="brand"][priority="secondary"] { --text-color: var(--text-2-brand); --text-link-hover: var(--text-1-brand); }
|
|
38
|
+
a-text[tone="brand"][priority="tertiary"] { --text-color: var(--text-3-brand); --text-link-hover: var(--text-2-brand); }
|
|
39
|
+
a-text[tone="brand"][priority="quaternary"] { --text-color: var(--text-4-brand); --text-link-hover: var(--text-3-brand); }
|
|
40
|
+
a-text[tone="brand"][priority="quinary"] { --text-color: var(--text-5-brand); --text-link-hover: var(--text-4-brand); }
|
|
41
|
+
|
|
42
|
+
a-text[tone="success"] { --text-color: var(--text-1-success); --text-link-color: currentColor; --text-link-hover: var(--text-1-success); }
|
|
43
|
+
a-text[tone="success"][priority="secondary"] { --text-color: var(--text-2-success); --text-link-hover: var(--text-1-success); }
|
|
44
|
+
a-text[tone="success"][priority="tertiary"] { --text-color: var(--text-3-success); --text-link-hover: var(--text-2-success); }
|
|
45
|
+
a-text[tone="success"][priority="quaternary"] { --text-color: var(--text-4-success); --text-link-hover: var(--text-3-success); }
|
|
46
|
+
a-text[tone="success"][priority="quinary"] { --text-color: var(--text-5-success); --text-link-hover: var(--text-4-success); }
|
|
47
|
+
|
|
48
|
+
a-text[tone="critical"] { --text-color: var(--text-1-critical); --text-link-color: currentColor; --text-link-hover: var(--text-1-critical); }
|
|
49
|
+
a-text[tone="critical"][priority="secondary"] { --text-color: var(--text-2-critical); --text-link-hover: var(--text-1-critical); }
|
|
50
|
+
a-text[tone="critical"][priority="tertiary"] { --text-color: var(--text-3-critical); --text-link-hover: var(--text-2-critical); }
|
|
51
|
+
a-text[tone="critical"][priority="quaternary"] { --text-color: var(--text-4-critical); --text-link-hover: var(--text-3-critical); }
|
|
52
|
+
a-text[tone="critical"][priority="quinary"] { --text-color: var(--text-5-critical); --text-link-hover: var(--text-4-critical); }
|
|
53
|
+
|
|
54
|
+
a-text[tone="warning"] { --text-color: var(--text-1-warning); --text-link-color: currentColor; --text-link-hover: var(--text-1-warning); }
|
|
55
|
+
a-text[tone="warning"][priority="secondary"] { --text-color: var(--text-2-warning); --text-link-hover: var(--text-1-warning); }
|
|
56
|
+
a-text[tone="warning"][priority="tertiary"] { --text-color: var(--text-3-warning); --text-link-hover: var(--text-2-warning); }
|
|
57
|
+
a-text[tone="warning"][priority="quaternary"] { --text-color: var(--text-4-warning); --text-link-hover: var(--text-3-warning); }
|
|
58
|
+
a-text[tone="warning"][priority="quinary"] { --text-color: var(--text-5-warning); --text-link-hover: var(--text-4-warning); }
|
|
59
|
+
|
|
60
|
+
a-text[tone="info"] { --text-color: var(--text-1-info); --text-link-color: currentColor; --text-link-hover: var(--text-1-info); }
|
|
61
|
+
a-text[tone="info"][priority="secondary"] { --text-color: var(--text-2-info); --text-link-hover: var(--text-1-info); }
|
|
62
|
+
a-text[tone="info"][priority="tertiary"] { --text-color: var(--text-3-info); --text-link-hover: var(--text-2-info); }
|
|
63
|
+
a-text[tone="info"][priority="quaternary"] { --text-color: var(--text-4-info); --text-link-hover: var(--text-3-info); }
|
|
64
|
+
a-text[tone="info"][priority="quinary"] { --text-color: var(--text-5-info); --text-link-hover: var(--text-4-info); }
|
|
65
|
+
|
|
66
|
+
/* Link colors layered on top of anta's global `a` defaults — only
|
|
67
|
+
overriding what the priority/tone cascade dictates (color and the
|
|
68
|
+
one-step-up hover color). Underline / thickness / offset / alpha
|
|
69
|
+
are inherited from the global rule in reset.css.
|
|
70
|
+
On hover the underline color is repeated so it tracks the priority
|
|
71
|
+
color rather than the global --link-color-hover. */
|
|
72
|
+
a-text a, a-text a:link, a-text a:visited { color: var(--text-link-color); }
|
|
73
|
+
a-text a:hover {
|
|
74
|
+
color: var(--text-link-hover);
|
|
75
|
+
text-decoration-color: var(--text-link-hover);
|
|
76
|
+
}
|
|
75
77
|
}
|
package/dist/generate-icons.mjs
CHANGED
|
@@ -58,7 +58,16 @@ export async function generate({ input, output = '.', name = 'a-icon.shapes', in
|
|
|
58
58
|
}
|
|
59
59
|
|
|
60
60
|
const shapes = []
|
|
61
|
-
|
|
61
|
+
// Anta's per-element CSS lives in `@layer anta`. Consumer-generated
|
|
62
|
+
// icon sets default to the same so they sort alongside Anta's
|
|
63
|
+
// built-ins; consumers who want their icons unlayered can post-
|
|
64
|
+
// process the output.
|
|
65
|
+
const cssLines = [
|
|
66
|
+
'/* Auto-generated by scripts/generate-icons.mjs. Do not edit by hand. */',
|
|
67
|
+
'',
|
|
68
|
+
'@layer anta {',
|
|
69
|
+
'',
|
|
70
|
+
]
|
|
62
71
|
// Built-in collision detection is for consumer runs only. Anta's own
|
|
63
72
|
// build passes --internal so it doesn't warn about every one of its
|
|
64
73
|
// own shapes "colliding" with itself.
|
|
@@ -74,9 +83,9 @@ export async function generate({ input, output = '.', name = 'a-icon.shapes', in
|
|
|
74
83
|
if (builtInSet.has(shape)) collisions.push(shape)
|
|
75
84
|
const raw = fs.readFileSync(path.join(inDir, file), 'utf8')
|
|
76
85
|
const encoded = encodeSvg(stripDimensions(raw)).trim()
|
|
77
|
-
cssLines.push(`a-icon[shape="${shape}"] {`)
|
|
78
|
-
cssLines.push(`
|
|
79
|
-
cssLines.push('}')
|
|
86
|
+
cssLines.push(` a-icon[shape="${shape}"] {`)
|
|
87
|
+
cssLines.push(` --icon: url("data:image/svg+xml,${encoded}");`)
|
|
88
|
+
cssLines.push(' }')
|
|
80
89
|
cssLines.push('')
|
|
81
90
|
shapes.push(shape)
|
|
82
91
|
}
|
|
@@ -114,6 +123,9 @@ export async function generate({ input, output = '.', name = 'a-icon.shapes', in
|
|
|
114
123
|
}
|
|
115
124
|
}
|
|
116
125
|
|
|
126
|
+
// Close the `@layer anta {` block opened at the top of cssLines.
|
|
127
|
+
cssLines.push('}')
|
|
128
|
+
|
|
117
129
|
const cssPath = path.join(outDir, `${name}.css`)
|
|
118
130
|
const tsPath = path.join(outDir, `${name}.ts`)
|
|
119
131
|
fs.writeFileSync(cssPath, cssLines.join('\n'))
|
package/dist/reset.css
ADDED
|
@@ -0,0 +1,115 @@
|
|
|
1
|
+
/* Anta's reset + typography defaults. All rules live in `@layer anta`
|
|
2
|
+
so consumer-owned components (in `@layer components`) and utility
|
|
3
|
+
frameworks (in `@layer utilities`) can override on demand. The
|
|
4
|
+
layer-order declaration in `tokens.css` (`@layer base, anta,
|
|
5
|
+
components, utilities;`) keeps Anta above any preflight resets in
|
|
6
|
+
`@layer base` so a Tailwind import doesn't wipe Anta's typography. */
|
|
7
|
+
|
|
8
|
+
@layer anta {
|
|
9
|
+
/* ───── Structural reset ─────────────────────────────────────── */
|
|
10
|
+
|
|
11
|
+
/* Modern box-sizing — pads and borders count inside the declared
|
|
12
|
+
width/height. Universal selectors so `::before` / `::after`
|
|
13
|
+
pseudo-elements follow the host. */
|
|
14
|
+
*, *::before, *::after {
|
|
15
|
+
box-sizing: border-box;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
/* Zero out browser-default margins on every element. Apps build
|
|
19
|
+
up their own spacing from explicit values rather than fighting
|
|
20
|
+
the user-agent stylesheet. */
|
|
21
|
+
* {
|
|
22
|
+
margin: 0;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
/* Replaced elements as block-level by default + cap to their
|
|
26
|
+
container so a misplaced large image doesn't blow out the
|
|
27
|
+
layout. Consumers re-inline them with `display: inline-block`
|
|
28
|
+
where needed. */
|
|
29
|
+
img, picture, video, canvas, svg {
|
|
30
|
+
display: block;
|
|
31
|
+
max-width: 100%;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
/* Inherit typography into form controls — by default browsers
|
|
35
|
+
reset font on these. */
|
|
36
|
+
input, button, textarea, select {
|
|
37
|
+
font: inherit;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
/* Wrap long words rather than overflow; `text-wrap: pretty`
|
|
41
|
+
balances widows on paragraphs, `text-wrap: balance` evens
|
|
42
|
+
headlines across lines. */
|
|
43
|
+
p, h1, h2, h3, h4, h5, h6 {
|
|
44
|
+
overflow-wrap: break-word;
|
|
45
|
+
}
|
|
46
|
+
p {
|
|
47
|
+
text-wrap: pretty;
|
|
48
|
+
}
|
|
49
|
+
h1, h2, h3, h4, h5, h6 {
|
|
50
|
+
text-wrap: balance;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
/* ───── Typography defaults — Anta opinion ───────────────────── */
|
|
54
|
+
|
|
55
|
+
h1, h2, h3, h4, h5, h6 {
|
|
56
|
+
font-weight: 600;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
strong {
|
|
60
|
+
font-weight: 600;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
/* Prose lists (ul, ol) get a tight 3ch left padding so markers
|
|
64
|
+
hug the text, and items get a small bottom margin so
|
|
65
|
+
consecutive ones breathe. Markers are toned all the way down
|
|
66
|
+
to --text-5 since they are visual scaffolding, not content. */
|
|
67
|
+
ul, ol {
|
|
68
|
+
padding-left: 3ch;
|
|
69
|
+
}
|
|
70
|
+
:is(ul, ol) > li {
|
|
71
|
+
margin-bottom: 0.5em;
|
|
72
|
+
}
|
|
73
|
+
:is(ul, ol) > li::marker {
|
|
74
|
+
color: var(--text-5);
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
/* `<menu>` is for command/option lists, not prose. By default
|
|
78
|
+
browsers render it like a `<ul>` (disc markers, 40px padding);
|
|
79
|
+
strip all of that so it's a clean semantic container ready to
|
|
80
|
+
be styled. */
|
|
81
|
+
menu {
|
|
82
|
+
list-style: none;
|
|
83
|
+
padding: 0;
|
|
84
|
+
margin: 0;
|
|
85
|
+
}
|
|
86
|
+
menu > li {
|
|
87
|
+
margin: 0;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
/* Global link defaults. Hairline underline at 75% alpha;
|
|
91
|
+
underline goes to currentColor (100%) and 1px on hover. Color
|
|
92
|
+
comes from --link-color tokens, which auto-flip in dark mode.
|
|
93
|
+
Components or specific contexts (nav, headings, buttons)
|
|
94
|
+
should override as needed. */
|
|
95
|
+
a, a:link, a:visited {
|
|
96
|
+
color: var(--link-color);
|
|
97
|
+
text-decoration: underline;
|
|
98
|
+
text-decoration-style: solid;
|
|
99
|
+
text-decoration-color: color-mix(in oklch, currentColor 75%, transparent);
|
|
100
|
+
text-decoration-thickness: 0.5px;
|
|
101
|
+
text-underline-offset: 3px;
|
|
102
|
+
}
|
|
103
|
+
a:hover {
|
|
104
|
+
color: var(--link-color-hover);
|
|
105
|
+
/* Underline color set to the hover token directly (rather than
|
|
106
|
+
`currentColor`) so it repaints in lockstep with `color` — a
|
|
107
|
+
few browsers latch onto the old currentColor value
|
|
108
|
+
otherwise. */
|
|
109
|
+
text-decoration-color: var(--link-color-hover);
|
|
110
|
+
text-decoration-thickness: 1px;
|
|
111
|
+
}
|
|
112
|
+
a:active {
|
|
113
|
+
text-decoration-color: color-mix(in oklch, currentColor 75%, transparent);
|
|
114
|
+
}
|
|
115
|
+
}
|