@krumio/trailhand-ui 1.8.0 → 1.8.1

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 (9) hide show
  1. package/README.md +13 -13
  2. package/dist/components/action-menu/action-menu.js +12 -12
  3. package/dist/components/button/button.js +18 -18
  4. package/dist/components/data-table/data-table.js +30 -30
  5. package/dist/components/progress-bar/progress-bar.js +12 -12
  6. package/dist/components/th-tag/th-tag.js +15 -15
  7. package/dist/components/toggle-switch/toggle-switch.js +3 -3
  8. package/dist/styles/colors.css +101 -101
  9. package/package.json +1 -1
package/README.md CHANGED
@@ -31,22 +31,22 @@ Trailhand UI includes a design system with CSS custom properties. Import `colors
31
31
 
32
32
  ```css
33
33
  /* Available variables */
34
- --color-primary: #3d98d3;
35
- --color-white: #FFFFFF;
36
- --color-black: #000000;
34
+ --th-color-primary: #3d98d3;
35
+ --th-color-white: #FFFFFF;
36
+ --th-color-black: #000000;
37
37
 
38
38
  /* Greyscale */
39
- --color-grey-100 through --color-grey-800
39
+ --th-color-grey-100 through --th-color-grey-800
40
40
 
41
41
  /* Semantic aliases */
42
- --color-text-primary: #212121;
43
- --color-text-secondary: #636363;
44
- --color-text-muted: #8D8D8D;
45
- --color-background: #FFFFFF;
46
- --color-border: #D7D7D7;
47
- --color-error: #9F3A3A;
48
- --color-success: #30AC66;
49
- --color-warning: #D3C255;
42
+ --th-color-text-primary: #212121;
43
+ --th-color-text-secondary: #636363;
44
+ --th-color-text-muted: #8D8D8D;
45
+ --th-color-background: #FFFFFF;
46
+ --th-color-border: #D7D7D7;
47
+ --th-color-error: #9F3A3A;
48
+ --th-color-success: #30AC66;
49
+ --th-color-warning: #D3C255;
50
50
  ```
51
51
 
52
52
  ### Theming
@@ -55,7 +55,7 @@ Override any variable to customize the look:
55
55
 
56
56
  ```css
57
57
  :root {
58
- --color-primary: #your-brand-color;
58
+ --th-color-primary: #your-brand-color;
59
59
  }
60
60
  ```
61
61
 
package/dist/components/action-menu/action-menu.js CHANGED
@@ -216,17 +216,17 @@ ActionMenu.styles = css `
216
216
  width: 32px;
217
217
  height: 32px;
218
218
  padding: 0;
