@threadlabs/looma 0.6.0-rc.1 → 0.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.
Files changed (19) hide show
  1. package/components/ui-button/ui-button.html +35 -13
  2. package/components/ui-icon-button/ui-icon-button.html +8 -7
  3. package/dist/index.js +1 -1
  4. package/package.json +1 -1
  5. package/styles/ui-button.css +34 -13
  6. package/styles/ui-icon-button.css +8 -7
  7. package/theme-dark.css +4 -0
  8. package/theme-high-contrast.css +4 -0
  9. package/theme-light.css +2 -0
  10. package/tokens.css +5 -0
  11. package/vanilla/UiButton.d.ts +1 -0
  12. package/vanilla/UiButton.js +1 -1
  13. package/vue/UiButton.d.ts +2 -0
  14. package/vue/UiButton.vue +37 -28
  15. package/vue/UiIconButton.vue +8 -22
  16. package/vue/chunks/UiButton.js +4 -2
  17. package/vue/chunks/UiIconButton.js +1 -1
  18. package/vue/components.css +103 -113
  19. package/vue/editor/index.js +10 -2
package/components/ui-button/ui-button.html CHANGED
@@ -3,6 +3,10 @@
3
3
  <prop name="variant" type="outline | solid | danger | ghost | link" default="outline"
4
4
  >Visual emphasis and semantic intent. link is an inline text action that reads as a link.</prop>
5
5
  <prop name="size" type="sm | md | lg" default="md">Control size.</prop>
6
+ <prop name="tone" type="neutral | accent" default="neutral"
7
+ >Intent of an outline, ghost, or link button. accent tints it with the accent colour, for a secondary action that still reads as the primary path. For a
8
+ product whose buttons are accent-tinted by default, set --ui-button-surface, --ui-button-border, and --ui-button-text once in your theme rather than
9
+ annotating every call site.</prop>
6
10
  <prop name="disabled" type="boolean" default="false">disabled token.</prop>
7
11
  <prop name="align" type="center | start" default="center"
8
12
  >Content alignment. start lays the content out like a list option: from the start edge, with start-aligned text.</prop>
@@ -123,6 +127,23 @@
123
127
  transform: translateY(0);
124
128
  }
125
129
 
