@orange-halo/components 1.0.0 → 2.0.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 (67) hide show
  1. package/dist/base.js +3 -3
  2. package/dist/oh-accordion.js +17 -17
  3. package/dist/oh-alert.js +15 -15
  4. package/dist/oh-badge.js +11 -11
  5. package/dist/oh-breadcrumb.js +8 -8
  6. package/dist/oh-button.d.ts +6 -0
  7. package/dist/oh-button.d.ts.map +1 -1
  8. package/dist/oh-button.js +105 -76
  9. package/dist/oh-button.js.map +1 -1
  10. package/dist/oh-card.js +28 -28
  11. package/dist/oh-checkbox-group.d.ts +8 -0
  12. package/dist/oh-checkbox-group.d.ts.map +1 -1
  13. package/dist/oh-checkbox-group.js +27 -13
  14. package/dist/oh-checkbox-group.js.map +1 -1
  15. package/dist/oh-checkbox.d.ts +9 -0
  16. package/dist/oh-checkbox.d.ts.map +1 -1
  17. package/dist/oh-checkbox.js +25 -9
  18. package/dist/oh-checkbox.js.map +1 -1
  19. package/dist/oh-container.d.ts +5 -5
  20. package/dist/oh-container.js +15 -15
  21. package/dist/oh-drawer.d.ts +7 -2
  22. package/dist/oh-drawer.d.ts.map +1 -1
  23. package/dist/oh-drawer.js +52 -25
  24. package/dist/oh-drawer.js.map +1 -1
  25. package/dist/oh-footer.js +4 -4
  26. package/dist/oh-hero.d.ts.map +1 -1
  27. package/dist/oh-hero.js +50 -51
  28. package/dist/oh-hero.js.map +1 -1
  29. package/dist/oh-icon.js +6 -6
  30. package/dist/oh-input.d.ts +9 -1
  31. package/dist/oh-input.d.ts.map +1 -1
  32. package/dist/oh-input.js +45 -33
  33. package/dist/oh-input.js.map +1 -1
  34. package/dist/oh-link.d.ts +1 -1
  35. package/dist/oh-link.js +15 -15
  36. package/dist/oh-modal.d.ts +8 -2
  37. package/dist/oh-modal.d.ts.map +1 -1
  38. package/dist/oh-modal.js +68 -65
  39. package/dist/oh-modal.js.map +1 -1
  40. package/dist/oh-navbar.d.ts.map +1 -1
  41. package/dist/oh-navbar.js +3 -4
  42. package/dist/oh-navbar.js.map +1 -1
  43. package/dist/oh-progress.d.ts.map +1 -1
  44. package/dist/oh-progress.js +20 -34
  45. package/dist/oh-progress.js.map +1 -1
  46. package/dist/oh-radio-group.d.ts +8 -0
  47. package/dist/oh-radio-group.d.ts.map +1 -1
  48. package/dist/oh-radio-group.js +27 -13
  49. package/dist/oh-radio-group.js.map +1 -1
  50. package/dist/oh-radio.d.ts +9 -0
  51. package/dist/oh-radio.d.ts.map +1 -1
  52. package/dist/oh-radio.js +26 -10
  53. package/dist/oh-radio.js.map +1 -1
  54. package/dist/oh-select.d.ts +8 -0
  55. package/dist/oh-select.d.ts.map +1 -1
  56. package/dist/oh-select.js +34 -20
  57. package/dist/oh-select.js.map +1 -1
  58. package/dist/oh-skip-link.d.ts.map +1 -1
  59. package/dist/oh-skip-link.js +13 -12
  60. package/dist/oh-skip-link.js.map +1 -1
  61. package/dist/oh-tabs.js +6 -6
  62. package/dist/oh-toggle.d.ts +5 -2
  63. package/dist/oh-toggle.d.ts.map +1 -1
  64. package/dist/oh-toggle.js +7 -9
  65. package/dist/oh-toggle.js.map +1 -1
  66. package/dist/styles/typography.js +46 -46
  67. package/package.json +7 -3
package/dist/styles/typography.js CHANGED
@@ -11,9 +11,9 @@ import { css } from "lit";
11
11
  export const typographyStyles = css `
12
12
  /* Base typography setup */
13
13
  :host {
14
- font-family: var(--oh-font-family-sans);
15
- font-size: var(--oh-font-size-base);
16
- line-height: var(--oh-font-line-height-normal);
14
+ font-family: var(--oh-typography-body-font-family);
15
+ font-size: var(--oh-typography-body-base-font-size);
16
+ line-height: var(--oh-typography-body-base-line-height);
17
17
  color: var(--oh-color-text-primary);
18
18
  -webkit-font-smoothing: antialiased;
19
19
  -moz-osx-font-smoothing: grayscale;
@@ -22,54 +22,54 @@ export const typographyStyles = css `
22
22
  /* Headings */
23
23
  h1,
