@oscarrf2/goo-ds 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 (70) hide show
  1. package/README.md +163 -0
  2. package/package.json +60 -0
  3. package/src/components/Button/Button.css +107 -0
  4. package/src/components/Button/Button.tsx +82 -0
  5. package/src/components/Button/Button.types.ts +62 -0
  6. package/src/components/Button/index.ts +3 -0
  7. package/src/components/Cell/Cell.css +64 -0
  8. package/src/components/Cell/Cell.tsx +42 -0
  9. package/src/components/Cell/Cell.types.ts +42 -0
  10. package/src/components/Cell/index.ts +3 -0
  11. package/src/components/Codeblock/Codeblock.css +90 -0
  12. package/src/components/Codeblock/Codeblock.tsx +88 -0
  13. package/src/components/Codeblock/Codeblock.types.ts +42 -0
  14. package/src/components/Codeblock/index.ts +3 -0
  15. package/src/components/CoreText/CoreText.tsx +43 -0
  16. package/src/components/CoreText/CoreText.types.ts +56 -0
  17. package/src/components/CoreText/index.ts +2 -0
  18. package/src/components/Divider/Divider.css +38 -0
  19. package/src/components/Divider/Divider.tsx +35 -0
  20. package/src/components/Divider/Divider.types.ts +19 -0
  21. package/src/components/Divider/index.ts +3 -0
  22. package/src/components/InputImage/InputImage.css +212 -0
  23. package/src/components/InputImage/InputImage.tsx +314 -0
  24. package/src/components/InputImage/InputImage.types.ts +86 -0
  25. package/src/components/InputImage/index.ts +2 -0
  26. package/src/components/Sidebar/Sidebar.css +35 -0
  27. package/src/components/Sidebar/Sidebar.tsx +42 -0
  28. package/src/components/Sidebar/Sidebar.types.ts +24 -0
  29. package/src/components/Sidebar/index.ts +3 -0
  30. package/src/components/SidebarItem/SidebarItem.css +70 -0
  31. package/src/components/SidebarItem/SidebarItem.tsx +55 -0
  32. package/src/components/SidebarItem/SidebarItem.types.ts +39 -0
  33. package/src/components/SidebarItem/index.ts +3 -0
  34. package/src/components/Skeleton/Skeleton.css +25 -0
  35. package/src/components/Skeleton/Skeleton.tsx +41 -0
  36. package/src/components/Skeleton/Skeleton.types.ts +65 -0
  37. package/src/components/Skeleton/index.ts +5 -0
  38. package/src/components/Spacer/Spacer.tsx +31 -0
  39. package/src/components/Spacer/Spacer.types.ts +58 -0
  40. package/src/components/Spacer/index.ts +3 -0
  41. package/src/components/TabItem/TabItem.css +67 -0
  42. package/src/components/TabItem/TabItem.tsx +45 -0
  43. package/src/components/TabItem/TabItem.types.ts +35 -0
  44. package/src/components/TabItem/index.ts +3 -0
  45. package/src/components/Table/Table.css +16 -0
  46. package/src/components/Table/Table.tsx +39 -0
  47. package/src/components/Table/Table.types.ts +18 -0
  48. package/src/components/Table/index.ts +3 -0
  49. package/src/components/TableRow/TableRow.css +53 -0
  50. package/src/components/TableRow/TableRow.tsx +53 -0
  51. package/src/components/TableRow/TableRow.types.ts +41 -0
  52. package/src/components/TableRow/index.ts +3 -0
  53. package/src/components/Tabs/Tabs.css +11 -0
  54. package/src/components/Tabs/Tabs.tsx +37 -0
  55. package/src/components/Tabs/Tabs.types.ts +18 -0
  56. package/src/components/Tabs/index.ts +3 -0
  57. package/src/components/index.ts +15 -0
  58. package/src/compositions/index.ts +3 -0
  59. package/src/index.css +68 -0
  60. package/src/index.ts +4 -0
  61. package/src/styles/component-tokens.css +270 -0
  62. package/src/styles/component-tokens.current.css +3 -0
  63. package/src/styles/fonts.css +11 -0
  64. package/src/styles/global-tokens.css +257 -0
  65. package/src/styles/index.css +20 -0
  66. package/src/styles/number-tokens.css +72 -0
  67. package/src/styles/semantic-tokens.css +84 -0
  68. package/src/styles/style-tokens.css +219 -0
  69. package/src/styles/typography-tokens.css +50 -0
  70. package/src/styles.css +2 -0
