@bubbasfw/ui 0.0.0-stage → 0.2.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 (34) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +94 -2
  3. package/dist/index.cjs +1202 -0
  4. package/dist/index.d.cts +376 -0
  5. package/dist/index.d.ts +376 -0
  6. package/dist/index.js +1165 -0
  7. package/dist/tokens.cjs +116 -0
  8. package/dist/tokens.d.cts +139 -0
  9. package/dist/tokens.d.ts +139 -0
  10. package/dist/tokens.js +114 -0
  11. package/package.json +85 -4
  12. package/src/components/Button.tsx +105 -0
  13. package/src/components/actions.tsx +39 -0
  14. package/src/components/content.tsx +55 -0
  15. package/src/components/disclosure.tsx +33 -0
  16. package/src/components/feedback.tsx +68 -0
  17. package/src/components/forms/Choice.tsx +112 -0
  18. package/src/components/forms/FormField.tsx +58 -0
  19. package/src/components/forms/Input.tsx +55 -0
  20. package/src/components/forms/RadioGroup.tsx +87 -0
  21. package/src/components/forms/Select.tsx +102 -0
  22. package/src/components/forms/Tabs.tsx +70 -0
  23. package/src/components/forms/index.ts +6 -0
  24. package/src/components/forms/selection.ts +48 -0
  25. package/src/components/layout.tsx +35 -0
  26. package/src/components/navigation.tsx +27 -0
  27. package/src/components/overlays.tsx +64 -0
  28. package/src/components/typography.tsx +31 -0
  29. package/src/index.ts +25 -0
  30. package/src/internal/scroll-lock.ts +101 -0
  31. package/src/internal/utils.ts +32 -0
  32. package/src/theme.tsx +56 -0
  33. package/src/tokens.ts +114 -0
  34. package/tailwind-preset.cjs +24 -0