219
- border: 1px solid var(--border, var(--color-border, #D7D7D7));
219
+ border: 1px solid var(--border, var(--th-color-border, #D7D7D7));
220
220
  border-radius: 4px;
221
- background-color: var(--body-bg, var(--color-white, #FFFFFF));
222
- color: var(--body-text, var(--color-text-primary, #212121));
221
+ background-color: var(--body-bg, var(--th-color-white, #FFFFFF));
222
+ color: var(--body-text, var(--th-color-text-primary, #212121));
223
223
  cursor: pointer;
224
224
  transition: all 0.2s;
225
225
  }
226
226
 
227
227
  .action-menu__button:hover:not(:disabled) {
228
- background-color: var(--sortable-table-row-hover-bg, var(--color-grey-100, #FAFAFA));
229
- border-color: var(--link, var(--color-primary, #3d98d3));
228
+ background-color: var(--sortable-table-row-hover-bg, var(--th-color-grey-100, #FAFAFA));
229
+ border-color: var(--link, var(--th-color-primary, #3d98d3));
230
230
  }
231
231
 
232
232
  .action-menu__button:disabled {
@@ -245,8 +245,8 @@ ActionMenu.styles = css `
245
245
  top: 100%;
246
246
  margin-top: 4px;
247
247
  min-width: 180px;
248
- background-color: var(--body-bg, var(--color-white, #FFFFFF));
249
- border: 1px solid var(--border, var(--color-border, #D7D7D7));
248
+ background-color: var(--body-bg, var(--th-color-white, #FFFFFF));
249
+ border: 1px solid var(--border, var(--th-color-border, #D7D7D7));
250
250
  border-radius: 4px;
251
251
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
252
252
  z-index: 1000;
@@ -281,7 +281,7 @@ ActionMenu.styles = css `
281
281
  padding: 0.5rem 1rem;
282
282
  border: none;
283
283
  background: none;
284
- color: var(--body-text, var(--color-text-primary, #212121));
284
+ color: var(--body-text, var(--th-color-text-primary, #212121));
285
285
  font-size: 14px;
286
286
  text-align: left;
287
287
  cursor: pointer;
@@ -289,7 +289,7 @@ ActionMenu.styles = css `
289
289
  }
290
290
 
291
291
  .action-menu__action:hover:not(:disabled) {
292
- background-color: var(--sortable-table-row-hover-bg, var(--color-grey-100, #FAFAFA));
292
+ background-color: var(--sortable-table-row-hover-bg, var(--th-color-grey-100, #FAFAFA));
293
293
  }
294
294
 
295
295
  .action-menu__action:disabled {
@@ -298,7 +298,7 @@ ActionMenu.styles = css `
298
298
  }
299
299
 
300
300
  .action-menu__action--danger {
301
- color: var(--error, var(--color-error, #9F3A3A));
301
+ color: var(--error, var(--th-color-error, #9F3A3A));
302
302
  }
303
303
 
304
304
  .action-menu__action--danger:hover:not(:disabled) {
@@ -308,13 +308,13 @@ ActionMenu.styles = css `
308
308
  .action-menu__divider {
309
309
  height: 1px;
310
310
  margin: 0.5rem 0;
311
- background-color: var(--border, var(--color-border, #D7D7D7));
311
+ background-color: var(--border, var(--th-color-border, #D7D7D7));
312
312
  }
313
313
 
314
314
  .action-menu__empty {
315
315
  padding: 1rem;
316
316
  text-align: center;
317
- color: var(--muted, var(--color-text-muted, #8D8D8D));
317
+ color: var(--muted, var(--th-color-text-muted, #8D8D8D));
318
318
  font-size: 13px;
319
319
  }
320
320
  `;
package/dist/components/button/button.js CHANGED
@@ -86,55 +86,55 @@ Button.styles = css `
86
86
 
87
87
  .trailhand-button:disabled {
88
88
  cursor: not-allowed;
89
- background-color: var(--button-disabled-bg, #e0e0e0);
90
- color: var(--button-disabled-color, #a8a8a8);
89
+ background-color: var(--th-button-disabled-bg, #e0e0e0);
90
+ color: var(--th-button-disabled-color, #a8a8a8);
91
91
  border: none;
92
92
  }
93
93
 
94
94
  .trailhand-button--primary {
95
- color: var(--button-primary-color, #fff);
96
- background-color: var(--button-primary-bg, #005cb9);
95
+ color: var(--th-button-primary-color, #fff);
96
+ background-color: var(--th-button-primary-bg, #005cb9);
97
97
  }
98
98
 
99
99
  .trailhand-button--primary:not(:disabled):hover {
100
- background-color: var(--button-primary-bg-hover, #00478e);
100
+ background-color: var(--th-button-primary-bg-hover, #00478e);
101
101
  }
102
102
 
103
103
  .trailhand-button--secondary {
104
- color: var(--button-secondary-color, #005cb9);
105
- background-color: var(--button-secondary-bg, #ffffff);
106
- border: 1px solid var(--button-secondary-border, #005cb9);
104
+ color: var(--th-button-secondary-color, #005cb9);
105
+ background-color: var(--th-button-secondary-bg, #ffffff);
106
+ border: 1px solid var(--th-button-secondary-border, #005cb9);
107
107
  }
108
108
 
109
109
  .trailhand-button--secondary:not(:disabled):hover {
110
- background-color: var(--button-secondary-bg-hover, #f5faff);
110
+ background-color: var(--th-button-secondary-bg-hover, #f5faff);
111
111
  }
112
112
 
113
113
  .trailhand-button--alternate {
114
- color: var(--button-alternate-color, #ffffff);
115
- background-color: var(--button-alternate-bg, #3492f1);
114
+ color: var(--th-button-alternate-color, #ffffff);
115
+ background-color: var(--th-button-alternate-bg, #3492f1);
116
116
  }
117
117
 
118
118
  .trailhand-button--alternate:not(:disabled):hover {
119
- background-color: var(--button-alternate-bg-hover, #156ec8);
119
+ background-color: var(--th-button-alternate-bg-hover, #156ec8);
120
120
  }
121
121
 
122
122
  .trailhand-button--destructive {
123
- color: var(--button-destructive-color, #fff);
124
- background-color: var(--button-destructive-bg, #9f3a3a);
123
+ color: var(--th-button-destructive-color, #fff);
124
+ background-color: var(--th-button-destructive-bg, #9f3a3a);
125
125
  }
126
126
 
127
127
  .trailhand-button--destructive:not(:disabled):hover {
128
- background-color: var(--button-destructive-bg-hover, #731616);
128
+ background-color: var(--th-button-destructive-bg-hover, #731616);
129
129
  }
130
130
 
131
131
  .trailhand-button--confirmation {
132
- color: var(--button-confirmation-color, #fff);
133
- background-color: var(--button-confirmation-bg, #30ac66);
132
+ color: var(--th-button-confirmation-color, #fff);
133
+ background-color: var(--th-button-confirmation-bg, #30ac66);
134
134
  }
135
135
 
136
136
  .trailhand-button--confirmation:not(:disabled):hover {
137
- background-color: var(--button-confirmation-bg-hover, #0f8240);
137
+ background-color: var(--th-button-confirmation-bg-hover, #0f8240);
138
138
  }
139
139
 
140
140
  .trailhand-button--small {
package/dist/components/data-table/data-table.js CHANGED
@@ -535,20 +535,20 @@ DataTable.styles = css `
535
535
  width: 100%;
536
536
  max-width: 300px;
537
537
  padding: 0.5rem 1rem;
538
- border: 1px solid var(--border, var(--color-border, #D7D7D7));
538
+ border: 1px solid var(--border, var(--th-color-border, #D7D7D7));
539
539
  border-radius: 4px;
540
- background-color: var(--input-bg, var(--color-white, #FFFFFF));
541
- color: var(--input-text, var(--color-text-primary, #212121));
540
+ background-color: var(--input-bg, var(--th-color-white, #FFFFFF));
541
+ color: var(--input-text, var(--th-color-text-primary, #212121));
542
542
  font-size: 14px;
543
543
  }
544
544
 
545
545
  .data-table__search-input:focus {
546
546
  outline: none;
547
- border-color: var(--primary, var(--color-primary, #3d98d3));
547
+ border-color: var(--primary, var(--th-color-primary, #3d98d3));
548
548
  }
549
549
 
550
550
  .data-table__search-input::placeholder {
551
- color: var(--input-placeholder, var(--color-text-muted, #8D8D8D));
551
+ color: var(--input-placeholder, var(--th-color-text-muted, #8D8D8D));
552
552
  }
553
553
 
554
554
  .data-table__loading {
@@ -558,14 +558,14 @@ DataTable.styles = css `
558
558
  justify-content: center;
559
559
  padding: 3rem;
560
560
  gap: 1rem;
561
- color: var(--body-text, var(--color-text-primary, #212121));
561
+ color: var(--body-text, var(--th-color-text-primary, #212121));
562
562
  }
563
563
 
564
564
  .data-table__spinner {
565
565
  width: 40px;
566
566
  height: 40px;
567
- border: 4px solid var(--border, var(--color-border, #D7D7D7));
568
- border-top-color: var(--primary, var(--color-primary, #3d98d3));
567
+ border: 4px solid var(--border, var(--th-color-border, #D7D7D7));
568
+ border-top-color: var(--primary, var(--th-color-primary, #3d98d3));
569
569
  border-radius: 50%;
570
570
  animation: spin 1s linear infinite;
571
571
  }
@@ -577,28 +577,28 @@ DataTable.styles = css `
577
577
  }
578
578
 
579
579
  .data-table__wrapper {
580
- border: 1px solid var(--border, var(--color-border, #D7D7D7));
580
+ border: 1px solid var(--border, var(--th-color-border, #D7D7D7));
581
581
  border-radius: 4px;
582
582
  }
583
583
 
584
584
  .data-table__table {
585
585
  width: 100%;
586
586
  border-collapse: collapse;
587
- background-color: var(--body-bg, var(--color-white, #FFFFFF));
587
+ background-color: var(--body-bg, var(--th-color-white, #FFFFFF));
588
588
  }
589
589
 
590
590
  .data-table__thead {
591
- background-color: var(--sortable-table-header-bg, var(--color-grey-100, #FAFAFA));
592
- border-bottom: 1px solid var(--border, var(--color-border, #D7D7D7));
591
+ background-color: var(--sortable-table-header-bg, var(--th-color-grey-100, #FAFAFA));
592
+ border-bottom: 1px solid var(--border, var(--th-color-border, #D7D7D7));
593
593
  }
594
594
 
595
595
  .data-table__th {
596
596
  padding: 0.75rem 1rem;
597
597
  text-align: left;
598
598
  font-weight: 600;
599
- color: var(--body-text, var(--color-text-primary, #212121));
599
+ color: var(--body-text, var(--th-color-text-primary, #212121));
600
600
  white-space: nowrap;
601
- border-bottom: 1px solid var(--border, var(--color-border, #D7D7D7));
601
+ border-bottom: 1px solid var(--border, var(--th-color-border, #D7D7D7));
602
602
  }
603
603
 
604
604
  .data-table__th--sortable {
@@ -607,11 +607,11 @@ DataTable.styles = css `
607
607
  }
608
608
 
609
609
  .data-table__th--sortable:hover {
610
- background-color: var(--sortable-table-header-hover-bg, var(--color-grey-200, #EBEBEB));
610
+ background-color: var(--sortable-table-header-hover-bg, var(--th-color-grey-200, #EBEBEB));
611
611
  }
612
612
 
613
613
  .data-table__th--sorted {
614
- background-color: var(--sortable-table-header-sorted-bg, var(--color-grey-200, #EBEBEB));
614
+ background-color: var(--sortable-table-header-sorted-bg, var(--th-color-grey-200, #EBEBEB));
615
615
  }
616
616
 
617
617
  .data-table__th--actions {
@@ -628,22 +628,22 @@ DataTable.styles = css `
628
628
  .data-table__sort-icon {
629
629
  display: inline-flex;
630
630
  align-items: center;
631
- color: var(--muted, var(--color-text-muted, #8D8D8D));
631
+ color: var(--muted, var(--th-color-text-muted, #8D8D8D));
632
632
  width: 16px;
633
633
  height: 16px;
634
634
  font-size: 16px;
635
635
  }
636
636
 
637
637
  .data-table__tbody {
638
- background-color: var(--body-bg, var(--color-white, #FFFFFF));
638
+ background-color: var(--body-bg, var(--th-color-white, #FFFFFF));
639
639
  }
640
640
 
641
641
  .data-table__tr {
642
- border-bottom: 1px solid var(--border, var(--color-border, #D7D7D7));
642
+ border-bottom: 1px solid var(--border, var(--th-color-border, #D7D7D7));
643
643
  }
644
644
 
645
645
  .data-table__tr:hover {
646
- background-color: var(--sortable-table-row-hover-bg, var(--color-grey-100, #FAFAFA));
646
+ background-color: var(--sortable-table-row-hover-bg, var(--th-color-grey-100, #FAFAFA));
647
647
  }
648
648
 
649
649
  .data-table__tr:last-child {
@@ -652,11 +652,11 @@ DataTable.styles = css `
652
652
 
653
653
  .data-table__td {
654
654
  padding: 0.75rem 1rem;
655
- color: var(--body-text, var(--color-text-primary, #212121));
655
+ color: var(--body-text, var(--th-color-text-primary, #212121));
656
656
  }
657
657
 
658
658
  .data-table__td a {
659
- color: var(--link, var(--color-primary, #3d98d3));
659
+ color: var(--link, var(--th-color-primary, #3d98d3));
660
660
  text-decoration: none;
661
661
  }
662
662
 
@@ -667,7 +667,7 @@ DataTable.styles = css `
667
667
  .data-table__td--empty {
668
668
  text-align: center;
669
669
  padding: 2rem;
670
- color: var(--muted, var(--color-text-muted, #8D8D8D));
670
+ color: var(--muted, var(--th-color-text-muted, #8D8D8D));
671
671
  }
672
672
 
673
673
  .data-table__td--actions {
@@ -687,7 +687,7 @@ DataTable.styles = css `
687
687
  }
688
688
 
689
689
  .data-table__pagination-info {
690
- color: var(--muted, var(--color-text-muted, #8D8D8D));
690
+ color: var(--muted, var(--th-color-text-muted, #8D8D8D));
691
691
  font-size: 13px;
692
692
  }
693
693
 
@@ -698,7 +698,7 @@ DataTable.styles = css `
698
698
  }
699
699
 
700
700
  .data-table__pagination-current {
701
- color: var(--body-text, var(--color-text-primary, #212121));
701
+ color: var(--body-text, var(--th-color-text-primary, #212121));
702
702
  font-size: 13px;
703
703
  min-width: 60px;
704
704
  text-align: center;
@@ -711,17 +711,17 @@ DataTable.styles = css `
711
711
  width: 32px;
712
712
  height: 32px;
713
713
  padding: 0;
714
- border: 1px solid var(--border, var(--color-border, #D7D7D7));
714
+ border: 1px solid var(--border, var(--th-color-border, #D7D7D7));
715
715
  border-radius: 4px;
716
- background-color: var(--body-bg, var(--color-white, #FFFFFF));
717
- color: var(--body-text, var(--color-text-primary, #212121));
716
+ background-color: var(--body-bg, var(--th-color-white, #FFFFFF));
717
+ color: var(--body-text, var(--th-color-text-primary, #212121));
718
718
  cursor: pointer;
719
719
  transition: all 0.2s;
720
720
  }
721
721
 
722
722
  .data-table__pagination-btn:hover:not(:disabled) {
723
- background-color: var(--sortable-table-row-hover-bg, var(--color-grey-100, #FAFAFA));
724
- border-color: var(--link, var(--color-primary, #3d98d3));
723
+ background-color: var(--sortable-table-row-hover-bg, var(--th-color-grey-100, #FAFAFA));
724
+ border-color: var(--link, var(--th-color-primary, #3d98d3));
725
725
  }
726
726
 
727
727
  .data-table__pagination-btn:disabled {
package/dist/components/progress-bar/progress-bar.js CHANGED
@@ -72,42 +72,42 @@ ProgressBar.styles = css `
72
72
  align-items: center;
73
73
  justify-content: space-between;
74
74
  margin-bottom: 8px;
75
- font-size: var(--progress-bar-font-size, 14px);
75
+ font-size: var(--th-progress-bar-font-size, 14px);
76
76
  }
77
77
 
78
78
  .progress-bar__title {
79
79
  font-weight: 600;
80
80
  color: var(
81
- --progress-bar-title-color,
82
- var(--color-text-primary, #212121)
81
+ --th-progress-bar-title-color,
82
+ var(--th-color-text-primary, #212121)
83
83
  );
84
84
  }
85
85
 
86
86
  .progress-bar__stats {
87
87
  color: var(
88
- --progress-bar-label-color,
89
- var(--color-text-secondary, #636363)
88
+ --th-progress-bar-label-color,
89
+ var(--th-color-text-secondary, #636363)
90
90
  );
91
91
  }
92
92
 
93
93
  .progress-bar__track {
94
94
  width: 100%;
95
- height: var(--progress-bar-height, 8px);
95
+ height: var(--th-progress-bar-height, 8px);
96
96
  background-color: var(
97
- --progress-bar-track-color,
98
- var(--color-grey-200, #ebebeb)
97
+ --th-progress-bar-track-color,
98
+ var(--th-color-grey-200, #ebebeb)
99
99
  );
100
- border-radius: var(--progress-bar-border-radius, 4px);
100
+ border-radius: var(--th-progress-bar-border-radius, 4px);
101
101
  overflow: hidden;
102
102
  }
103
103
 
104
104
  .progress-bar__fill {
105
105
  height: 100%;
106
106
  background-color: var(
107
- --progress-bar-fill-color,
108
- var(--color-primary, #3d98d3)
107
+ --th-progress-bar-fill-color,
108
+ var(--th-color-primary, #3d98d3)
109
109
  );
110
- border-radius: var(--progress-bar-border-radius, 4px);
110
+ border-radius: var(--th-progress-bar-border-radius, 4px);
111
111
  transition: width 0.3s ease;
112
112
  }
113
113
  `;
package/dist/components/th-tag/th-tag.js CHANGED
@@ -154,28 +154,28 @@ ThTag.styles = css `
154
154
 
155
155
  /* Color variants - soft pastel backgrounds with colored text */
156
156
  .tag--default {
157
- background-color: var(--color-background-hover, var(--color-grey-200, #EBEBEB));
158
- color: var(--color-text-secondary, var(--color-grey-600, #636363));
157
+ background-color: var(--th-color-background-hover, var(--th-color-grey-200, #EBEBEB));
158
+ color: var(--th-color-text-secondary, var(--th-color-grey-600, #636363));
159
159
  }
160
160
 
161
161
  .tag--info {
162
- background-color: var(--color-info-fill, var(--color-light-blue, #e6f3ff));
163
- color: var(--color-info-outline, var(--color-blue, #0085ff));
162
+ background-color: var(--th-color-info-fill, var(--th-color-light-blue, #e6f3ff));
163
+ color: var(--th-color-info-outline, var(--th-color-blue, #0085ff));
164
164
  }
165
165
 
166
166
  .tag--success {
167
- background-color: var(--color-success-fill, var(--color-light-green, #d2fdd2));
168
- color: var(--color-success-outline, var(--color-green, #097409));
167
+ background-color: var(--th-color-success-fill, var(--th-color-light-green, #d2fdd2));
168
+ color: var(--th-color-success-outline, var(--th-color-green, #097409));
169
169
  }
170
170
 
171
171
  .tag--warning {
172
- background-color: var(--color-warning-fill, var(--color-light-yellow, #fffeb4));
173
- color: var(--color-warning-outline, var(--color-dark-yellow, #a89939));
172
+ background-color: var(--th-color-warning-fill, var(--th-color-light-yellow, #fffeb4));
173
+ color: var(--th-color-warning-outline, var(--th-color-dark-yellow, #a89939));
174
174
  }
175
175
 
176
176
  .tag--error {
177
- background-color: var(--color-error-fill, var(--color-light-red, #fee2e2));
178
- color: var(--color-error-outline, var(--color-red, #9F3A3A));
177
+ background-color: var(--th-color-error-fill, var(--th-color-light-red, #fee2e2));
178
+ color: var(--th-color-error-outline, var(--th-color-red, #9F3A3A));
179
179
  }
180
180
 
181
181
  /* Outlined variants */
@@ -186,27 +186,27 @@ ThTag.styles = css `
186
186
 
187
187
  .tag--outlined.tag--default {
188
188
  background-color: transparent;
189
- color: var(--color-text-secondary, var(--color-grey-600, #4b5563));
189
+ color: var(--th-color-text-secondary, var(--th-color-grey-600, #4b5563));
190
190
  }
191
191
 
192
192
  .tag--outlined.tag--info {
193
193
  background-color: transparent;
194
- color: var(--color-info-outline, var(--color-blue, #0085ff));
194
+ color: var(--th-color-info-outline, var(--th-color-blue, #0085ff));
195
195
  }
196
196
 
197
197
  .tag--outlined.tag--success {
198
198
  background-color: transparent;
199
- color: var(--color-success-outline, var(--color-green, #097409));
199
+ color: var(--th-color-success-outline, var(--th-color-green, #097409));
200
200
  }
201
201
 
202
202
  .tag--outlined.tag--warning {
203
203
  background-color: transparent;
204
- color: var(--color-warning-outline, var(--color-dark-yellow, #a89939));
204
+ color: var(--th-color-warning-outline, var(--th-color-dark-yellow, #a89939));
205
205
  }
206
206
 
207
207
  .tag--outlined.tag--error {
208
208
  background-color: transparent;
209
- color: var(--color-error-outline, var(--color-red, #9F3A3A));
209
+ color: var(--th-color-error-outline, var(--th-color-red, #9F3A3A));
210
210
  }
211
211
 
212
212
  /* Icon styling */
package/dist/components/toggle-switch/toggle-switch.js CHANGED
@@ -127,7 +127,7 @@ ToggleSwitch.styles = css `
127
127
  left: 0;
128
128
  right: 0;
129
129
  bottom: 0;
130
- background-color: var(--color-grey-500, #8D8D8D);
130
+ background-color: var(--th-color-grey-500, #8D8D8D);
131
131
  transition: 0.3s;
132
132
  border-radius: 24px;
133
133
  }
@@ -139,13 +139,13 @@ ToggleSwitch.styles = css `
139
139
  width: 18px;
140
140
  left: 3px;
141
141
  bottom: 3px;
142
- background-color: var(--color-white, #FFFFFF);
142
+ background-color: var(--th-color-white, #FFFFFF);
143
143
  transition: 0.3s;
144
144
  border-radius: 50%;
145
145
  }
146
146
 
147
147
  input:checked + .slider {
148
- background-color: var(--color-primary, #3d98d3);
148
+ background-color: var(--th-color-primary, #3d98d3);
149
149
  }
150
150
 
151
151
  input:checked + .slider:before {
package/dist/styles/colors.css CHANGED
@@ -3,160 +3,160 @@
3
3
  * Based on Figma Design System Color Palette
4
4
  *
5
5
  * Usage: Import this file in your application root, then use CSS variables
6
- * Example: color: var(--color-primary);
6
+ * Example: color: var(--th-color-primary);
7
7
  */
8
8
 
9
9
  :root {
10
10
  /* Color Palette */
11
11
  /* Primary Blues */
12
- --color-primary: #0086FF; /* Primary brand color */
13
- --color-light-primary: #e6f3ff; /* Light variant for backgrounds */
14
- --color-dark-primary: #005cb9; /* Dark variant for buttons/links */
12
+ --th-color-primary: #0086FF; /* Primary brand color */
13
+ --th-color-light-primary: #e6f3ff; /* Light variant for backgrounds */
14
+ --th-color-dark-primary: #005cb9; /* Dark variant for buttons/links */
15
15
 
16
16
  /* Black + White */
17
- --color-black: #000000;
18
- --color-white: #ffffff;
17
+ --th-color-black: #000000;
18
+ --th-color-white: #ffffff;
19
19
 
20
20
  /* Greyscale */
21
- --color-grey-100: #fafafa;
22
- --color-grey-200: #ebebeb;
23
- --color-grey-300: #d7d7d7;
24
- --color-grey-400: #bababa;
25
- --color-grey-500: #8d8d8d;
26
- --color-grey-600: #636363;
27
- --color-grey-700: #303131;
28
- --color-grey-800: #212121;
21
+ --th-color-grey-100: #fafafa;
22
+ --th-color-grey-200: #ebebeb;
23
+ --th-color-grey-300: #d7d7d7;
24
+ --th-color-grey-400: #bababa;
25
+ --th-color-grey-500: #8d8d8d;
26
+ --th-color-grey-600: #636363;
27
+ --th-color-grey-700: #303131;
28
+ --th-color-grey-800: #212121;
29
29
 
30
30
  /* Status Colors */
31
- --color-light-red: #fee2e2;
32
- --color-red: #9f3a3a;
33
- --color-dark-red: #731616;
31
+ --th-color-light-red: #fee2e2;
32
+ --th-color-red: #9f3a3a;
33
+ --th-color-dark-red: #731616;
34
34
 
35
- --color-light-green: #d2fdd2;
36
- --color-green: #30ac66;
37
- --color-dark-green: #0f8240;
35
+ --th-color-light-green: #d2fdd2;
36
+ --th-color-green: #30ac66;
37
+ --th-color-dark-green: #0f8240;
38
38
 
39
- --color-light-yellow: #fffeb4;
40
- --color-yellow: #D3C255;
41
- --color-dark-yellow: #a89939;
39
+ --th-color-light-yellow: #fffeb4;
40
+ --th-color-yellow: #D3C255;
41
+ --th-color-dark-yellow: #a89939;
42
42
 
43
- --color-light-blue: #e6f3ff;
44
- --color-blue: #0085ff;
45
- --color-dark-blue: #005cb9;
43
+ --th-color-light-blue: #e6f3ff;
44
+ --th-color-blue: #0085ff;
45
+ --th-color-dark-blue: #005cb9;
46
46
 
47
47
  /* Semantic Aliases - for common use cases */
48
48
  /* Text */
49
- --color-text-primary: var(--color-grey-800);
50
- --color-text-secondary: var(--color-grey-600);
51
- --color-text-muted: var(--color-grey-500);
52
- --color-text-inverse: var(--color-white);
49
+ --th-color-text-primary: var(--th-color-grey-800);
50
+ --th-color-text-secondary: var(--th-color-grey-600);
51
+ --th-color-text-muted: var(--th-color-grey-500);
52
+ --th-color-text-inverse: var(--th-color-white);
53
53
 
54
54
  /* Backgrounds */
55
- --color-background: var(--color-white);
56
- --color-background-muted: var(--color-grey-100);
57
- --color-background-hover: var(--color-grey-200);
55
+ --th-color-background: var(--th-color-white);
56
+ --th-color-background-muted: var(--th-color-grey-100);
57
+ --th-color-background-hover: var(--th-color-grey-200);
58
58
 
59
59
  /* Borders */
60
- --color-border: var(--color-grey-300);
61
- --color-border-light: var(--color-grey-200);
60
+ --th-color-border: var(--th-color-grey-300);
61
+ --th-color-border-light: var(--th-color-grey-200);
62
62
 
63
- --color-error-outline: var(--color-red);
64
- --color-success-outline: var(--color-green);
65
- --color-warning-outline: var(--color-yellow);
66
- --color-info-outline: var(--color-blue);
63
+ --th-color-error-outline: var(--th-color-red);
64
+ --th-color-success-outline: var(--th-color-green);
65
+ --th-color-warning-outline: var(--th-color-yellow);
66
+ --th-color-info-outline: var(--th-color-blue);
67
67
 
68
- --color-error-fill: var(--color-light-red);
69
- --color-success-fill: var(--color-light-green);
70
- --color-warning-fill: var(--color-light-yellow);
71
- --color-info-fill: var(--color-light-blue);
68
+ --th-color-error-fill: var(--th-color-light-red);
69
+ --th-color-success-fill: var(--th-color-light-green);
70
+ --th-color-warning-fill: var(--th-color-light-yellow);
71
+ --th-color-info-fill: var(--th-color-light-blue);
72
72
 
73
73
  /* Component-specific variables (mapped to palette) */
74
74
  /* Links */
75
- --color-link: var(--color-primary);
76
- --color-link-hover: var(--color-primary);
75
+ --th-color-link: var(--th-color-primary);
76
+ --th-color-link-hover: var(--th-color-primary);
77
77
  /* Buttons */
78
- --button-disabled-bg: var(--color-grey-200);
79
- --button-disabled-color: var(--color-grey-500);
78
+ --th-button-disabled-bg: var(--th-color-grey-200);
79
+ --th-button-disabled-color: var(--th-color-grey-500);
80
80
 
81
- --button-primary-bg: var(--color-primary);
82
- --button-primary-bg-hover: var(--color-dark-primary);
83
- --button-primary-color: var(--color-white);
81
+ --th-button-primary-bg: var(--th-color-primary);
82
+ --th-button-primary-bg-hover: var(--th-color-dark-primary);
83
+ --th-button-primary-color: var(--th-color-white);
84
84
 
85
- --button-secondary-bg: var(--color-white);
86
- --button-secondary-bg-hover: var(--color-light-primary);
87
- --button-secondary-color: var(--color-primary);
88
- --button-secondary-border: var(--color-primary);
85
+ --th-button-secondary-bg: var(--th-color-white);
86
+ --th-button-secondary-bg-hover: var(--th-color-light-primary);
87
+ --th-button-secondary-color: var(--th-color-primary);
88
+ --th-button-secondary-border: var(--th-color-primary);
89
89
 
90
- --button-alternate-bg: var(--color-blue);
91
- --button-alternate-bg-hover: var(--color-dark-blue);
92
- --button-alternate-color: var(--color-white);
90
+ --th-button-alternate-bg: var(--th-color-blue);
91
+ --th-button-alternate-bg-hover: var(--th-color-dark-blue);
92
+ --th-button-alternate-color: var(--th-color-white);
93
93
 
94
- --button-destructive-bg: var(--color-red);
95
- --button-destructive-bg-hover: var(--color-dark-red);
96
- --button-destructive-color: var(--color-white);
94
+ --th-button-destructive-bg: var(--th-color-red);
95
+ --th-button-destructive-bg-hover: var(--th-color-dark-red);
96
+ --th-button-destructive-color: var(--th-color-white);
97
97
 
98
- --button-confirmation-bg: var(--color-green);
99
- --button-confirmation-bg-hover: var(--color-dark-green);
100
- --button-confirmation-color: var(--color-white);
98
+ --th-button-confirmation-bg: var(--th-color-green);
99
+ --th-button-confirmation-bg-hover: var(--th-color-dark-green);
100
+ --th-button-confirmation-color: var(--th-color-white);
101
101
 
102
102
  /* Cards */
103
- --th-card-bg: var(--color-white);
104
- --th-card-border: var(--color-border);
105
- --th-card-title-color: var(--color-text-primary);
106
- --th-card-subtitle-color: var(--color-text-secondary);
107
- --th-card-text-color: var(--color-text-secondary);
108
- --th-card-icon-color: var(--color-text-primary);
109
- --th-card-dismiss-color: var(--color-text-muted);
103
+ --th-card-bg: var(--th-color-white);
104
+ --th-card-border: var(--th-color-border);
105
+ --th-card-title-color: var(--th-color-text-primary);
106
+ --th-card-subtitle-color: var(--th-color-text-secondary);
107
+ --th-card-text-color: var(--th-color-text-secondary);
108
+ --th-card-icon-color: var(--th-color-text-primary);
109
+ --th-card-dismiss-color: var(--th-color-text-muted);
110
110
 
111
111
  /* Progress Bar */
112
- --progress-bar-fill-color: var(--color-primary);
113
- --progress-bar-track-color: var(--color-grey-200);
114
- --progress-bar-title-color: var(--color-text-primary);
115
- --progress-bar-label-color: var(--color-text-secondary);
112
+ --th-progress-bar-fill-color: var(--th-color-primary);
113
+ --th-progress-bar-track-color: var(--th-color-grey-200);
114
+ --th-progress-bar-title-color: var(--th-color-text-primary);
115
+ --th-progress-bar-label-color: var(--th-color-text-secondary);
116
116
 
117
117
  /* Shadow colors using opacity */
118
- --color-shadow: rgba(0, 0, 0, 0.1);
119
- --color-shadow-medium: rgba(0, 0, 0, 0.15);
118
+ --th-color-shadow: rgba(0, 0, 0, 0.1);
119
+ --th-color-shadow-medium: rgba(0, 0, 0, 0.15);
120
120
  }
121
121
 
122
122
  /* Dark Theme Overrides */
123
123
  [data-theme='dark'] {
124
124
  /* Text */
125
- --color-text-primary: var(--color-grey-100);
126
- --color-text-secondary: var(--color-grey-300);
127
- --color-text-muted: var(--color-grey-500);
125
+ --th-color-text-primary: var(--th-color-grey-100);
126
+ --th-color-text-secondary: var(--th-color-grey-300);
127
+ --th-color-text-muted: var(--th-color-grey-500);
128
128
 
129
129
  /* Backgrounds */
130
- --color-background: var(--color-grey-800);
131
- --color-background-muted: var(--color-grey-700);
132
- --color-background-hover: var(--color-grey-600);
130
+ --th-color-background: var(--th-color-grey-800);
131
+ --th-color-background-muted: var(--th-color-grey-700);
132
+ --th-color-background-hover: var(--th-color-grey-600);
133
133
 
134
134
  /* Borders */
135
- --color-border: var(--color-grey-700);
135
+ --th-color-border: var(--th-color-grey-700);
136
136
 
137
137
  /* Buttons */
138
- --button-primary-bg: var(--color-dark-primary);
139
- --button-primary-bg-hover: var(--color-primary);
138
+ --th-button-primary-bg: var(--th-color-dark-primary);
139
+ --th-button-primary-bg-hover: var(--th-color-primary);
140
140
 
141
- --button-secondary-bg: var(--color-grey-800);
142
- --button-secondary-bg-hover: var(--color-grey-700);
143
- --button-secondary-color: var(--color-primary);
141
+ --th-button-secondary-bg: var(--th-color-grey-800);
142
+ --th-button-secondary-bg-hover: var(--th-color-grey-700);
143
+ --th-button-secondary-color: var(--th-color-primary);
144
144
 
145
- --button-disabled-bg: var(--color-grey-700);
146
- --button-disabled-color: var(--color-grey-500);
145
+ --th-button-disabled-bg: var(--th-color-grey-700);
146
+ --th-button-disabled-color: var(--th-color-grey-500);
147
147
 
148
148
  /* Cards */
149
- --th-card-bg: var(--color-grey-700);
150
- --th-card-border: var(--color-grey-600);
151
- --th-card-title-color: var(--color-grey-100);
152
- --th-card-subtitle-color: var(--color-grey-300);
153
- --th-card-text-color: var(--color-grey-300);
154
- --th-card-icon-color: var(--color-grey-100);
155
- --th-card-dismiss-color: var(--color-grey-500);
149
+ --th-card-bg: var(--th-color-grey-700);
150
+ --th-card-border: var(--th-color-grey-600);
151
+ --th-card-title-color: var(--th-color-grey-100);
152
+ --th-card-subtitle-color: var(--th-color-grey-300);
153
+ --th-card-text-color: var(--th-color-grey-300);
154
+ --th-card-icon-color: var(--th-color-grey-100);
155
+ --th-card-dismiss-color: var(--th-color-grey-500);
156
156
 
157
157
  /* Progress Bar */
158
- --progress-bar-fill-color: var(--color-primary);
159
- --progress-bar-track-color: var(--color-grey-600);
160
- --progress-bar-title-color: var(--color-grey-100);
161
- --progress-bar-label-color: var(--color-grey-300);
158
+ --th-progress-bar-fill-color: var(--th-color-primary);
159
+ --th-progress-bar-track-color: var(--th-color-grey-600);
160
+ --th-progress-bar-title-color: var(--th-color-grey-100);
161
+ --th-progress-bar-label-color: var(--th-color-grey-300);
162
162
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@krumio/trailhand-ui",
3
- "version": "1.8.0",
3
+ "version": "1.8.1",
4
4
  "type": "module",
5
5
  "description": "Reusable web components built with Lit Element",
6
6
  "main": "./dist/index.js",