package/src/styles/number-tokens.css ADDED
@@ -0,0 +1,72 @@
1
+ /* Auto-generated design tokens */
2
+ /* 2026-01-18T11:19:20.848Z */
3
+
4
+ /* number-tokens */
5
+ :root {
6
+ --size-0: 0px;
7
+ --size-4: 4px;
8
+ --size-8: 8px;
9
+ --size-12: 12px;
10
+ --size-16: 16px;
11
+ --size-20: 20px;
12
+ --size-24: 24px;
13
+ --size-28: 28px;
14
+ --size-32: 32px;
15
+ --size-176: 176px;
16
+ --size-192: 192px;
17
+ --size-208: 208px;
18
+ --size-36: 36px;
19
+ --size-40: 40px;
20
+ --size-44: 44px;
21
+ --size-48: 48px;
22
+ --size-56: 56px;
23
+ --size-64: 64px;
24
+ --size-80: 80px;
25
+ --size-96: 96px;
26
+ --size-112: 112px;
27
+ --size-128: 128px;
28
+ --size-144: 144px;
29
+ --size-160: 160px;
30
+ --size-224: 224px;
31
+ --size-240: 240px;
32
+ --size-256: 256px;
33
+ --size-288: 288px;
34
+ --size-320: 320px;
35
+ --size-384: 384px;
36
+ --size-448: 448px;
37
+ --size-512: 512px;
38
+ --size-576: 576px;
39
+ --size-672: 672px;
40
+ --size-768: 768px;
41
+ --size-896: 896px;
42
+ --size-1024: 1024px;
43
+ --size-1152: 1152px;
44
+ --size-1280: 1280px;
45
+ --size-1536: 1536px;
46
+ --size-640: 640px;
47
+ --strokeWidth-75: 1.5px;
48
+ --strokeWidth-50: 1.4px;
49
+ --strokeWidth-175: 2.2px;
50
+ --strokeWidth-150: 2px;
51
+ --strokeWidth-400: 4px;
52
+ --strokeWidth-0: 0px;
53
+ --strokeWidth-250: 2.8px;
54
+ --strokeWidth-100: 1.6px;
55
+ --strokeWidth-200: 2.4px;
56
+ --strokeWidth-25: 1.2px;
57
+ --strokeWidth-275: 3px;
58
+ --strokeWidth-10: 1px;
59
+ --strokeWidth-125: 1.8px;
60
+ --strokeWidth-225: 2.6px;
61
+ --size-6: 6px;
62
+ --size-2: 2px;
63
+ --size-1: 1px;
64
+ --radius-round: 999px;
65
+ --radius-250: 24px;
66
+ --radius-225: 20px;
67
+ --radius-200: 16px;
68
+ --radius-150: 12px;
69
+ --radius-100: 8px;
70
+ --radius-50: 4px;
71
+ --radius-0: 0px;
72
+ }
package/src/styles/semantic-tokens.css ADDED
@@ -0,0 +1,84 @@
1
+ /* Auto-generated design tokens */
2
+ /* 2026-01-18T11:19:20.848Z */
3
+
4
+ /* semantic-tokens */
5
+ :root {
6
+ --color-background-primary-default: var(--slate-900);
7
+ --color-background-primary-hover: var(--slate-800);
8
+ --color-background-primary-pressed: var(--slate-700);
9
+ --color-background-primary-disabled: var(--slate-500);
10
+ --color-background-secondary-default: var(--slate-100);
11
+ --color-background-secondary-hover: var(--slate-200);
12
+ --color-background-secondary-pressed: var(--slate-300);
13
+ --color-background-secondary-disabled: var(--slate-100);
14
+ --color-background-semantic-error-default: var(--red-600);
15
+ --color-background-semantic-error-hover: var(--red-700);
16
+ --color-background-semantic-error-pressed: var(--red-800);
17
+ --color-background-semantic-error-disabled: var(--red-400);
18
+ --color-background-neutral-default: var(--white-50);
19
+ --color-background-neutral-pressed: var(--slate-200);
20
+ --color-background-neutral-disabled: var(--slate-200);
21
+ --color-background-neutral-hover: var(--slate-100);
22
+ --color-stroke-primary-default: var(--slate-900);
23
+ --color-stroke-primary-active: var(--slate-950);
24
+ --color-stroke-primary-disabled: var(--slate-500);
25
+ --color-stroke-secondary-default: var(--slate-100);
26
+ --color-stroke-neutral-default: var(--slate-200);
27
+ --color-stroke-neutral-active: var(--slate-900);
28
+ --color-stroke-neutral-disabled: var(--slate-200);
29
+ --color-stroke-secondary-active: var(--slate-200);
30
+ --color-stroke-secondary-disabled: var(--slate-100);
31
+ --color-stroke-semantic-error-default: var(--red-600);
32
+ --color-stroke-semantic-error-active: var(--red-700);
33
+ --color-stroke-semantic-error-disabled: var(--red-400);
34
+ --color-text-disabled: var(--slate-500);
35
+ --color-text-inverse: var(--white-50);
36
+ --color-text-primary: var(--slate-900);
37
+ --color-background-interactive-neutral-hover: var(--slate-900-opacity-5);
38
+ --color-background-interactive-neutral-pressed: var(--slate-900-opacity-10);
39
+ --color-background-interactive-neutral-active: var(--slate-900-opacity-5);
40
+ --color-background-canvas-default: var(--slate-100);
41
+ --color-background-canvas-alt: var(--white-50);
42
+ --color-background-floating-light: var(--white-50);
43
+ --color-background-floating-dark: var(--slate-900);
44
+ --color-background-notification-default: var(--red-600);
45
+ --color-text-neutral-default: var(--slate-500);
46
+ --color-text-neutral-subtle: var(--slate-300);
47
+ --color-text-neutral-strong: var(--slate-700);
48
+ --color-text-error: var(--red-600);
49
+ --color-icon-primary: var(--slate-900);
50
+ --color-icon-neutral-default: var(--slate-500);
51
+ --color-icon-neutral-subtle: var(--slate-300);
52
+ --color-icon-neutral-strong: var(--slate-700);
53
+ --color-icon-inverse: var(--white-50);
54
+ --color-icon-disabled: var(--slate-500);
55
+ --color-icon-error: var(--red-600);
56
+ --color-overlay-default: var(--slate-900-opacity-50);
57
+ --color-surface-1: var(--white-50);
58
+ --color-surface-2: var(--slate-50);
59
+ --color-surface-3: var(--slate-100);
60
+ --color-surface-4: var(--slate-200);
61
+ --color-shadow-1: var(--slate-900-opacity-5);
62
+ --color-shadow-2: var(--slate-900-opacity-10);
63
+ --color-shadow-3: var(--slate-900-opacity-15);
64
+ --color-shadow-4: var(--slate-900-opacity-20);
65
+ --color-background-semantic-success-default: var(--green-600);
66
+ --color-background-semantic-success-hover: var(--green-700);
67
+ --color-background-semantic-success-pressed: var(--green-800);
68
+ --color-background-semantic-success-disabled: var(--green-400);
69
+ --color-background-semantic-info-default: var(--blue-500);
70
+ --color-background-semantic-info-hover: var(--blue-600);
71
+ --color-background-semantic-info-pressed: var(--blue-700);
72
+ --color-background-semantic-info-disabled: var(--blue-300);
73
+ --color-background-semantic-warning-default: var(--orange-400);
74
+ --color-background-semantic-warning-hover: var(--orange-500);
75
+ --color-background-semantic-warning-pressed: var(--orange-600);
76
+ --color-background-semantic-warning-disabled: var(--orange-300);
77
+ --color-background-semantic-info-light: var(--blue-100);
78
+ --color-background-semantic-success-light: var(--green-100);
79
+ --color-background-semantic-warning-light: var(--orange-100);
80
+ --color-background-semantic-error-light: var(--red-100);
81
+ --color-stroke-semantic-success-default: var(--green-600);
82
+ --color-stroke-semantic-success-active: var(--green-700);
83
+ --color-stroke-semantic-success-disabled: var(--green-400);
84
+ }
package/src/styles/style-tokens.css ADDED
@@ -0,0 +1,219 @@
1
+ /* Auto-generated design tokens */
2
+ /* 2026-01-18T11:19:20.850Z */
3
+
4
+ /* Effect Styles (alias → var, else literals) */
5
+ :root {
6
+ --shadow-down-1: 0px 2px 4px 0px rgba(15, 23, 42, 0.1);
7
+ --shadow-down-2: 0px 4px 8px 0px rgba(15, 23, 42, 0.1);
8
+ --shadow-down-3: 0px 6px 12px 0px rgba(15, 23, 42, 0.2);
9
+ --shadow-down-4: 0px 8px 16px 0px rgba(15, 23, 42, 0.2);
10
+ --shadow-up-1: 0px -2px 4px 0px rgba(15, 23, 42, 0.1);
11
+ --shadow-up-2: 0px -4px 8px 0px rgba(15, 23, 42, 0.1);
12
+ --shadow-up-3: 0px -6px 12px 0px rgba(15, 23, 42, 0.2);
13
+ --shadow-up-4: 0px -8px 16px 0px rgba(15, 23, 42, 0.2);
14
+ --shadow-right-1: 2px 0px 4px 0px rgba(15, 23, 42, 0.1);
15
+ --shadow-right-2: 4px 0px 8px 0px rgba(15, 23, 42, 0.1);
16
+ --shadow-right-3: 6px 0px 12px 0px rgba(15, 23, 42, 0.2);
17
+ --shadow-right-4: 8px 0px 16px 0px rgba(15, 23, 42, 0.2);
18
+ --shadow-left-1: -2px 0px 4px 0px rgba(15, 23, 42, 0.1);
19
+ --shadow-left-2: -4px 0px 8px 0px rgba(15, 23, 42, 0.1);
20
+ --shadow-left-3: -6px 0px 12px 0px rgba(15, 23, 42, 0.2);
21
+ --shadow-left-4: -8px 0px 16px 0px rgba(15, 23, 42, 0.2);
22
+ }
23
+
24
+ /* Text Styles as classes (alias → var when possible; else literals) */
25
+ .headline-lg-bold {
26
+ font-family: var(--font-family-secondary);
27
+ font-weight: var(--font-weight-bold);
28
+ font-size: 48px;
29
+ line-height: 48px;
30
+ letter-spacing: 0%;
31
+ }
32
+
33
+ .headline-md-bold {
34
+ font-family: var(--font-family-secondary);
35
+ font-weight: var(--font-weight-bold);
36
+ font-size: 36px;
37
+ line-height: 40px;
38
+ letter-spacing: 0%;
39
+ }
40
+
41
+ .headline-sm-bold {
42
+ font-family: var(--font-family-secondary);
43
+ font-weight: var(--font-weight-bold);
44
+ font-size: 24px;
45
+ line-height: 32px;
46
+ letter-spacing: 0%;
47
+ }
48
+
49
+ .headline-sm-medium {
50
+ font-family: var(--font-family-secondary);
51
+ font-weight: var(--font-weight-medium);
52
+ font-size: 24px;
53
+ line-height: 32px;
54
+ letter-spacing: 0%;
55
+ }
56
+
57
+ .headline-sm-regular {
58
+ font-family: var(--font-family-secondary);
59
+ font-weight: var(--font-weight-regular);
60
+ font-size: 24px;
61
+ line-height: 32px;
62
+ letter-spacing: 0%;
63
+ }
64
+
65
+ .headline-xs-bold {
66
+ font-family: var(--font-family-secondary);
67
+ font-weight: var(--font-weight-bold);
68
+ font-size: 20px;
69
+ line-height: 28px;
70
+ letter-spacing: 0%;
71
+ }
72
+
73
+ .body-lg-bold {
74
+ font-family: var(--font-family-primary);
75
+ font-weight: var(--font-weight-bold);
76
+ font-size: 18px;
77
+ line-height: 28px;
78
+ letter-spacing: 0%;
79
+ }
80
+
81
+ .body-lg-medium {
82
+ font-family: var(--font-family-primary);
83
+ font-weight: var(--font-weight-medium);
84
+ font-size: 18px;
85
+ line-height: 28px;
86
+ letter-spacing: 0%;
87
+ }
88
+
89
+ .body-lg-regular {
90
+ font-family: var(--font-family-primary);
91
+ font-weight: var(--font-weight-regular);
92
+ font-size: 18px;
93
+ line-height: 28px;
94
+ letter-spacing: 0%;
95
+ }
96
+
97
+ .body-md-bold {
98
+ font-family: var(--font-family-primary);
99
+ font-weight: var(--font-weight-bold);
100
+ font-size: 16px;
101
+ line-height: 24px;
102
+ letter-spacing: 0%;
103
+ }
104
+
105
+ .body-md-medium {
106
+ font-family: var(--font-family-primary);
107
+ font-weight: var(--font-weight-medium);
108
+ font-size: 16px;
109
+ line-height: 24px;
110
+ letter-spacing: 0%;
111
+ }
112
+
113
+ .body-md-regular {
114
+ font-family: var(--font-family-primary);
115
+ font-weight: var(--font-weight-regular);
116
+ font-size: 16px;
117
+ line-height: 24px;
118
+ letter-spacing: 0%;
119
+ }
120
+
121
+ .body-sm-medium {
122
+ font-family: var(--font-family-primary);
123
+ font-weight: var(--font-weight-medium);
124
+ font-size: 14px;
125
+ line-height: 20px;
126
+ letter-spacing: 0%;
127
+ }
128
+
129
+ .body-sm-regular {
130
+ font-family: var(--font-family-primary);
131
+ font-weight: var(--font-weight-regular);
132
+ font-size: 14px;
133
+ line-height: 20px;
134
+ letter-spacing: 0%;
135
+ }
136
+
137
+ .body-xs-medium {
138
+ font-family: var(--font-family-primary);
139
+ font-weight: var(--font-weight-medium);
140
+ font-size: 12px;
141
+ line-height: 16px;
142
+ letter-spacing: 0%;
143
+ }
144
+
145
+ .body-xs-regular {
146
+ font-family: var(--font-family-primary);
147
+ font-weight: var(--font-weight-regular);
148
+ font-size: 12px;
149
+ line-height: 16px;
150
+ letter-spacing: 0%;
151
+ }
152
+
153
+ .label-lg-medium {
154
+ font-family: var(--font-family-primary);
155
+ font-weight: var(--font-weight-medium);
156
+ font-size: 14px;
157
+ line-height: 20px;
158
+ letter-spacing: 0%;
159
+ }
160
+
161
+ .label-lg-regular {
162
+ font-family: var(--font-family-primary);
163
+ font-weight: var(--font-weight-regular);
164
+ font-size: 14px;
165
+ line-height: 20px;
166
+ letter-spacing: 0%;
167
+ }
168
+
169
+ .label-md-medium {
170
+ font-family: var(--font-family-primary);
171
+ font-weight: var(--font-weight-medium);
172
+ font-size: 12px;
173
+ line-height: 16px;
174
+ letter-spacing: 0%;
175
+ }
176
+
177
+ .label-md-regular {
178
+ font-family: var(--font-family-primary);
179
+ font-weight: var(--font-weight-regular);
180
+ font-size: 12px;
181
+ line-height: 16px;
182
+ letter-spacing: 0%;
183
+ }
184
+
185
+ .link-md-medium {
186
+ font-family: var(--font-family-primary);
187
+ font-weight: var(--font-weight-medium);
188
+ font-size: 14px;
189
+ line-height: 20px;
190
+ letter-spacing: 0%;
191
+ text-decoration: underline;
192
+ }
193
+
194
+ .link-md-regular {
195
+ font-family: var(--font-family-primary);
196
+ font-weight: var(--font-weight-regular);
197
+ font-size: 14px;
198
+ line-height: 20px;
199
+ letter-spacing: 0%;
200
+ text-decoration: underline;
201
+ }
202
+
203
+ .link-sm-medium {
204
+ font-family: var(--font-family-primary);
205
+ font-weight: var(--font-weight-medium);
206
+ font-size: 12px;
207
+ line-height: 16px;
208
+ letter-spacing: 0%;
209
+ text-decoration: underline;
210
+ }
211
+
212
+ .link-sm-regular {
213
+ font-family: var(--font-family-primary);
214
+ font-weight: var(--font-weight-regular);
215
+ font-size: 12px;
216
+ line-height: 16px;
217
+ letter-spacing: 0%;
218
+ text-decoration: underline;
219
+ }
package/src/styles/typography-tokens.css ADDED
@@ -0,0 +1,50 @@
1
+ /* Auto-generated design tokens */
2
+ /* 2026-01-18T11:19:20.849Z */
3
+
4
+ /* typography-tokens */
5
+ :root {
6
+ --font-size-xs: 12px;
7
+ --font-size-sm: 14px;
8
+ --font-size-base: 16px;
9
+ --font-size-lg: 18px;
10
+ --font-size-xl: 20px;
11
+ --font-size-2xl: 24px;
12
+ --font-size-3xl: 30px;
13
+ --font-size-4xl: 36px;
14
+ --font-size-5xl: 48px;
15
+ --font-size-6xl: 60px;
16
+ --font-size-7xl: 72px;
17
+ --font-size-8xl: 96px;
18
+ --font-size-9xl: 128px;
19
+ --font-lineHeight-xs: 16px;
20
+ --font-lineHeight-sm: 20px;
21
+ --font-lineHeight-base: 24px;
22
+ --font-lineHeight-lg: 28px;
23
+ --font-lineHeight-xl: 28px;
24
+ --font-lineHeight-2xl: 32px;
25
+ --font-lineHeight-3xl: 36px;
26
+ --font-lineHeight-4xl: 40px;
27
+ --font-lineHeight-5xl: 48px;
28
+ --font-lineHeight-6xl: 60px;
29
+ --font-lineHeight-7xl: 72px;
30
+ --font-lineHeight-8xl: 96px;
31
+ --font-lineHeight-9xl: 128px;
32
+ --font-weight-bold: 700;
33
+ --font-weight-semibold: 600;
34
+ --font-weight-medium: 500;
35
+ --font-weight-regular: 400;
36
+ --font-weight-light: 300;
37
+ --font-letterSpacing-450: 4px;
38
+ --font-letterSpacing-350: 2px;
39
+ --font-letterSpacing-300: 1px;
40
+ --font-letterSpacing-200: -1px;
41
+ --font-letterSpacing-250: 0px;
42
+ --font-letterSpacing-150: -2px;
43
+ --font-letterSpacing-100: -3px;
44
+ --font-letterSpacing-400: 3px;
45
+ --font-letterSpacing-50: -4px;
46
+ --font-family-secondary: Geist;
47
+ --font-family-primary: Inter;
48
+ --font-family-primary-flip: Inter;
49
+ --font-family-secondary-flip: Merriweather;
50
+ }
package/src/styles.css ADDED
@@ -0,0 +1,2 @@
1
+ /* Public CSS export for consumers */
2
+ @import "./styles/index.css";