@baseplate-dev/ui-components 0.1.1 → 0.1.3
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/README.md +73 -0
- package/dist/base-styles.css +148 -0
- package/dist/components/Dialog/Dialog.d.ts +4 -0
- package/dist/components/Dialog/Dialog.d.ts.map +1 -1
- package/dist/components/Dialog/Dialog.js +6 -1
- package/dist/components/Dialog/Dialog.js.map +1 -1
- package/dist/styles.css +9 -0
- package/dist/utilities.css +99 -0
- package/package.json +20 -16
- /package/{src → dist}/theme.css +0 -0
package/README.md
ADDED
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
# @baseplate-dev/ui-components
|
|
2
|
+
|
|
3
|
+
This package contains reusable UI components used throughout Baseplate projects and the project builder interface.
|
|
4
|
+
|
|
5
|
+
## Purpose
|
|
6
|
+
|
|
7
|
+
The ui-components package provides:
|
|
8
|
+
|
|
9
|
+
- A customized variation of ShadCN components tailored for Baseplate
|
|
10
|
+
- Reusable React components for both the project builder and generated projects
|
|
11
|
+
- Consistent design system across all Baseplate applications
|
|
12
|
+
- Storybook documentation for component development and testing
|
|
13
|
+
- Tailwind CSS-based styling system
|
|
14
|
+
|
|
15
|
+
## Technology Stack
|
|
16
|
+
|
|
17
|
+
- Built with React and TypeScript
|
|
18
|
+
- Styled with Tailwind CSS
|
|
19
|
+
- Based on ShadCN component architecture
|
|
20
|
+
- Includes Storybook for component documentation
|
|
21
|
+
- Uses Material Design icons (react-icons/md)
|
|
22
|
+
|
|
23
|
+
## CSS Files
|
|
24
|
+
|
|
25
|
+
The package includes several CSS files that work together to provide theming and styling:
|
|
26
|
+
|
|
27
|
+
### Import Patterns
|
|
28
|
+
|
|
29
|
+
**For Websites (Full Styling):**
|
|
30
|
+
|
|
31
|
+
```css
|
|
32
|
+
/* Import all styling layers */
|
|
33
|
+
@import '@baseplate-dev/ui-components/base-styles.css';
|
|
34
|
+
@import '@baseplate-dev/ui-components/theme.css';
|
|
35
|
+
@import '@baseplate-dev/ui-components/utilities.css';
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
**For Plugins (Theme Only):**
|
|
39
|
+
|
|
40
|
+
```css
|
|
41
|
+
/* Import only the theme configuration */
|
|
42
|
+
@import '@baseplate-dev/ui-components/theme.css';
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
### `base-styles.css`
|
|
46
|
+
|
|
47
|
+
The main entry point for consumers that sets up the complete styling foundation:
|
|
48
|
+
|
|
49
|
+
- **CSS Variables**: Defines color tokens for light and dark themes using OKLCH color space
|
|
50
|
+
- **Font Setup**: Imports Geist and Geist Mono variable fonts with fallback configurations
|
|
51
|
+
- **Typography**: Establishes base heading and paragraph styles
|
|
52
|
+
- **Global Defaults**: Sets border colors, backgrounds, and text antialiasing
|
|
53
|
+
|
|
54
|
+
### `theme.css`
|
|
55
|
+
|
|
56
|
+
Theme configuration file for Tailwind CSS integration:
|
|
57
|
+
|
|
58
|
+
- **Color Mapping**: Maps CSS variables to Tailwind color utilities
|
|
59
|
+
- **Dark Mode**: Configures dark mode variant with automatic detection
|
|
60
|
+
- **Font Configuration**: Defines font family tokens for body and monospace text
|
|
61
|
+
- **Animation**: Imports tw-animate-css for animation utilities
|
|
62
|
+
|
|
63
|
+
### `utilities.css`
|
|
64
|
+
|
|
65
|
+
Custom utility classes for advanced styling patterns:
|
|
66
|
+
|
|
67
|
+
- **Surface Utilities**: `surface-default`, `surface-success`, `surface-warning`, `surface-error` for contextual styling
|
|
68
|
+
- **Typography Utilities**: `text-style-lead`, `text-style-large`, `text-style-small`, `text-style-muted`, `text-style-prose` for consistent text styling
|
|
69
|
+
- Uses dynamic color mixing for muted variations and borders
|
|
70
|
+
|
|
71
|
+
## Part of Baseplate Monorepo
|
|
72
|
+
|
|
73
|
+
This package is part of the Baseplate monorepo and is used by project-builder-web as well as generated Baseplate projects.
|
|
@@ -0,0 +1,148 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Base styles for the UI components.
|
|
3
|
+
*
|
|
4
|
+
* This file is used to import the base styles for the UI components.
|
|
5
|
+
* It is used to import the fonts and other base styles that affect the
|
|
6
|
+
* page.
|
|
7
|
+
*
|
|
8
|
+
* This is meant to be used for consumers, e.g. websites built with
|
|
9
|
+
* ui-components.
|
|
10
|
+
*/
|
|
11
|
+
|
|
12
|
+
/**
|
|
13
|
+
* Make sure to source classes from the ui-components package
|
|
14
|
+
*/
|
|
15
|
+
|
|
16
|
+
@source '.';
|
|
17
|
+
|
|
18
|
+
/**
|
|
19
|
+
* Colors
|
|
20
|
+
*/
|
|
21
|
+
|
|
22
|
+
:root {
|
|
23
|
+
--background: oklch(1 0 0);
|
|
24
|
+
--foreground: oklch(0.129 0.041 264.695);
|
|
25
|
+
--muted: oklch(0.968 0.007 247.896);
|
|
26
|
+
--muted-foreground: oklch(0.554 0.041 257.417);
|
|
27
|
+
--card: oklch(1 0 0);
|
|
28
|
+
--card-foreground: oklch(0.129 0.041 264.695);
|
|
29
|
+
--popover: oklch(1 0 0);
|
|
30
|
+
--popover-foreground: oklch(0.129 0.041 264.695);
|
|
31
|
+
--accent: oklch(0.968 0.007 247.896);
|
|
32
|
+
--accent-foreground: oklch(0.208 0.04 265.755);
|
|
33
|
+
--success: oklch(0.979 0.021 166.113);
|
|
34
|
+
--success-foreground: oklch(0.262 0.051 172.552);
|
|
35
|
+
--warning: oklch(0.987 0.022 95.277);
|
|
36
|
+
--warning-foreground: oklch(0.279 0.077 45.635);
|
|
37
|
+
--error: oklch(0.971 0.013 17.38);
|
|
38
|
+
--error-foreground: oklch(0.258 0.092 26.042);
|
|
39
|
+
--primary: oklch(0.424 0.181 265.638);
|
|
40
|
+
--primary-hover: oklch(0.379 0.138 265.522);
|
|
41
|
+
--primary-foreground: oklch(0.984 0.003 247.858);
|
|
42
|
+
--secondary: oklch(0.968 0.007 247.896);
|
|
43
|
+
--secondary-hover: oklch(0.869 0.02 252.894);
|
|
44
|
+
--secondary-foreground: oklch(0.208 0.04 265.755);
|
|
45
|
+
--destructive: oklch(0.637 0.237 25.331);
|
|
46
|
+
--destructive-hover: oklch(0.505 0.213 27.518);
|
|
47
|
+
--destructive-foreground: oklch(0.984 0.003 247.858);
|
|
48
|
+
--link: oklch(0.488 0.217 264.376);
|
|
49
|
+
--link-visited: oklch(0.424 0.181 265.638);
|
|
50
|
+
--border: oklch(0.929 0.013 255.508);
|
|
51
|
+
--input: oklch(0.929 0.013 255.508);
|
|
52
|
+
--ring: oklch(0.714 0.143 254.624);
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.dark,
|
|
56
|
+
html[data-theme='dark'] {
|
|
57
|
+
--background: oklch(0.129 0.041 264.695);
|
|
58
|
+
--foreground: oklch(0.984 0.003 247.858);
|
|
59
|
+
--muted: oklch(0.279 0.037 260.031);
|
|
60
|
+
--muted-foreground: oklch(0.711 0.035 256.788);
|
|
61
|
+
--card: oklch(0.129 0.041 264.695);
|
|
62
|
+
--card-foreground: oklch(0.984 0.003 247.858);
|
|
63
|
+
--popover: oklch(0.129 0.041 264.695);
|
|
64
|
+
--popover-foreground: oklch(0.984 0.003 247.858);
|
|
65
|
+
--accent: oklch(0.279 0.037 260.031);
|
|
66
|
+
--accent-foreground: oklch(0.984 0.003 247.858);
|
|
67
|
+
--success: oklch(0.262 0.051 172.552);
|
|
68
|
+
--success-foreground: oklch(0.979 0.021 166.113);
|
|
69
|
+
--warning: oklch(0.279 0.077 45.635);
|
|
70
|
+
--warning-foreground: oklch(0.987 0.022 95.277);
|
|
71
|
+
--error: oklch(0.258 0.092 26.042);
|
|
72
|
+
--error-foreground: oklch(0.971 0.013 17.38);
|
|
73
|
+
--primary: oklch(0.282 0.087 267.935);
|
|
74
|
+
--primary-hover: oklch(0.424 0.181 265.638);
|
|
75
|
+
--primary-foreground: oklch(0.984 0.003 247.858);
|
|
76
|
+
--secondary: oklch(0.279 0.037 260.031);
|
|
77
|
+
--secondary-hover: oklch(0.446 0.037 257.281);
|
|
78
|
+
--secondary-foreground: oklch(0.984 0.003 247.858);
|
|
79
|
+
--destructive: oklch(0.396 0.141 25.723);
|
|
80
|
+
--destructive-hover: oklch(0.505 0.213 27.518);
|
|
81
|
+
--destructive-foreground: oklch(0.984 0.003 247.858);
|
|
82
|
+
--link: oklch(0.546 0.215 262.881);
|
|
83
|
+
--link-visited: oklch(0.488 0.217 264.376);
|
|
84
|
+
--border: oklch(0.279 0.037 260.031);
|
|
85
|
+
--input: oklch(0.279 0.037 260.031);
|
|
86
|
+
--ring: oklch(0.623 0.188 259.815);
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
/**
|
|
90
|
+
* Fonts
|
|
91
|
+
*/
|
|
92
|
+
|
|
93
|
+
@import '@fontsource-variable/geist';
|
|
94
|
+
@import '@fontsource-variable/geist-mono';
|
|
95
|
+
|
|
96
|
+
@layer base {
|
|
97
|
+
/* Used https://screenspan.net/fallback to find best fallback settings */
|
|
98
|
+
@font-face {
|
|
99
|
+
font-family: 'Arial Fallback';
|
|
100
|
+
src: local('Arial');
|
|
101
|
+
size-adjust: 102%;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
@font-face {
|
|
105
|
+
font-family: 'Adjusted Courier New Fallback';
|
|
106
|
+
src: local(Courier New);
|
|
107
|
+
size-adjust: 100%;
|
|
108
|
+
ascent-override: 91%;
|
|
109
|
+
descent-override: 40%;
|
|
110
|
+
line-gap-override: normal;
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
/**
|
|
115
|
+
* Typography
|
|
116
|
+
*/
|
|
117
|
+
|
|
118
|
+
@layer base {
|
|
119
|
+
h1 {
|
|
120
|
+
@apply text-3xl leading-none font-semibold tracking-tight;
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
h2 {
|
|
124
|
+
@apply text-2xl leading-7 font-semibold tracking-tight;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
h3 {
|
|
128
|
+
@apply text-xl leading-6 font-semibold tracking-tight;
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
p {
|
|
132
|
+
@apply leading-6;
|
|
133
|
+
}
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
/**
|
|
137
|
+
* Base styles for border and background/font colors
|
|
138
|
+
*/
|
|
139
|
+
|
|
140
|
+
@layer base {
|
|
141
|
+
* {
|
|
142
|
+
@apply border-border outline-ring/50;
|
|
143
|
+
}
|
|
144
|
+
body {
|
|
145
|
+
@apply bg-background font-body text-foreground antialiased;
|
|
146
|
+
@apply surface-default;
|
|
147
|
+
}
|
|
148
|
+
}
|
|
@@ -3,6 +3,10 @@ import * as DialogPrimitive from '@radix-ui/react-dialog';
|
|
|
3
3
|
/**
|
|
4
4
|
* A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.
|
|
5
5
|
*
|
|
6
|
+
* ShadCN changes:
|
|
7
|
+
* - Added custom width property to specify the width of the dialog.
|
|
8
|
+
* - Added max-h-[90vh] overflow-y-auto to ensure the dialog is scrollable.
|
|
9
|
+
*
|
|
6
10
|
* https://ui.shadcn.com/docs/components/dialog
|
|
7
11
|
*/
|
|
8
12
|
declare function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>): React.ReactElement;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAEpC,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAK1D
|
|
1
|
+
{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAEpC,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAK1D;;;;;;;;GAQG;AACH,iBAAS,MAAM,CAAC,EACd,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,GAAG,KAAK,CAAC,YAAY,CAExE;AAED,iBAAS,aAAa,CAAC,EACrB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,GAAG,KAAK,CAAC,YAAY,CAE3E;AAED,iBAAS,YAAY,CAAC,EACpB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,MAAM,CAAC,GAAG,KAAK,CAAC,YAAY,CAE1E;AAED,iBAAS,WAAW,CAAC,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,GAAG,KAAK,CAAC,YAAY,CAEzE;AAED,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,GAAG,KAAK,CAAC,YAAY,CAW3E;AACD,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAE7D,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,QAAQ,EACR,KAAY,EACZ,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,GAAG;IACxD,KAAK,CAAC,EAAE,WAAW,CAAC;CACrB,GAAG,KAAK,CAAC,YAAY,CAyBrB;AAED,iBAAS,YAAY,CAAC,EACpB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,KAAK,CAAC,YAAY,CAQlD;AAED,iBAAS,YAAY,CAAC,EACpB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,KAAK,CAAC,YAAY,CAWlD;AAED,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,GAAG,KAAK,CAAC,YAAY,CAQzE;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CACrB,OAAO,eAAe,CAAC,WAAW,CACnC,GAAG,KAAK,CAAC,YAAY,CAQrB;AAED,OAAO,EACL,MAAM,EACN,WAAW,EACX,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,YAAY,EACZ,aAAa,EACb,YAAY,EACZ,WAAW,EACX,aAAa,GACd,CAAC"}
|
|
@@ -6,6 +6,10 @@ import { cn } from '#src/utils/index.js';
|
|
|
6
6
|
/**
|
|
7
7
|
* A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.
|
|
8
8
|
*
|
|
9
|
+
* ShadCN changes:
|
|
10
|
+
* - Added custom width property to specify the width of the dialog.
|
|
11
|
+
* - Added max-h-[90vh] overflow-y-auto to ensure the dialog is scrollable.
|
|
12
|
+
*
|
|
9
13
|
* https://ui.shadcn.com/docs/components/dialog
|
|
10
14
|
*/
|
|
11
15
|
function Dialog({ ...props }) {
|
|
@@ -24,7 +28,8 @@ function DialogOverlay({ className, ...props }) {
|
|
|
24
28
|
return (_jsx(DialogPrimitive.Overlay, { "data-slot": "dialog-overlay", className: cn('fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0', className), ...props }));
|
|
25
29
|
}
|
|
26
30
|
function DialogContent({ className, children, width = 'md', ...props }) {
|
|
27
|
-
return (_jsxs(DialogPortal, { "data-slot": "dialog-portal", children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Content, { "data-slot": "dialog-content", className: cn('fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border bg-background p-6 shadow-lg duration-200 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
|
|
31
|
+
return (_jsxs(DialogPortal, { "data-slot": "dialog-portal", children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Content, { "data-slot": "dialog-content", className: cn('fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border bg-background p-6 shadow-lg duration-200 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95', 'max-h-[90vh] overflow-y-auto', // ensure the dialog is scrollable
|
|
32
|
+
width === 'sm' && 'sm:max-w-md', width === 'md' && 'sm:max-w-lg', width === 'lg' && 'sm:max-w-4xl', width === 'xl' && 'sm:max-w-7xl', className), ...props, children: [children, _jsxs(DialogPrimitive.Close, { className: "absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", children: [_jsx(MdClose, {}), _jsx("span", { className: "sr-only", children: "Close" })] })] })] }));
|
|
28
33
|
}
|
|
29
34
|
function DialogHeader({ className, ...props }) {
|
|
30
35
|
return (_jsx("div", { "data-slot": "dialog-header", className: cn('flex flex-col gap-2 text-center sm:text-left', className), ...props }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAIb,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAC1D,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAEzC,OAAO,EAAE,EAAE,EAAE,MAAM,qBAAqB,CAAC;AAEzC
|
|
1
|
+
{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.tsx"],"names":[],"mappings":"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"}
|
package/dist/styles.css
ADDED
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Utility classes for surfaces
|
|
3
|
+
*/
|
|
4
|
+
|
|
5
|
+
@utility surface-default {
|
|
6
|
+
--surface: var(--background);
|
|
7
|
+
--surface-foreground: var(--foreground);
|
|
8
|
+
--surface-border: color-mix(in oklab, var(--foreground) 40%, transparent);
|
|
9
|
+
--surface-muted: color-mix(in oklab, var(--background) 10%, transparent);
|
|
10
|
+
--surface-muted-foreground: color-mix(
|
|
11
|
+
in oklab,
|
|
12
|
+
var(--foreground) 70%,
|
|
13
|
+
var(--background)
|
|
14
|
+
);
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
@utility surface-success {
|
|
18
|
+
--surface: var(--success);
|
|
19
|
+
--surface-foreground: var(--success-foreground);
|
|
20
|
+
--surface-border: color-mix(
|
|
21
|
+
in oklab,
|
|
22
|
+
var(--success-foreground) 40%,
|
|
23
|
+
transparent
|
|
24
|
+
);
|
|
25
|
+
--surface-muted: color-mix(in oklab, var(--success) 10%, transparent);
|
|
26
|
+
--surface-muted-foreground: color-mix(
|
|
27
|
+
in oklab,
|
|
28
|
+
var(--success-foreground) 70%,
|
|
29
|
+
var(--success)
|
|
30
|
+
);
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
@utility surface-warning {
|
|
34
|
+
--surface: var(--warning);
|
|
35
|
+
--surface-foreground: var(--warning-foreground);
|
|
36
|
+
--surface-border: color-mix(
|
|
37
|
+
in oklab,
|
|
38
|
+
var(--warning-foreground) 40%,
|
|
39
|
+
transparent
|
|
40
|
+
);
|
|
41
|
+
--surface-muted: color-mix(in oklab, var(--warning) 10%, transparent);
|
|
42
|
+
--surface-muted-foreground: color-mix(
|
|
43
|
+
in oklab,
|
|
44
|
+
var(--warning-foreground) 70%,
|
|
45
|
+
var(--warning)
|
|
46
|
+
);
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
@utility surface-error {
|
|
50
|
+
--surface: var(--error);
|
|
51
|
+
--surface-foreground: var(--error-foreground);
|
|
52
|
+
--surface-border: color-mix(
|
|
53
|
+
in oklab,
|
|
54
|
+
var(--error-foreground) 40%,
|
|
55
|
+
transparent
|
|
56
|
+
);
|
|
57
|
+
--surface-muted: color-mix(in oklab, var(--error) 10%, transparent);
|
|
58
|
+
--surface-muted-foreground: color-mix(
|
|
59
|
+
in oklab,
|
|
60
|
+
var(--error-foreground) 70%,
|
|
61
|
+
var(--error)
|
|
62
|
+
);
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
/**
|
|
66
|
+
* Utility classes for typography
|
|
67
|
+
*/
|
|
68
|
+
|
|
69
|
+
@utility text-style-lead {
|
|
70
|
+
@apply text-xl leading-6 font-medium text-muted-foreground;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
@utility text-style-large {
|
|
74
|
+
@apply text-lg leading-6 font-semibold;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
@utility text-style-small {
|
|
78
|
+
@apply text-sm leading-none font-medium;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
@utility text-style-muted {
|
|
82
|
+
@apply text-sm leading-5 text-muted-foreground;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
@utility text-style-prose {
|
|
86
|
+
@apply text-base leading-6;
|
|
87
|
+
|
|
88
|
+
& a {
|
|
89
|
+
@apply font-medium text-link;
|
|
90
|
+
|
|
91
|
+
&:hover {
|
|
92
|
+
@apply underline;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
&:visited {
|
|
96
|
+
@apply text-link-visited;
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
}
|
package/package.json
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@baseplate-dev/ui-components",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.3",
|
|
4
4
|
"description": "Shared UI component library",
|
|
5
|
+
"homepage": "https://www.baseplate.dev",
|
|
5
6
|
"repository": "https://github.com/halfdomelabs/baseplate",
|
|
6
|
-
"license": "
|
|
7
|
+
"license": "MPL-2.0",
|
|
7
8
|
"author": "Half Dome Labs LLC",
|
|
8
9
|
"sideEffects": false,
|
|
9
10
|
"type": "module",
|
|
@@ -12,18 +13,18 @@
|
|
|
12
13
|
},
|
|
13
14
|
"exports": {
|
|
14
15
|
".": "./dist/index.js",
|
|
15
|
-
"./base-styles.css": "./
|
|
16
|
-
"./theme.css": "./
|
|
17
|
-
"./utilities.css": "./
|
|
16
|
+
"./base-styles.css": "./dist/base-styles.css",
|
|
17
|
+
"./theme.css": "./dist/theme.css",
|
|
18
|
+
"./utilities.css": "./dist/utilities.css"
|
|
18
19
|
},
|
|
19
20
|
"main": "./dist/index.js",
|
|
20
21
|
"files": [
|
|
22
|
+
"README.md",
|
|
21
23
|
"LICENSE",
|
|
22
|
-
"dist/**/*",
|
|
23
24
|
"CHANGELOG",
|
|
24
|
-
"
|
|
25
|
-
"
|
|
26
|
-
"!dist/**/*.
|
|
25
|
+
"dist/**/*",
|
|
26
|
+
"!dist/**/*.d.ts.map",
|
|
27
|
+
"!dist/**/*.tsbuildinfo"
|
|
27
28
|
],
|
|
28
29
|
"browserslist": {
|
|
29
30
|
"production": [
|
|
@@ -67,7 +68,7 @@
|
|
|
67
68
|
"sonner": "2.0.3",
|
|
68
69
|
"zod": "3.24.1",
|
|
69
70
|
"zustand": "5.0.3",
|
|
70
|
-
"@baseplate-dev/utils": "0.1.
|
|
71
|
+
"@baseplate-dev/utils": "0.1.3"
|
|
71
72
|
},
|
|
72
73
|
"devDependencies": {
|
|
73
74
|
"@storybook/addon-docs": "^8.6.4",
|
|
@@ -87,6 +88,7 @@
|
|
|
87
88
|
"@testing-library/user-event": "14.6.1",
|
|
88
89
|
"@types/node": "^22.0.0",
|
|
89
90
|
"@vitejs/plugin-react": "4.4.1",
|
|
91
|
+
"cpx2": "8.0.0",
|
|
90
92
|
"eslint": "9.26.0",
|
|
91
93
|
"jsdom": "26.0.0",
|
|
92
94
|
"prettier": "3.5.3",
|
|
@@ -98,7 +100,7 @@
|
|
|
98
100
|
"vite": "6.3.5",
|
|
99
101
|
"vite-plugin-svgr": "4.3.0",
|
|
100
102
|
"vitest": "3.0.7",
|
|
101
|
-
"@baseplate-dev/tools": "0.1.
|
|
103
|
+
"@baseplate-dev/tools": "0.1.3"
|
|
102
104
|
},
|
|
103
105
|
"engines": {
|
|
104
106
|
"node": "^22.0.0"
|
|
@@ -111,17 +113,19 @@
|
|
|
111
113
|
"provenance": true
|
|
112
114
|
},
|
|
113
115
|
"scripts": {
|
|
114
|
-
"build": "pnpm build:
|
|
115
|
-
"build:
|
|
116
|
-
"build:
|
|
116
|
+
"build": "pnpm build:tsc && pnpm build:css",
|
|
117
|
+
"build:css": "cpx \"src/**/*.css\" dist --clean",
|
|
118
|
+
"build:tsc": "tsc -p tsconfig.build.json",
|
|
117
119
|
"clean": "rm -rf ./dist",
|
|
118
|
-
"dev:storybook": "storybook dev -p 6006",
|
|
119
120
|
"lint": "eslint .",
|
|
120
121
|
"prettier:check": "prettier --check .",
|
|
121
122
|
"prettier:write": "prettier -w .",
|
|
123
|
+
"storybook:build": "storybook build",
|
|
124
|
+
"storybook:dev": "storybook dev -p 6006",
|
|
122
125
|
"test": "vitest",
|
|
123
126
|
"test:coverage": "vitest run --coverage",
|
|
127
|
+
"tsc:watch": "tsc -p tsconfig.build.json --preserveWatchOutput -w",
|
|
124
128
|
"typecheck": "tsc --noEmit",
|
|
125
|
-
"watch": "
|
|
129
|
+
"watch": "pnpm build:css --watch"
|
|
126
130
|
}
|
|
127
131
|
}
|
/package/{src → dist}/theme.css
RENAMED
|
File without changes
|