@openreachtech/furo-vue 1.4.0 → 1.5.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.
Files changed (71) hide show
  1. package/lib/assets/css/furo/0010.variables-palette-color-scale.css +277 -275
  2. package/lib/assets/css/furo/0020.variables-z-index.css +11 -9
  3. package/lib/assets/css/furo/0030.variables-semantic-color.css +166 -164
  4. package/lib/assets/css/furo/0035.variables-semantic-dimension.css +103 -98
  5. package/lib/assets/css/furo/0040.variables-component-furo.css +26 -24
  6. package/lib/components/molecules/FuroDropdownMenu/FuroDropdownMenu.vue +1 -1
  7. package/lib/components/molecules/FuroSelect/FuroSelect.vue +145 -142
  8. package/lib/components/molecules/FuroSelect/FuroSelectContext.js +9 -0
  9. package/lib/components/molecules/FuroToggleGroup/FuroToggleGroupContext.js +3 -1
  10. package/lib/components/organisms/FuroDialog/FuroDialog.vue +2 -2
  11. package/lib/components/organisms/FuroDrawer/FuroDrawer.vue +2 -2
  12. package/lib/components/organisms/FuroSidebar/FuroSidebar.vue +3 -0
  13. package/lib/components/organisms/FuroToast/FuroToast.vue +2 -2
  14. package/lib/components/organisms/FuroToast/FuroToastContext.js +12 -0
  15. package/lib/components/organisms/FuroToast/ToastQueue.js +0 -1
  16. package/package.json +23 -23
  17. package/public/furo-vue/components.json +3 -3
  18. package/types/generated/components/atoms/FuroAvatar/FuroAvatar.vue.d.ts +81 -0
  19. package/types/generated/components/atoms/FuroBadge/FuroBadge.vue.d.ts +46 -0
  20. package/types/generated/components/atoms/FuroButton/FuroButton.vue.d.ts +54 -0
  21. package/types/generated/components/atoms/FuroCheckbox/FuroCheckbox.vue.d.ts +83 -1
  22. package/types/generated/components/atoms/FuroEmailField/FuroEmailField.vue.d.ts +3 -0
  23. package/types/generated/components/atoms/FuroFileField/FuroFileField.vue.d.ts +3 -0
  24. package/types/generated/components/atoms/FuroIcon/FuroIcon.vue.d.ts +3 -0
  25. package/types/generated/components/atoms/FuroNumberField/FuroNumberField.vue.d.ts +32 -5
  26. package/types/generated/components/atoms/FuroPasswordField/FuroPasswordField.vue.d.ts +3 -0
  27. package/types/generated/components/atoms/FuroRadio/FuroRadio.vue.d.ts +106 -0
  28. package/types/generated/components/atoms/FuroSwitch/FuroSwitch.vue.d.ts +74 -1
  29. package/types/generated/components/atoms/FuroTextField/FuroTextField.vue.d.ts +3 -0
  30. package/types/generated/components/atoms/FuroTextarea/FuroTextarea.vue.d.ts +3 -0
  31. package/types/generated/components/atoms/FuroToggle/FuroToggle.vue.d.ts +26 -0
  32. package/types/generated/components/molecules/FuroAccordion/FuroAccordion.vue.d.ts +150 -1
  33. package/types/generated/components/molecules/FuroAttachment/FuroAttachment.vue.d.ts +53 -0
  34. package/types/generated/components/molecules/FuroAutocompleteField/FuroAutocompleteField.vue.d.ts +460 -4
  35. package/types/generated/components/molecules/FuroAvatarGroup/FuroAvatarGroup.vue.d.ts +25 -0
  36. package/types/generated/components/molecules/FuroBreadcrumb/FuroBreadcrumb.vue.d.ts +55 -0
  37. package/types/generated/components/molecules/FuroCollapsible/FuroCollapsible.vue.d.ts +107 -0
  38. package/types/generated/components/molecules/FuroControlBlock/FuroControlBlock.vue.d.ts +7 -0
  39. package/types/generated/components/molecules/FuroDatePicker/FuroDatePicker.vue.d.ts +39 -0
  40. package/types/generated/components/molecules/FuroDateTimePicker/FuroDateTimePicker.vue.d.ts +9 -0
  41. package/types/generated/components/molecules/FuroDropdownMenu/FuroDropdownMenu.vue.d.ts +144 -1
  42. package/types/generated/components/molecules/FuroDropdownMenu/FuroDropdownMenuOptionRows.vue.d.ts +274 -1
  43. package/types/generated/components/molecules/FuroEditableField/FuroEditableField.vue.d.ts +139 -0
  44. package/types/generated/components/molecules/FuroEmptyState/FuroEmptyState.vue.d.ts +10 -0
  45. package/types/generated/components/molecules/FuroErrorState/FuroErrorState.vue.d.ts +10 -0
  46. package/types/generated/components/molecules/FuroPagination/FuroPagination.vue.d.ts +144 -0
  47. package/types/generated/components/molecules/FuroPopover/FuroPopover.vue.d.ts +20 -0
  48. package/types/generated/components/molecules/FuroScrollArea/FuroScrollArea.vue.d.ts +120 -0
  49. package/types/generated/components/molecules/FuroSearchField/FuroSearchField.vue.d.ts +31 -0
  50. package/types/generated/components/molecules/FuroSectionHeader/FuroSectionHeader.vue.d.ts +32 -0
  51. package/types/generated/components/molecules/FuroSelect/FuroSelect.vue.d.ts +456 -4
  52. package/types/generated/components/molecules/FuroSelect/FuroSelectContext.d.ts +6 -0
  53. package/types/generated/components/molecules/FuroSeparator/FuroSeparator.vue.d.ts +7 -0
  54. package/types/generated/components/molecules/FuroSkeleton/FuroSkeleton.vue.d.ts +3 -0
  55. package/types/generated/components/molecules/FuroSplitter/FuroSplitter.vue.d.ts +154 -0
  56. package/types/generated/components/molecules/FuroTimeField/FuroTimeField.vue.d.ts +76 -0
  57. package/types/generated/components/molecules/FuroToggleGroup/FuroToggleGroup.vue.d.ts +80 -0
  58. package/types/generated/components/molecules/FuroToolBar/FuroToolBar.vue.d.ts +16 -0
  59. package/types/generated/components/molecules/FuroTooltip/FuroTooltip.vue.d.ts +24 -0
  60. package/types/generated/components/organisms/FuroAlertDialog/FuroAlertDialog.vue.d.ts +227 -0
  61. package/types/generated/components/organisms/FuroDialog/FuroDialog.vue.d.ts +215 -0
  62. package/types/generated/components/organisms/FuroDrawer/FuroDrawer.vue.d.ts +264 -5
  63. package/types/generated/components/organisms/FuroEditor/FuroEditor.vue.d.ts +84 -1
  64. package/types/generated/components/organisms/FuroEditor/FuroEditorMentionMenu.vue.d.ts +3 -0
  65. package/types/generated/components/organisms/FuroSidebar/FuroSidebar.vue.d.ts +71 -0
  66. package/types/generated/components/organisms/FuroStepper/FuroStepper.vue.d.ts +207 -0
  67. package/types/generated/components/organisms/FuroTable/FuroTable.vue.d.ts +82 -1
  68. package/types/generated/components/organisms/FuroTabs/FuroTabs.vue.d.ts +132 -1
  69. package/types/generated/components/organisms/FuroToast/FuroToast.vue.d.ts +349 -0
  70. package/types/generated/components/organisms/FuroToast/FuroToastContext.d.ts +6 -0
  71. package/types/generated/components/organisms/FuroToast/FuroToaster.vue.d.ts +7 -0