130
+ /* An accent-tinted secondary action: the outline, ghost, and link variants in the accent colour.
131
+ Solid and danger already carry their own intent. */
132
+ :host-state([tone="accent"]):host-state([variant="outline"]) {
133
+ border-color: var(--ui-button-accent-border, var(--ui-accent));
134
+ background: var(--ui-button-accent-surface, var(--ui-accent-subtle));
135
+ color: var(--ui-button-accent-text, var(--ui-accent-active));
136
+ }
137
+
138
+ :host-state([tone="accent"]):host-state([variant="outline"]):hover:enabled {
139
+ border-color: var(--ui-button-accent-hover-border, var(--ui-accent-hover));
140
+ background: var(--ui-button-accent-hover-surface, color-mix(in srgb, var(--ui-accent) 16%, var(--ui-surface)));
141
+ }
142
+
143
+ :host-state([tone="accent"]):is(:host-state([variant="ghost"]), :host-state([variant="link"])) {
144
+ color: var(--ui-button-accent-text, var(--ui-accent-active));
145
+ }
146
+
126
147
  :host-state([variant="ghost"]) {
127
148
  border-color: transparent;
128
149
  background: transparent;
@@ -157,29 +178,29 @@
157
178
 
158
179
  /* Disabled colours fall back to each variant's own; ghost and link take only the text colour. */
159
180
  :host:disabled {
160
- opacity: var(--ui-button-disabled-opacity, 0.6);
181
+ opacity: var(--ui-button-disabled-opacity, 1);
161
182
  cursor: not-allowed;
162
- border-color: var(--ui-button-disabled-border, var(--ui-button-border, var(--ui-border-strong)));
163
- background-color: var(--ui-button-disabled-surface, var(--ui-button-surface, var(--ui-surface-elevated)));
164
- color: var(--ui-button-disabled-text, var(--ui-button-text, var(--ui-action-secondary-text, var(--ui-text-primary))));
183
+ border-color: var(--ui-button-disabled-border, var(--ui-border));
184
+ background-color: var(--ui-button-disabled-surface, var(--ui-disabled-surface));
185
+ color: var(--ui-button-disabled-text, var(--ui-disabled-text));
165
186
  }
166
187
 
167
188
  :host-state([variant="solid"]):disabled {
168
- border-color: var(--ui-button-disabled-border, var(--ui-action-primary-surface, var(--ui-accent-solid)));
169
- background-color: var(--ui-button-disabled-surface, var(--ui-action-primary-surface, var(--ui-accent-solid)));
170
- color: var(--ui-button-disabled-text, var(--ui-action-primary-text, var(--ui-text-on-accent)));
189
+ border-color: var(--ui-button-disabled-border, var(--ui-border));
190
+ background-color: var(--ui-button-disabled-surface, var(--ui-disabled-surface));
191
+ color: var(--ui-button-disabled-text, var(--ui-disabled-text));
171
192
  }
172
193
 
173
194
  :host-state([variant="danger"]):disabled {
174
- border-color: var(--ui-button-disabled-border, var(--ui-danger-solid));
175
- background-color: var(--ui-button-disabled-surface, var(--ui-danger-solid));
176
- color: var(--ui-button-disabled-text, var(--ui-text-on-accent));
195
+ border-color: var(--ui-button-disabled-border, var(--ui-border));
196
+ background-color: var(--ui-button-disabled-surface, var(--ui-disabled-surface));
197
+ color: var(--ui-button-disabled-text, var(--ui-disabled-text));
177
198
  }
178
199
 
179
200
  :host-state([variant="ghost"]):disabled {
201
+ background: none;
180
202
  border-color: transparent;
181
- background-color: transparent;
182
- color: var(--ui-button-disabled-text, var(--ui-button-ghost-text, var(--ui-action-secondary-text, var(--ui-text-primary))));
203
+ color: var(--ui-button-disabled-text, var(--ui-disabled-text));
183
204
  }
184
205
 
185
206
  @media (pointer: coarse) {
@@ -221,7 +242,8 @@
221
242
 
222
243
  :host-state([variant="link"]):disabled {
223
244
  background: none;
224
- color: var(--ui-button-disabled-text, var(--ui-button-link-text, var(--ui-text-secondary)));
245
+ border-color: transparent;
246
+ color: var(--ui-button-disabled-text, var(--ui-disabled-text));
225
247
  }
226
248
 
227
249
  :host-state([variant="link"]):focus-visible {
package/components/ui-icon-button/ui-icon-button.html CHANGED
@@ -171,20 +171,21 @@
171
171
 
172
172
  /* Disabled colours fall back to each variant's own; ghost takes only the icon colour. */
173
173
  :host:disabled {
174
- opacity: var(--ui-icon-button-disabled-opacity, 0.6);
175
- color: var(--ui-icon-button-disabled-text, inherit);
174
+ opacity: var(--ui-icon-button-disabled-opacity, 1);
175
+ color: var(--ui-icon-button-disabled-text, var(--ui-disabled-text));
176
176
  cursor: not-allowed;
177
177
  }
178
178
 
179
179
  :host-state([variant="outline"]):disabled {
180
- border-color: var(--ui-icon-button-disabled-border, var(--ui-icon-button-border, var(--ui-border-default)));
181
- background-color: var(--ui-icon-button-disabled-surface, var(--ui-icon-button-outline-surface, var(--ui-surface-default)));
182
- color: var(--ui-icon-button-disabled-text, var(--ui-icon-button-outline-text, var(--ui-text-primary)));
180
+ border-color: var(--ui-icon-button-disabled-border, var(--ui-border));
181
+ background-color: var(--ui-icon-button-disabled-surface, var(--ui-disabled-surface));
182
+ color: var(--ui-icon-button-disabled-text, var(--ui-disabled-text));
183
183
  }
184
184
 
185
185
  :host-state([variant="solid"]):disabled {
186
- background-color: var(--ui-icon-button-disabled-surface, var(--ui-icon-button-solid-surface, var(--ui-accent-solid)));
187
- color: var(--ui-icon-button-disabled-text, var(--ui-icon-button-solid-text, var(--ui-text-on-accent)));
186
+ border-color: var(--ui-icon-button-disabled-border, var(--ui-border));
187
+ background-color: var(--ui-icon-button-disabled-surface, var(--ui-disabled-surface));
188
+ color: var(--ui-icon-button-disabled-text, var(--ui-disabled-text));
188
189
  }
189
190
 
190
191
  :host {