@threadlabs/looma 0.6.0-rc.1 → 0.6.0-rc.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.
Files changed (19) hide show
  1. package/components/ui-button/ui-button.html +33 -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,8 @@
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.</prop>
6
8
  <prop name="disabled" type="boolean" default="false">disabled token.</prop>
7
9
  <prop name="align" type="center | start" default="center"
8
10
  >Content alignment. start lays the content out like a list option: from the start edge, with start-aligned text.</prop>
@@ -123,6 +125,23 @@
123
125
  transform: translateY(0);
124
126
  }
125
127
 
128
+ /* An accent-tinted secondary action: the outline, ghost, and link variants in the accent colour.
129
+ Solid and danger already carry their own intent. */
130
+ :host-state([tone="accent"]):host-state([variant="outline"]) {
131
+ border-color: var(--ui-button-accent-border, var(--ui-accent));
132
+ background: var(--ui-button-accent-surface, var(--ui-accent-subtle));
133
+ color: var(--ui-button-accent-text, var(--ui-accent-active));
134
+ }
135
+
136
+ :host-state([tone="accent"]):host-state([variant="outline"]):hover:enabled {
137
+ border-color: var(--ui-button-accent-hover-border, var(--ui-accent-hover));
138
+ background: var(--ui-button-accent-hover-surface, color-mix(in srgb, var(--ui-accent) 16%, var(--ui-surface)));
139
+ }
140
+
141
+ :host-state([tone="accent"]):is(:host-state([variant="ghost"]), :host-state([variant="link"])) {
142
+ color: var(--ui-button-accent-text, var(--ui-accent-active));
143
+ }
144
+
126
145
  :host-state([variant="ghost"]) {
127
146
  border-color: transparent;
128
147
  background: transparent;
@@ -157,29 +176,29 @@
157
176
 
158
177
  /* Disabled colours fall back to each variant's own; ghost and link take only the text colour. */
159
178
  :host:disabled {
160
- opacity: var(--ui-button-disabled-opacity, 0.6);
179
+ opacity: var(--ui-button-disabled-opacity, 1);
161
180
  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))));
181
+ border-color: var(--ui-button-disabled-border, var(--ui-border));
182
+ background-color: var(--ui-button-disabled-surface, var(--ui-disabled-surface));
183
+ color: var(--ui-button-disabled-text, var(--ui-disabled-text));
165
184
  }
166
185
 
167
186
  :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)));
187
+ border-color: var(--ui-button-disabled-border, var(--ui-border));
188
+ background-color: var(--ui-button-disabled-surface, var(--ui-disabled-surface));
189
+ color: var(--ui-button-disabled-text, var(--ui-disabled-text));
171
190
  }
172
191
 
173
192
  :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));
193
+ border-color: var(--ui-button-disabled-border, var(--ui-border));
194
+ background-color: var(--ui-button-disabled-surface, var(--ui-disabled-surface));
195
+ color: var(--ui-button-disabled-text, var(--ui-disabled-text));
177
196
  }
178
197
 
179
198
  :host-state([variant="ghost"]):disabled {
199
+ background: none;
180
200
  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))));
201
+ color: var(--ui-button-disabled-text, var(--ui-disabled-text));
183
202
  }
184
203
 
185
204
  @media (pointer: coarse) {
@@ -221,7 +240,8 @@
221
240
 
222
241
  :host-state([variant="link"]):disabled {
223
242
  background: none;
224
- color: var(--ui-button-disabled-text, var(--ui-button-link-text, var(--ui-text-secondary)));
243
+ border-color: transparent;
244
+ color: var(--ui-button-disabled-text, var(--ui-disabled-text));
225
245
  }
226
246
 
227
247
  :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 {