@threadlabs/looma 0.14.3 → 0.14.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/components/ui-text/ui-text.html +11 -2
- package/dist/index.js +1 -1
- package/package.json +1 -1
- package/styles/ui-text.css +10 -0
- package/vanilla/UiText.d.ts +1 -1
- package/vanilla/UiText.js +1 -1
- package/vue/UiText.d.ts +2 -2
- package/vue/UiText.vue +9 -1
- package/vue/chunks/UiText.js +1 -1
- package/vue/components.css +27 -19
|
@@ -3,9 +3,10 @@
|
|
|
3
3
|
<prop name="size" type="inherit | xs | sm | md | lg" default="inherit"
|
|
4
4
|
>The step on the type scale. inherit (the default) keeps the size of the text around it; xs is for fine print, sm for supporting text such as help and
|
|
5
5
|
metadata, md is body text, and lg is a lead paragraph.</prop>
|
|
6
|
-
<prop name="tone" type="default | secondary | muted | accent | danger | success" default="default"
|
|
6
|
+
<prop name="tone" type="default | secondary | muted | accent | danger | success | info | warning" default="default"
|
|
7
7
|
>The text's colour, by meaning. secondary is supporting prose such as a description; muted is quieter still, for metadata and hints; accent draws the eye;
|
|
8
|
-
danger states an error; success confirms one
|
|
8
|
+
danger states an error; success confirms one; info marks something moving forward normally; warning marks something that needs attention. Colour alone
|
|
9
|
+
does not carry the meaning, so the words must say it too.</prop>
|
|
9
10
|
<prop name="weight" type="inherit | normal | medium | semibold" default="inherit"
|
|
10
11
|
>The weight. inherit keeps the surrounding weight; medium and semibold emphasise a name or a figure.</prop>
|
|
11
12
|
<prop name="variant" type="body | eyebrow | code" default="body"
|
|
@@ -67,6 +68,14 @@
|
|
|
67
68
|
:host-state([tone="success"]) {
|
|
68
69
|
color: var(--ui-success);
|
|
69
70
|
}
|
|
71
|
+
/* The base info and warning colours fall short of 4.5:1 on sunken surfaces, so these use the
|
|
72
|
+
text-safe tokens a subtle badge sets its words in. */
|
|
73
|
+
:host-state([tone="info"]) {
|
|
74
|
+
color: var(--ui-info-subtle-text);
|
|
75
|
+
}
|
|
76
|
+
:host-state([tone="warning"]) {
|
|
77
|
+
color: var(--ui-warning-subtle-text);
|
|
78
|
+
}
|
|
70
79
|
|
|
71
80
|
:host-state([weight="normal"]) {
|
|
72
81
|
font-weight: var(--ui-font-normal);
|