@webority/theme 0.8.0 → 0.8.2
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/dist/webority-theme.css +1 -1
- package/package.json +1 -1
- package/scss/_components.scss +6 -6
- package/scss/wui/_choice.scss +19 -4
- package/scss/wui/_controls.scss +40 -8
- package/scss/wui/_display.scss +193 -19
- package/scss/wui/_flow.scss +14 -6
- package/scss/wui/_media.scss +24 -13
- package/scss/wui/_overlays.scss +8 -1
- package/scss/wui/_typography.scss +9 -0
- package/scss/wui/_workspace.scss +61 -8
package/scss/wui/_workspace.scss
CHANGED
|
@@ -25,21 +25,31 @@
|
|
|
25
25
|
width: 100%;
|
|
26
26
|
min-height: 48px;
|
|
27
27
|
padding: 6px 10px;
|
|
28
|
-
|
|
29
|
-
border
|
|
28
|
+
// The trigger IS a closed picker, so it wears AppSelect's control skin (.input): a muted
|
|
29
|
+
// resting fill, a grey border, and the same border/box-shadow transition — nothing bespoke.
|
|
30
|
+
background: var(--color-bg-muted);
|
|
31
|
+
border: 1px solid var(--color-border);
|
|
30
32
|
border-radius: var(--radius-lg);
|
|
31
33
|
corner-shape: squircle;
|
|
32
34
|
color: var(--color-text);
|
|
33
35
|
text-align: left;
|
|
34
36
|
cursor: pointer;
|
|
35
|
-
transition:
|
|
37
|
+
transition:
|
|
38
|
+
border-color 0.12s,
|
|
39
|
+
box-shadow 0.12s;
|
|
36
40
|
}
|
|
37
|
-
.
|
|
38
|
-
|
|
41
|
+
// Hover while closed darkens the border, exactly like a resting AppSelect on hover.
|
|
42
|
+
.workspace-switcher-trigger:hover:not(:focus):not([aria-expanded="true"]) {
|
|
43
|
+
border-color: var(--color-border-strong);
|
|
39
44
|
}
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
45
|
+
// Focus / open lifts onto a white surface with the soft brand border — the same active cue
|
|
46
|
+
// AppSelect gives a focused or open control (border is the cue; no ring, no shadow).
|
|
47
|
+
.workspace-switcher-trigger:focus-visible,
|
|
48
|
+
.workspace-switcher-trigger[aria-expanded="true"] {
|
|
49
|
+
outline: none;
|
|
50
|
+
background: var(--color-surface);
|
|
51
|
+
border-color: var(--wui-primary-30);
|
|
52
|
+
box-shadow: none;
|
|
43
53
|
}
|
|
44
54
|
.workspace-switcher-trigger.is-compact {
|
|
45
55
|
width: 36px;
|
|
@@ -86,6 +96,49 @@
|
|
|
86
96
|
overflow: hidden;
|
|
87
97
|
}
|
|
88
98
|
|
|
99
|
+
// ── Size tiers ──
|
|
100
|
+
// md is the base above. sm/lg scale the TRIGGER only — the card (and the compact square),
|
|
101
|
+
// its mark and its name; the dropdown menu is a fixed 280px panel at every size, the same
|
|
102
|
+
// way `compact` is a shape switch rather than a resize.
|
|
103
|
+
.workspace-switcher-sm .workspace-switcher-trigger {
|
|
104
|
+
min-height: 40px;
|
|
105
|
+
padding: 4px 8px;
|
|
106
|
+
gap: 8px;
|
|
107
|
+
}
|
|
108
|
+
.workspace-switcher-sm .workspace-switcher-trigger.is-compact {
|
|
109
|
+
width: 32px;
|
|
110
|
+
min-height: 32px;
|
|
111
|
+
height: 32px;
|
|
112
|
+
padding: 0;
|
|
113
|
+
}
|
|
114
|
+
.workspace-switcher-sm .workspace-switcher-mark {
|
|
115
|
+
width: 24px;
|
|
116
|
+
height: 24px;
|
|
117
|
+
font-size: 10px;
|
|
118
|
+
}
|
|
119
|
+
.workspace-switcher-sm .workspace-switcher-trigger-name {
|
|
120
|
+
font-size: 13px;
|
|
121
|
+
}
|
|
122
|
+
.workspace-switcher-lg .workspace-switcher-trigger {
|
|
123
|
+
min-height: 56px;
|
|
124
|
+
padding: 8px 12px;
|
|
125
|
+
gap: 12px;
|
|
126
|
+
}
|
|
127
|
+
.workspace-switcher-lg .workspace-switcher-trigger.is-compact {
|
|
128
|
+
width: 44px;
|
|
129
|
+
min-height: 44px;
|
|
130
|
+
height: 44px;
|
|
131
|
+
padding: 0;
|
|
132
|
+
}
|
|
133
|
+
.workspace-switcher-lg .workspace-switcher-mark {
|
|
134
|
+
width: 32px;
|
|
135
|
+
height: 32px;
|
|
136
|
+
font-size: 12px;
|
|
137
|
+
}
|
|
138
|
+
.workspace-switcher-lg .workspace-switcher-trigger-name {
|
|
139
|
+
font-size: 15px;
|
|
140
|
+
}
|
|
141
|
+
|
|
89
142
|
// ── Menu ──
|
|
90
143
|
.workspace-switcher .workspace-switcher-menu {
|
|
91
144
|
width: 280px;
|