@solexllc/usx-theme 0.1.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 (16) hide show
  1. package/README.md +92 -0
  2. package/build.js +132 -0
  3. package/dist/_hooks.scss +277 -0
  4. package/dist/theme-manifest.json +2262 -0
  5. package/dist/theme.css +275 -0
  6. package/dist/tokens.css +22 -0
  7. package/dist/tokens.js +30 -0
  8. package/package.json +49 -0
  9. package/src/_variables.scss +1406 -0
  10. package/src/primitives/color.json +7 -0
  11. package/src/primitives/radius.json +7 -0
  12. package/src/primitives/spacing.json +7 -0
  13. package/src/primitives/typography.json +7 -0
  14. package/src/system-colors.generated.js +620 -0
  15. package/src/theme-manifest.js +587 -0
  16. package/src/tokens.scss +3 -0
package/dist/theme.css ADDED
@@ -0,0 +1,275 @@
1
+ /* GENERATED by build.js from theme-manifest.js — do not edit. */
2
+ :root {
3
+ --usx-color-primary: #005ea2;
4
+ --usx-color-primary-lighter: #d9e8f6;
5
+ --usx-color-primary-light: #73b3e7;
6
+ --usx-color-primary-vivid: #0050d8;
7
+ --usx-color-primary-dark: #1a4480;
8
+ --usx-color-primary-darker: #162e51;
9
+ --usx-color-primary-hover: var(--usx-color-primary-dark);
10
+ --usx-color-primary-active: var(--usx-color-primary-darker);
11
+ --usx-color-secondary: #d83933;
12
+ --usx-color-secondary-lighter: #f3e1e4;
13
+ --usx-color-secondary-light: #f2938c;
14
+ --usx-color-secondary-vivid: #e41d3d;
15
+ --usx-color-secondary-dark: #b50909;
16
+ --usx-color-secondary-darker: #8b0a03;
17
+ --usx-color-secondary-hover: var(--usx-color-secondary-dark);
18
+ --usx-color-secondary-active: var(--usx-color-secondary-darker);
19
+ --usx-color-accent-cool: #00bde3;
20
+ --usx-color-accent-cool-lighter: #e1f3f8;
21
+ --usx-color-accent-cool-light: #97d4ea;
22
+ --usx-color-accent-cool-dark: #28a0cb;
23
+ --usx-color-accent-cool-darker: #07648d;
24
+ --usx-color-accent-cool-hover: var(--usx-color-accent-cool-dark);
25
+ --usx-color-accent-cool-active: var(--usx-color-accent-cool-darker);
26
+ --usx-color-accent-warm: #fa9441;
27
+ --usx-color-accent-warm-lighter: #f2e4d4;
28
+ --usx-color-accent-warm-light: #ffbc78;
29
+ --usx-color-accent-warm-dark: #c05600;
30
+ --usx-color-accent-warm-darker: #775540;
31
+ --usx-color-accent-warm-hover: var(--usx-color-accent-warm-dark);
32
+ --usx-color-accent-warm-active: var(--usx-color-accent-warm-darker);
33
+ --usx-color-base: #71767a;
34
+ --usx-color-base-lightest: #f0f0f0;
35
+ --usx-color-base-lighter: #dfe1e2;
36
+ --usx-color-base-light: #a9aeb1;
37
+ --usx-color-base-dark: #565c65;
38
+ --usx-color-base-darker: #3d4551;
39
+ --usx-color-base-darkest: #1b1b1b;
40
+ --usx-color-base-ink: #1b1b1b;
41
+ --usx-color-base-hover: var(--usx-color-base-dark);
42
+ --usx-color-base-active: var(--usx-color-base-darker);
43
+ --usx-color-info: #00bde3;
44
+ --usx-color-info-lighter: #e7f6f8;
45
+ --usx-color-info-light: #99deea;
46
+ --usx-color-info-dark: #009ec1;
47
+ --usx-color-info-darker: #2e6276;
48
+ --usx-color-warning: #ffbe2e;
49
+ --usx-color-warning-lighter: #faf3d1;
50
+ --usx-color-warning-light: #fee685;
51
+ --usx-color-warning-dark: #e5a000;
52
+ --usx-color-warning-darker: #936f38;
53
+ --usx-color-success: #00a91c;
54
+ --usx-color-success-lighter: #ecf3ec;
55
+ --usx-color-success-light: #70e17b;
56
+ --usx-color-success-dark: #008817;
57
+ --usx-color-success-darker: #216e1f;
58
+ --usx-color-error: #d54309;
59
+ --usx-color-error-lighter: #f4e3db;
60
+ --usx-color-error-light: #f39268;
61
+ --usx-color-error-dark: #b50909;
62
+ --usx-color-error-darker: #6f3331;
63
+ --usx-color-emergency: #9c3d10;
64
+ --usx-color-emergency-dark: #332d29;
65
+ --usx-color-disabled: #757575;
66
+ --usx-color-disabled-lighter: #c9c9c9;
67
+ --usx-color-disabled-light: #919191;
68
+ --usx-color-disabled-dark: #454545;
69
+ --usx-color-disabled-darker: #1b1b1b;
70
+ --usx-color-focus: #2491ff;
71
+ --usx-color-visited: #54278f;
72
+ --usx-surface-1: #ffffff;
73
+ --usx-surface-2: #e6e6e6;
74
+ --usx-surface-3: #f0f0f0;
75
+ --usx-color-border: #c9c9c9;
76
+ --usx-color-beta: #2e8540;
77
+ --usx-color-test: #7800af;
78
+ --usx-color-dev: #ee9a2d;
79
+ --usx-text-ink: #1b1b1b;
80
+ --usx-text-muted: #565c65;
81
+ --usx-text-subtle: #71767a;
82
+ --usx-text-inverse: #ffffff;
83
+ --usx-spacing-xs: 0.25rem;
84
+ --usx-spacing-sm: 0.5rem;
85
+ --usx-spacing-md: 1rem;
86
+ --usx-spacing-lg: 1.5rem;
87
+ --usx-spacing-xl: 2rem;
88
+ --usx-radius-sm: 0.25rem;
89
+ --usx-radius-md: 0.5rem;
90
+ --usx-radius-lg: 1rem;
91
+ --usx-radius-xl: 2rem;
92
+ --usx-radius-full: 100%;
93
+ --usx-radius-box: 1rem;
94
+ --usx-radius-field: 0;
95
+ --usx-radius-button: 0.25rem;
96
+ --usx-radius-selector: 2px;
97
+ --usx-radius-none: 0;
98
+ --usx-accordion-radius: var(--usx-radius-none);
99
+ --usx-alert-radius: var(--usx-radius-none);
100
+ --usx-input-radius: var(--usx-radius-field);
101
+ --usx-textarea-radius: var(--usx-radius-field);
102
+ --usx-code-radius: var(--usx-radius-box);
103
+ --usx-summary-box-radius: var(--usx-radius-box);
104
+ --usx-hero-callout-radius: var(--usx-radius-box);
105
+ --usx-image-radius: var(--usx-radius-box);
106
+ --usx-tag-radius: var(--usx-radius-selector);
107
+ --usx-checkable-radius: var(--usx-radius-selector);
108
+ --usx-checkable-tile-radius: 0.25rem;
109
+ --usx-misc-banner-badge-radius: 6px;
110
+ --usx-border-width-sm: 1px;
111
+ --usx-border-width-md: 2px;
112
+ --usx-border-width-lg: 0.25rem;
113
+ --usx-border-width-xl: 0.5rem;
114
+ --usx-border-width-inputs: var(--usx-border-width-sm);
115
+ --usx-task-list-inner-border-width: var(--usx-border-width-sm);
116
+ --usx-task-list-outer-border-width: var(--usx-border-width-md);
117
+ --usx-step-indicator-segment-bar-width: var(--usx-border-width-xl);
118
+ --usx-accordion-border-width: var(--usx-border-width-lg);
119
+ --usx-button-outline-border-width: var(--usx-border-width-md);
120
+ --usx-switch-border-width: 2px;
121
+ --usx-file-input-border-width: var(--usx-border-width-inputs);
122
+ --usx-file-input-item-border-width: var(--usx-border-width-sm);
123
+ --usx-range-slider-border-width: var(--usx-border-width-md);
124
+ --usx-font-family: Source Sans Pro Web, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif;
125
+ --usx-font-family-heading: var(--usx-font-family);
126
+ --usx-font-size-base: 1rem;
127
+ --usx-font-size-h1: 2.5rem;
128
+ --usx-font-size-h2: 2rem;
129
+ --usx-font-size-h3: 1.75rem;
130
+ --usx-font-size-h4: 1.5rem;
131
+ --usx-font-size-h5: 1.25rem;
132
+ --usx-font-size-h6: 1rem;
133
+ --usx-font-weight-regular: 400;
134
+ --usx-font-weight-bold: 700;
135
+ --usx-line-height-base: 1.5;
136
+ --usx-line-height-heading: 1.2;
137
+ --usx-attribution-primary-font-weight: 600;
138
+ --usx-attribution-secondary-font-size: 0.875rem;
139
+ --usx-avatar-content-font-weight: 600;
140
+ --usx-avatar-font-size-sm: 0.875rem;
141
+ --usx-avatar-font-size-lg: 1.25rem;
142
+ --usx-avatar-font-size-xl: 1.5rem;
143
+ --usx-calendar-date-font-size: 1.13rem;
144
+ --usx-code-font-size: 0.875rem;
145
+ --usx-misc-banner-font-size: 1.07rem;
146
+ --usx-modal-heading-font-size: 1.34rem;
147
+ --usx-tag-line-height: 1.6;
148
+ --usx-task-list-link-font-size: 1.31rem;
149
+ --usx-link-text: #005ea2;
150
+ --usx-link-text-visited: var(--usx-color-visited);
151
+ --usx-link-text-dark: #e6e6e6;
152
+ --usx-link-text-visited-dark: #e6e6e6;
153
+ --usx-summary-box-link-text-visited: var(--usx-color-visited);
154
+ --usx-summary-box-bg: #e7f6f8;
155
+ --usx-summary-box-border-color: #99deea;
156
+ --usx-summary-box-text: #1b1b1b;
157
+ --usx-summary-box-link-text: #005ea2;
158
+ --usx-summary-box-link-text-hover: #1a4480;
159
+ --usx-accordion-bg: #f0f0f0;
160
+ --usx-accordion-bg-hover: #e6e6e6;
161
+ --usx-accordion-content-bg: #ffffff;
162
+ --usx-accordion-text: var(--usx-text-ink);
163
+ --usx-accordion-content-text: var(--usx-text-ink);
164
+ --usx-accordion-icon-position: 1.25rem auto;
165
+ --usx-accordion-icon-padding-start: 3.5rem;
166
+ --usx-accordion-icon-padding-end: 1.25rem;
167
+ --usx-logo-display: block;
168
+ --usx-logo-inverse-display: none;
169
+ --usx-banner-bg: #dfe1e2;
170
+ --usx-banner-text: #1b1b1b;
171
+ --usx-banner-button-text: #005ea2;
172
+ --usx-banner-chevron-text: #005ea2;
173
+ --usx-carousel-dot-bg: #c0c0c0;
174
+ --usx-carousel-dot-bg-hover: #a0a0a0;
175
+ --usx-carousel-dot-bg-active: #808080;
176
+ --usx-carousel-focus: var(--usx-color-focus);
177
+ --usx-step-indicator-bg: var(--usx-surface-1);
178
+ --usx-step-indicator-segment-pending-border: var(--usx-color-base-light);
179
+ --usx-task-list-link-text: var(--usx-link-text);
180
+ --usx-clickable-focus: var(--usx-color-focus);
181
+ --usx-clickable-text-hover: #005ea2;
182
+ --usx-misc-banner-focus: #9bdaf1;
183
+ --usx-checkable-tile-border: var(--usx-color-border);
184
+ --usx-task-list-border: var(--usx-color-border);
185
+ --usx-file-input-border: var(--usx-color-border);
186
+ --usx-file-input-item-border: var(--usx-color-border);
187
+ --usx-file-input-preview-bg: #d9e8f6;
188
+ --usx-file-input-preview-text: #1b1b1b;
189
+ --usx-task-list-bg-hover: var(--usx-surface-2);
190
+ --usx-checkable-bg: var(--usx-surface-1);
191
+ --usx-checkable-border: var(--usx-text-ink);
192
+ --usx-sidenav-bg-hover: var(--usx-surface-2);
193
+ --usx-sidenav-border: var(--usx-color-border);
194
+ --usx-header-border: transparent;
195
+ --usx-header-bg: transparent;
196
+ --usx-header-text: var(--usx-text-ink);
197
+ --usx-header-nav-bg: #ffffff;
198
+ --usx-header-nav-bg-mobile: #ffffff;
199
+ --usx-header-nav-link-text: var(--usx-text-muted);
200
+ --usx-header-nav-link-text-mobile: var(--usx-header-nav-link-text);
201
+ --usx-header-nav-link-text-hover: var(--usx-color-primary);
202
+ --usx-header-nav-link-text-hover-mobile: var(--usx-header-nav-link-text-hover);
203
+ --usx-header-secondary-link-text: var(--usx-text-subtle);
204
+ --usx-header-secondary-link-text-hover: var(--usx-color-primary);
205
+ --usx-header-nav-link-bg-hover: var(--usx-surface-2);
206
+ --usx-header-nav-top-border: var(--usx-color-border);
207
+ --usx-header-nav-bottom-border: transparent;
208
+ --usx-footer-border: transparent;
209
+ --usx-footer-primary-section-border: transparent;
210
+ --usx-footer-secondary-section-border: transparent;
211
+ --usx-footer-text: var(--usx-text-ink);
212
+ --usx-footer-link-text: var(--usx-color-primary);
213
+ --usx-footer-link-text-hover: var(--usx-color-primary-dark);
214
+ --usx-footer-secondary-link-text: var(--usx-color-primary);
215
+ --usx-footer-secondary-link-text-hover: var(--usx-color-primary-dark);
216
+ --usx-footer-heading-text: var(--usx-text-ink);
217
+ --usx-footer-heading-secondary-text: var(--usx-footer-heading-text);
218
+ --usx-page-bg: var(--usx-surface-1);
219
+ --usx-page-text: var(--usx-text-ink);
220
+ --usx-section-bg: transparent;
221
+ --usx-section-text: var(--usx-text-ink);
222
+ --usx-table-bg-hover: var(--usx-surface-2);
223
+ --usx-table-selected-bg: var(--usx-surface-3);
224
+ --usx-table-bg: var(--usx-surface-1);
225
+ --usx-table-header-bg: var(--usx-surface-2);
226
+ --usx-table-stripe-bg: var(--usx-surface-3);
227
+ --usx-table-border: var(--usx-color-border);
228
+ --usx-table-placeholder-text: var(--usx-text-subtle);
229
+ --usx-table-sorted-column-bg: var(--usx-color-accent-cool);
230
+ --usx-table-grouped-row-bg: var(--usx-surface-3);
231
+ --usx-table-grouped-row-text: var(--usx-text-ink);
232
+ --usx-tooltip-bg: #1b1b1b;
233
+ --usx-tooltip-text: #ffffff;
234
+ --usx-icon-list-icon-text: #005ea2;
235
+ --usx-date-picker-button-icon-color: var(--usx-text-ink);
236
+ --usx-date-picker-button-hover-active-bg: #a9aeb1;
237
+ --usx-combo-box-selected-bg: #005ea2;
238
+ --usx-range-slider-track-bg: #f0f0f0;
239
+ --usx-range-slider-track-border: #3d4551;
240
+ --usx-range-slider-thumb-bg: #f0f0f0;
241
+ --usx-range-slider-thumb-border: #3d4551;
242
+ --usx-range-slider-focus: var(--usx-color-focus);
243
+ --usx-in-page-nav-bg: transparent;
244
+ --usx-in-page-nav-text: var(--usx-text-ink);
245
+ --usx-in-page-nav-border: var(--usx-color-border);
246
+ --usx-in-page-nav-link-text: var(--usx-link-text);
247
+ --usx-in-page-nav-link-text-hover: var(--usx-link-text-hover);
248
+ --usx-in-page-nav-current-text: var(--usx-text-ink);
249
+ --usx-in-page-nav-bar: var(--usx-color-primary);
250
+ --usx-breadcrumb-bg: transparent;
251
+ --usx-breadcrumb-text: var(--usx-text-ink);
252
+ --usx-breadcrumb-link-text: var(--usx-link-text);
253
+ --usx-breadcrumb-link-text-hover: var(--usx-link-text-hover);
254
+ --usx-breadcrumb-current-text: var(--usx-text-ink);
255
+ --usx-process-list-heading-text: var(--usx-text-ink);
256
+ --usx-process-list-border: #d9e8f6;
257
+ --usx-process-list-counter-text: var(--usx-text-ink);
258
+ --usx-process-list-counter-border: var(--usx-text-ink);
259
+ --usx-process-list-counter-ring: var(--usx-surface-1);
260
+ --usx-collection-meta-text: var(--usx-text-subtle);
261
+ --usx-collection-description-text: var(--usx-text-ink);
262
+ --usx-pagination-link-text: var(--usx-link-text);
263
+ --usx-pagination-link-text-hover: var(--usx-link-text-hover);
264
+ --usx-pagination-current-bg: var(--usx-color-primary);
265
+ --usx-pagination-current-text: #ffffff;
266
+ --usx-pagination-bg: transparent;
267
+ --usx-pagination-text: var(--usx-text-ink);
268
+ --usx-pagination-button-border: var(--usx-color-border);
269
+ --usx-modal-bg: #ffffff;
270
+ --usx-modal-text: #1b1b1b;
271
+ --usx-modal-close-text: #71767a;
272
+ --usx-modal-close-text-hover: #1b1b1b;
273
+ --usx-language-selector-menu-bg: var(--usx-color-primary-darker);
274
+ --usx-language-selector-menu-text: #ffffff;
275
+ }
package/dist/tokens.css ADDED
@@ -0,0 +1,22 @@
1
+ :root {
2
+ --color-primary: #2563eb;
3
+ --color-secondary: #7c3aed;
4
+ --color-background: #f8fafc;
5
+ --color-surface: #ffffff;
6
+ --color-text: #0f172a;
7
+ --spacing-xs: 0.25rem;
8
+ --spacing-sm: 0.5rem;
9
+ --spacing-md: 1rem;
10
+ --spacing-lg: 1.5rem;
11
+ --spacing-xl: 2rem;
12
+ --typography-fontFamilyBase: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
13
+ --typography-fontSizeBase: 1rem;
14
+ --typography-fontWeightRegular: 400;
15
+ --typography-fontWeightBold: 700;
16
+ --typography-lineHeightBase: 1.5;
17
+ --radius-none: 0;
18
+ --radius-sm: 0.125rem;
19
+ --radius-md: 0.375rem;
20
+ --radius-lg: 0.5rem;
21
+ --radius-full: 9999px;
22
+ }
package/dist/tokens.js ADDED
@@ -0,0 +1,30 @@
1
+ module.exports = {
2
+ "color": {
3
+ "primary": "#2563eb",
4
+ "secondary": "#7c3aed",
5
+ "background": "#f8fafc",
6
+ "surface": "#ffffff",
7
+ "text": "#0f172a"
8
+ },
9
+ "spacing": {
10
+ "xs": "0.25rem",
11
+ "sm": "0.5rem",
12
+ "md": "1rem",
13
+ "lg": "1.5rem",
14
+ "xl": "2rem"
15
+ },
16
+ "typography": {
17
+ "fontFamilyBase": "Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif",
18
+ "fontSizeBase": "1rem",
19
+ "fontWeightRegular": "400",
20
+ "fontWeightBold": "700",
21
+ "lineHeightBase": "1.5"
22
+ },
23
+ "radius": {
24
+ "none": "0",
25
+ "sm": "0.125rem",
26
+ "md": "0.375rem",
27
+ "lg": "0.5rem",
28
+ "full": "9999px"
29
+ }
30
+ };
package/package.json ADDED
@@ -0,0 +1,49 @@
1
+ {
2
+ "name": "@solexllc/usx-theme",
3
+ "version": "0.1.0",
4
+ "description": "Design tokens package for USX.",
5
+ "license": "MIT",
6
+ "repository": {
7
+ "type": "git",
8
+ "url": "https://github.com/solexconsulting/usx.git",
9
+ "directory": "packages/usx-theme"
10
+ },
11
+ "publishConfig": {
12
+ "access": "public"
13
+ },
14
+ "type": "module",
15
+ "main": "dist/tokens.js",
16
+ "style": "dist/tokens.css",
17
+ "exports": {
18
+ ".": {
19
+ "sass": "./src/tokens.scss",
20
+ "style": "./dist/tokens.css",
21
+ "default": "./dist/tokens.js"
22
+ },
23
+ "./variables": {
24
+ "sass": "./src/_variables.scss"
25
+ },
26
+ "./hooks": {
27
+ "sass": "./dist/_hooks.scss"
28
+ },
29
+ "./theme.css": "./dist/theme.css",
30
+ "./theme-manifest": {
31
+ "default": "./src/theme-manifest.js"
32
+ },
33
+ "./theme-manifest.json": "./dist/theme-manifest.json",
34
+ "./system-colors": {
35
+ "default": "./src/system-colors.generated.js"
36
+ },
37
+ "./tokens.css": "./dist/tokens.css"
38
+ },
39
+ "files": [
40
+ "dist",
41
+ "src",
42
+ "build.js"
43
+ ],
44
+ "scripts": {
45
+ "build": "node build.js",
46
+ "dev": "node build.js --watch",
47
+ "generate:system-colors": "node scripts/generate-system-colors.js"
48
+ }
49
+ }