@ticketlayer/elements 0.3.3 → 0.4.0

package/dist/collection/components/tl-cart-drawer/tl-cart-drawer.css

@@ -1,10 +1,10 @@
 :host {
-  --_bg: var(--tl-background, #ffffff);
-  --_fg: var(--tl-foreground, #111827);
-  --_muted-fg: var(--tl-muted-foreground, #6b7280);
-  --_muted: var(--tl-muted, #f3f4f6);
-  --_border: var(--tl-border, #e5e7eb);
-  --_font: var(--tl-font-family, system-ui, -apple-system, sans-serif);
+  --_bg: var(--tl-background);
+  --_fg: var(--tl-foreground);
+  --_muted-fg: var(--tl-muted-foreground);
+  --_muted: var(--tl-muted);
+  --_border: var(--tl-border);
+  --_font: var(--tl-font-family);
   font-family: var(--_font);
 }
 

package/dist/collection/components/tl-cart-drawer/tl-cart-drawer.js

@@ -60,7 +60,7 @@ export class TlCartDrawer {
         return (h(Host, { key: '022314d9fb612e930da52ece34f2ab8ae8ce44da' }, h("div", { key: '985b4001145d72ba91ef7d466adba8ab939e9cc4', class: { overlay: true, 'is-open': this.visible }, onClick: (e) => {
                 if (e.target === e.currentTarget)
                     this.close();
-            } }, h("aside", { key: '3ac3588ae8feacd4f8bb96bdae8ef71e80ecb4b3', class: { panel: true, [`panel--${this.side}`]: true, 'is-open': this.visible }, role: "dialog", "aria-modal": "true", "aria-label": this.heading, "aria-hidden": this.visible ? 'false' : 'true' }, h("header", { key: 'e0126d634e952ebf56b73e54545f6c3981210827', class: "drawer-header" }, h("h2", { key: 'a72b23114aa836076ec59cd4a5d1438d228179d9', class: "drawer-title" }, this.heading), h("button", { key: '92fb5b159490440352a6c23d65aa6e8c956ae3d8', class: "close-btn", onClick: this.close, "aria-label": "Close cart" }, h("svg", { key: '138f4dc7669e62fb667091da0ba26dfbe94327c6', viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("path", { key: '21fedd9dc89937a92f9c1124d4fa834b55908f1e', d: "M6 6l12 12M18 6L6 18", "stroke-linecap": "round" })))), h("div", { key: 'ebee87cb6a3c98dbf813d0a903a9cb4da2c696f3', class: "drawer-body" }, h("tl-cart", { key: '323db3a160837b68ffaa767e647ec67b06fa53b0' })), h("footer", { key: 'd35543373eb13ad1acc46ae50aefcb5a04f305a1', class: "drawer-footer" }, h("div", { key: '52229c74d39471bf186c965b6a53b38f79ce8d61', class: "pb-links" }, h("a", { key: 'd0430bf93d920c57fc42043faed7e8fd895855aa', href: "https://ticketlayer.com/privacy", target: "_blank", rel: "noopener noreferrer" }, "Privacy Policy"), h("a", { key: '2a75dc8dcdc9ec3010fe83f97d903cdc32767e49', href: "https://ticketlayer.com/report-abuse", target: "_blank", rel: "noopener noreferrer" }, "Report Abuse")), h("a", { key: '40642c5c4c003a454dd7ab2b66ebe5948a03df7d', class: "pb-brand", href: "https://ticketlayer.com", target: "_blank", rel: "noopener noreferrer" }, h("span", { key: 'a5d9b5c023381d25b6aaddf61e56dbdb21580975', class: "pb-pre" }, "Powered by"), h("svg", { key: '35bc23af9a35272d7ada24fd66d5f12f1d951ae8', width: "13", height: "13", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, h("path", { key: '90139e79acd8920bcd494cc6579dbcb8278b0aef', d: "M4 7.5A1.5 1.5 0 0 1 5.5 6h13A1.5 1.5 0 0 1 20 7.5v2a2 2 0 0 0 0 5v2a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 4 16.5v-2a2 2 0 0 0 0-5v-2Z", fill: "currentColor" }), h("path", { key: 'ba3aa34471395e33752e72f87f93a85381f7caad', d: "M13 7v10", stroke: "var(--tl-pb-perforation, var(--tl-background, #fff))", "stroke-width": "1.2", "stroke-dasharray": "1.5 1.8", "stroke-linecap": "round" })), h("span", { key: '429154bd6c38febe4da8871a7e614bf272a18854', class: "pb-word" }, "Ticketlayer")))))));
+            } }, h("aside", { key: '3ac3588ae8feacd4f8bb96bdae8ef71e80ecb4b3', class: { panel: true, [`panel--${this.side}`]: true, 'is-open': this.visible }, role: "dialog", "aria-modal": "true", "aria-label": this.heading, "aria-hidden": this.visible ? 'false' : 'true' }, h("header", { key: 'e0126d634e952ebf56b73e54545f6c3981210827', class: "drawer-header" }, h("h2", { key: 'a72b23114aa836076ec59cd4a5d1438d228179d9', class: "drawer-title" }, this.heading), h("button", { key: '92fb5b159490440352a6c23d65aa6e8c956ae3d8', class: "close-btn", onClick: this.close, "aria-label": "Close cart" }, h("svg", { key: '138f4dc7669e62fb667091da0ba26dfbe94327c6', viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("path", { key: '21fedd9dc89937a92f9c1124d4fa834b55908f1e', d: "M6 6l12 12M18 6L6 18", "stroke-linecap": "round" })))), h("div", { key: 'ebee87cb6a3c98dbf813d0a903a9cb4da2c696f3', class: "drawer-body" }, h("tl-cart", { key: '323db3a160837b68ffaa767e647ec67b06fa53b0' })), h("footer", { key: 'd35543373eb13ad1acc46ae50aefcb5a04f305a1', class: "drawer-footer" }, h("div", { key: '52229c74d39471bf186c965b6a53b38f79ce8d61', class: "pb-links" }, h("a", { key: 'd0430bf93d920c57fc42043faed7e8fd895855aa', href: "https://ticketlayer.com/privacy", target: "_blank", rel: "noopener noreferrer" }, "Privacy Policy"), h("a", { key: '2a75dc8dcdc9ec3010fe83f97d903cdc32767e49', href: "https://ticketlayer.com/report-abuse", target: "_blank", rel: "noopener noreferrer" }, "Report Abuse")), h("a", { key: '40642c5c4c003a454dd7ab2b66ebe5948a03df7d', class: "pb-brand", href: "https://ticketlayer.com", target: "_blank", rel: "noopener noreferrer" }, h("span", { key: 'a5d9b5c023381d25b6aaddf61e56dbdb21580975', class: "pb-pre" }, "Powered by"), h("svg", { key: '35bc23af9a35272d7ada24fd66d5f12f1d951ae8', width: "13", height: "13", viewBox: "0 0 50 50", fill: "none", "aria-hidden": "true" }, h("g", { key: 'fcca5f9bbc13d2781ea65bb907c9c07516972e28', transform: "matrix(0.0129 0 0 -0.0129 25.4752 25.4752)" }, h("path", { key: '7bf2071ba8d6d14c9ac9fc7c7a5a36a8008136e8', fill: "currentColor", transform: "translate(-1781.5, -1759.4003)", d: "M 41 2973 c 1 -285 5 -734 9 -998 c 7 -444 9 -488 30 -580 c 81 -364 235 -634 512 -900 c 135 -130 263 -220 423 -299 c 156 -77 249 -109 409 -143 c 110 -23 142 -25 354 -24 c 230 1 310 8 427 37 c 241 60 453 162 640 309 c 82 64 252 234 317 315 c 210 264 340 604 355 926 l 6 121 l -69 6 c -86 8 -706 9 -755 1 l -36 -6 l -21 -125 c -34 -191 -98 -317 -236 -462 c -111 -115 -249 -198 -396 -238 c -98 -27 -356 -24 -463 5 c -100 27 -183 69 -273 137 c -226 173 -353 409 -354 660 c 0 44 -5 120 -10 169 c -6 49 -8 91 -6 94 c 3 3 65 -22 138 -55 c 140 -64 251 -103 358 -127 c 71 -17 295 -46 347 -46 l 33 0 l 0 434 l 0 434 l -67 7 c -147 14 -269 56 -393 133 c -222 139 -378 393 -397 648 l -6 71 l -75 7 c -41 3 -239 6 -439 6 l -363 0 l 1 -517 z" }))), h("span", { key: 'c97081daa81688106395f6ef6c497b11df53a6a9', class: "pb-word" }, "ticketlayer")))))));
     }
     static get is() { return "tl-cart-drawer"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tl-checkout-wrapper/tl-checkout-wrapper.css

@@ -10,9 +10,9 @@ tl-checkout-wrapper,
 
 tl-checkout-wrapper:focus,
 .tl-checkout-wrapper:focus {
-  outline: 2px solid var(--tl-ring, #3b82f6);
+  outline: 2px solid var(--tl-ring);
   outline-offset: 2px;
-  border-radius: var(--tl-radius-sm, 0.25rem);
+  border-radius: var(--tl-radius-sm);
 }
 
 tl-checkout-wrapper[disabled],

package/dist/collection/components/tl-event-card/tl-event-card.css

@@ -1,11 +1,11 @@
 :host {
   display: block;
-  font-family: var(--tl-font-family, system-ui, sans-serif);
+  font-family: var(--tl-font-family);
 }
 
 .event-card {
-  background: var(--tl-secondary, #f3f4f6);
-  border-radius: var(--tl-radius-lg, 0.75rem);
+  background: var(--tl-secondary);
+  border-radius: var(--tl-radius-lg);
   overflow: hidden;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
   cursor: pointer;
@@ -21,7 +21,7 @@
   position: relative;
   aspect-ratio: 16 / 9;
   overflow: hidden;
-  background: var(--tl-muted, #f9fafb);
+  background: var(--tl-muted);
 }
 
 .event-image {
@@ -41,7 +41,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--tl-muted-foreground, #6b7280);
+  color: var(--tl-muted-foreground);
 }
 
 .status-container {
@@ -55,26 +55,26 @@
   padding: 0.25rem 0.5rem;
   font-size: 0.75rem;
   font-weight: 500;
-  border-radius: var(--tl-radius-sm, 0.25rem);
+  border-radius: var(--tl-radius-sm);
 }
 
 .status-available {
-  background: var(--tl-success, #10b981);
-  color: var(--tl-success-foreground, #ffffff);
+  background: var(--tl-success);
+  color: var(--tl-success-foreground);
 }
 
 .status-limited {
-  background: var(--tl-warning, #f59e0b);
-  color: var(--tl-warning-foreground, #ffffff);
+  background: var(--tl-warning);
+  color: var(--tl-warning-foreground);
 }
 
 .status-sold-out {
-  background: var(--tl-error, #ef4444);
-  color: var(--tl-error-foreground, #ffffff);
+  background: var(--tl-error);
+  color: var(--tl-error-foreground);
 }
 
 .content {
-  padding: var(--tl-spacing-4, 1rem);
+  padding: var(--tl-spacing-4);
 }
 
 .category {
@@ -83,19 +83,19 @@
   font-weight: 500;
   text-transform: uppercase;
   letter-spacing: 0.05em;
-  color: var(--tl-primary, #6366f1);
+  color: var(--tl-primary);
 }
 
 .title {
   margin: 0.25rem 0 0;
   font-size: 1.125rem;
   font-weight: 600;
-  color: var(--tl-foreground, #111827);
+  color: var(--tl-foreground);
   line-height: 1.3;
 }
 
 .event-card:hover .title {
-  color: var(--tl-primary, #6366f1);
+  color: var(--tl-primary);
 }
 
 .meta {
@@ -104,7 +104,7 @@
   gap: 0.5rem;
   margin: 0.5rem 0 0;
   font-size: 0.875rem;
-  color: var(--tl-muted-foreground, #6b7280);
+  color: var(--tl-muted-foreground);
 }
 
 .meta:first-of-type {
@@ -120,7 +120,7 @@
 .description {
   margin: 0.75rem 0 0;
   font-size: 0.875rem;
-  color: var(--tl-muted-foreground, #6b7280);
+  color: var(--tl-muted-foreground);
   line-height: 1.5;
   display: -webkit-box;
   -webkit-line-clamp: 2;
@@ -140,8 +140,8 @@
 .skeleton-line {
   height: 0.875rem;
   margin-top: 0.5rem;
-  background: var(--tl-muted, #f9fafb);
-  border-radius: var(--tl-radius-sm, 0.25rem);
+  background: var(--tl-muted);
+  border-radius: var(--tl-radius-sm);
   animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 }
 
@@ -154,9 +154,9 @@
 }
 
 .card-error {
-  padding: var(--tl-spacing-4, 1rem);
+  padding: var(--tl-spacing-4);
   font-size: 0.875rem;
-  color: var(--tl-error, #ef4444);
+  color: var(--tl-error);
   cursor: default;
 }
 

package/dist/collection/components/tl-event-list/tl-event-list.css

@@ -1,11 +1,11 @@
 :host {
   display: block;
-  font-family: var(--tl-font-family, system-ui, sans-serif);
+  font-family: var(--tl-font-family);
 }
 
 .event-grid {
   display: grid;
-  gap: var(--tl-spacing-6, 1.5rem);
+  gap: var(--tl-spacing-6);
 }
 
 .cols-1 {
@@ -41,19 +41,19 @@
 
 /* Skeleton Loading */
 .skeleton-card {
-  background: var(--tl-secondary, #f3f4f6);
-  border-radius: var(--tl-radius-lg, 0.75rem);
+  background: var(--tl-secondary);
+  border-radius: var(--tl-radius-lg);
   overflow: hidden;
 }
 
 .skeleton-image {
   aspect-ratio: 16 / 9;
-  background: var(--tl-muted, #f9fafb);
+  background: var(--tl-muted);
   animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 }
 
 .skeleton-content {
-  padding: var(--tl-spacing-4, 1rem);
+  padding: var(--tl-spacing-4);
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
@@ -61,8 +61,8 @@
 
 .skeleton-line {
   height: 1rem;
-  background: var(--tl-muted, #f9fafb);
-  border-radius: var(--tl-radius-sm, 0.25rem);
+  background: var(--tl-muted);
+  border-radius: var(--tl-radius-sm);
   animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 }
 
@@ -91,44 +91,44 @@
 /* Error State */
 .error-state {
   background: rgba(239, 68, 68, 0.1);
-  border: 1px solid var(--tl-error, #ef4444);
-  border-radius: var(--tl-radius-lg, 0.75rem);
-  padding: var(--tl-spacing-4, 1rem);
+  border: 1px solid var(--tl-error);
+  border-radius: var(--tl-radius-lg);
+  padding: var(--tl-spacing-4);
 }
 
 .error-title {
   margin: 0;
   font-weight: 500;
-  color: var(--tl-error, #ef4444);
+  color: var(--tl-error);
 }
 
 .error-message {
   margin: 0.25rem 0 0;
   font-size: 0.875rem;
-  color: var(--tl-error, #ef4444);
+  color: var(--tl-error);
 }
 
 /* Empty State */
 .empty-state {
   text-align: center;
-  padding: var(--tl-spacing-8, 2rem) var(--tl-spacing-4, 1rem);
+  padding: var(--tl-spacing-8) var(--tl-spacing-4);
 }
 
 .empty-icon {
   width: 4rem;
   height: 4rem;
   margin: 0 auto 1rem;
-  color: var(--tl-muted-foreground, #6b7280);
+  color: var(--tl-muted-foreground);
 }
 
 .empty-title {
   margin: 0;
   font-size: 1.25rem;
   font-weight: 600;
-  color: var(--tl-foreground, #111827);
+  color: var(--tl-foreground);
 }
 
 .empty-message {
   margin: 0.5rem 0 0;
-  color: var(--tl-muted-foreground, #6b7280);
+  color: var(--tl-muted-foreground);
 }

package/dist/collection/components/tl-login/tl-login.css

@@ -1,17 +1,17 @@
 :host {
   display: block;
-  font-family: var(--tl-font-family, system-ui, sans-serif);
-  color: var(--tl-foreground, #111827);
+  font-family: var(--tl-font-family);
+  color: var(--tl-foreground);
 }
 
 .login {
   display: flex;
   flex-direction: column;
-  gap: var(--tl-spacing-3, 0.75rem);
-  padding: var(--tl-spacing-6, 1.5rem);
-  background: var(--tl-background, #ffffff);
-  border: 1px solid var(--tl-border, #e5e7eb);
-  border-radius: var(--tl-radius-lg, 0.75rem);
+  gap: var(--tl-spacing-3);
+  padding: var(--tl-spacing-6);
+  background: var(--tl-background);
+  border: 1px solid var(--tl-border);
+  border-radius: var(--tl-radius-lg);
 }
 
 .title {
@@ -23,7 +23,7 @@
 .lead {
   margin: 0;
   font-size: 0.875rem;
-  color: var(--tl-muted-foreground, #6b7280);
+  color: var(--tl-muted-foreground);
 }
 
 .label {
@@ -32,22 +32,22 @@
 }
 
 .input {
-  padding: var(--tl-spacing-3, 0.75rem);
+  padding: var(--tl-spacing-3);
   font: inherit;
   font-size: 0.9375rem;
-  color: var(--tl-foreground, #111827);
-  background: var(--tl-background, #ffffff);
-  border: 1px solid var(--tl-border, #e5e7eb);
-  border-radius: var(--tl-radius-md, 0.5rem);
+  color: var(--tl-foreground);
+  background: var(--tl-background);
+  border: 1px solid var(--tl-border);
+  border-radius: var(--tl-radius-md);
 }
 
 .input:focus {
-  outline: 2px solid var(--tl-primary, #6366f1);
+  outline: 2px solid var(--tl-primary);
   outline-offset: 1px;
 }
 
 .code-input {
-  font-family: var(--tl-font-family-mono, ui-monospace, monospace);
+  font-family: var(--tl-font-family-mono);
   font-size: 1.25rem;
   letter-spacing: 0.25em;
   text-align: center;
@@ -55,17 +55,17 @@
 
 .primary,
 .secondary {
-  padding: var(--tl-spacing-3, 0.75rem) var(--tl-spacing-4, 1rem);
+  padding: var(--tl-spacing-3) var(--tl-spacing-4);
   font: inherit;
   font-size: 0.9375rem;
   font-weight: 600;
-  border-radius: var(--tl-radius-md, 0.5rem);
+  border-radius: var(--tl-radius-md);
   cursor: pointer;
 }
 
 .primary {
-  color: var(--tl-primary-foreground, #ffffff);
-  background: var(--tl-primary, #6366f1);
+  color: var(--tl-primary-foreground);
+  background: var(--tl-primary);
   border: none;
 }
 
@@ -74,9 +74,9 @@
 }
 
 .secondary {
-  color: var(--tl-foreground, #111827);
-  background: var(--tl-secondary, #f3f4f6);
-  border: 1px solid var(--tl-border, #e5e7eb);
+  color: var(--tl-foreground);
+  background: var(--tl-secondary);
+  border: 1px solid var(--tl-border);
 }
 
 .primary:disabled,
@@ -90,7 +90,7 @@
   padding: 0;
   font: inherit;
   font-size: 0.875rem;
-  color: var(--tl-primary, #6366f1);
+  color: var(--tl-primary);
   background: none;
   border: none;
   cursor: pointer;
@@ -104,19 +104,19 @@
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: var(--tl-spacing-4, 1rem);
+  gap: var(--tl-spacing-4);
 }
 
 .error {
   margin: 0;
   font-size: 0.8125rem;
-  color: var(--tl-error, #ef4444);
+  color: var(--tl-error);
 }
 
 .notice {
   margin: 0;
   font-size: 0.8125rem;
-  color: var(--tl-success, #10b981);
+  color: var(--tl-success);
 }
 
 .signed-in {

package/dist/collection/components/tl-my-orders/tl-my-orders.css

@@ -1,13 +1,13 @@
 :host {
   display: block;
-  font-family: var(--tl-font-family, system-ui, sans-serif);
-  color: var(--tl-foreground, #111827);
+  font-family: var(--tl-font-family);
+  color: var(--tl-foreground);
 }
 
 .orders {
   display: flex;
   flex-direction: column;
-  gap: var(--tl-spacing-4, 1rem);
+  gap: var(--tl-spacing-4);
 }
 
 .order-list {
@@ -16,20 +16,20 @@
   padding: 0;
   display: flex;
   flex-direction: column;
-  gap: var(--tl-spacing-3, 0.75rem);
+  gap: var(--tl-spacing-3);
 }
 
 .order {
-  background: var(--tl-background, #ffffff);
-  border: 1px solid var(--tl-border, #e5e7eb);
-  border-radius: var(--tl-radius-lg, 0.75rem);
+  background: var(--tl-background);
+  border: 1px solid var(--tl-border);
+  border-radius: var(--tl-radius-lg);
   overflow: hidden;
   transition: border-color 0.2s ease, box-shadow 0.2s ease;
 }
 
 .order:hover,
 .order.expanded {
-  border-color: var(--tl-primary, #6366f1);
+  border-color: var(--tl-primary);
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
 }
 
@@ -37,9 +37,9 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: var(--tl-spacing-4, 1rem);
+  gap: var(--tl-spacing-4);
   width: 100%;
-  padding: var(--tl-spacing-4, 1rem);
+  padding: var(--tl-spacing-4);
   font: inherit;
   color: inherit;
   text-align: left;
@@ -51,7 +51,7 @@
 .order-main {
   display: flex;
   flex-direction: column;
-  gap: var(--tl-spacing-1, 0.25rem);
+  gap: var(--tl-spacing-1);
   min-width: 0;
 }
 
@@ -60,7 +60,7 @@
   font-weight: 500;
   text-transform: uppercase;
   letter-spacing: 0.05em;
-  color: var(--tl-muted-foreground, #6b7280);
+  color: var(--tl-muted-foreground);
 }
 
 .order-event {
@@ -74,15 +74,15 @@
 .order-meta {
   display: flex;
   flex-wrap: wrap;
-  gap: var(--tl-spacing-3, 0.75rem);
+  gap: var(--tl-spacing-3);
   font-size: 0.8125rem;
-  color: var(--tl-muted-foreground, #6b7280);
+  color: var(--tl-muted-foreground);
 }
 
 .order-side {
   display: flex;
   align-items: center;
-  gap: var(--tl-spacing-3, 0.75rem);
+  gap: var(--tl-spacing-3);
   flex-shrink: 0;
 }
 
@@ -95,34 +95,34 @@
   font-size: 0.75rem;
   font-weight: 500;
   border-radius: 9999px;
-  background: var(--tl-secondary, #f3f4f6);
-  color: var(--tl-secondary-foreground, #111827);
+  background: var(--tl-secondary);
+  color: var(--tl-secondary-foreground);
 }
 
 .status-success {
-  background: var(--tl-success, #10b981);
-  color: var(--tl-success-foreground, #ffffff);
+  background: var(--tl-success);
+  color: var(--tl-success-foreground);
 }
 
 .status-info {
-  background: var(--tl-primary, #6366f1);
-  color: var(--tl-primary-foreground, #ffffff);
+  background: var(--tl-primary);
+  color: var(--tl-primary-foreground);
 }
 
 .status-warning {
-  background: var(--tl-warning, #f59e0b);
-  color: var(--tl-warning-foreground, #ffffff);
+  background: var(--tl-warning);
+  color: var(--tl-warning-foreground);
 }
 
 .status-error {
-  background: var(--tl-error, #ef4444);
-  color: var(--tl-error-foreground, #ffffff);
+  background: var(--tl-error);
+  color: var(--tl-error-foreground);
 }
 
 .chevron {
   width: 1.125rem;
   height: 1.125rem;
-  color: var(--tl-muted-foreground, #6b7280);
+  color: var(--tl-muted-foreground);
   transition: transform 0.2s ease;
 }
 
@@ -131,9 +131,9 @@
 }
 
 .order-tickets {
-  padding: 0 var(--tl-spacing-4, 1rem) var(--tl-spacing-4, 1rem);
-  border-top: 1px solid var(--tl-border, #e5e7eb);
-  padding-top: var(--tl-spacing-4, 1rem);
+  padding: 0 var(--tl-spacing-4) var(--tl-spacing-4);
+  border-top: 1px solid var(--tl-border);
+  padding-top: var(--tl-spacing-4);
 }
 
 @media (max-width: 480px) {
@@ -161,35 +161,35 @@
 
 .signin-text,
 .state-text {
-  margin: var(--tl-spacing-1, 0.25rem) 0 0;
+  margin: var(--tl-spacing-1) 0 0;
   font-size: 0.875rem;
-  color: var(--tl-muted-foreground, #6b7280);
+  color: var(--tl-muted-foreground);
 }
 
 .state {
-  padding: var(--tl-spacing-8, 2rem) var(--tl-spacing-4, 1rem);
+  padding: var(--tl-spacing-8) var(--tl-spacing-4);
   text-align: center;
-  background: var(--tl-background, #ffffff);
-  border: 1px solid var(--tl-border, #e5e7eb);
-  border-radius: var(--tl-radius-lg, 0.75rem);
+  background: var(--tl-background);
+  border: 1px solid var(--tl-border);
+  border-radius: var(--tl-radius-lg);
 }
 
 .state.error .state-title {
-  color: var(--tl-error, #ef4444);
+  color: var(--tl-error);
 }
 
 .empty-icon {
   width: 3rem;
   height: 3rem;
-  margin: 0 auto var(--tl-spacing-3, 0.75rem);
-  color: var(--tl-primary, #6366f1);
+  margin: 0 auto var(--tl-spacing-3);
+  color: var(--tl-primary);
 }
 
 /* Skeleton */
 .skeleton {
   height: 5rem;
-  background: var(--tl-secondary, #f3f4f6);
-  border-radius: var(--tl-radius-lg, 0.75rem);
+  background: var(--tl-secondary);
+  border-radius: var(--tl-radius-lg);
   animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 }