@workokay/atom 0.2.13 → 0.2.15
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 +152 -57
- package/dist/atom.css +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,69 +1,164 @@
|
|
|
1
|
-
#
|
|
1
|
+
# @workokay/atom
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
A modern React component library built with TypeScript, Tailwind CSS, and Radix UI primitives.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
## Installation
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
|
|
7
|
+
```bash
|
|
8
|
+
npm install @workokay/atom
|
|
9
|
+
```
|
|
9
10
|
|
|
10
|
-
##
|
|
11
|
+
## Setup
|
|
11
12
|
|
|
12
|
-
|
|
13
|
+
### 1. Import CSS Styles
|
|
13
14
|
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
},
|
|
39
|
-
])
|
|
15
|
+
Import the Atom UI CSS bundle in your app's entry point (e.g., `main.tsx`, `App.tsx`, or `index.tsx`):
|
|
16
|
+
|
|
17
|
+
```tsx
|
|
18
|
+
// main.tsx or App.tsx
|
|
19
|
+
import '@workokay/atom/dist/atom.css'
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
### 2. Wrap Your App with Theme Provider
|
|
23
|
+
|
|
24
|
+
Wrap your application (or the part using Atom components) with the `atom-theme` class and set the theme:
|
|
25
|
+
|
|
26
|
+
```tsx
|
|
27
|
+
// App.tsx
|
|
28
|
+
import { Button } from '@workokay/atom'
|
|
29
|
+
import '@workokay/atom/dist/atom.css'
|
|
30
|
+
|
|
31
|
+
function App() {
|
|
32
|
+
return (
|
|
33
|
+
<div className="atom-theme" data-theme="light">
|
|
34
|
+
{/* Your app content */}
|
|
35
|
+
<Button variant="primary" size="md">Click me</Button>
|
|
36
|
+
</div>
|
|
37
|
+
)
|
|
38
|
+
}
|
|
40
39
|
```
|
|
41
40
|
|
|
42
|
-
|
|
41
|
+
**Available themes:**
|
|
42
|
+
- `data-theme="light"` - Light theme with teal green primary color
|
|
43
|
+
- `data-theme="dark"` - Dark theme variant
|
|
44
|
+
- `data-theme="cyan-light"` - Cyan color scheme (light)
|
|
45
|
+
- `data-theme="cyan-dark"` - Cyan color scheme (dark)
|
|
46
|
+
|
|
47
|
+
### 3. Configure Tailwind CSS (Required)
|
|
43
48
|
|
|
49
|
+
Atom components use Tailwind CSS utility classes. Make sure you have Tailwind CSS configured in your project:
|
|
50
|
+
|
|
51
|
+
**Install Tailwind CSS:**
|
|
52
|
+
```bash
|
|
53
|
+
npm install -D tailwindcss postcss autoprefixer
|
|
54
|
+
npx tailwindcss init -p
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
**Configure `tailwind.config.js`:**
|
|
44
58
|
```js
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
{
|
|
52
|
-
|
|
53
|
-
extends: [
|
|
54
|
-
// Other configs...
|
|
55
|
-
// Enable lint rules for React
|
|
56
|
-
reactX.configs['recommended-typescript'],
|
|
57
|
-
// Enable lint rules for React DOM
|
|
58
|
-
reactDom.configs.recommended,
|
|
59
|
-
],
|
|
60
|
-
languageOptions: {
|
|
61
|
-
parserOptions: {
|
|
62
|
-
project: ['./tsconfig.node.json', './tsconfig.app.json'],
|
|
63
|
-
tsconfigRootDir: import.meta.dirname,
|
|
64
|
-
},
|
|
65
|
-
// other options...
|
|
66
|
-
},
|
|
59
|
+
export default {
|
|
60
|
+
content: [
|
|
61
|
+
"./index.html",
|
|
62
|
+
"./src/**/*.{js,ts,jsx,tsx}",
|
|
63
|
+
"./node_modules/@workokay/atom/dist/**/*.{js,jsx}", // Include Atom components
|
|
64
|
+
],
|
|
65
|
+
theme: {
|
|
66
|
+
extend: {},
|
|
67
67
|
},
|
|
68
|
-
]
|
|
68
|
+
plugins: [],
|
|
69
|
+
}
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
**Add Tailwind directives to your CSS:**
|
|
73
|
+
```css
|
|
74
|
+
/* src/index.css or src/styles.css */
|
|
75
|
+
@tailwind base;
|
|
76
|
+
@tailwind components;
|
|
77
|
+
@tailwind utilities;
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
## Usage
|
|
81
|
+
|
|
82
|
+
```tsx
|
|
83
|
+
import { Button, Input } from '@workokay/atom'
|
|
84
|
+
import '@workokay/atom/dist/atom.css'
|
|
85
|
+
|
|
86
|
+
function MyComponent() {
|
|
87
|
+
return (
|
|
88
|
+
<div className="atom-theme" data-theme="light">
|
|
89
|
+
<Button variant="primary" size="md">
|
|
90
|
+
Primary Button
|
|
91
|
+
</Button>
|
|
92
|
+
|
|
93
|
+
<Button variant="secondary" size="sm">
|
|
94
|
+
Secondary Button
|
|
95
|
+
</Button>
|
|
96
|
+
|
|
97
|
+
<Input placeholder="Enter text..." />
|
|
98
|
+
</div>
|
|
99
|
+
)
|
|
100
|
+
}
|
|
69
101
|
```
|
|
102
|
+
|
|
103
|
+
## Components
|
|
104
|
+
|
|
105
|
+
### Button
|
|
106
|
+
|
|
107
|
+
```tsx
|
|
108
|
+
<Button
|
|
109
|
+
variant="primary" | "secondary" | "ghost" | "success" | "danger" | "warning" | "info" | "icon" | "iconGhost" | "iconSquare" | "iconSquareGhost"
|
|
110
|
+
size="sm" | "md" | "lg"
|
|
111
|
+
fullWidth={boolean}
|
|
112
|
+
ripple={boolean} // Enable/disable ripple effect (default: true)
|
|
113
|
+
asChild={boolean} // Render as child element via Radix Slot
|
|
114
|
+
>
|
|
115
|
+
Button Text
|
|
116
|
+
</Button>
|
|
117
|
+
```
|
|
118
|
+
|
|
119
|
+
### Input
|
|
120
|
+
|
|
121
|
+
```tsx
|
|
122
|
+
<Input
|
|
123
|
+
size="sm" | "md" | "lg"
|
|
124
|
+
tone="default" | "invalid" | "success"
|
|
125
|
+
leftIcon={ReactNode}
|
|
126
|
+
rightIcon={ReactNode}
|
|
127
|
+
hint={string}
|
|
128
|
+
errorText={string}
|
|
129
|
+
loading={boolean}
|
|
130
|
+
/>
|
|
131
|
+
```
|
|
132
|
+
|
|
133
|
+
## Features
|
|
134
|
+
|
|
135
|
+
- ✅ **Teal Green Theme** - Beautiful teal green primary color (`#00796B`) by default
|
|
136
|
+
- ✅ **Ripple Effects** - Material Design-inspired ripple animations on buttons
|
|
137
|
+
- ✅ **Dark Mode** - Built-in dark theme support
|
|
138
|
+
- ✅ **TypeScript** - Fully typed components
|
|
139
|
+
- ✅ **Accessible** - Built on Radix UI primitives
|
|
140
|
+
- ✅ **Customizable** - CSS variables for easy theming
|
|
141
|
+
|
|
142
|
+
## CSS Variables
|
|
143
|
+
|
|
144
|
+
All colors and styles are controlled via CSS variables. You can customize them:
|
|
145
|
+
|
|
146
|
+
```css
|
|
147
|
+
.atom-theme {
|
|
148
|
+
--atom-primary: #00796B; /* Teal green */
|
|
149
|
+
--atom-button-bg: var(--atom-primary);
|
|
150
|
+
/* ... more variables */
|
|
151
|
+
}
|
|
152
|
+
```
|
|
153
|
+
|
|
154
|
+
See `dist/atom.css` for the complete list of CSS variables.
|
|
155
|
+
|
|
156
|
+
## Requirements
|
|
157
|
+
|
|
158
|
+
- React 18+ or React 19+
|
|
159
|
+
- Tailwind CSS configured in your project
|
|
160
|
+
- Modern browser with CSS custom properties support
|
|
161
|
+
|
|
162
|
+
## License
|
|
163
|
+
|
|
164
|
+
MIT
|
package/dist/atom.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.atom-theme{--atom-button-bg: var(--atom-primary);--atom-button-bg-hover: #1c86ee;--atom-button-fg: #ffffff;--atom-button-ghost-bg: transparent;--atom-button-ghost-hover-bg: #f1f5f9;--atom-button-ghost-fg: #1e293b;--atom-radius-2: 6px;--atom-focus-ring: 0 0 0 2px rgba(30, 144, 255, .5)}
|
|
1
|
+
:where(.atom-theme){--atom-button-bg: var(--atom-primary);--atom-button-bg-hover: var(--atom-primary);--atom-button-fg: var(--atom-primary-contrast);--atom-ring-color: #1E88E5;--atom-ring-offset: var(--atom-bg);--tw-ring-color: var(--atom-ring-color);--tw-ring-offset-color: var(--atom-ring-offset)}:where(.atom-theme)[data-theme=light]{--atom-primary-50: #E0F2F1;--atom-primary-100: #B2DFDB;--atom-primary-200: #80CBC4;--atom-primary-300: #4DB6AC;--atom-primary-400: #26A69A;--atom-primary-500: #009688;--atom-primary-600: #00897B;--atom-primary-700: #00796B;--atom-primary-800: #00695C;--atom-primary-900: #004D40;--atom-primary: var(--atom-primary-700);--atom-primary-contrast: #FFFFFF;--atom-accent: var(--atom-primary-400);--atom-accent-contrast: #0B0F0E;--atom-text: #626468;--atom-text-muted: #616161;--atom-text-inverse: #FFFFFF;--atom-bg: #F9FAFB;--atom-surface: #FFFFFF;--atom-surface-alt: #F5F5F5;--atom-border: #E0E0E0;--atom-border-strong: #BDBDBD;--atom-success: #43A047;--atom-warning: #FB8C00;--atom-error: #E53935;--atom-info: #1E88E5;--atom-font-sans: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";--atom-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;--atom-text-xs: 12px;--atom-text-sm: 13px;--atom-text-md: 14px;--atom-text-lg: 16px;--atom-text-xl: 18px;--atom-line-height: 1.5;--atom-font-weight-normal: 400;--atom-font-weight-medium: 500;--atom-font-weight-bold: 700;--atom-space-1: 4px;--atom-space-2: 8px;--atom-space-3: 12px;--atom-space-4: 16px;--atom-space-6: 24px;--atom-spacing-1: 4px;--atom-spacing-2: 8px;--atom-spacing-3: 12px;--atom-spacing-4: 16px;--atom-spacing-6: 24px;--atom-radius-1: 4px;--atom-radius-2: 8px;--atom-radius-round: 9999px;--atom-focus-ring: var(--atom-primary-400);--atom-shadow-sm: 0 1px 2px rgba(0,0,0,.04);--atom-shadow-md: 0 4px 6px rgba(0,0,0,.1);--atom-shadow-lg: 0 10px 15px rgba(0,0,0,.15);--atom-link: #1E88E5;--atom-link-hover: #1565C0;--atom-selection: rgba(0,121,107,.18);--atom-muted: rgba(33,33,33,.04);--atom-chart-1: #00796B;--atom-chart-2: #1E88E5;--atom-chart-3: #43A047;--atom-chart-4: #FB8C00;--atom-chart-5: #8E24AA;--atom-chart-6: #F4511E;--atom-chart-7: #6D4C41;--atom-chart-8: #3949AB;--atom-chart-9: #00ACC1;--atom-chart-10: #7CB342;--atom-button-bg: var(--atom-primary);--atom-button-bg-hover: var(--atom-primary-800);--atom-button-fg: var(--atom-primary-contrast);--atom-button-ghost-bg: transparent;--atom-button-ghost-hover-bg: color-mix(in srgb, var(--atom-primary) 10%, white);--atom-button-ghost-fg: var(--atom-primary);--atom-button-success-bg: var(--atom-success);--atom-button-success-bg-hover: color-mix(in srgb, var(--atom-success) 92%, black);--atom-button-success-fg: var(--atom-primary-contrast);--atom-button-warning-bg: var(--atom-warning);--atom-button-warning-bg-hover: color-mix(in srgb, var(--atom-warning) 92%, black);--atom-button-warning-fg: var(--atom-primary-contrast);--atom-button-danger-bg: var(--atom-error);--atom-button-danger-bg-hover: color-mix(in srgb, var(--atom-error) 92%, black);--atom-button-danger-fg: var(--atom-primary-contrast);--atom-button-info-bg: var(--atom-info);--atom-button-info-bg-hover: color-mix(in srgb, var(--atom-info) 92%, black);--atom-button-info-fg: var(--atom-primary-contrast);--atom-card-bg: var(--atom-surface);--atom-card-fg: var(--atom-text);--atom-card-border: var(--atom-border);--atom-input-bg: var(--atom-bg);--atom-input-fg: var(--atom-text);--atom-input-border: var(--atom-border);--atom-input-focus: var(--atom-focus-ring);--atom-ring-color: var(--atom-primary-400);--atom-ring-offset: var(--atom-bg);--tw-ring-color: var(--atom-ring-color);--tw-ring-offset-color: var(--atom-ring-offset);--atom-ripple-color-solid: var(--atom-button-fg);--atom-ripple-color-ghost: var(--atom-primary);--atom-ripple-opacity: .22}:where(.atom-theme)[data-theme=dark]{--atom-primary-50: #E0F2F1;--atom-primary-100: #B2DFDB;--atom-primary-200: #80CBC4;--atom-primary-300: #4DB6AC;--atom-primary-400: #26A69A;--atom-primary-500: #009688;--atom-primary-600: #00897B;--atom-primary-700: #00796B;--atom-primary-800: #00695C;--atom-primary-900: #004D40;--atom-primary: var(--atom-primary-400);--atom-primary-contrast: #0B0F0E;--atom-accent: var(--atom-primary-300);--atom-accent-contrast: #0B0F0E;--atom-text: #E0E0E0;--atom-text-muted: #BDBDBD;--atom-text-inverse: #0F0F0F;--atom-bg: #121212;--atom-surface: #1A1A1A;--atom-surface-alt: #222222;--atom-border: #2C2C2C;--atom-border-strong: #3A3A3A;--atom-success: #43A047;--atom-warning: #FB8C00;--atom-error: #E53935;--atom-info: #1E88E5;--atom-font-sans: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";--atom-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;--atom-text-xs: 12px;--atom-text-sm: 13px;--atom-text-md: 14px;--atom-text-lg: 16px;--atom-text-xl: 18px;--atom-line-height: 1.5;--atom-font-weight-normal: 400;--atom-font-weight-medium: 500;--atom-font-weight-bold: 700;--atom-space-1: 4px;--atom-space-2: 8px;--atom-space-3: 12px;--atom-space-4: 16px;--atom-space-6: 24px;--atom-spacing-1: 4px;--atom-spacing-2: 8px;--atom-spacing-3: 12px;--atom-spacing-4: 16px;--atom-spacing-6: 24px;--atom-radius-1: 4px;--atom-radius-2: 8px;--atom-radius-round: 9999px;--atom-focus-ring: var(--atom-primary-400);--atom-shadow-sm: 0 1px 2px rgba(0,0,0,.3);--atom-shadow-md: 0 4px 12px rgba(0,0,0,.45);--atom-shadow-lg: 0 12px 24px rgba(0,0,0,.55);--atom-link: #90CAF9;--atom-link-hover: #64B5F6;--atom-selection: rgba(38,166,154,.26);--atom-muted: rgba(255,255,255,.06);--atom-chart-1: #26A69A;--atom-chart-2: #64B5F6;--atom-chart-3: #81C784;--atom-chart-4: #FFB74D;--atom-chart-5: #BA68C8;--atom-chart-6: #FF7043;--atom-chart-7: #8D6E63;--atom-chart-8: #7986CB;--atom-chart-9: #4DD0E1;--atom-chart-10: #AED581;--atom-button-bg: var(--atom-primary);--atom-button-bg-hover: color-mix(in srgb, var(--atom-primary) 92%, black);--atom-button-fg: var(--atom-primary-contrast);--atom-button-ghost-bg: transparent;--atom-button-ghost-hover-bg: color-mix(in srgb, var(--atom-primary) 18%, black);--atom-button-ghost-fg: var(--atom-primary);--atom-card-bg: var(--atom-surface);--atom-card-fg: var(--atom-text);--atom-card-border: var(--atom-border);--atom-input-bg: #161616;--atom-input-fg: var(--atom-text);--atom-input-border: var(--atom-border);--atom-input-focus: var(--atom-focus-ring);--atom-ring-color: var(--atom-primary-400);--atom-ring-offset: var(--atom-bg);--atom-ripple-color-solid: var(--atom-button-fg);--atom-ripple-color-ghost: var(--atom-primary);--atom-ripple-opacity: .24}:where(.atom-theme)[data-theme=cyan-light]{--atom-primary-50: #E0F7FA;--atom-primary-100: #B2EBF2;--atom-primary-200: #80DEEA;--atom-primary-300: #4DD0E1;--atom-primary-400: #26C6DA;--atom-primary-500: #00BCD4;--atom-primary-600: #00A8CC;--atom-primary-700: #0097A7;--atom-primary-800: #00838F;--atom-primary-900: #006064;--atom-primary: var(--atom-primary-600);--atom-primary-contrast: #061316;--atom-accent: var(--atom-primary-400);--atom-accent-contrast: #061316;--atom-text: #212121;--atom-text-muted: #616161;--atom-text-inverse: #FFFFFF;--atom-bg: #F9FAFB;--atom-surface: #FFFFFF;--atom-surface-alt: #F5F5F5;--atom-border: #E0E0E0;--atom-border-strong: #BDBDBD;--atom-success: #43A047;--atom-warning: #FB8C00;--atom-error: #E53935;--atom-info: #1E88E5;--atom-font-sans: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";--atom-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;--atom-text-xs: 12px;--atom-text-sm: 13px;--atom-text-md: 14px;--atom-text-lg: 16px;--atom-text-xl: 18px;--atom-line-height: 1.5;--atom-font-weight-normal: 400;--atom-font-weight-medium: 500;--atom-font-weight-bold: 700;--atom-space-1: 4px;--atom-space-2: 8px;--atom-space-3: 12px;--atom-space-4: 16px;--atom-space-6: 24px;--atom-spacing-1: 4px;--atom-spacing-2: 8px;--atom-spacing-3: 12px;--atom-spacing-4: 16px;--atom-spacing-6: 24px;--atom-radius-1: 4px;--atom-radius-2: 8px;--atom-radius-round: 9999px;--atom-focus-ring: var(--atom-primary-400);--atom-shadow-sm: 0 1px 2px rgba(0,0,0,.04);--atom-shadow-md: 0 4px 6px rgba(0,0,0,.1);--atom-shadow-lg: 0 10px 15px rgba(0,0,0,.15);--atom-link: #1E88E5;--atom-link-hover: #1565C0;--atom-selection: rgba(0,168,204,.18);--atom-muted: rgba(33,33,33,.04);--atom-chart-1: #00A8CC;--atom-chart-2: #3949AB;--atom-chart-3: #43A047;--atom-chart-4: #FB8C00;--atom-chart-5: #8E24AA;--atom-chart-6: #F4511E;--atom-chart-7: #6D4C41;--atom-chart-8: #1E88E5;--atom-chart-9: #00796B;--atom-chart-10: #7CB342;--atom-button-bg: var(--atom-primary);--atom-button-bg-hover: color-mix(in srgb, var(--atom-primary) 90%, black);--atom-button-fg: var(--atom-primary-contrast);--atom-button-ghost-bg: transparent;--atom-button-ghost-hover-bg: color-mix(in srgb, var(--atom-primary) 10%, white);--atom-button-ghost-fg: var(--atom-primary);--atom-card-bg: var(--atom-surface);--atom-card-fg: var(--atom-text);--atom-card-border: var(--atom-border);--atom-input-bg: var(--atom-bg);--atom-input-fg: var(--atom-text);--atom-input-border: var(--atom-border);--atom-input-focus: var(--atom-focus-ring);--atom-ring-color: var(--atom-primary-400);--atom-ring-offset: var(--atom-bg)}:where(.atom-theme)[data-theme=cyan-dark]{--atom-primary-50: #E0F7FA;--atom-primary-100: #B2EBF2;--atom-primary-200: #80DEEA;--atom-primary-300: #4DD0E1;--atom-primary-400: #26C6DA;--atom-primary-500: #00BCD4;--atom-primary-600: #00A8CC;--atom-primary-700: #0097A7;--atom-primary-800: #00838F;--atom-primary-900: #006064;--atom-primary: var(--atom-primary-400);--atom-primary-contrast: #061316;--atom-accent: var(--atom-primary-300);--atom-accent-contrast: #061316;--atom-text: #E0E0E0;--atom-text-muted: #BDBDBD;--atom-text-inverse: #0F0F0F;--atom-bg: #121212;--atom-surface: #1A1A1A;--atom-surface-alt: #222222;--atom-border: #2C2C2C;--atom-border-strong: #3A3A3A;--atom-success: #43A047;--atom-warning: #FB8C00;--atom-error: #E53935;--atom-info: #1E88E5;--atom-font-sans: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";--atom-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;--atom-text-xs: 12px;--atom-text-sm: 13px;--atom-text-md: 14px;--atom-text-lg: 16px;--atom-text-xl: 18px;--atom-line-height: 1.5;--atom-font-weight-normal: 400;--atom-font-weight-medium: 500;--atom-font-weight-bold: 700;--atom-space-1: 4px;--atom-space-2: 8px;--atom-space-3: 12px;--atom-space-4: 16px;--atom-space-6: 24px;--atom-spacing-1: 4px;--atom-spacing-2: 8px;--atom-spacing-3: 12px;--atom-spacing-4: 16px;--atom-spacing-6: 24px;--atom-radius-1: 4px;--atom-radius-2: 8px;--atom-radius-round: 9999px;--atom-focus-ring: var(--atom-primary-400);--atom-shadow-sm: 0 1px 2px rgba(0,0,0,.3);--atom-shadow-md: 0 4px 12px rgba(0,0,0,.45);--atom-shadow-lg: 0 12px 24px rgba(0,0,0,.55);--atom-link: #90CAF9;--atom-link-hover: #64B5F6;--atom-selection: rgba(38,198,218,.26);--atom-muted: rgba(255,255,255,.06);--atom-chart-1: #26C6DA;--atom-chart-2: #64B5F6;--atom-chart-3: #81C784;--atom-chart-4: #FFB74D;--atom-chart-5: #BA68C8;--atom-chart-6: #FF7043;--atom-chart-7: #8D6E63;--atom-chart-8: #7986CB;--atom-chart-9: #4DD0E1;--atom-chart-10: #AED581;--atom-button-bg: var(--atom-primary);--atom-button-bg-hover: color-mix(in srgb, var(--atom-primary) 92%, black);--atom-button-fg: var(--atom-primary-contrast);--atom-button-ghost-bg: transparent;--atom-button-ghost-hover-bg: color-mix(in srgb, var(--atom-primary) 18%, black);--atom-button-ghost-fg: var(--atom-primary);--atom-card-bg: var(--atom-surface);--atom-card-fg: var(--atom-text);--atom-card-border: var(--atom-border);--atom-input-bg: #161616;--atom-input-fg: var(--atom-text);--atom-input-border: var(--atom-border);--atom-input-focus: var(--atom-focus-ring);--atom-ring-color: var(--atom-primary-400);--atom-ring-offset: var(--atom-bg)}:where(.atom-theme) .bg-\[var\(--atom-button-bg\)\]{background-color:var(--atom-button-bg)}:where(.atom-theme) .text-\[var\(--atom-button-fg\)\]{color:var(--atom-button-fg)}:where(.atom-theme) .hover\:bg-\[var\(--atom-button-bg-hover\)\]:hover{background-color:var(--atom-button-bg-hover)}:where(.atom-theme) .bg-\[var\(--atom-button-ghost-bg\)\]{background-color:var(--atom-button-ghost-bg)}:where(.atom-theme) .text-\[var\(--atom-button-ghost-fg\)\]{color:var(--atom-button-ghost-fg)}:where(.atom-theme) .hover\:bg-\[var\(--atom-button-ghost-hover-bg\)\]:hover{background-color:var(--atom-button-ghost-hover-bg)}:where(.atom-theme) .bg-\[var\(--atom-button-success-bg\)\]{background-color:var(--atom-button-success-bg)}:where(.atom-theme) .text-\[var\(--atom-button-success-fg\)\]{color:var(--atom-button-success-fg)}:where(.atom-theme) .hover\:bg-\[var\(--atom-button-success-bg-hover\)\]:hover{background-color:var(--atom-button-success-bg-hover)}:where(.atom-theme) .bg-\[var\(--atom-button-warning-bg\)\]{background-color:var(--atom-button-warning-bg)}:where(.atom-theme) .text-\[var\(--atom-button-warning-fg\)\]{color:var(--atom-button-warning-fg)}:where(.atom-theme) .hover\:bg-\[var\(--atom-button-warning-bg-hover\)\]:hover{background-color:var(--atom-button-warning-bg-hover)}:where(.atom-theme) .bg-\[var\(--atom-button-danger-bg\)\]{background-color:var(--atom-button-danger-bg)}:where(.atom-theme) .text-\[var\(--atom-button-danger-fg\)\]{color:var(--atom-button-danger-fg)}:where(.atom-theme) .hover\:bg-\[var\(--atom-button-danger-bg-hover\)\]:hover{background-color:var(--atom-button-danger-bg-hover)}:where(.atom-theme) .bg-\[var\(--atom-button-info-bg\)\]{background-color:var(--atom-button-info-bg)}:where(.atom-theme) .text-\[var\(--atom-button-info-fg\)\]{color:var(--atom-button-info-fg)}:where(.atom-theme) .hover\:bg-\[var\(--atom-button-info-bg-hover\)\]:hover{background-color:var(--atom-button-info-bg-hover)}:where(.atom-theme) .border-\[var\(--atom-border\)\]{border-color:var(--atom-border)}:where(.atom-theme) .text-\[var\(--atom-primary\)\]{color:var(--atom-primary)}:where(.atom-theme) .atom-ripple{position:absolute;border-radius:9999px;transform:scale(0);pointer-events:none;opacity:var(--atom-ripple-opacity, .22);animation:atom-ripple .46s ease-out forwards;mix-blend-mode:normal}@keyframes atom-ripple{to{transform:scale(1);opacity:0}}@media(prefers-reduced-motion:reduce){:where(.atom-theme) .atom-ripple{animation-duration:1ms}}:where(.atom-theme){color:var(--atom-text);font-family:var(--atom-font-sans);font-size:var(--atom-text-md);background:var(--atom-bg)}:where(.atom-theme) button,:where(.atom-theme) input,:where(.atom-theme) select,:where(.atom-theme) textarea{font:inherit;color:inherit;background:transparent;border:1px solid var(--atom-border);border-radius:var(--atom-radius-1)}:where(.atom-theme) .atom-surface{background:var(--atom-surface);border:1px solid var(--atom-border);border-radius:var(--atom-radius-2);box-shadow:var(--atom-shadow-1)}
|