@gsk_poc/untitled-ui-base 0.1.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 (89) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +44 -0
  3. package/components/application/app-navigation/base-components/featured-cards.demo.tsx +86 -0
  4. package/components/application/app-navigation/base-components/featured-cards.story.tsx +49 -0
  5. package/components/application/app-navigation/header-navigation.demo.tsx +59 -0
  6. package/components/application/app-navigation/header-navigation.story.tsx +23 -0
  7. package/components/application/app-navigation/sidebar-navigation.demo.tsx +409 -0
  8. package/components/application/app-navigation/sidebar-navigation.story.tsx +47 -0
  9. package/components/application/carousel/carousel.demo.tsx +107 -0
  10. package/components/application/carousel/carousel.story.tsx +21 -0
  11. package/components/application/charts/activity-gauges.demo.tsx +251 -0
  12. package/components/application/charts/activity-gauges.story.tsx +27 -0
  13. package/components/application/charts/bar-charts.demo.tsx +506 -0
  14. package/components/application/charts/bar-charts.story.tsx +36 -0
  15. package/components/application/charts/line-charts.demo.tsx +604 -0
  16. package/components/application/charts/line-charts.story.tsx +43 -0
  17. package/components/application/charts/pie-charts.demo.tsx +193 -0
  18. package/components/application/charts/pie-charts.story.tsx +30 -0
  19. package/components/application/charts/progress-circles.demo.tsx +110 -0
  20. package/components/application/charts/progress-circles.story.tsx +33 -0
  21. package/components/application/charts/radar-charts.demo.tsx +203 -0
  22. package/components/application/charts/radar-charts.story.tsx +18 -0
  23. package/components/application/date-picker/date-picker.demo.tsx +217 -0
  24. package/components/application/date-picker/date-picker.story.tsx +44 -0
  25. package/components/application/file-upload/file-upload.demo.tsx +292 -0
  26. package/components/application/file-upload/file-upload.story.tsx +70 -0
  27. package/components/application/loading-indicator/loading-indicator.demo.tsx +73 -0
  28. package/components/application/loading-indicator/loading-indicator.story.tsx +22 -0
  29. package/components/application/pagination/pagination.demo.tsx +104 -0
  30. package/components/application/pagination/pagination.story.tsx +54 -0
  31. package/components/application/table/table.demo.tsx +1038 -0
  32. package/components/application/table/table.story.tsx +119 -0
  33. package/components/application/tabs/tabs.demo.tsx +322 -0
  34. package/components/application/tabs/tabs.story.tsx +43 -0
  35. package/components/base/avatar/avatar.demo.tsx +865 -0
  36. package/components/base/avatar/avatar.story.tsx +27 -0
  37. package/components/base/badges/badge-groups.demo.tsx +357 -0
  38. package/components/base/badges/badge-groups.story.tsx +25 -0
  39. package/components/base/badges/badges.demo.tsx +497 -0
  40. package/components/base/badges/badges.story.tsx +83 -0
  41. package/components/base/button-group/button-group.demo.tsx +131 -0
  42. package/components/base/button-group/button-group.story.tsx +16 -0
  43. package/components/base/buttons/app-store-buttons.demo.tsx +129 -0
  44. package/components/base/buttons/app-store-buttons.story.tsx +13 -0
  45. package/components/base/buttons/buttons.demo.tsx +1022 -0
  46. package/components/base/buttons/buttons.story.tsx +42 -0
  47. package/components/base/buttons/social-buttons.demo.tsx +432 -0
  48. package/components/base/buttons/social-buttons.story.tsx +20 -0
  49. package/components/base/checkbox/checkbox.demo.tsx +62 -0
  50. package/components/base/checkbox/checkbox.story.tsx +18 -0
  51. package/components/base/dropdown/dropdown.demo.tsx +137 -0
  52. package/components/base/dropdown/dropdown.story.tsx +22 -0
  53. package/components/base/input/inputs.demo.tsx +758 -0
  54. package/components/base/input/inputs.story.tsx +52 -0
  55. package/components/base/pin-input/pin-input.demo.tsx +126 -0
  56. package/components/base/pin-input/pin-input.story.tsx +22 -0
  57. package/components/base/progress-indicators/progress-indicators.demo.tsx +54 -0
  58. package/components/base/progress-indicators/progress-indicators.story.tsx +57 -0
  59. package/components/base/radio-buttons/radio-buttons.demo.tsx +77 -0
  60. package/components/base/radio-buttons/radio-buttons.story.tsx +19 -0
  61. package/components/base/select/select.demo.tsx +936 -0
  62. package/components/base/select/select.story.tsx +43 -0
  63. package/components/base/slider/slider.demo.tsx +19 -0
  64. package/components/base/slider/slider.story.tsx +26 -0
  65. package/components/base/tags/tags.demo.tsx +341 -0
  66. package/components/base/tags/tags.story.tsx +28 -0
  67. package/components/base/textarea/textarea.demo.tsx +25 -0
  68. package/components/base/textarea/textarea.story.tsx +15 -0
  69. package/components/base/toggle/toggle.demo.tsx +76 -0
  70. package/components/base/toggle/toggle.story.tsx +23 -0
  71. package/components/base/tooltip/tooltip.demo.tsx +125 -0
  72. package/components/base/tooltip/tooltip.story.tsx +21 -0
  73. package/components/foundations/featured-icon/featured-icon.demo.tsx +160 -0
  74. package/components/foundations/featured-icon/featured-icon.story.tsx +25 -0
  75. package/components/shared-assets/credit-card/credit-card.demo.tsx +106 -0
  76. package/components/shared-assets/credit-card/credit-card.story.tsx +41 -0
  77. package/dist/index.d.mts +1417 -0
  78. package/dist/index.d.ts +1417 -0
  79. package/dist/index.js +10435 -0
  80. package/dist/index.js.map +1 -0
  81. package/dist/index.mjs +10345 -0
  82. package/dist/index.mjs.map +1 -0
  83. package/package.json +126 -0
  84. package/styles/globals.css +65 -0
  85. package/styles/theme.css +430 -0
  86. package/styles/tokens-mapped.css +233 -0
  87. package/styles/tokens.css +807 -0
  88. package/styles/typography.css +430 -0
  89. package/tokens/design-tokens.dtcg.json +3515 -0