package/lib/assets/css/furo/0030.variables-semantic-color.css CHANGED
@@ -1,178 +1,180 @@
1
- :root,
2
- [data-theme="light"] {
3
- color-scheme: light;
1
+ @layer furo {
2
+ :root,
3
+ [data-theme="light"] {
4
+ color-scheme: light;
4
5
 
5
- --color-background: var(--palette-white);
6
- --color-foreground: var(--palette-gray-800);
7
- --color-foreground-title: var(--palette-gray-900);
8
- --color-foreground-secondary: var(--palette-gray-700);
9
- --color-foreground-tertiary: var(--palette-gray-600);
10
- --color-foreground-light: var(--palette-gray-400);
11
- --color-foreground-extra-light: var(--palette-gray-300);
12
- --color-foreground-inverse: var(--palette-gray-050);
13
- --color-card: var(--palette-white);
14
- --color-card-foreground: var(--palette-gray-800);
15
- --color-popover: var(--palette-white);
16
- --color-popover-foreground: var(--palette-gray-800);
17
- --color-primary: var(--palette-gray-800);
18
- --color-primary-foreground: var(--palette-white);
19
- --color-secondary: var(--palette-gray-200);
20
- --color-secondary-foreground: var(--palette-gray-800);
21
- --color-muted: var(--palette-gray-100);
22
- /* The lightest step clearing 4.5:1 on both --color-muted and the page. The
23
- step above lands at 2.76:1 on the surface it names. See ADR 0040. */
24
- --color-muted-foreground: var(--palette-gray-700);
25
- --color-accent: var(--palette-gray-200);
26
- --color-accent-foreground: var(--palette-gray-800);
27
- --color-destructive: var(--palette-rose-500);
28
- --color-destructive-foreground: var(--palette-gray-950);
29
- --color-border: var(--palette-gray-200);
30
- --color-input: var(--palette-gray-400);
31
- --color-ring: var(--palette-blue-500);
32
- --color-link: var(--palette-blue-500);
6
+ --color-background: var(--palette-white);
7
+ --color-foreground: var(--palette-gray-800);
8
+ --color-foreground-title: var(--palette-gray-900);
9
+ --color-foreground-secondary: var(--palette-gray-700);
10
+ --color-foreground-tertiary: var(--palette-gray-600);
11
+ --color-foreground-light: var(--palette-gray-400);
12
+ --color-foreground-extra-light: var(--palette-gray-300);
13
+ --color-foreground-inverse: var(--palette-gray-050);
14
+ --color-card: var(--palette-white);
15
+ --color-card-foreground: var(--palette-gray-800);
16
+ --color-popover: var(--palette-white);
17
+ --color-popover-foreground: var(--palette-gray-800);
18
+ --color-primary: var(--palette-gray-800);
19
+ --color-primary-foreground: var(--palette-white);
20
+ --color-secondary: var(--palette-gray-200);
21
+ --color-secondary-foreground: var(--palette-gray-800);
22
+ --color-muted: var(--palette-gray-100);
23
+ /* The lightest step clearing 4.5:1 on both --color-muted and the page. The
24
+ step above lands at 2.76:1 on the surface it names. See ADR 0040. */
25
+ --color-muted-foreground: var(--palette-gray-700);
26
+ --color-accent: var(--palette-gray-200);
27
+ --color-accent-foreground: var(--palette-gray-800);
28
+ --color-destructive: var(--palette-rose-500);
29
+ --color-destructive-foreground: var(--palette-gray-950);
30
+ --color-border: var(--palette-gray-200);
31
+ --color-input: var(--palette-gray-400);
32
+ --color-ring: var(--palette-blue-500);
33
+ --color-link: var(--palette-blue-500);
33
34
 
34
- /* Brand: the design's dark neutral family, distinct from the blue action colour */
35
- --color-brand-surface-subtle: var(--palette-gray-100);
36
- --color-brand-surface-lighter: var(--palette-gray-400);
37
- --color-brand-surface: var(--palette-gray-900);
38
- --color-brand-surface-darker: var(--palette-gray-950);
39
- --color-brand-border-subtle: var(--palette-gray-100);
40
- --color-brand-border-lighter: var(--palette-gray-300);
41
- --color-brand-border: var(--palette-gray-600);
42
- --color-brand-border-darker: var(--palette-gray-800);
43
- --color-brand-foreground: var(--palette-gray-800);
44
- --color-brand-foreground-darker: var(--palette-gray-900);
35
+ /* Brand: the design's dark neutral family, distinct from the blue action colour */
36
+ --color-brand-surface-subtle: var(--palette-gray-100);
37
+ --color-brand-surface-lighter: var(--palette-gray-400);
38
+ --color-brand-surface: var(--palette-gray-900);
39
+ --color-brand-surface-darker: var(--palette-gray-950);
40
+ --color-brand-border-subtle: var(--palette-gray-100);
41
+ --color-brand-border-lighter: var(--palette-gray-300);
42
+ --color-brand-border: var(--palette-gray-600);
43
+ --color-brand-border-darker: var(--palette-gray-800);
44
+ --color-brand-foreground: var(--palette-gray-800);
45
+ --color-brand-foreground-darker: var(--palette-gray-900);
45
46
 
46
- /* Selected: the blue the design binds to a checked selection control. A role
47
- of its own because primary means "this is the action" and stays a dark
48
- neutral, while info means "this is a notice". Neither word means "chosen". */
49
- --color-selected: var(--palette-blue-500);
50
- --color-selected-darker: var(--palette-blue-700);
51
- --color-selected-lighter: var(--palette-blue-300);
52
- --color-selected-border-darker: var(--palette-blue-800);
53
- --color-selected-foreground: var(--palette-gray-050);
47
+ /* Selected: the blue the design binds to a checked selection control. A role
48
+ of its own because primary means "this is the action" and stays a dark
49
+ neutral, while info means "this is a notice". Neither word means "chosen". */
50
+ --color-selected: var(--palette-blue-500);
51
+ --color-selected-darker: var(--palette-blue-700);
52
+ --color-selected-lighter: var(--palette-blue-300);
53
+ --color-selected-border-darker: var(--palette-blue-800);
54
+ --color-selected-foreground: var(--palette-gray-050);
54
55
 
55
- /* Every status role carries the same companion: these surfaces stay mid-tone
56
- in both themes, so only a near-black label clears 4.5:1. See ADR 0039. */
57
- /* A tint carries the family's own dark step rather than the near-black the
58
- fill carries, and that step mirrors between themes. See ADR 0040. */
59
- --color-success: var(--palette-emerald-500);
60
- --color-success-foreground: var(--palette-gray-950);
61
- --color-success-subtle: var(--palette-emerald-050);
62
- --color-success-subtle-foreground: var(--palette-emerald-700);
63
- /* Warning draws its subtle surface one step in from the other families. The
64
- design does this deliberately; it is followed rather than normalised. */
65
- --color-warning: var(--palette-orange-500);
66
- --color-warning-foreground: var(--palette-gray-950);
67
- --color-warning-subtle: var(--palette-orange-100);
68
- /* One step darker than the other three tint labels, because the tint it sits
69
- on is one step darker. The 700 step lands at 4.52:1 here. */
70
- --color-warning-subtle-foreground: var(--palette-orange-800);
71
- --color-info: var(--palette-blue-500);
72
- --color-info-foreground: var(--palette-gray-950);
73
- --color-info-subtle: var(--palette-blue-050);
74
- --color-info-subtle-foreground: var(--palette-blue-700);
75
- /* One step lighter than the role itself, for a border that has to read as
76
- the accent family without competing with filled text on it. Only info
77
- carries this step, because the design draws an outlined badge in the
78
- accent family and the neutral family and in no other. */
79
- --color-info-lighter: var(--palette-blue-400);
80
- --color-error: var(--palette-rose-500);
81
- --color-error-foreground: var(--palette-gray-950);
82
- --color-error-subtle: var(--palette-rose-050);
83
- --color-error-subtle-foreground: var(--palette-rose-700);
56
+ /* Every status role carries the same companion: these surfaces stay mid-tone
57
+ in both themes, so only a near-black label clears 4.5:1. See ADR 0039. */
58
+ /* A tint carries the family's own dark step rather than the near-black the
59
+ fill carries, and that step mirrors between themes. See ADR 0040. */
60
+ --color-success: var(--palette-emerald-500);
61
+ --color-success-foreground: var(--palette-gray-950);
62
+ --color-success-subtle: var(--palette-emerald-050);
63
+ --color-success-subtle-foreground: var(--palette-emerald-700);
64
+ /* Warning draws its subtle surface one step in from the other families. The
65
+ design does this deliberately; it is followed rather than normalised. */
66
+ --color-warning: var(--palette-orange-500);
67
+ --color-warning-foreground: var(--palette-gray-950);
68
+ --color-warning-subtle: var(--palette-orange-100);
69
+ /* One step darker than the other three tint labels, because the tint it sits
70
+ on is one step darker. The 700 step lands at 4.52:1 here. */
71
+ --color-warning-subtle-foreground: var(--palette-orange-800);
72
+ --color-info: var(--palette-blue-500);
73
+ --color-info-foreground: var(--palette-gray-950);
74
+ --color-info-subtle: var(--palette-blue-050);
75
+ --color-info-subtle-foreground: var(--palette-blue-700);
76
+ /* One step lighter than the role itself, for a border that has to read as
77
+ the accent family without competing with filled text on it. Only info
78
+ carries this step, because the design draws an outlined badge in the
79
+ accent family and the neutral family and in no other. */
80
+ --color-info-lighter: var(--palette-blue-400);
81
+ --color-error: var(--palette-rose-500);
82
+ --color-error-foreground: var(--palette-gray-950);
83
+ --color-error-subtle: var(--palette-rose-050);
84
+ --color-error-subtle-foreground: var(--palette-rose-700);
84
85
 
85
- /* A neutral surface one step subtler than --color-muted, for a chip or badge
86
- that must sit on a card without reading as a raised element. */
87
- --color-muted-subtle: var(--palette-gray-050);
86
+ /* A neutral surface one step subtler than --color-muted, for a chip or badge
87
+ that must sit on a card without reading as a raised element. */
88
+ --color-muted-subtle: var(--palette-gray-050);
88
89
 
89
- /* The chip owns its pair so a consumer moves both or neither. See ADR 0038. */
90
- --color-mention: var(--palette-gray-200);
91
- --color-mention-foreground: var(--palette-gray-800);
92
- }
90
+ /* The chip owns its pair so a consumer moves both or neither. See ADR 0038. */
91
+ --color-mention: var(--palette-gray-200);
92
+ --color-mention-foreground: var(--palette-gray-800);
93
+ }
93
94
 
94
- /* The design defines no dark theme. These values are derived from the light
95
- ones by preserving the relationship between palette steps, not designed. */
96
- [data-theme="dark"] {
97
- color-scheme: dark;
95
+ /* The design defines no dark theme. These values are derived from the light
96
+ ones by preserving the relationship between palette steps, not designed. */
97
+ [data-theme="dark"] {
98
+ color-scheme: dark;
98
99
 
99
- --color-background: var(--palette-gray-950);
100
- --color-foreground: var(--palette-gray-050);
101
- --color-foreground-title: var(--palette-white);
102
- --color-foreground-secondary: var(--palette-gray-200);
103
- --color-foreground-tertiary: var(--palette-gray-300);
104
- --color-foreground-light: var(--palette-gray-500);
105
- --color-foreground-extra-light: var(--palette-gray-600);
106
- --color-foreground-inverse: var(--palette-gray-900);
107
- --color-card: var(--palette-gray-950);
108
- --color-card-foreground: var(--palette-gray-050);
109
- --color-popover: var(--palette-gray-950);
110
- --color-popover-foreground: var(--palette-gray-050);
111
- --color-primary: var(--palette-gray-050);
112
- --color-primary-foreground: var(--palette-gray-900);
113
- --color-secondary: var(--palette-gray-800);
114
- --color-secondary-foreground: var(--palette-gray-050);
115
- --color-muted: var(--palette-gray-800);
116
- --color-muted-foreground: var(--palette-gray-300);
117
- --color-accent: var(--palette-gray-700);
118
- --color-accent-foreground: var(--palette-gray-050);
119
- --color-destructive: var(--palette-rose-500);
120
- --color-destructive-foreground: var(--palette-gray-950);
121
- --color-border: var(--palette-gray-800);
122
- --color-input: var(--palette-gray-600);
123
- --color-ring: var(--palette-blue-500);
124
- --color-link: var(--palette-blue-500);
100
+ --color-background: var(--palette-gray-950);
101
+ --color-foreground: var(--palette-gray-050);
102
+ --color-foreground-title: var(--palette-white);
103
+ --color-foreground-secondary: var(--palette-gray-200);
104
+ --color-foreground-tertiary: var(--palette-gray-300);
105
+ --color-foreground-light: var(--palette-gray-500);
106
+ --color-foreground-extra-light: var(--palette-gray-600);
107
+ --color-foreground-inverse: var(--palette-gray-900);
108
+ --color-card: var(--palette-gray-950);
109
+ --color-card-foreground: var(--palette-gray-050);
110
+ --color-popover: var(--palette-gray-950);
111
+ --color-popover-foreground: var(--palette-gray-050);
112
+ --color-primary: var(--palette-gray-050);
113
+ --color-primary-foreground: var(--palette-gray-900);
114
+ --color-secondary: var(--palette-gray-800);
115
+ --color-secondary-foreground: var(--palette-gray-050);
116
+ --color-muted: var(--palette-gray-800);
117
+ --color-muted-foreground: var(--palette-gray-300);
118
+ --color-accent: var(--palette-gray-700);
119
+ --color-accent-foreground: var(--palette-gray-050);
120
+ --color-destructive: var(--palette-rose-500);
121
+ --color-destructive-foreground: var(--palette-gray-950);
122
+ --color-border: var(--palette-gray-800);
123
+ --color-input: var(--palette-gray-600);
124
+ --color-ring: var(--palette-blue-500);
125
+ --color-link: var(--palette-blue-500);
125
126
 
126
- --color-brand-surface-subtle: var(--palette-gray-800);
127
- --color-brand-surface-lighter: var(--palette-gray-600);
128
- --color-brand-surface: var(--palette-gray-100);
129
- --color-brand-surface-darker: var(--palette-gray-050);
130
- --color-brand-border-subtle: var(--palette-gray-800);
131
- --color-brand-border-lighter: var(--palette-gray-700);
132
- --color-brand-border: var(--palette-gray-400);
133
- --color-brand-border-darker: var(--palette-gray-200);
134
- --color-brand-foreground: var(--palette-gray-200);
135
- --color-brand-foreground-darker: var(--palette-gray-100);
127
+ --color-brand-surface-subtle: var(--palette-gray-800);
128
+ --color-brand-surface-lighter: var(--palette-gray-600);
129
+ --color-brand-surface: var(--palette-gray-100);
130
+ --color-brand-surface-darker: var(--palette-gray-050);
131
+ --color-brand-border-subtle: var(--palette-gray-800);
132
+ --color-brand-border-lighter: var(--palette-gray-700);
133
+ --color-brand-border: var(--palette-gray-400);
134
+ --color-brand-border-darker: var(--palette-gray-200);
135
+ --color-brand-foreground: var(--palette-gray-200);
136
+ --color-brand-foreground-darker: var(--palette-gray-100);
136
137
 
137
- /* Mirrored across the ramp, so a step that reads as more prominent in light
138
- still reads as more prominent here. The name encodes the light-theme
139
- relationship, which is why "darker" resolves to a lighter step; the brand
140
- family above already works this way. */
141
- --color-selected: var(--palette-blue-400);
142
- --color-selected-darker: var(--palette-blue-300);
143
- --color-selected-lighter: var(--palette-blue-700);
144
- --color-selected-border-darker: var(--palette-blue-200);
145
- --color-selected-foreground: var(--palette-gray-900);
138
+ /* Mirrored across the ramp, so a step that reads as more prominent in light
139
+ still reads as more prominent here. The name encodes the light-theme
140
+ relationship, which is why "darker" resolves to a lighter step; the brand
141
+ family above already works this way. */
142
+ --color-selected: var(--palette-blue-400);
143
+ --color-selected-darker: var(--palette-blue-300);
144
+ --color-selected-lighter: var(--palette-blue-700);
145
+ --color-selected-border-darker: var(--palette-blue-200);
146
+ --color-selected-foreground: var(--palette-gray-900);
146
147
 
147
- /* The companion does not invert with the theme: these surfaces stay mid-tone
148
- in both, so a near-black label is what clears 4.5:1. See ADR 0039. */
149
- /* The tint label mirrors the light block across the ramp, 700 to 300 and 800
150
- to 200, the reflection the brand family already makes. See ADR 0040. */
151
- --color-success: var(--palette-emerald-400);
152
- --color-success-foreground: var(--palette-gray-950);
153
- --color-success-subtle: var(--palette-emerald-950);
154
- --color-success-subtle-foreground: var(--palette-emerald-300);
155
- --color-warning: var(--palette-orange-400);
156
- --color-warning-foreground: var(--palette-gray-950);
157
- /* One step in from 950, mirroring the light block drawing warning one step
158
- in from 050 while the other three families sit at the extreme. */
159
- --color-warning-subtle: var(--palette-orange-900);
160
- --color-warning-subtle-foreground: var(--palette-orange-200);
161
- --color-info: var(--palette-blue-400);
162
- --color-info-foreground: var(--palette-gray-950);
163
- --color-info-subtle: var(--palette-blue-950);
164
- --color-info-subtle-foreground: var(--palette-blue-300);
165
- /* Keeps the light block's rule, one step lighter than the role itself. */
166
- --color-info-lighter: var(--palette-blue-300);
167
- --color-error: var(--palette-rose-400);
168
- --color-error-foreground: var(--palette-gray-950);
169
- --color-error-subtle: var(--palette-rose-950);
170
- --color-error-subtle-foreground: var(--palette-rose-300);
148
+ /* The companion does not invert with the theme: these surfaces stay mid-tone
149
+ in both, so a near-black label is what clears 4.5:1. See ADR 0039. */
150
+ /* The tint label mirrors the light block across the ramp, 700 to 300 and 800
151
+ to 200, the reflection the brand family already makes. See ADR 0040. */
152
+ --color-success: var(--palette-emerald-400);
153
+ --color-success-foreground: var(--palette-gray-950);
154
+ --color-success-subtle: var(--palette-emerald-950);
155
+ --color-success-subtle-foreground: var(--palette-emerald-300);
156
+ --color-warning: var(--palette-orange-400);
157
+ --color-warning-foreground: var(--palette-gray-950);
158
+ /* One step in from 950, mirroring the light block drawing warning one step
159
+ in from 050 while the other three families sit at the extreme. */
160
+ --color-warning-subtle: var(--palette-orange-900);
161
+ --color-warning-subtle-foreground: var(--palette-orange-200);
162
+ --color-info: var(--palette-blue-400);
163
+ --color-info-foreground: var(--palette-gray-950);
164
+ --color-info-subtle: var(--palette-blue-950);
165
+ --color-info-subtle-foreground: var(--palette-blue-300);
166
+ /* Keeps the light block's rule, one step lighter than the role itself. */
167
+ --color-info-lighter: var(--palette-blue-300);
168
+ --color-error: var(--palette-rose-400);
169
+ --color-error-foreground: var(--palette-gray-950);
170
+ --color-error-subtle: var(--palette-rose-950);
171
+ --color-error-subtle-foreground: var(--palette-rose-300);
171
172
 
172
- /* Subtler than --color-muted means further from the text here, the same
173
- inversion the -subtle status surfaces make. */
174
- --color-muted-subtle: var(--palette-gray-900);
173
+ /* Subtler than --color-muted means further from the text here, the same
174
+ inversion the -subtle status surfaces make. */
175
+ --color-muted-subtle: var(--palette-gray-900);
175
176
 
176
- --color-mention: var(--palette-gray-700);
177
- --color-mention-foreground: var(--palette-gray-050);
177
+ --color-mention: var(--palette-gray-700);
178
+ --color-mention-foreground: var(--palette-gray-050);
179
+ }
178
180
  }
package/lib/assets/css/furo/0035.variables-semantic-dimension.css CHANGED
@@ -1,107 +1,112 @@
1
- :root {
2
- /* Border radius (absolute steps, not derived from a base) */
3
- --size-border-radius-3x-small: 0.125rem; /* 2px */
4
- --size-border-radius-2x-small: 0.25rem; /* 4px */
5
- --size-border-radius-small: 0.375rem; /* 6px */
6
- --size-border-radius-medium: 0.5rem; /* 8px */
7
- --size-border-radius-large: 0.625rem; /* 10px */
8
- --size-border-radius-x-large: 0.75rem; /* 12px */
9
- --size-border-radius-2x-large: 1rem; /* 16px */
10
- --size-border-radius-3x-large: 1.25rem; /* 20px */
11
- --size-border-radius-4x-large: 1.5rem; /* 24px */
12
- --size-border-radius-5x-large: 2rem; /* 32px */
13
- --size-border-radius-6x-large: 2.5rem; /* 40px */
14
- --size-border-radius-full: 625rem; /* fully rounded, for pill controls */
15
- --size-border-radius: var(--size-border-radius-large); /* default step */
1
+ @layer furo {
2
+ :root {
3
+ /* Border radius (absolute steps, not derived from a base) */
4
+ --size-border-radius-3x-small: 0.125rem; /* 2px */
5
+ --size-border-radius-2x-small: 0.25rem; /* 4px */
6
+ --size-border-radius-small: 0.375rem; /* 6px */
7
+ --size-border-radius-medium: 0.5rem; /* 8px */
8
+ --size-border-radius-large: 0.625rem; /* 10px */
9
+ --size-border-radius-x-large: 0.75rem; /* 12px */
10
+ --size-border-radius-2x-large: 1rem; /* 16px */
11
+ --size-border-radius-3x-large: 1.25rem; /* 20px */
12
+ --size-border-radius-4x-large: 1.5rem; /* 24px */
13
+ --size-border-radius-5x-large: 2rem; /* 32px */
14
+ --size-border-radius-6x-large: 2.5rem; /* 40px */
15
+ --size-border-radius-full: 625rem; /* fully rounded, for pill controls */
16
+ --size-border-radius: var(--size-border-radius-large); /* default step */
16
17
 
17
- /* Spacing (4px grid) */
18
- --size-space-none: 0;
19
- --size-space-3x-small: 0.125rem; /* 2px */
20
- --size-space-tiny: 0.25rem; /* 4px */
21
- --size-space-2x-small: 0.375rem; /* 6px */
22
- --size-space-small: 0.5rem; /* 8px */
23
- --size-space-snug: 0.625rem; /* 10px */
24
- --size-space-compact: 0.75rem; /* 12px */
25
- --size-space-medium: 1rem; /* 16px */
26
- --size-space-relaxed: 1.25rem; /* 20px */
27
- --size-space-large: 1.5rem; /* 24px */
28
- --size-space-x-large: 2rem; /* 32px */
29
- --size-space-spacious: 2.5rem; /* 40px */
30
- --size-space-2x-large: 3rem; /* 48px */
31
- --size-space-3x-large: 4rem; /* 64px */
32
- --size-space-4x-large: 5rem; /* 80px */
33
- --size-space-5x-large: 6rem; /* 96px */
18
+ /* Spacing (4px grid) */
19
+ --size-space-none: 0;
20
+ --size-space-3x-small: 0.125rem; /* 2px */
21
+ --size-space-tiny: 0.25rem; /* 4px */
22
+ --size-space-2x-small: 0.375rem; /* 6px */
23
+ --size-space-small: 0.5rem; /* 8px */
24
+ --size-space-snug: 0.625rem; /* 10px */
25
+ --size-space-compact: 0.75rem; /* 12px */
26
+ --size-space-medium: 1rem; /* 16px */
27
+ --size-space-relaxed: 1.25rem; /* 20px */
28
+ --size-space-large: 1.5rem; /* 24px */
29
+ --size-space-x-large: 2rem; /* 32px */
30
+ --size-space-spacious: 2.5rem; /* 40px */
31
+ --size-space-2x-large: 3rem; /* 48px */
32
+ --size-space-3x-large: 4rem; /* 64px */
33
+ --size-space-4x-large: 5rem; /* 80px */
34
+ --size-space-5x-large: 6rem; /* 96px */
34
35
 
35
- /* Layout sizes */
36
- --size-thinnest: 1px;
37
- /* The design names four steps and marks none of them the default, so the alias
38
- below carries a compatibility default rather than a drawn value (ADR 0042). */
39
- --size-input-height-large: 2.75rem; /* 44px */
40
- --size-input-height-medium: 2.5rem; /* 40px */
41
- --size-input-height-small: 2rem; /* 32px */
42
- --size-input-height: var(--size-input-height-small);
43
- --size-screen-height: 100dvh;
44
- --size-header-height: 4.5rem;
45
- --size-footer-height: 6rem;
46
- --size-table-cell-inline: 1rem;
47
- --size-table-cell-block: 0;
48
- --size-sidebar-width: 16rem;
49
- --size-sidebar-width-collapsed: 4rem;
50
- /* Deprecated, removed in the next minor. Read --size-sidebar-width, which
51
- carries the width the rail actually renders. */
52
- --size-nav-width: var(--size-sidebar-width);
53
- --size-focus-ring-spread: 0.125rem;
36
+ /* Layout sizes */
37
+ --size-thinnest: 1px;
38
+ /* The design names four steps and marks none of them the default, so the alias
39
+ below carries a compatibility default rather than a drawn value (ADR 0042). */
40
+ --size-input-height-large: 2.75rem; /* 44px */
41
+ --size-input-height-medium: 2.5rem; /* 40px */
42
+ --size-input-height-small: 2rem; /* 32px */
43
+ --size-input-height: var(--size-input-height-small);
44
+ --size-option-height: calc(var(--size-input-height) - 0.5rem);
45
+ --size-close-button-small: 1.25rem; /* 20px */
46
+ --size-close-button-medium: 1.75rem; /* 28px */
47
+ --size-screen-height: 100dvh;
48
+ --size-header-height: 4.5rem;
49
+ --size-footer-height: 6rem;
50
+ --size-table-cell-inline: 1rem;
51
+ --size-table-cell-block: 0;
52
+ --size-sidebar-width: 16rem;
53
+ --size-sidebar-width-collapsed: 4rem;
54
+ /* Deprecated, removed in the next minor. Read --size-sidebar-width, which
55
+ carries the width the rail actually renders. */
56
+ --size-nav-width: var(--size-sidebar-width);
57
+ --size-focus-ring-spread: 0.125rem;
54
58
 
55
- /* Typography */
56
- --font-family: 'Noto Sans JP', system-ui, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
57
- --font-family-display: 'Noto Serif JP', georgia, 'Times New Roman', serif;
58
- --font-size: 0.875rem; /* 14px default */
59
- --font-size-small: calc(var(--font-size) * 0.875);
60
- --font-size-medium: calc(var(--font-size) * 1);
61
- --font-size-large: calc(var(--font-size) * 1.25);
62
- --font-size-x-large: calc(var(--font-size) * 1.5);
63
- --font-size-2x-large: calc(var(--font-size) * 1.75);
64
- --font-size-3x-large: calc(var(--font-size) * 2);
65
- --font-size-4x-large: calc(var(--font-size) * 2.25);
66
- --font-weight-regular: 400;
67
- --font-weight-medium: 500;
68
- --font-weight-semibold: 600;
69
- --font-weight-bold: 700;
70
- --font-line-height-body: 1.4;
59
+ /* Typography */
60
+ --font-family: 'Noto Sans JP', system-ui, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
61
+ --font-family-display: 'Noto Serif JP', georgia, 'Times New Roman', serif;
62
+ --font-size: 0.875rem; /* 14px default */
63
+ --font-size-small: calc(var(--font-size) * 0.875);
64
+ --font-size-medium: calc(var(--font-size) * 1);
65
+ --font-size-large: calc(var(--font-size) * 1.25);
66
+ --font-size-x-large: calc(var(--font-size) * 1.5);
67
+ --font-size-2x-large: calc(var(--font-size) * 1.75);
68
+ --font-size-3x-large: calc(var(--font-size) * 2);
69
+ --font-size-4x-large: calc(var(--font-size) * 2.25);
70
+ --font-weight-regular: 400;
71
+ --font-weight-medium: 500;
72
+ --font-weight-semibold: 600;
73
+ --font-weight-bold: 700;
74
+ --font-line-height-body: 1.4;
71
75
 
72
- /* Composite text styles, one per style the design defines.
73
- Consume with the `font` shorthand: `font: var(--font-body-medium)`.
74
- The shorthand resets font-style, font-variant, font-stretch and
75
- font-size-adjust to their initial values. See docs/adr/0032. */
76
- --font-display-large: var(--font-weight-bold) 4rem/5rem var(--font-family-display);
77
- --font-display-medium: var(--font-weight-bold) 3rem/4rem var(--font-family-display);
78
- --font-title-large: var(--font-weight-bold) 2.25rem/3rem var(--font-family-display);
79
- --font-title-medium: var(--font-weight-bold) 1.75rem/2.25rem var(--font-family-display);
80
- --font-headline-large: var(--font-weight-medium) 1.5rem/2rem var(--font-family);
81
- --font-headline-medium: var(--font-weight-medium) 1.25rem/1.75rem var(--font-family);
82
- --font-headline-small: var(--font-weight-medium) 1.125rem/1.75rem var(--font-family);
83
- --font-body-x-large: var(--font-weight-regular) 1.125rem/1.75rem var(--font-family);
84
- --font-body-large: var(--font-weight-regular) 0.9375rem/1.5rem var(--font-family);
85
- --font-body-medium: var(--font-weight-regular) 0.84375rem/1.25rem var(--font-family);
86
- --font-body-small: var(--font-weight-regular) 0.75rem/1.25rem var(--font-family);
87
- --font-label-large: var(--font-weight-medium) 1.125rem/1.75rem var(--font-family);
88
- --font-label-medium: var(--font-weight-medium) 0.9375rem/1.5rem var(--font-family);
89
- --font-label-small: var(--font-weight-medium) 0.84375rem/1.25rem var(--font-family);
90
- --font-label-tiny: var(--font-weight-medium) 0.75rem/1.25rem var(--font-family);
76
+ /* Composite text styles, one per style the design defines.
77
+ Consume with the `font` shorthand: `font: var(--font-body-medium)`.
78
+ The shorthand resets font-style, font-variant, font-stretch and
79
+ font-size-adjust to their initial values. See docs/adr/0032. */
80
+ --font-display-large: var(--font-weight-bold) 4rem/5rem var(--font-family-display);
81
+ --font-display-medium: var(--font-weight-bold) 3rem/4rem var(--font-family-display);
82
+ --font-title-large: var(--font-weight-bold) 2.25rem/3rem var(--font-family-display);
83
+ --font-title-medium: var(--font-weight-bold) 1.75rem/2.25rem var(--font-family-display);
84
+ --font-headline-large: var(--font-weight-medium) 1.5rem/2rem var(--font-family);
85
+ --font-headline-medium: var(--font-weight-medium) 1.25rem/1.75rem var(--font-family);
86
+ --font-headline-small: var(--font-weight-medium) 1.125rem/1.75rem var(--font-family);
87
+ --font-body-x-large: var(--font-weight-regular) 1.125rem/1.75rem var(--font-family);
88
+ --font-body-large: var(--font-weight-regular) 0.9375rem/1.5rem var(--font-family);
89
+ --font-body-medium: var(--font-weight-regular) 0.84375rem/1.25rem var(--font-family);
90
+ --font-body-small: var(--font-weight-regular) 0.75rem/1.25rem var(--font-family);
91
+ --font-label-large: var(--font-weight-medium) 1.125rem/1.75rem var(--font-family);
92
+ --font-label-medium: var(--font-weight-medium) 0.9375rem/1.5rem var(--font-family);
93
+ --font-label-small: var(--font-weight-medium) 0.84375rem/1.25rem var(--font-family);
94
+ --font-label-tiny: var(--font-weight-medium) 0.75rem/1.25rem var(--font-family);
91
95
 
92
- /* Shadow (elevation) */
93
- --shadow-light: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.04), 0 0 0.25rem rgba(0, 0, 0, 0.08);
94
- --shadow-strong: 0.125rem 0.25rem 1rem rgba(0, 0, 0, 0.12), 0 0.125rem 0.25rem rgba(0, 0, 0, 0.04);
96
+ /* Shadow (elevation) */
97
+ --shadow-light: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.04), 0 0 0.25rem rgba(0, 0, 0, 0.08);
98
+ --shadow-strong: 0.125rem 0.25rem 1rem rgba(0, 0, 0, 0.12), 0 0.125rem 0.25rem rgba(0, 0, 0, 0.04);
95
99
 
96
- /* Motion */
97
- --transition-timer: 0.2s;
98
- --transition-timer-spin: 0.75s;
100
+ /* Motion */
101
+ --transition-timer: 0.2s;
102
+ --transition-timer-spin: 0.75s;
99
103
 
100
- /* Constants */
101
- --value-golden-ratio: 1.618;
102
- }
104
+ /* Constants */
105
+ --value-golden-ratio: 1.618;
106
+ }
103
107
 
