@widergy/energy-ui 3.131.0 → 3.132.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.
package/CHANGELOG.md CHANGED
@@ -1,3 +1,10 @@
1
+ # [3.132.0](https://github.com/widergy/energy-ui/compare/v3.131.0...v3.132.0) (2026-01-26)
2
+
3
+
4
+ ### Features
5
+
6
+ * [OUG] label tokens ([#748](https://github.com/widergy/energy-ui/issues/748)) ([5c122d4](https://github.com/widergy/energy-ui/commit/5c122d43e8d3b61839211bb97424cea1af300f76))
7
+
1
8
  # [3.131.0](https://github.com/widergy/energy-ui/compare/v3.130.1...v3.131.0) (2026-01-22)
2
9
 
3
10
 
@@ -30,39 +30,39 @@ const VARIANTS = exports.VARIANTS = {
30
30
  [VARIANTS_NAMES.TD]: 'td'
31
31
  };
32
32
  const VARIANTS_SIZES = exports.VARIANTS_SIZES = {
33
- [VARIANTS_NAMES.TITLE1]: '1.875rem',
34
- [VARIANTS_NAMES.TITLE2]: '1.5rem',
35
- [VARIANTS_NAMES.TITLE3]: '1.375rem',
36
- [VARIANTS_NAMES.SUBTITLE1]: '1.125rem',
37
- [VARIANTS_NAMES.SUBTITLE2]: '1rem',
38
- [VARIANTS_NAMES.BODY]: '1rem',
39
- [VARIANTS_NAMES.SMALL]: '0.875rem',
40
- [VARIANTS_NAMES.XSMALL]: '0.75rem',
41
- [VARIANTS_NAMES.TH]: '1rem',
42
- [VARIANTS_NAMES.TD]: '1rem'
33
+ [VARIANTS_NAMES.TITLE1]: 'var(--UT-label-size-title-1, 1.875rem)',
34
+ [VARIANTS_NAMES.TITLE2]: 'var(--UT-label-size-title-2, 1.5rem)',
35
+ [VARIANTS_NAMES.TITLE3]: 'var(--UT-label-size-title-3, 1.375rem)',
36
+ [VARIANTS_NAMES.SUBTITLE1]: 'var(--UT-label-size-subtitle-1, 1.125rem)',
37
+ [VARIANTS_NAMES.SUBTITLE2]: 'var(--UT-label-size-subtitle-2, 1rem)',
38
+ [VARIANTS_NAMES.BODY]: 'var(--UT-label-size-body, 1rem)',
39
+ [VARIANTS_NAMES.SMALL]: 'var(--UT-label-size-small, 0.875rem)',
40
+ [VARIANTS_NAMES.XSMALL]: 'var(--UT-label-size-xsmall, 0.75rem)',
41
+ [VARIANTS_NAMES.TH]: 'var(--UT-label-size-body, 1rem)',
42
+ [VARIANTS_NAMES.TD]: 'var(--UT-label-size-body, 1rem)'
43
43
  };
44
44
  const VARIANTS_LINE_HEIGHT = exports.VARIANTS_LINE_HEIGHT = {
45
- [VARIANTS_NAMES.TITLE1]: '100%',
46
- [VARIANTS_NAMES.TITLE2]: '100%',
47
- [VARIANTS_NAMES.TITLE3]: '100%',
48
- [VARIANTS_NAMES.SUBTITLE1]: '100%',
49
- [VARIANTS_NAMES.SUBTITLE2]: '1.375rem',
50
- [VARIANTS_NAMES.BODY]: '1.375rem',
51
- [VARIANTS_NAMES.SMALL]: '1.25rem',
52
- [VARIANTS_NAMES.XSMALL]: '1.125rem',
53
- [VARIANTS_NAMES.TH]: '1.375rem',
54
- [VARIANTS_NAMES.TD]: '1.375rem'
45
+ [VARIANTS_NAMES.TITLE1]: 'var(--UT-label-lh-heading, 100%)',
46
+ [VARIANTS_NAMES.TITLE2]: 'var(--UT-label-lh-heading, 100%)',
47
+ [VARIANTS_NAMES.TITLE3]: 'var(--UT-label-lh-heading, 100%)',
48
+ [VARIANTS_NAMES.SUBTITLE1]: 'var(--UT-label-lh-heading, 100%)',
49
+ [VARIANTS_NAMES.SUBTITLE2]: 'var(--UT-label-lh-body, 1.375rem)',
50
+ [VARIANTS_NAMES.BODY]: 'var(--UT-label-lh-body, 1.375rem)',
51
+ [VARIANTS_NAMES.SMALL]: 'var(--UT-label-lh-small, 1.25rem)',
52
+ [VARIANTS_NAMES.XSMALL]: 'var(--UT-label-lh-xsmall, 1.125rem)',
53
+ [VARIANTS_NAMES.TH]: 'var(--UT-label-lh-body, 1.375rem)',
54
+ [VARIANTS_NAMES.TD]: 'var(--UT-label-lh-body, 1.375rem)'
55
55
  };
56
56
  const WEIGHTS = exports.WEIGHTS = {
57
- thin: 100,
58
- extralight: 200,
59
- light: 300,
60
- regular: 400,
61
- medium: 500,
62
- semibold: 600,
63
- bold: 700,
64
- extrabold: 800,
65
- black: 900
57
+ thin: 'var(--UT-label-weight-thin, 100)',
58
+ extralight: 'var(--UT-label-weight-extralight, 200)',
59
+ light: 'var(--UT-label-weight-light, 300)',
60
+ regular: 'var(--UT-label-weight-regular, 400)',
61
+ medium: 'var(--UT-label-weight-medium, 500)',
62
+ semibold: 'var(--UT-label-weight-semibold, 600)',
63
+ bold: 'var(--UT-label-weight-bold, 700)',
64
+ extrabold: 'var(--UT-label-weight-extrabold, 800)',
65
+ black: 'var(--UT-label-weight-black, 900)'
66
66
  };
67
67
  const DEFAULT_PROPS = exports.DEFAULT_PROPS = {
68
68
  colorTheme: _Palette.COLOR_THEMES.dark,
@@ -71,39 +71,39 @@ const retrieveStyle = _ref2 => {
71
71
  '& h1, & h2, & h3, & h4, & h5, & h6': {
72
72
  color: darkTextColor,
73
73
  fontWeight: _constants.WEIGHTS.medium,
74
- lineHeight: 1,
75
- margin: '0 0 8px 0'
74
+ lineHeight: 'var(--UT-label-lh-heading, 1)',
75
+ margin: '0 0 var(--UT-label-markdown-margin-md, 8px) 0'
76
76
  },
77
77
  '& h1': {
78
- fontSize: '1.875em'
78
+ fontSize: 'var(--UT-label-size-title-1, 1.875em)'
79
79
  },
80
80
  '& h2': {
81
- fontSize: '1.5em'
81
+ fontSize: 'var(--UT-label-size-title-2, 1.5em)'
82
82
  },
83
83
  '& h3': {
84
- fontSize: '1.375em'
84
+ fontSize: 'var(--UT-label-size-title-3, 1.375em)'
85
85
  },
86
86
  '& h4': {
87
- fontSize: '1.125em'
87
+ fontSize: 'var(--UT-label-size-subtitle-1, 1.125em)'
88
88
  },
89
89
  '& h5': {
90
- fontSize: '1em',
91
- margin: '0 0 12px 0'
90
+ fontSize: 'var(--UT-label-size-subtitle-2, 1em)',
91
+ margin: '0 0 var(--UT-label-markdown-margin-md, 12px) 0'
92
92
  },
93
93
  '& h6': {
94
94
  color: grayTextColor,
95
- fontSize: '1em',
96
- margin: '0 0 12px 0'
95
+ fontSize: 'var(--UT-label-size-body, 1em)',
96
+ margin: '0 0 var(--UT-label-markdown-margin-md, 12px) 0'
97
97
  },
98
98
  '& table': {
99
99
  border: "1px solid ".concat(theme.Palette[_Palette.COLOR_THEMES.light][_Palette.COLOR_SHADES.shade04]),
100
100
  borderCollapse: 'collapse',
101
- margin: '0 0 24px 0',
101
+ margin: '0 0 var(--UT-label-markdown-margin-xl, 24px) 0',
102
102
  width: '100%'
103
103
  },
104
104
  '& th, & td': {
105
105
  border: "1px solid ".concat(theme.Palette[_Palette.COLOR_THEMES.light][_Palette.COLOR_SHADES.shade04]),
106
- padding: '8px 12px',
106
+ padding: 'var(--UT-label-markdown-padding-sm, 8px) var(--UT-label-markdown-padding-md, 12px)',
107
107
  textAlign: 'left'
108
108
  },
109
109
  '& th': {
@@ -112,30 +112,30 @@ const retrieveStyle = _ref2 => {
112
112
  fontWeight: _constants.WEIGHTS.medium
113
113
  },
114
114
  '& p': {
115
- margin: '0 0 12px 0'
115
+ margin: '0 0 var(--UT-label-markdown-margin-md, 12px) 0'
116
116
  },
117
117
  '& ol': {
118
- paddingLeft: 24,
118
+ paddingLeft: 'var(--UT-label-markdown-padding-xl, 24px)',
119
119
  textAlign: 'start'
120
120
  },
121
121
  '& ul, & ol': {
122
- margin: '0 0 24px 0'
122
+ margin: '0 0 var(--UT-label-markdown-margin-xl, 24px) 0'
123
123
  },
124
124
  '& ul:not(.contains-task-list)': {
125
- paddingLeft: 24,
125
+ paddingLeft: 'var(--UT-label-markdown-padding-xl, 24px)',
126
126
  textAlign: 'start'
127
127
  },
128
128
  '& pre': {
129
129
  backgroundColor: theme.Palette[_Palette.COLOR_THEMES.light][_Palette.COLOR_SHADES.shade03],
130
- borderRadius: 8,
131
- fontSize: '0.875em',
132
- lineHeight: '1.25em',
133
- margin: '0 0 24px 0',
134
- padding: '12px 16px',
130
+ borderRadius: 'var(--UT-radius-md, 8px)',
131
+ fontSize: 'var(--UT-label-size-small, 0.875em)',
132
+ lineHeight: 'var(--UT-label-lh-small, 1.25em)',
133
+ margin: '0 0 var(--UT-label-markdown-margin-xl, 24px) 0',
134
+ padding: 'var(--UT-label-markdown-padding-sm, 12px) var(--UT-label-markdown-padding-md, 16px)',
135
135
  whiteSpace: 'pre-wrap'
136
136
  },
137
137
  '& dl': {
138
- margin: '0 0 24px 0'
138
+ margin: '0 0 var(--UT-label-markdown-margin-xl, 24px) 0'
139
139
  },
140
140
  '& dd': {
141
141
  fontSize: 'inherit',
@@ -146,28 +146,25 @@ const retrieveStyle = _ref2 => {
146
146
  fontSize: _constants.VARIANTS_SIZES.small,
147
147
  fontWeight: _constants.WEIGHTS.semibold
148
148
  },
149
- '& dl + dl': {
150
- marginTop: -12
151
- },
152
149
  '& dt + dt, & dt + dd, & dd + dd': {
153
150
  marginTop: 12
154
151
  },
155
152
  '& hr': {
156
153
  borderColor: theme.Palette[_Palette.COLOR_THEMES.gray][_Palette.COLOR_SHADES.shade01],
157
154
  borderTop: 0,
158
- margin: '8px 0 24px'
155
+ margin: 'var(--UT-label-markdown-margin-sm, 8px) 0 var(--UT-label-markdown-margin-xl, 24px)'
159
156
  },
160
157
  '& li + li': {
161
- marginTop: 12
158
+ marginTop: 'var(--UT-label-markdown-margin-md, 12px)'
162
159
  },
163
160
  '& li > ul': {
164
- marginTop: 8
161
+ marginTop: 'var(--UT-label-markdown-margin-sm, 8px)'
165
162
  },
166
163
  '& li::marker': {
167
164
  color: theme.Palette[_Palette.COLOR_THEMES.gray][_Palette.COLOR_SHADES.shade01]
168
165
  },
169
166
  '& li > ul > li + li': {
170
- marginTop: 8
167
+ marginTop: 'var(--UT-label-markdown-margin-sm, 8px)'
171
168
  },
172
169
  '& li p': {
173
170
  margin: 0
@@ -176,17 +173,17 @@ const retrieveStyle = _ref2 => {
176
173
  fontSize: 'inherit'
177
174
  },
178
175
  '& sup > a': {
179
- fontSize: '0.75em'
176
+ fontSize: 'var(--UT-label-size-xsmall, 0.75em)'
180
177
  },
181
178
  '& img, & video, & audio': {
182
- borderRadius: 8,
183
- margin: '0 0 24px 0'
179
+ borderRadius: 'var(--UT-radius-md, 8px)',
180
+ margin: '0 0 var(--UT-label-markdown-margin-xl, 24px) 0'
184
181
  },
185
182
  '& .contains-task-list': {
186
183
  display: 'flex',
187
184
  flexDirection: 'column',
188
- gridGap: '12px',
189
- margin: '0 0 24px 0',
185
+ gridGap: 'var(--gap-md, 12px)',
186
+ margin: '0 0 var(--UT-label-markdown-margin-xl, 24px) 0',
190
187
  paddingLeft: 0,
191
188
  '& li': {
192
189
  margin: 0
@@ -43,25 +43,40 @@ const baseTokens = exports.baseTokens = {
43
43
  'font-size-400': '1rem',
44
44
  'font-size-500': '1.125rem',
45
45
  'font-size-600': '1.25rem',
46
+ 'font-size-650': '1.375rem',
46
47
  'font-size-700': '1.5rem',
47
48
  'font-size-800': '1.875rem',
48
49
  'font-size-900': '2.5rem',
49
50
  'font-size-1000': '3rem',
50
51
  'font-size-1100': '4rem',
51
- 'font-weight-regular': '400',
52
- 'font-weight-medium': '500',
53
- 'font-weight-semibold': '600',
54
- 'font-weight-bold': '700',
55
- 'font-lh-100': '',
56
- 'font-lh-110': '',
57
- 'font-lh-120': '',
58
- 'font-lh-140': '',
59
- 'font-lh-150': '',
60
- 'font-lh-170': ''
52
+ 'font-weight-100': '100',
53
+ 'font-weight-200': '200',
54
+ 'font-weight-300': '300',
55
+ 'font-weight-400': '400',
56
+ 'font-weight-500': '500',
57
+ 'font-weight-600': '600',
58
+ 'font-weight-700': '700',
59
+ 'font-weight-800': '800',
60
+ 'font-weight-900': '900',
61
+ 'font-lh-100': '1.0rem',
62
+ 'font-lh-120': '1.2rem',
63
+ 'font-lh-140': '1.4rem',
64
+ 'font-lh-150': '1.5rem',
65
+ 'font-lh-170': '1.7rem',
66
+ 'legacy-font-lh-full': '100%',
67
+ 'legacy-font-lh-100': '1.125rem',
68
+ 'legacy-font-lh-120': '1.25rem',
69
+ 'legacy-font-lh-140': '1.375rem',
70
+ 'radius-100': '4px',
71
+ 'radius-200': '8px',
72
+ 'radius-300': '12px',
73
+ 'radius-400': '16px',
74
+ 'radius-500': '24px',
75
+ 'radius-full': '9999px'
61
76
  },
62
77
  semantic: {
63
78
  'padding-2xs': 'spacing-2',
64
- 'padding-xs': ' spacing-3',
79
+ 'padding-xs': 'spacing-3',
65
80
  'padding-sm': 'spacing-4',
66
81
  'padding-md': 'spacing-5',
67
82
  'padding-lg': 'spacing-7',
@@ -77,37 +92,35 @@ const baseTokens = exports.baseTokens = {
77
92
  'gap-3xl': 'spacing-9',
78
93
  'font-heading-size-1': 'font-size-800',
79
94
  'font-heading-size-2': 'font-size-700',
80
- 'font-heading-size-3': 'font-size-600',
95
+ 'font-heading-size-3': 'font-size-650',
81
96
  'font-heading-size-4': 'font-size-500',
82
97
  'font-heading-size-5': 'font-size-400',
83
98
  'font-heading-size-6': 'font-size-500',
84
- 'font-heading-weight-regular': 'font-weight-regular',
85
- 'font-heading-weight-medium': 'font-weight-medium',
86
- 'font-heading-lh': '',
87
99
  'font-body-size-sm': 'font-size-200',
88
100
  'font-body-size-md': 'font-size-300',
89
101
  'font-body-size-lg': 'font-size-400',
90
- 'font-body-weight-regular': 'font-weight-regular',
91
- 'font-body-weight-medium': 'font-weight-medium',
92
- 'font-body-weight-semibold': 'font-weight-semibold',
93
- 'font-body-weight-bold': 'font-weight-bold',
94
- 'font-body-lh-sm': '',
95
- 'font-body-lh-md': '',
96
- 'font-body-lh-lg': '',
97
102
  'font-metric-size-sm': 'font-size-300',
98
103
  'font-metric-size-md': 'font-size-400',
99
104
  'font-metric-size-lg': 'font-size-500',
100
- 'font-metric-weight-regular': 'font-weight-regular',
101
- 'font-metric-weight-medium': 'font-weight-medium',
102
- 'font-metric-lh': '',
103
105
  'font-action-size-sm': 'font-size-200',
104
106
  'font-action-size-md': 'font-size-300',
105
- 'font-action-weight': 'font-weight-medium',
106
- 'font-action-lh': '',
107
107
  'font-label-size-sm': 'font-size-200',
108
108
  'font-label-size-md': 'font-size-300',
109
- 'font-label-weight': 'font-weight-regular',
110
- 'font-label-lh': '',
109
+ 'font-weight-thin': 'font-weight-100',
110
+ 'font-weight-extralight': 'font-weight-200',
111
+ 'font-weight-light': 'font-weight-300',
112
+ 'font-weight-regular': 'font-weight-400',
113
+ 'font-weight-medium': 'font-weight-500',
114
+ 'font-weight-semibold': 'font-weight-600',
115
+ 'font-weight-bold': 'font-weight-700',
116
+ 'font-weight-extrabold': 'font-weight-800',
117
+ 'font-weight-black': 'font-weight-900',
118
+ 'font-lh-reset': 'font-lh-100',
119
+ 'font-lh-heading': 'legacy-font-lh-full',
120
+ 'font-lh-body': 'legacy-font-lh-140',
121
+ 'font-lh-caption': 'font-lh-170',
122
+ 'legacy-font-lh-small': 'legacy-font-lh-120',
123
+ 'legacy-font-lh-xsmall': 'legacy-font-lh-100',
111
124
  'size-control-2xs': 'size-5',
112
125
  'size-control-xs': 'size-7',
113
126
  'size-control-sm': 'size-8',
@@ -115,11 +128,52 @@ const baseTokens = exports.baseTokens = {
115
128
  'size-control-lg': 'size-10',
116
129
  'size-control-xl': 'size-11',
117
130
  'size-control-2xl': 'size-12',
118
- 'size-control-3xl': 'size-13'
131
+ 'size-control-3xl': 'size-13',
132
+ 'radius-sm': 'radius-100',
133
+ 'radius-md': 'radius-200',
134
+ 'radius-lg': 'radius-300',
135
+ 'radius-xl': 'radius-500'
119
136
  },
120
137
  component: {
121
138
  'UT-button-height-sm': 'size-control-sm',
122
139
  'UT-button-height-md': 'size-control-md',
123
- 'UT-button-height-lg': 'size-control-lg'
140
+ 'UT-button-height-lg': 'size-control-lg',
141
+ 'UT-button-padding-x-sm': 'padding-sm',
142
+ 'UT-button-padding-x-md': 'padding-md',
143
+ 'UT-button-padding-x-lg': 'padding-lg',
144
+ 'UT-button-gap-sm': 'gap-xs',
145
+ 'UT-button-gap-md': 'gap-sm',
146
+ 'UT-button-label-size': 'font-label-size-md',
147
+ 'UT-button-label-weight': 'font-weight-600',
148
+ 'UT-button-label-lh': 'font-lh-reset',
149
+ 'UT-label-size-title-1': 'font-heading-size-1',
150
+ 'UT-label-size-title-2': 'font-heading-size-2',
151
+ 'UT-label-size-title-3': 'font-heading-size-3',
152
+ 'UT-label-size-subtitle-1': 'font-heading-size-4',
153
+ 'UT-label-size-subtitle-2': 'font-heading-size-5',
154
+ 'UT-label-size-body': 'font-body-size-lg',
155
+ 'UT-label-size-small': 'font-body-size-md',
156
+ 'UT-label-size-xsmall': 'font-body-size-sm',
157
+ 'UT-label-lh-heading': 'font-lh-heading',
158
+ 'UT-label-lh-body': 'font-lh-body',
159
+ 'UT-label-lh-small': 'legacy-font-lh-small',
160
+ 'UT-label-lh-xsmall': 'legacy-font-lh-xsmall',
161
+ 'UT-label-weight-thin': 'font-weight-thin',
162
+ 'UT-label-weight-extralight': 'font-weight-extralight',
163
+ 'UT-label-weight-light': 'font-weight-light',
164
+ 'UT-label-weight-regular': 'font-weight-regular',
165
+ 'UT-label-weight-medium': 'font-weight-medium',
166
+ 'UT-label-weight-semibold': 'font-weight-semibold',
167
+ 'UT-label-weight-bold': 'font-weight-bold',
168
+ 'UT-label-weight-extrabold': 'font-weight-extrabold',
169
+ 'UT-label-weight-black': 'font-weight-black',
170
+ 'UT-label-markdown-margin-sm': 'padding-xs',
171
+ 'UT-label-markdown-margin-md': 'padding-sm',
172
+ 'UT-label-markdown-margin-lg': 'padding-md',
173
+ 'UT-label-markdown-margin-xl': 'padding-lg',
174
+ 'UT-label-markdown-padding-sm': 'padding-xs',
175
+ 'UT-label-markdown-padding-md': 'padding-sm',
176
+ 'UT-label-markdown-padding-lg': 'padding-md',
177
+ 'UT-label-markdown-padding-xl': 'padding-lg'
124
178
  }
125
179
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@widergy/energy-ui",
3
- "version": "3.131.0",
3
+ "version": "3.132.0",
4
4
  "description": "Widergy Web Components",
5
5
  "author": "widergy",
6
6
  "license": "MIT",