24
24
  .oh-h1 {
25
- font-size: var(--oh-font-size-4xl);
26
- font-weight: var(--oh-font-weight-bold);
27
- line-height: var(--oh-font-line-height-tight);
25
+ font-size: var(--oh-typography-heading-h1-font-size);
26
+ font-weight: var(--oh-typography-heading-h1-font-weight);
27
+ line-height: var(--oh-typography-heading-h1-line-height);
28
28
  color: var(--oh-color-text-primary);
29
29
  margin: 0 0 var(--oh-spacing-4);
30
30
  }
31
31
 
32
32
  h2,
33
33
  .oh-h2 {
34
- font-size: var(--oh-font-size-3xl);
35
- font-weight: var(--oh-font-weight-bold);
36
- line-height: var(--oh-font-line-height-tight);
34
+ font-size: var(--oh-typography-heading-h2-font-size);
35
+ font-weight: var(--oh-typography-heading-h2-font-weight);
36
+ line-height: var(--oh-typography-heading-h2-line-height);
37
37
  color: var(--oh-color-text-primary);
38
38
  margin: 0 0 var(--oh-spacing-4);
39
39
  }
40
40
 
41
41
  h3,
42
42
  .oh-h3 {
43
- font-size: var(--oh-font-size-2xl);
44
- font-weight: var(--oh-font-weight-semibold);
45
- line-height: var(--oh-font-line-height-snug);
43
+ font-size: var(--oh-typography-heading-h3-font-size);
44
+ font-weight: var(--oh-typography-heading-h3-font-weight);
45
+ line-height: var(--oh-typography-heading-h3-line-height);
46
46
  color: var(--oh-color-text-primary);
47
47
  margin: 0 0 var(--oh-spacing-3);
48
48
  }
49
49
 
50
50
  h4,
51
51
  .oh-h4 {
52
- font-size: var(--oh-font-size-xl);
53
- font-weight: var(--oh-font-weight-semibold);
54
- line-height: var(--oh-font-line-height-snug);
52
+ font-size: var(--oh-typography-heading-h4-font-size);
53
+ font-weight: var(--oh-typography-heading-h4-font-weight);
54
+ line-height: var(--oh-typography-heading-h4-line-height);
55
55
  color: var(--oh-color-text-primary);
56
56
  margin: 0 0 var(--oh-spacing-3);
57
57
  }
58
58
 
59
59
  h5,
60
60
  .oh-h5 {
61
- font-size: var(--oh-font-size-lg);
62
- font-weight: var(--oh-font-weight-medium);
63
- line-height: var(--oh-font-line-height-normal);
61
+ font-size: var(--oh-typography-heading-h5-font-size);
62
+ font-weight: var(--oh-typography-heading-h5-font-weight);
63
+ line-height: var(--oh-typography-heading-h5-line-height);
64
64
  color: var(--oh-color-text-primary);
65
65
  margin: 0 0 var(--oh-spacing-2);
66
66
  }
67
67
 
68
68
  h6,
69
69
  .oh-h6 {
70
- font-size: var(--oh-font-size-base);
71
- font-weight: var(--oh-font-weight-medium);
72
- line-height: var(--oh-font-line-height-normal);
70
+ font-size: var(--oh-typography-heading-h6-font-size);
71
+ font-weight: var(--oh-typography-heading-h6-font-weight);
72
+ line-height: var(--oh-typography-heading-h6-line-height);
73
73
  color: var(--oh-color-text-primary);
74
74
  margin: 0 0 var(--oh-spacing-2);
75
75
  }
@@ -77,40 +77,40 @@ export const typographyStyles = css `
77
77
  /* Body text */
78
78
  p,
79
79
  .oh-body {
80
- font-size: var(--oh-font-size-base);
81
- font-weight: var(--oh-font-weight-normal);
82
- line-height: var(--oh-font-line-height-normal);
80
+ font-size: var(--oh-typography-body-base-font-size);
81
+ font-weight: var(--oh-typography-body-base-font-weight);
82
+ line-height: var(--oh-typography-body-base-line-height);
83
83
  color: var(--oh-color-text-secondary);
84
84
  margin: 0 0 var(--oh-spacing-4);
85
85
  }
86
86
 
87
87
  .oh-body-lg {
88
- font-size: var(--oh-font-size-lg);
89
- line-height: var(--oh-font-line-height-relaxed);
88
+ font-size: var(--oh-typography-body-lg-font-size);
89
+ line-height: var(--oh-typography-body-lg-line-height);
90
90
  }
91
91
 
92
92
  .oh-body-sm {
93
- font-size: var(--oh-font-size-sm);
93
+ font-size: var(--oh-typography-body-sm-font-size);
94
94
  }
95
95
 
96
96
  .oh-body-xs {
97
- font-size: var(--oh-font-size-xs);
97
+ font-size: var(--oh-typography-body-xs-font-size);
98
98
  }
99
99
 
100
100
  /* Labels */
101
101
  .oh-label {
102
- font-size: var(--oh-font-size-sm);
103
- font-weight: var(--oh-font-weight-medium);
104
- line-height: var(--oh-font-line-height-normal);
102
+ font-size: var(--oh-typography-label-base-font-size);
103
+ font-weight: var(--oh-typography-label-base-font-weight);
104
+ line-height: var(--oh-typography-label-base-line-height);
105
105
  color: var(--oh-color-text-primary);
106
106
  }
107
107
 
108
108
  .oh-label-lg {
109
- font-size: var(--oh-font-size-base);
109
+ font-size: var(--oh-typography-body-base-font-size);
110
110
  }
111
111
 
112
112
  .oh-label-sm {
113
- font-size: var(--oh-font-size-xs);
113
+ font-size: var(--oh-typography-label-sm-font-size);
114
114
  }
115
115
 
116
116
  /* Links - dashed underline with shrink animation */
@@ -119,7 +119,7 @@ export const typographyStyles = css `
119
119
  position: relative;