104
- [data-theme="dark"] {
105
- --shadow-light: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.04), 0 0 0.25rem rgba(0, 0, 0, 0.08);
106
- --shadow-strong: 0.125rem 0.25rem 1rem rgba(0, 0, 0, 0.16), 0 0.125rem 0.25rem rgba(0, 0, 0, 0.08);
108
+ [data-theme="dark"] {
109
+ --shadow-light: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.04), 0 0 0.25rem rgba(0, 0, 0, 0.08);
110
+ --shadow-strong: 0.125rem 0.25rem 1rem rgba(0, 0, 0, 0.16), 0 0.125rem 0.25rem rgba(0, 0, 0, 0.08);
111
+ }
107
112
  }
package/lib/assets/css/furo/0040.variables-component-furo.css CHANGED
@@ -1,28 +1,30 @@
1
- :root {
2
- /* Checkbox */
3
- --furo-checkbox-size: 1.125rem;
4
- --furo-checkbox-icon-size: 1rem;
1
+ @layer furo {
2
+ :root {
3
+ /* Checkbox */
4
+ --furo-checkbox-size: 1.125rem;
5
+ --furo-checkbox-icon-size: 1rem;
5
6
 
6
- /* Dialog */
7
- --furo-dialog-overlay-background: rgba(0, 0, 0, 0.5);
7
+ /* Dialog */
8
+ --furo-dialog-overlay-background: rgba(0, 0, 0, 0.5);
8
9
 
9
- /* Toast — per-type icon accent (the toast body stays neutral) */
10
- --furo-toast-info-accent: var(--color-muted-foreground);
11
- --furo-toast-success-accent: #16a34a;
12
- --furo-toast-warning-accent: #d97706;
13
- --furo-toast-error-accent: var(--color-destructive);
10
+ /* Toast — per-type icon accent (the toast body stays neutral) */
11
+ --furo-toast-info-accent: var(--color-muted-foreground);
12
+ --furo-toast-success-accent: #16a34a;
13
+ --furo-toast-warning-accent: #d97706;
14
+ --furo-toast-error-accent: var(--color-destructive);
14
15
 
15
- /* Toast — rich colors (full type-colored surface, opt-in) */
16
- --furo-toast-info-bg: #eff6ff;
17
- --furo-toast-info-border: #bfdbfe;
18
- --furo-toast-info-foreground: #1e40af;
19
- --furo-toast-success-bg: #f0fdf4;
20
- --furo-toast-success-border: #bbf7d0;
21
- --furo-toast-success-foreground: #166534;
22
- --furo-toast-warning-bg: #fffbeb;
23
- --furo-toast-warning-border: #fde68a;
24
- --furo-toast-warning-foreground: #92400e;
25
- --furo-toast-error-bg: #fef2f2;
26
- --furo-toast-error-border: #fecaca;
27
- --furo-toast-error-foreground: #991b1b;
16
+ /* Toast — rich colors (full type-colored surface, opt-in) */
17
+ --furo-toast-info-bg: #eff6ff;
18
+ --furo-toast-info-border: #bfdbfe;
19
+ --furo-toast-info-foreground: #1e40af;
20
+ --furo-toast-success-bg: #f0fdf4;
21
+ --furo-toast-success-border: #bbf7d0;
22
+ --furo-toast-success-foreground: #166534;
23
+ --furo-toast-warning-bg: #fffbeb;
24
+ --furo-toast-warning-border: #fde68a;
25
+ --furo-toast-warning-foreground: #92400e;
26
+ --furo-toast-error-bg: #fef2f2;
27
+ --furo-toast-error-border: #fecaca;
28
+ --furo-toast-error-foreground: #991b1b;
29
+ }
28
30
  }
package/lib/components/molecules/FuroDropdownMenu/FuroDropdownMenu.vue CHANGED
@@ -309,7 +309,7 @@ export default defineComponent({
309
309
  padding-block: 0.25rem;
310
310
  padding-inline: 0.375rem;
311
311
 
312
- min-height: calc(var(--size-input-height) - 0.5rem);
312
+ min-height: var(--size-option-height);
313
313
 
314
314
  user-select: none;
315
315
  cursor: default;