package/styles/tokens-mapped.css ADDED
@@ -0,0 +1,233 @@
1
+ /**
2
+ * Token Bridge: Maps GSK design tokens to Untitled UI variable names
3
+ * This file translates between your Figma token structure and Untitled UI's expected CSS variables
4
+ * Auto-generated - do not edit manually
5
+ */
6
+
7
+ :root {
8
+ /* Base colors */
9
+ --color-white: var(--colors-base-white);
10
+ --color-black: var(--colors-base-black);
11
+ --color-transparent: var(--colors-base-transparent);
12
+
13
+ /* Gray scale - using gray-light-mode as default */
14
+ --color-gray-25: var(--colors-gray-light-mode-25);
15
+ --color-gray-50: var(--colors-gray-light-mode-50);
16
+ --color-gray-100: var(--colors-gray-light-mode-100);
17
+ --color-gray-200: var(--colors-gray-light-mode-200);
18
+ --color-gray-300: var(--colors-gray-light-mode-300);
19
+ --color-gray-400: var(--colors-gray-light-mode-400);
20
+ --color-gray-500: var(--colors-gray-light-mode-500);
21
+ --color-gray-600: var(--colors-gray-light-mode-600);
22
+ --color-gray-700: var(--colors-gray-light-mode-700);
23
+ --color-gray-800: var(--colors-gray-light-mode-800);
24
+ --color-gray-900: var(--colors-gray-light-mode-900);
25
+ --color-gray-950: var(--colors-gray-light-mode-950);
26
+
27
+ /* Brand colors */
28
+ --color-brand-25: var(--colors-brand-25);
29
+ --color-brand-50: var(--colors-brand-50);
30
+ --color-brand-100: var(--colors-brand-100);
31
+ --color-brand-200: var(--colors-brand-200);
32
+ --color-brand-300: var(--colors-brand-300);
33
+ --color-brand-400: var(--colors-brand-400);
34
+ --color-brand-500: var(--colors-brand-500);
35
+ --color-brand-600: var(--colors-brand-600);
36
+ --color-brand-700: var(--colors-brand-700);
37
+ --color-brand-800: var(--colors-brand-800);
38
+ --color-brand-900: var(--colors-brand-900);
39
+ --color-brand-950: var(--colors-brand-950);
40
+
41
+ /* Error colors */
42
+ --color-error-25: var(--colors-error-25);
43
+ --color-error-50: var(--colors-error-50);
44
+ --color-error-100: var(--colors-error-100);
45
+ --color-error-200: var(--colors-error-200);
46
+ --color-error-300: var(--colors-error-300);
47
+ --color-error-400: var(--colors-error-400);
48
+ --color-error-500: var(--colors-error-500);
49
+ --color-error-600: var(--colors-error-600);
50
+ --color-error-700: var(--colors-error-700);
51
+ --color-error-800: var(--colors-error-800);
52
+ --color-error-900: var(--colors-error-900);
53
+ --color-error-950: var(--colors-error-950);
54
+
55
+ /* Warning colors */
56
+ --color-warning-25: var(--colors-warning-25);
57
+ --color-warning-50: var(--colors-warning-50);
58
+ --color-warning-100: var(--colors-warning-100);
59
+ --color-warning-200: var(--colors-warning-200);
60
+ --color-warning-300: var(--colors-warning-300);
61
+ --color-warning-400: var(--colors-warning-400);
62
+ --color-warning-500: var(--colors-warning-500);
63
+ --color-warning-600: var(--colors-warning-600);
64
+ --color-warning-700: var(--colors-warning-700);
65
+ --color-warning-800: var(--colors-warning-800);
66
+ --color-warning-900: var(--colors-warning-900);
67
+ --color-warning-950: var(--colors-warning-950);
68
+
69
+ /* Success colors */
70
+ --color-success-25: var(--colors-success-25);
71
+ --color-success-50: var(--colors-success-50);
72
+ --color-success-100: var(--colors-success-100);
73
+ --color-success-200: var(--colors-success-200);
74
+ --color-success-300: var(--colors-success-300);
75
+ --color-success-400: var(--colors-success-400);
76
+ --color-success-500: var(--colors-success-500);
77
+ --color-success-600: var(--colors-success-600);
78
+ --color-success-700: var(--colors-success-700);
79
+ --color-success-800: var(--colors-success-800);
80
+ --color-success-900: var(--colors-success-900);
81
+ --color-success-950: var(--colors-success-950);
82
+
83
+ /* Text colors - semantic mapping */
84
+ --color-text-primary: var(--colors-text-text-primary-900);
85
+ --color-text-primary-on-brand: var(--colors-text-text-primary-on-brand);
86
+ --color-text-secondary: var(--colors-text-text-secondary-700);
87
+ --color-text-secondary-hover: var(--colors-text-text-secondary-hover);
88
+ --color-text-tertiary: var(--colors-text-text-tertiary-600);
89
+ --color-text-tertiary-hover: var(--colors-text-text-tertiary-hover);
90
+ --color-text-quaternary: var(--colors-text-text-quaternary-500);
91
+ --color-text-white: var(--colors-text-text-white);
92
+ --color-text-disabled: var(--colors-text-text-disabled);
93
+ --color-text-placeholder: var(--colors-text-text-placeholder);
94
+ --color-text-brand-primary: var(--colors-text-text-brand-primary-900);
95
+ --color-text-brand-secondary: var(--colors-text-text-brand-secondary-700);
96
+ --color-text-brand-tertiary: var(--colors-text-text-brand-tertiary-600);
97
+ --color-text-error-primary: var(--colors-text-text-error-primary-600);
98
+ --color-text-warning-primary: var(--colors-text-text-warning-primary-600);
99
+ --color-text-success-primary: var(--colors-text-text-success-primary-600);
100
+
101
+ /* Border colors - semantic mapping */
102
+ --color-border-primary: var(--colors-border-border-primary);
103
+ --color-border-secondary: var(--colors-border-border-secondary);
104
+ --color-border-tertiary: var(--colors-border-border-tertiary);
105
+ --color-border-disabled: var(--colors-border-border-disabled);
106
+ --color-border-brand: var(--colors-border-border-brand);
107
+ --color-border-error: var(--colors-border-border-error);
108
+
109
+ /* Foreground colors - semantic mapping */
110
+ --color-fg-primary: var(--colors-foreground-fg-primary-900);
111
+ --color-fg-secondary: var(--colors-foreground-fg-secondary-700);
112
+ --color-fg-tertiary: var(--colors-foreground-fg-tertiary-600);
113
+ --color-fg-quaternary: var(--colors-foreground-fg-quaternary-400);
114
+ --color-fg-white: var(--colors-foreground-fg-white);
115
+ --color-fg-disabled: var(--colors-foreground-fg-disabled);
116
+ --color-fg-brand-primary: var(--colors-foreground-fg-brand-primary-600);
117
+ --color-fg-brand-secondary: var(--colors-foreground-fg-brand-secondary-500);
118
+ --color-fg-error-primary: var(--colors-foreground-fg-error-primary);
119
+ --color-fg-error-secondary: var(--colors-foreground-fg-error-secondary);
120
+ --color-fg-warning-primary: var(--colors-foreground-fg-warning-primary);
121
+ --color-fg-success-primary: var(--colors-foreground-fg-success-primary);
122
+
123
+ /* Background colors - semantic mapping */
124
+ --color-bg-primary: var(--colors-background-bg-primary);
125
+ --color-bg-primary-hover: var(--colors-background-bg-primary-hover);
126
+ --color-bg-primary-solid: var(--colors-background-bg-primary-solid);
127
+ --color-bg-secondary: var(--colors-background-bg-secondary);
128
+ --color-bg-secondary-hover: var(--colors-background-bg-secondary-hover);
129
+ --color-bg-secondary-solid: var(--colors-background-bg-secondary-solid);
130
+ --color-bg-tertiary: var(--colors-background-bg-tertiary);
131
+ --color-bg-quaternary: var(--colors-background-bg-quaternary);
132
+ --color-bg-active: var(--colors-background-bg-active);
133
+ --color-bg-disabled: var(--colors-background-bg-disabled);
134
+ --color-bg-overlay: var(--colors-background-bg-overlay);
135
+ --color-bg-brand-primary: var(--colors-background-bg-brand-primary);
136
+ --color-bg-brand-secondary: var(--colors-background-bg-brand-secondary);
137
+ --color-bg-brand-solid: var(--colors-background-bg-brand-solid);
138
+ --color-bg-brand-solid-hover: var(--colors-background-bg-brand-solid-hover);
139
+ --color-bg-error-primary: var(--colors-background-bg-error-primary);
140
+ --color-bg-error-secondary: var(--colors-background-bg-error-secondary);
141
+ --color-bg-error-solid: var(--colors-background-bg-error-solid);
142
+ --color-bg-warning-primary: var(--colors-background-bg-warning-primary);
143
+ --color-bg-warning-secondary: var(--colors-background-bg-warning-secondary);
144
+ --color-bg-warning-solid: var(--colors-background-bg-warning-solid);
145
+ --color-bg-success-primary: var(--colors-background-bg-success-primary);
146
+ --color-bg-success-secondary: var(--colors-background-bg-success-secondary);
147
+ --color-bg-success-solid: var(--colors-background-bg-success-solid);
148
+
149
+ /* Focus ring */
150
+ --color-focus-ring: var(--colors-effects-focus-rings-focus-ring);
151
+ --color-focus-ring-error: var(--colors-effects-focus-rings-focus-ring-error);
152
+
153
+ /* Shadows */
154
+ --shadow-xs: 0px 1px 2px var(--colors-effects-shadows-shadow-xs);
155
+ --shadow-sm: 0px 1px 2px var(--colors-effects-shadows-shadow-sm-01), 0px 1px 3px var(--colors-effects-shadows-shadow-sm-02);
156
+ --shadow-md: 0px 2px 4px var(--colors-effects-shadows-shadow-md-01), 0px 4px 8px var(--colors-effects-shadows-shadow-md-02);
157
+ --shadow-lg: 0px 4px 6px var(--colors-effects-shadows-shadow-lg-01), 0px 10px 15px var(--colors-effects-shadows-shadow-lg-02), 0px 2px 4px var(--colors-effects-shadows-shadow-lg-03);
158
+ --shadow-xl: 0px 8px 10px var(--colors-effects-shadows-shadow-xl-01), 0px 20px 25px var(--colors-effects-shadows-shadow-xl-02), 0px 3px 4px var(--colors-effects-shadows-shadow-xl-03);
159
+ --shadow-2xl: 0px 25px 50px var(--colors-effects-shadows-shadow-2xl-01), 0px 10px 20px var(--colors-effects-shadows-shadow-2xl-02);
160
+ --shadow-3xl: 0px 35px 60px var(--colors-effects-shadows-shadow-3xl-01), 0px 15px 25px var(--colors-effects-shadows-shadow-3xl-02);
161
+
162
+ /* Spacing - direct mapping */
163
+ --spacing-0: var(--spacing-0-0px);
164
+ --spacing-1: var(--spacing-1-4px);
165
+ --spacing-2: var(--spacing-2-8px);
166
+ --spacing-3: var(--spacing-3-12px);
167
+ --spacing-4: var(--spacing-4-16px);
168
+ --spacing-5: var(--spacing-5-20px);
169
+ --spacing-6: var(--spacing-6-24px);
170
+ --spacing-8: var(--spacing-8-32px);
171
+ --spacing-10: var(--spacing-10-40px);
172
+ --spacing-12: var(--spacing-12-48px);
173
+ --spacing-16: var(--spacing-16-64px);
174
+ --spacing-20: var(--spacing-20-80px);
175
+ --spacing-24: var(--spacing-24-96px);
176
+ --spacing-32: var(--spacing-32-128px);
177
+ --spacing-40: var(--spacing-40-160px);
178
+ --spacing-48: var(--spacing-48-192px);
179
+
180
+
181
+ /* Typography */
182
+ --font-family-display: var(--font-family-font-family-display);
183
+ --font-family-body: var(--font-family-font-family-body);
184
+
185
+ --font-size-xs: var(--font-size-text-xs);
186
+ --font-size-sm: var(--font-size-text-sm);
187
+ --font-size-md: var(--font-size-text-md);
188
+ --font-size-lg: var(--font-size-text-lg);
189
+ --font-size-xl: var(--font-size-text-xl);
190
+ --font-size-display-xs: var(--font-size-display-xs);
191
+ --font-size-display-sm: var(--font-size-display-sm);
192
+ --font-size-display-md: var(--font-size-display-md);
193
+ --font-size-display-lg: var(--font-size-display-lg);
194
+ --font-size-display-xl: var(--font-size-display-xl);
195
+ --font-size-display-2xl: var(--font-size-display-2xl);
196
+
197
+ --line-height-xs: var(--line-height-text-xs);
198
+ --line-height-sm: var(--line-height-text-sm);
199
+ --line-height-md: var(--line-height-text-md);
200
+ --line-height-lg: var(--line-height-text-lg);
201
+ --line-height-xl: var(--line-height-text-xl);
202
+ --line-height-display-xs: var(--line-height-display-xs);
203
+ --line-height-display-sm: var(--line-height-display-sm);
204
+ --line-height-display-md: var(--line-height-display-md);
205
+ --line-height-display-lg: var(--line-height-display-lg);
206
+ --line-height-display-xl: var(--line-height-display-xl);
207
+ --line-height-display-2xl: var(--line-height-display-2xl);
208
+
209
+ /* Component-specific mappings */
210
+ --button-primary-bg: var(--component-colors-components-buttons-primary-button-primary-bg);
211
+ --button-primary-fg: var(--component-colors-components-buttons-primary-button-primary-fg);
212
+ --button-primary-border: var(--component-colors-components-buttons-primary-button-primary-border);
213
+ --button-secondary-fg: var(--component-colors-components-buttons-secondary-button-secondary-fg);
214
+ --button-tertiary-fg: var(--component-colors-components-buttons-tertiary-color-button-tertiary-color-fg);
215
+ --button-tertiary-error-fg: var(--component-colors-components-buttons-tertiary-error-button-tertiary-error-fg);
216
+ }
217
+
218
+ /* Dark mode mappings */
219
+ .dark-mode {
220
+ /* Gray colors in dark mode */
221
+ --color-gray-25: var(--colors-gray-dark-mode-25);
222
+ --color-gray-50: var(--colors-gray-dark-mode-50);
223
+ --color-gray-100: var(--colors-gray-dark-mode-100);
224
+ --color-gray-200: var(--colors-gray-dark-mode-200);
225
+ --color-gray-300: var(--colors-gray-dark-mode-300);
226
+ --color-gray-400: var(--colors-gray-dark-mode-400);
227
+ --color-gray-500: var(--colors-gray-dark-mode-500);
228
+ --color-gray-600: var(--colors-gray-dark-mode-600);
229
+ --color-gray-700: var(--colors-gray-dark-mode-700);
230
+ --color-gray-800: var(--colors-gray-dark-mode-800);
231
+ --color-gray-900: var(--colors-gray-dark-mode-900);
232
+ --color-gray-950: var(--colors-gray-dark-mode-950);
233
+ }