120
120
  color: var(--oh-color-brand-primary);
121
121
  text-decoration: none;
122
- font-weight: var(--oh-font-weight-semibold);
122
+ font-weight: var(--oh-typography-emphasis-font-weight);
123
123
  }
124
124
 
125
125
  a::after,
@@ -138,7 +138,7 @@ export const typographyStyles = css `
138
138
  transparent 8px
139
139
  );
140
140
  transform-origin: right;
141
- transition: transform var(--oh-motion-slow, 450ms) ease;
141
+ transition: transform var(--oh-motion-slow) ease;
142
142
  }
143
143
 
144
144
  a:hover::after,
@@ -149,7 +149,7 @@ export const typographyStyles = css `
149
149
  a:focus-visible,
150
150
  .oh-link:focus-visible {
151
151
  outline: none;
152
- background-color: var(--oh-color-surface-hover, rgba(0,0,0,0.05));
152
+ background-color: var(--oh-color-surface-hover);
153
153
  border-radius: 2px;
154
154
  padding: 0 0.25rem;
155
155
  margin: 0 -0.25rem;
@@ -164,19 +164,19 @@ export const typographyStyles = css `
164
164
  /* Code */
165
165
  code,
166
166
  .oh-code {
167
- font-family: var(--oh-font-family-mono);
168
- font-size: var(--oh-font-size-sm);
167
+ font-family: var(--oh-typography-code-font-family);
168
+ font-size: var(--oh-typography-code-font-size);
169
169
  background-color: var(--oh-color-surface-inset);
170
170
  padding: 0.125em 0.375em;
171
- border-radius: var(--oh-radius-xs);
171
+ border-radius: var(--oh-shape-tight);
172
172
  }
173
173
 
174
174
  pre {
175
- font-family: var(--oh-font-family-mono);
176
- font-size: var(--oh-font-size-sm);
175
+ font-family: var(--oh-typography-code-font-family);
176
+ font-size: var(--oh-typography-code-font-size);
177
177
  background-color: var(--oh-color-surface-inset);
178
178
  padding: var(--oh-spacing-4);
179
- border-radius: var(--oh-radius-sm);
179
+ border-radius: var(--oh-shape-compact);
180
180
  overflow-x: auto;
181
181
  margin: 0 0 var(--oh-spacing-4);
182
182
  }
@@ -213,19 +213,19 @@ export const typographyStyles = css `
213
213
 
214
214
  /* Font weight utilities */
215
215
  .oh-font-normal {
216
- font-weight: var(--oh-font-weight-normal);
216
+ font-weight: var(--oh-typography-body-base-font-weight);
217
217
  }
218
218
 
219
219
  .oh-font-medium {
220
- font-weight: var(--oh-font-weight-medium);
220
+ font-weight: var(--oh-typography-label-base-font-weight);
221
221
  }
222
222
 
223
223
  .oh-font-semibold {
224
- font-weight: var(--oh-font-weight-semibold);
224
+ font-weight: var(--oh-typography-control-font-weight);
225
225
  }
226
226
 
227
227
  .oh-font-bold {
228
- font-weight: var(--oh-font-weight-bold);
228
+ font-weight: var(--oh-typography-heading-h1-font-weight);
229
229
  }
230
230
  `;
231
231
  /**
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@orange-halo/components",
3
- "version": "1.0.0",
3
+ "version": "2.0.0",
4
4
  "description": "Web Components for Orange Halo Design System",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",
@@ -124,8 +124,12 @@
124
124
  "lit": "^3.2.1"
125
125
  },
126
126
  "peerDependencies": {
127
- "@orange-halo/tokens": "^1.0.0",
128
- "@orange-halo/utils": "^1.0.0"
127
+ "@orange-halo/tokens": "^2.0.0",
128
+ "@orange-halo/utils": "^1.1.0"
129
+ },
130
+ "devDependencies": {
131
+ "@orange-halo/tokens": "2.0.0",
132
+ "@orange-halo/utils": "1.1.0"
129
133
  },
130
134
  "publishConfig": {
131
135
  "access": "public"