package/src/tokens.ts ADDED
@@ -0,0 +1,114 @@
1
+ /** Pinned foundations from Bubba's Brand Studio brand release 1.0.0. */
2
+ export const tokens = {
3
+ brandVersion: '1.0.0',
4
+ systemVersion: '0.3.0',
5
+ colors: {
6
+ blue: '#007CE8',
7
+ red: '#CC0000',
8
+ redHover: '#A80000',
9
+ navy: '#03256C',
10
+ night: '#001845',
11
+ ink: '#131B23',
12
+ muted: '#526075',
13
+ line: '#D9E8FB',
14
+ white: '#FFFFFF',
15
+ gold: '#FED766',
16
+ disabled: '#F0F2F5',
17
+ disabledText: '#6B727E',
18
+ },
19
+ spacing: { 1: 4, 2: 8, 3: 12, 4: 16, 6: 24, 8: 32, 12: 48, 16: 64 },
20
+ radius: { control: 4, panel: 12 },
21
+ touchTarget: { minimum: 44, default: 48 },
22
+ layout: { maxWidth: 1200, readingWidth: 720, breakpoints: { compact: 640, wide: 960 } },
23
+ motion: { feedback: 140 },
24
+ themes: {
25
+ 'light': {
26
+ 'canvas': '#F7F8FA',
27
+ 'surface': '#FFFFFF',
28
+ 'raised': '#FFFFFF',
29
+ 'hover': '#F6F7F9',
30
+ 'selected': '#ECEEF1',
31
+ 'text': '#131B23',
32
+ 'heading': '#03256C',
33
+ 'muted': '#526075',
34
+ 'line': '#E4E6EA',
35
+ 'border': '#637086',
36
+ 'link': '#03256C',
37
+ 'link-hover': '#A80000',
38
+ 'focus': '#03256C',
39
+ 'focus-inner': '#FFFFFF',
40
+ 'accent': '#CC0000',
41
+ 'action-text': '#FFFFFF',
42
+ 'action-border': '#A80000',
43
+ 'disabled-surface': '#F0F2F5',
44
+ 'disabled-text': '#6B727E',
45
+ 'info': '#03256C',
46
+ 'info-surface': '#F1F5FC',
47
+ 'info-border': '#03256C',
48
+ 'success': '#23633F',
49
+ 'success-surface': '#EAF5EF',
50
+ 'success-border': '#23633F',
51
+ 'warning': '#805500',
52
+ 'warning-surface': '#FFF4D6',
53
+ 'warning-border': '#805500',
54
+ 'error': '#B42318',
55
+ 'error-surface': '#FFF0EF',
56
+ 'error-border': '#B42318',
57
+ 'code-surface': '#171717',
58
+ 'code-text': '#FFFFFF',
59
+ 'code-muted': '#B4B4B4',
60
+ 'selection': '#D9E8FB',
61
+ 'selection-text': '#131B23',
62
+ 'scrollbar': '#637086',
63
+ 'scrollbar-track': '#F7F8FA',
64
+ 'shadow-action': '0 3px 8px #CC000024',
65
+ 'shadow-panel': '0 2px 12px #131B2308',
66
+ 'shadow-dialog': '0 20px 100px #00133345'
67
+ },
68
+ 'dark': {
69
+ 'canvas': '#171717',
70
+ 'surface': '#202020',
71
+ 'raised': '#292929',
72
+ 'hover': '#303030',
73
+ 'selected': '#383838',
74
+ 'text': '#FFFFFF',
75
+ 'heading': '#FFFFFF',
76
+ 'muted': '#B4B4B4',
77
+ 'line': '#3D3D3D',
78
+ 'border': '#858585',
79
+ 'link': '#8DC7FF',
80
+ 'link-hover': '#B8DEFF',
81
+ 'focus': '#FFFFFF',
82
+ 'focus-inner': '#202020',
83
+ 'accent': '#FF9F99',
84
+ 'action-text': '#FFFFFF',
85
+ 'action-border': '#EF817A',
86
+ 'disabled-surface': '#242424',
87
+ 'disabled-text': '#9A9A9A',
88
+ 'info': '#8DC7FF',
89
+ 'info-surface': '#1D2D3D',
90
+ 'info-border': '#8DC7FF',
91
+ 'success': '#8DDBA9',
92
+ 'success-surface': '#183323',
93
+ 'success-border': '#8DDBA9',
94
+ 'warning': '#FED766',
95
+ 'warning-surface': '#3A2E12',
96
+ 'warning-border': '#FED766',
97
+ 'error': '#FFAEA8',
98
+ 'error-surface': '#3D2020',
99
+ 'error-border': '#FFAEA8',
100
+ 'code-surface': '#171717',
101
+ 'code-text': '#FFFFFF',
102
+ 'code-muted': '#B4B4B4',
103
+ 'selection': '#383838',
104
+ 'selection-text': '#FFFFFF',
105
+ 'scrollbar': '#858585',
106
+ 'scrollbar-track': '#171717',
107
+ 'shadow-action': '0 3px 8px #00000040',
108
+ 'shadow-panel': '0 2px 12px #00000020',
109
+ 'shadow-dialog': '0 20px 100px #00000080'
110
+ }
111
+ },
112
+ } as const;
113
+
114
+ export type BubbaTokens = typeof tokens;
package/tailwind-preset.cjs ADDED
@@ -0,0 +1,24 @@
1
+ const { tokens } = require('./dist/tokens.cjs');
2
+ const plugin = require('tailwindcss/plugin');
3
+
4
+ const colorRoles = Object.entries(tokens.themes.light).filter(([, value]) => value.startsWith('#'));
5
+ const rgb = (hex) => [1, 3, 5].map((start) => parseInt(hex.slice(start, start + 2), 16)).join(' ');
6
+
7
+ /** @type {import('tailwindcss').Config} */
8
+ module.exports = {
9
+ theme: {
10
+ extend: {
11
+ colors: {
12
+ bubba: tokens.colors,
13
+ ui: Object.fromEntries(colorRoles.map(([name]) => [name, `rgb(var(--bui-${name}) / <alpha-value>)`])),
14
+ },
15
+ borderRadius: {
16
+ 'bubba-control': `${tokens.radius.control}px`,
17
+ 'bubba-panel': `${tokens.radius.panel}px`,
18
+ },
19
+ },
20
+ },
21
+ plugins: [plugin(({ addBase }) => addBase({
22
+ ':root': Object.fromEntries(colorRoles.map(([name, value]) => [`--bui-${name}`, rgb(value)])),
23
+ }))],
24
+ };