agnosticui-core 2.0.0-alpha.12 → 2.0.0-alpha.14

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 (10) hide show
  1. package/dist/components/Button/core/_Button.js +15 -15
  2. package/dist/components/Timeline/core/_Timeline.d.ts.map +1 -1
  3. package/dist/components/Timeline/core/_Timeline.js +8 -3
  4. package/dist/styles/ag-tokens-dark.css +4 -0
  5. package/dist/styles/ag-tokens.css +4 -0
  6. package/package.json +1 -1
  7. package/src/components/Button/core/_Button.ts +12 -12
  8. package/src/components/Timeline/core/_Timeline.ts +5 -0
  9. package/src/styles/ag-tokens-dark.css +4 -0
  10. package/src/styles/ag-tokens.css +4 -0
package/dist/components/Button/core/_Button.js CHANGED
@@ -1,4 +1,4 @@
1
- import { LitElement as l, css as h, html as c } from "lit";
1
+ import { LitElement as l, css as c, html as h } from "lit";
2
2
  import { n as r } from "../../../property-CemaeiRl.js";
3
3
  import { o as s } from "../../../if-defined-C8i28hSj.js";
4
4
  var b = Object.defineProperty, o = (g, a, e, v) => {
@@ -53,7 +53,7 @@ const d = class d extends l {
53
53
  }
54
54
  render() {
55
55
  const a = this.disabled || this.loading;
56
- return c`
56
+ return h`
57
57
  <button
58
58
  type=${this.type}
59
59
  part="ag-button"
@@ -71,7 +71,7 @@ const d = class d extends l {
71
71
  `;
72
72
  }
73
73
  };
74
- d.styles = h`
74
+ d.styles = c`
75
75
  /* MINIMALIST & THEMEABLE - Styling via --ag-* design tokens */
76
76
  :host {
77
77
  /* Inline-flex for perfect centering while maintaining inline behavior */
@@ -127,32 +127,32 @@ d.styles = h`
127
127
  background: var(--ag-neutral-500);
128
128
  }
129
129
 
130
- /* Primary, success, warning, and danger all have white text and get
131
- darker on hover */
130
+ /* Primary, success, warning, and danger use variant-specific foreground
131
+ tokens (--ag-{variant}-fg) and get darker on hover */
132
132
  :host([variant="primary"]) button {
133
133
  background: var(--ag-primary);
134
- color: var(--ag-white);
134
+ color: var(--ag-primary-fg);
135
135
  }
136
136
  :host([variant="primary"]) button:hover {
137
137
  background: var(--ag-primary-dark);
138
138
  }
139
139
  :host([variant="success"]) button {
140
140
  background: var(--ag-success);
141
- color: var(--ag-white);
141
+ color: var(--ag-success-fg);
142
142
  }
143
143
  :host([variant="success"]) button:hover {
144
144
  background: var(--ag-success-dark);
145
145
  }
146
146
  :host([variant="warning"]) button {
147
147
  background: var(--ag-warning);
148
- color: var(--ag-neutral-900);
148
+ color: var(--ag-warning-fg);
149
149
  }
150
150
  :host([variant="warning"]) button:hover {
151
151
  background: var(--ag-warning-dark);
152
152
  }
153
153
  :host([variant="danger"]) button {
154
154
  background: var(--ag-danger);
155
- color: var(--ag-white);
155
+ color: var(--ag-danger-fg);
156
156
  }
157
157
  :host([variant="danger"]) button:hover {
158
158
  background: var(--ag-danger-dark);
@@ -339,11 +339,11 @@ d.styles = h`
339
339
  border-color: var(--ag-primary-text);
340
340
  }
341
341
 
342
- /* Bordered Buttons on Hover have a filled background with white text. The
343
- Default Bordered is an exception to this rule. */
342
+ /* Bordered Buttons on Hover have a filled background with variant-specific
343
+ foreground text. The Default Bordered is an exception to this rule. */
344
344
  :host([bordered][variant="primary"]) button:hover {
345
345
  background: var(--ag-primary);
346
- color: var(--ag-white);
346
+ color: var(--ag-primary-fg);
347
347
  }
348
348
 
349
349
  :host([bordered][variant="secondary"]) button,
@@ -358,7 +358,7 @@ d.styles = h`
358
358
  }
359
359
 
360
360
  :host([bordered][variant="success"]) button:hover {
361
- color: var(--ag-white);
361
+ color: var(--ag-success-fg);
362
362
  background: var(--ag-success);
363
363
  }
364
364
 
@@ -369,7 +369,7 @@ d.styles = h`
369
369
 
370
370
  :host([bordered][variant="warning"]) button:hover {
371
371
  background: var(--ag-warning);
372
- color: var(--ag-neutral-900);
372
+ color: var(--ag-warning-fg);
373
373
  }
374
374
 
375
375
  :host([bordered][variant="danger"]) button {
@@ -379,7 +379,7 @@ d.styles = h`
379
379
 
380
380
  :host([bordered][variant="danger"]) button:hover {
381
381
  background: var(--ag-danger);
382
- color: var(--ag-white);
382
+ color: var(--ag-danger-fg);
383
383
  }
384
384
 
385
385
  :host([bordered][variant="monochrome"]) button {
package/dist/components/Timeline/core/_Timeline.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"_Timeline.d.ts","sourceRoot":"","sources":["../../../../src/components/Timeline/core/_Timeline.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAGrD;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B,kCAAkC;IAClC,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,wDAAwD;IACxD,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,YAAY,GAAG,EAAE,CAAC;IAC3E,qCAAqC;IACrC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kCAAkC;IAClC,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC3B;AAED;;;;;;;;;;;;GAYG;AACH,qBAAa,UAAW,SAAQ,UAAW,YAAW,eAAe;IAK3D,WAAW,EAAE,YAAY,GAAG,UAAU,CAAC;IAGvC,OAAO,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,YAAY,GAAG,EAAE,CAAC;IAG1E,OAAO,EAAE,OAAO,CAAC;IAGjB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;;IAejC,MAAM,CAAC,MAAM,0BA4BX;IAKO,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,WAAW,EAAE,OAAO,CAAC;IAS7D,OAAO,CAAC,iBAAiB;IAsBhB,MAAM;CAYhB;AAED;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC,qCAAqC;IACrC,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,qCAAqC;IACrC,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,YAAY,GAAG,EAAE,CAAC;IAC3E,qCAAqC;IACrC,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,qBAAa,cAAe,SAAQ,UAAU;IAKpC,WAAW,EAAE,YAAY,GAAG,UAAU,CAAC;IAGvC,OAAO,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,YAAY,GAAG,EAAE,CAAC;IAG1E,eAAe,EAAE,MAAM,GAAG,IAAI,CAAC;IAG/B,KAAK,EAAE,OAAO,CAAC;IAGf,IAAI,EAAE,OAAO,CAAC;;IAgBtB,MAAM,CAAC,MAAM,0BAgLX;IAKO,MAAM;CA0BhB"}
1
+ {"version":3,"file":"_Timeline.d.ts","sourceRoot":"","sources":["../../../../src/components/Timeline/core/_Timeline.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAGrD;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B,kCAAkC;IAClC,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,wDAAwD;IACxD,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,YAAY,GAAG,EAAE,CAAC;IAC3E,qCAAqC;IACrC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kCAAkC;IAClC,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC3B;AAED;;;;;;;;;;;;GAYG;AACH,qBAAa,UAAW,SAAQ,UAAW,YAAW,eAAe;IAK3D,WAAW,EAAE,YAAY,GAAG,UAAU,CAAC;IAGvC,OAAO,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,YAAY,GAAG,EAAE,CAAC;IAG1E,OAAO,EAAE,OAAO,CAAC;IAGjB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;;IAejC,MAAM,CAAC,MAAM,0BA4BX;IAKO,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,WAAW,EAAE,OAAO,CAAC;IAS7D,OAAO,CAAC,iBAAiB;IAsBhB,MAAM;CAYhB;AAED;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC,qCAAqC;IACrC,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,qCAAqC;IACrC,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,YAAY,GAAG,EAAE,CAAC;IAC3E,qCAAqC;IACrC,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,qBAAa,cAAe,SAAQ,UAAU;IAKpC,WAAW,EAAE,YAAY,GAAG,UAAU,CAAC;IAGvC,OAAO,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,YAAY,GAAG,EAAE,CAAC;IAG1E,eAAe,EAAE,MAAM,GAAG,IAAI,CAAC;IAG/B,KAAK,EAAE,OAAO,CAAC;IAGf,IAAI,EAAE,OAAO,CAAC;;IAgBtB,MAAM,CAAC,MAAM,0BAqLX;IAKO,MAAM;CA0BhB"}
package/dist/components/Timeline/core/_Timeline.js CHANGED
@@ -1,8 +1,8 @@
1
1
  import { LitElement as h, css as f, nothing as c, html as p } from "lit";
2
2
  import { n as e } from "../../../property-CemaeiRl.js";
3
- var v = Object.defineProperty, a = (u, t, s, i) => {
4
- for (var r = void 0, l = u.length - 1, m; l >= 0; l--)
5
- (m = u[l]) && (r = m(t, s, r) || r);
3
+ var v = Object.defineProperty, a = (m, t, s, i) => {
4
+ for (var r = void 0, l = m.length - 1, u; l >= 0; l--)
5
+ (u = m[l]) && (r = u(t, s, r) || r);
6
6
  return r && v(t, s, r), r;
7
7
  };
8
8
  const g = class g extends h {
@@ -189,6 +189,11 @@ d.styles = f`
189
189
  line-height: normal;
190
190
  }
191
191
 
192
+ /* Ensure consistent sizing for slotted marker content */
193
+ .ag-marker ::slotted(*) {
194
+ box-sizing: border-box;
195
+ }
196
+
192
197
  /* End slot positioning */
193
198
  .ag-end {
194
199
  margin: var(--ag-space-1);
package/dist/styles/ag-tokens-dark.css CHANGED
@@ -96,6 +96,10 @@
96
96
  --ag-warning-text: #f2cc60;
97
97
  --ag-danger-background: #490202;
98
98
  --ag-danger-text: #ffc1ba;
99
+ --ag-primary-fg: #ffffff;
100
+ --ag-success-fg: #ffffff;
101
+ --ag-warning-fg: #0D1117;
102
+ --ag-danger-fg: #ffffff;
99
103
  --ag-border: #3D444D;
100
104
  --ag-border-subtle: #656C76;
101
105
  --ag-primary: #1158c7;
package/dist/styles/ag-tokens.css CHANGED
@@ -163,6 +163,10 @@
163
163
  --ag-warning-text: #7d4e00;
164
164
  --ag-danger-background: #ffebe9;
165
165
  --ag-danger-text: #a40e26;
166
+ --ag-primary-fg: #ffffff;
167
+ --ag-success-fg: #ffffff;
168
+ --ag-warning-fg: #111827;
169
+ --ag-danger-fg: #ffffff;
166
170
  --ag-border: #e5e7eb;
167
171
  --ag-border-subtle: #d1d5db;
168
172
  --ag-primary: #0550ae;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "agnosticui-core",
3
- "version": "2.0.0-alpha.12",
3
+ "version": "2.0.0-alpha.14",
4
4
  "author": "AgnosticUI",
5
5
  "license": "Apache-2.0",
6
6
  "type": "module",
package/src/components/Button/core/_Button.ts CHANGED
@@ -125,32 +125,32 @@ export class AgButton extends LitElement implements ButtonProps {
125
125
  background: var(--ag-neutral-500);
126
126
  }
127
127
 
128
- /* Primary, success, warning, and danger all have white text and get
129
- darker on hover */
128
+ /* Primary, success, warning, and danger use variant-specific foreground
129
+ tokens (--ag-{variant}-fg) and get darker on hover */
130
130
  :host([variant="primary"]) button {
131
131
  background: var(--ag-primary);
132
- color: var(--ag-white);
132
+ color: var(--ag-primary-fg);
133
133
  }
134
134
  :host([variant="primary"]) button:hover {
135
135
  background: var(--ag-primary-dark);
136
136
  }
137
137
  :host([variant="success"]) button {
138
138
  background: var(--ag-success);
139
- color: var(--ag-white);
139
+ color: var(--ag-success-fg);
140
140
  }
141
141
  :host([variant="success"]) button:hover {
142
142
  background: var(--ag-success-dark);
143
143
  }
144
144
  :host([variant="warning"]) button {
145
145
  background: var(--ag-warning);
146
- color: var(--ag-neutral-900);
146
+ color: var(--ag-warning-fg);
147
147
  }
148
148
  :host([variant="warning"]) button:hover {
149
149
  background: var(--ag-warning-dark);
150
150
  }
151
151
  :host([variant="danger"]) button {
152
152
  background: var(--ag-danger);
153
- color: var(--ag-white);
153
+ color: var(--ag-danger-fg);
154
154
  }
155
155
  :host([variant="danger"]) button:hover {
156
156
  background: var(--ag-danger-dark);
@@ -337,11 +337,11 @@ export class AgButton extends LitElement implements ButtonProps {
337
337
  border-color: var(--ag-primary-text);
338
338
  }
339
339
 
340
- /* Bordered Buttons on Hover have a filled background with white text. The
341
- Default Bordered is an exception to this rule. */
340
+ /* Bordered Buttons on Hover have a filled background with variant-specific
341
+ foreground text. The Default Bordered is an exception to this rule. */
342
342
  :host([bordered][variant="primary"]) button:hover {
343
343
  background: var(--ag-primary);
344
- color: var(--ag-white);
344
+ color: var(--ag-primary-fg);
345
345
  }
346
346
 
347
347
  :host([bordered][variant="secondary"]) button,
@@ -356,7 +356,7 @@ export class AgButton extends LitElement implements ButtonProps {
356
356
  }
357
357
 
358
358
  :host([bordered][variant="success"]) button:hover {
359
- color: var(--ag-white);
359
+ color: var(--ag-success-fg);
360
360
  background: var(--ag-success);
361
361
  }
362
362
 
@@ -367,7 +367,7 @@ export class AgButton extends LitElement implements ButtonProps {
367
367
 
368
368
  :host([bordered][variant="warning"]) button:hover {
369
369
  background: var(--ag-warning);
370
- color: var(--ag-neutral-900);
370
+ color: var(--ag-warning-fg);
371
371
  }
372
372
 
373
373
  :host([bordered][variant="danger"]) button {
@@ -377,7 +377,7 @@ export class AgButton extends LitElement implements ButtonProps {
377
377
 
378
378
  :host([bordered][variant="danger"]) button:hover {
379
379
  background: var(--ag-danger);
380
- color: var(--ag-white);
380
+ color: var(--ag-danger-fg);
381
381
  }
382
382
 
383
383
  :host([bordered][variant="monochrome"]) button {
package/src/components/Timeline/core/_Timeline.ts CHANGED
@@ -267,6 +267,11 @@ export class AgTimelineItem extends LitElement {
267
267
  line-height: normal;
268
268
  }
269
269
 
270
+ /* Ensure consistent sizing for slotted marker content */
271
+ .ag-marker ::slotted(*) {
272
+ box-sizing: border-box;
273
+ }
274
+
270
275
  /* End slot positioning */
271
276
  .ag-end {
272
277
  margin: var(--ag-space-1);
package/src/styles/ag-tokens-dark.css CHANGED
@@ -96,6 +96,10 @@
96
96
  --ag-warning-text: #f2cc60;
97
97
  --ag-danger-background: #490202;
98
98
  --ag-danger-text: #ffc1ba;
99
+ --ag-primary-fg: #ffffff;
100
+ --ag-success-fg: #ffffff;
101
+ --ag-warning-fg: #0D1117;
102
+ --ag-danger-fg: #ffffff;
99
103
  --ag-border: #3D444D;
100
104
  --ag-border-subtle: #656C76;
101
105
  --ag-primary: #1158c7;
package/src/styles/ag-tokens.css CHANGED
@@ -163,6 +163,10 @@
163
163
  --ag-warning-text: #7d4e00;
164
164
  --ag-danger-background: #ffebe9;
165
165
  --ag-danger-text: #a40e26;
166
+ --ag-primary-fg: #ffffff;
167
+ --ag-success-fg: #ffffff;
168
+ --ag-warning-fg: #111827;
169
+ --ag-danger-fg: #ffffff;
166
170
  --ag-border: #e5e7eb;
167
171
  --ag-border-subtle: #d1d5db;
168
172
  --ag-primary: #0550ae;