@openreachtech/furo-vue 1.5.0 → 1.6.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/lib/assets/css/furo/0030.variables-semantic-color.css +15 -1
- package/lib/components/atoms/FuroIcon/FuroIcon.vue +1 -1
- package/lib/components/molecules/FuroAttachment/FuroAttachment.vue +1 -1
- package/lib/components/molecules/FuroBreadcrumb/FuroBreadcrumb.vue +1 -1
- package/lib/components/molecules/FuroControlBlock/FuroControlBlock.vue +2 -2
- package/lib/components/molecules/FuroDropdownMenu/FuroDropdownMenu.vue +1 -1
- package/lib/components/molecules/FuroErrorState/FuroErrorState.vue +1 -1
- package/lib/components/molecules/FuroSearchField/FuroSearchField.vue +1 -1
- package/lib/components/organisms/FuroSidebar/FuroSidebar.vue +3 -3
- package/lib/components/organisms/FuroTable/FuroTable.vue +1 -1
- package/package.json +5 -6
- package/public/furo-vue/components.json +1 -1
|
@@ -8,6 +8,9 @@
|
|
|
8
8
|
--color-foreground-title: var(--palette-gray-900);
|
|
9
9
|
--color-foreground-secondary: var(--palette-gray-700);
|
|
10
10
|
--color-foreground-tertiary: var(--palette-gray-600);
|
|
11
|
+
/* The caption colour for an icon, a caret or a separator. A glyph is held to
|
|
12
|
+
3:1 rather than 4.5:1, so it keeps the step that text may not. See ADR 0043. */
|
|
13
|
+
--color-foreground-glyph: var(--palette-gray-600);
|
|
11
14
|
--color-foreground-light: var(--palette-gray-400);
|
|
12
15
|
--color-foreground-extra-light: var(--palette-gray-300);
|
|
13
16
|
--color-foreground-inverse: var(--palette-gray-050);
|
|
@@ -27,10 +30,15 @@
|
|
|
27
30
|
--color-accent-foreground: var(--palette-gray-800);
|
|
28
31
|
--color-destructive: var(--palette-rose-500);
|
|
29
32
|
--color-destructive-foreground: var(--palette-gray-950);
|
|
33
|
+
/* Text drawn in the danger family. The fill cannot darken to carry it, as
|
|
34
|
+
its label would fall under 4.5:1. See ADR 0043. */
|
|
35
|
+
--color-destructive-text: var(--palette-rose-600);
|
|
30
36
|
--color-border: var(--palette-gray-200);
|
|
31
37
|
--color-input: var(--palette-gray-400);
|
|
32
38
|
--color-ring: var(--palette-blue-500);
|
|
33
|
-
|
|
39
|
+
/* The lightest step clearing 4.5:1 on the page. The step below lands at
|
|
40
|
+
3.68:1. See ADR 0043. */
|
|
41
|
+
--color-link: var(--palette-blue-600);
|
|
34
42
|
|
|
35
43
|
/* Brand: the design's dark neutral family, distinct from the blue action colour */
|
|
36
44
|
--color-brand-surface-subtle: var(--palette-gray-100);
|
|
@@ -65,12 +73,14 @@
|
|
|
65
73
|
design does this deliberately; it is followed rather than normalised. */
|
|
66
74
|
--color-warning: var(--palette-orange-500);
|
|
67
75
|
--color-warning-foreground: var(--palette-gray-950);
|
|
76
|
+
--color-warning-text: var(--palette-orange-700);
|
|
68
77
|
--color-warning-subtle: var(--palette-orange-100);
|
|
69
78
|
/* One step darker than the other three tint labels, because the tint it sits
|
|
70
79
|
on is one step darker. The 700 step lands at 4.52:1 here. */
|
|
71
80
|
--color-warning-subtle-foreground: var(--palette-orange-800);
|
|
72
81
|
--color-info: var(--palette-blue-500);
|
|
73
82
|
--color-info-foreground: var(--palette-gray-950);
|
|
83
|
+
--color-info-text: var(--palette-blue-600);
|
|
74
84
|
--color-info-subtle: var(--palette-blue-050);
|
|
75
85
|
--color-info-subtle-foreground: var(--palette-blue-700);
|
|
76
86
|
/* One step lighter than the role itself, for a border that has to read as
|
|
@@ -102,6 +112,7 @@
|
|
|
102
112
|
--color-foreground-title: var(--palette-white);
|
|
103
113
|
--color-foreground-secondary: var(--palette-gray-200);
|
|
104
114
|
--color-foreground-tertiary: var(--palette-gray-300);
|
|
115
|
+
--color-foreground-glyph: var(--palette-gray-300);
|
|
105
116
|
--color-foreground-light: var(--palette-gray-500);
|
|
106
117
|
--color-foreground-extra-light: var(--palette-gray-600);
|
|
107
118
|
--color-foreground-inverse: var(--palette-gray-900);
|
|
@@ -119,6 +130,7 @@
|
|
|
119
130
|
--color-accent-foreground: var(--palette-gray-050);
|
|
120
131
|
--color-destructive: var(--palette-rose-500);
|
|
121
132
|
--color-destructive-foreground: var(--palette-gray-950);
|
|
133
|
+
--color-destructive-text: var(--palette-rose-500);
|
|
122
134
|
--color-border: var(--palette-gray-800);
|
|
123
135
|
--color-input: var(--palette-gray-600);
|
|
124
136
|
--color-ring: var(--palette-blue-500);
|
|
@@ -155,12 +167,14 @@
|
|
|
155
167
|
--color-success-subtle-foreground: var(--palette-emerald-300);
|
|
156
168
|
--color-warning: var(--palette-orange-400);
|
|
157
169
|
--color-warning-foreground: var(--palette-gray-950);
|
|
170
|
+
--color-warning-text: var(--palette-orange-400);
|
|
158
171
|
/* One step in from 950, mirroring the light block drawing warning one step
|
|
159
172
|
in from 050 while the other three families sit at the extreme. */
|
|
160
173
|
--color-warning-subtle: var(--palette-orange-900);
|
|
161
174
|
--color-warning-subtle-foreground: var(--palette-orange-200);
|
|
162
175
|
--color-info: var(--palette-blue-400);
|
|
163
176
|
--color-info-foreground: var(--palette-gray-950);
|
|
177
|
+
--color-info-text: var(--palette-blue-400);
|
|
164
178
|
--color-info-subtle: var(--palette-blue-950);
|
|
165
179
|
--color-info-subtle-foreground: var(--palette-blue-300);
|
|
166
180
|
/* Keeps the light block's rule, one step lighter than the role itself. */
|
|
@@ -125,7 +125,7 @@ export default defineComponent({
|
|
|
125
125
|
.unit-form-control-block > .label > .required-mark {
|
|
126
126
|
margin-inline-start: 0.125rem;
|
|
127
127
|
|
|
128
|
-
color: var(--color-destructive);
|
|
128
|
+
color: var(--color-destructive-text);
|
|
129
129
|
}
|
|
130
130
|
|
|
131
131
|
.unit-form-control-block.horizontal > .control {
|
|
@@ -138,7 +138,7 @@ export default defineComponent({
|
|
|
138
138
|
|
|
139
139
|
list-style: none;
|
|
140
140
|
|
|
141
|
-
color: var(--color-destructive);
|
|
141
|
+
color: var(--color-destructive-text);
|
|
142
142
|
font: var(--font-body-small);
|
|
143
143
|
}
|
|
144
144
|
|
|
@@ -329,7 +329,7 @@ export default defineComponent({
|
|
|
329
329
|
}
|
|
330
330
|
|
|
331
331
|
.unit-dropdown-menu-content > .menu-option.destructive {
|
|
332
|
-
color: var(--color-destructive);
|
|
332
|
+
color: var(--color-destructive-text);
|
|
333
333
|
}
|
|
334
334
|
|
|
335
335
|
.unit-dropdown-menu-content > .menu-option.destructive[data-highlighted]:not([data-disabled]) {
|
|
@@ -271,7 +271,7 @@ export default defineComponent({
|
|
|
271
271
|
padding-block: 0.5rem;
|
|
272
272
|
padding-inline: 0.5rem;
|
|
273
273
|
|
|
274
|
-
color: var(--color-foreground-
|
|
274
|
+
color: var(--color-foreground-secondary);
|
|
275
275
|
font: var(--font-label-tiny);
|
|
276
276
|
}
|
|
277
277
|
|
|
@@ -381,7 +381,7 @@ export default defineComponent({
|
|
|
381
381
|
width: 0.875rem;
|
|
382
382
|
height: 0.875rem;
|
|
383
383
|
|
|
384
|
-
color: var(--color-foreground-
|
|
384
|
+
color: var(--color-foreground-glyph);
|
|
385
385
|
}
|
|
386
386
|
|
|
387
387
|
/* nested sub-rows */
|
|
@@ -438,7 +438,7 @@ export default defineComponent({
|
|
|
438
438
|
|
|
439
439
|
background-color: transparent;
|
|
440
440
|
|
|
441
|
-
color: var(--color-foreground-
|
|
441
|
+
color: var(--color-foreground-secondary);
|
|
442
442
|
font: var(--font-label-small);
|
|
443
443
|
text-align: start;
|
|
444
444
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@openreachtech/furo-vue",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.6.0",
|
|
4
4
|
"description": "furo for Vue",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"types": "./types/index.d.ts",
|
|
@@ -117,18 +117,17 @@
|
|
|
117
117
|
"@openreachtech/jest-deep-containing": "^1.0.2",
|
|
118
118
|
"@types/jest": "^30.0.0",
|
|
119
119
|
"@vue/test-utils": "^2.5.1",
|
|
120
|
-
"
|
|
121
|
-
"babel-jest": "^29.7.0",
|
|
120
|
+
"babel-jest": "^30.5.2",
|
|
122
121
|
"core-js": "^3.50.0",
|
|
123
122
|
"eslint": "^9.39.5",
|
|
124
123
|
"eslint-plugin-eslint-comments": "^3.2.0",
|
|
125
124
|
"eslint-plugin-vue": "^9.33.0",
|
|
126
125
|
"globals": "^17.13.0",
|
|
127
|
-
"jest": "^
|
|
128
|
-
"jest-environment-jsdom": "^
|
|
126
|
+
"jest": "^30.5.2",
|
|
127
|
+
"jest-environment-jsdom": "^30.5.2",
|
|
129
128
|
"nuxt": "^3.21.11",
|
|
130
129
|
"typescript": "^5.9.3",
|
|
131
|
-
"vue-tsc": "^3.3.
|
|
130
|
+
"vue-tsc": "^3.3.13",
|
|
132
131
|
"whatwg-fetch": "^3.6.20"
|
|
133
132
|
},
|
|
134
133
|
"overrides": {
|