@phcdevworks/spectre-ui 0.0.1 → 0.0.2
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 +120 -30
- package/dist/base.css +36 -13
- package/dist/components.css +128 -99
- package/dist/index.cjs +121 -155
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +86 -52
- package/dist/index.d.ts +86 -52
- package/dist/index.js +120 -148
- package/dist/index.js.map +1 -1
- package/dist/utilities.css +3 -3
- package/package.json +11 -7
package/README.md
CHANGED
|
@@ -1,24 +1,16 @@
|
|
|
1
|
-
#
|
|
1
|
+
# @phcdevworks/spectre-ui
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
It provides precompiled CSS, utilities, and styling primitives used by **Spectre Blocks** (WordPress), **Spectre Astro**, **Spectre 11ty**, and future Spectre tools.
|
|
6
|
-
|
|
7
|
-
> One design system. Many frameworks. Full consistency.
|
|
8
|
-
|
|
9
|
-
---
|
|
3
|
+
Core styling layer for the Spectre design system. `@phcdevworks/spectre-ui` ships the precompiled CSS, tailwind preset, and recipe helpers that power every Spectre integration (WordPress blocks, Astro, 11ty, and more).
|
|
10
4
|
|
|
11
5
|
## Overview
|
|
12
6
|
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
## Features
|
|
7
|
+
This package is the single source of truth for Spectre's design language. It exposes CSS entry points, typed recipes, and token-driven utilities that downstream frameworks can consume without duplicating logic.
|
|
16
8
|
|
|
17
|
-
-
|
|
18
|
-
-
|
|
19
|
-
-
|
|
20
|
-
-
|
|
21
|
-
-
|
|
9
|
+
- ✅ Token-powered styles built on `@phcdevworks/spectre-tokens`
|
|
10
|
+
- ✅ Precompiled `base`, `components`, and `utilities` CSS bundles
|
|
11
|
+
- ✅ Type-safe recipes (`getButtonClasses`, `getCardClasses`, `getInputClasses`)
|
|
12
|
+
- ✅ Tailwind preset + helpers to generate a Spectre theme
|
|
13
|
+
- ✅ Framework-agnostic: works anywhere CSS and JavaScript run
|
|
22
14
|
|
|
23
15
|
## Installation
|
|
24
16
|
|
|
@@ -28,30 +20,128 @@ npm install @phcdevworks/spectre-ui
|
|
|
28
20
|
|
|
29
21
|
## Usage
|
|
30
22
|
|
|
31
|
-
Import Spectre
|
|
23
|
+
### 1. Import Spectre CSS
|
|
24
|
+
|
|
25
|
+
You can import the full bundle or use the namespaced entry points anywhere in your app, layout, or build pipeline.
|
|
32
26
|
|
|
33
27
|
```css
|
|
34
|
-
|
|
28
|
+
/* Full bundle */
|
|
29
|
+
@import "@phcdevworks/spectre-ui/dist/base.css";
|
|
30
|
+
@import "@phcdevworks/spectre-ui/dist/components.css";
|
|
31
|
+
@import "@phcdevworks/spectre-ui/dist/utilities.css";
|
|
35
32
|
```
|
|
36
33
|
|
|
37
|
-
|
|
34
|
+
### 2. Configure Tailwind
|
|
35
|
+
|
|
36
|
+
Spectre ships an opinionated Tailwind preset that mirrors the tokens exactly.
|
|
37
|
+
|
|
38
|
+
```ts
|
|
39
|
+
// tailwind.config.mjs
|
|
40
|
+
import { spectrePreset } from "@phcdevworks/spectre-ui";
|
|
38
41
|
|
|
39
|
-
|
|
40
|
-
|
|
42
|
+
export default {
|
|
43
|
+
content: ["./src/**/*.{js,ts,jsx,tsx,astro}"],
|
|
44
|
+
presets: [spectrePreset],
|
|
45
|
+
};
|
|
41
46
|
```
|
|
42
47
|
|
|
43
|
-
|
|
48
|
+
Need custom tokens? Generate a tailored theme:
|
|
49
|
+
|
|
50
|
+
```ts
|
|
51
|
+
import {
|
|
52
|
+
spectreTokens,
|
|
53
|
+
createSpectreTailwindTheme,
|
|
54
|
+
} from "@phcdevworks/spectre-ui";
|
|
55
|
+
|
|
56
|
+
const theme = createSpectreTailwindTheme({
|
|
57
|
+
tokens: spectreTokens,
|
|
58
|
+
overrides: {
|
|
59
|
+
colors: {
|
|
60
|
+
brand: "#7928CA",
|
|
61
|
+
},
|
|
62
|
+
},
|
|
63
|
+
});
|
|
64
|
+
```
|
|
44
65
|
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
66
|
+
### 3. Use Spectre recipes
|
|
67
|
+
|
|
68
|
+
Recipes wrap Spectre's class combinations so every framework composes styles consistently.
|
|
69
|
+
|
|
70
|
+
```ts
|
|
71
|
+
import {
|
|
72
|
+
getButtonClasses,
|
|
73
|
+
getCardClasses,
|
|
74
|
+
getInputClasses,
|
|
75
|
+
} from "@phcdevworks/spectre-ui";
|
|
76
|
+
|
|
77
|
+
const buttonClasses = getButtonClasses({
|
|
78
|
+
variant: "primary",
|
|
79
|
+
size: "lg",
|
|
80
|
+
fullWidth: true,
|
|
81
|
+
});
|
|
82
|
+
// "sp-btn sp-btn--primary sp-btn--lg sp-btn--full"
|
|
83
|
+
|
|
84
|
+
const cardClasses = getCardClasses({ variant: "outline", padded: true });
|
|
85
|
+
// "sp-card sp-card--outline sp-card--padded"
|
|
86
|
+
|
|
87
|
+
const inputClasses = getInputClasses({
|
|
88
|
+
state: "error",
|
|
89
|
+
size: "sm",
|
|
90
|
+
fullWidth: true,
|
|
91
|
+
});
|
|
92
|
+
// "sp-input sp-input--error sp-input--sm sp-input--full"
|
|
93
|
+
```
|
|
50
94
|
|
|
51
|
-
##
|
|
95
|
+
## CSS Path Constants
|
|
52
96
|
|
|
53
|
-
|
|
97
|
+
Utilities for referencing the published CSS files programmatically:
|
|
98
|
+
|
|
99
|
+
```ts
|
|
100
|
+
import {
|
|
101
|
+
spectreBaseStylesPath,
|
|
102
|
+
spectreComponentsStylesPath,
|
|
103
|
+
spectreUtilitiesStylesPath,
|
|
104
|
+
spectreStyles,
|
|
105
|
+
} from "@phcdevworks/spectre-ui";
|
|
106
|
+
|
|
107
|
+
// spectreStyles.base → "@phcdevworks/spectre-ui/dist/base.css"
|
|
108
|
+
// spectreStyles.components → "@phcdevworks/spectre-ui/dist/components.css"
|
|
109
|
+
// spectreStyles.utilities → "@phcdevworks/spectre-ui/dist/utilities.css"
|
|
110
|
+
```
|
|
111
|
+
|
|
112
|
+
## Tokens & TypeScript Support
|
|
113
|
+
|
|
114
|
+
All exports ship full TypeScript definitions, including:
|
|
115
|
+
|
|
116
|
+
```ts
|
|
117
|
+
import type {
|
|
118
|
+
SpectreTokens,
|
|
119
|
+
SpectreTailwindTheme,
|
|
120
|
+
ButtonVariant,
|
|
121
|
+
InputState,
|
|
122
|
+
CardVariant,
|
|
123
|
+
} from "@phcdevworks/spectre-ui";
|
|
124
|
+
```
|
|
125
|
+
|
|
126
|
+
Use helpers such as `generateSpectreCssVariables`, `createSpectreCssVariableMap`, or `getInputClasses` to keep your implementation type-safe and in sync with the design system.
|
|
127
|
+
|
|
128
|
+
## Design Principles
|
|
129
|
+
|
|
130
|
+
1. **Single source of truth** – all Spectre products consume these tokens and CSS files.
|
|
131
|
+
2. **No style duplication** – downstream frameworks never re-encode Spectre logic.
|
|
132
|
+
3. **Token-first** – the Tailwind preset, CSS, and recipes are generated from tokens.
|
|
133
|
+
4. **Framework agnostic** – works with any bundler, CMS, or runtime.
|
|
134
|
+
5. **Type-safe ergonomics** – every helper exports strict types for confident usage.
|
|
135
|
+
|
|
136
|
+
## Requirements
|
|
137
|
+
|
|
138
|
+
- **Tailwind CSS**: ^3.4.0 or ^4.0.0 (if you consume the preset)
|
|
139
|
+
- **Build tooling**: ESM-compatible bundler capable of importing CSS from npm
|
|
54
140
|
|
|
55
141
|
## Contributing
|
|
56
142
|
|
|
57
|
-
Contributions are welcome
|
|
143
|
+
Contributions are welcome—open an issue or submit a pull request on GitHub with context about the change you’re proposing.
|
|
144
|
+
|
|
145
|
+
## License
|
|
146
|
+
|
|
147
|
+
MIT © PHCDevworks
|
package/dist/base.css
CHANGED
|
@@ -1,42 +1,65 @@
|
|
|
1
1
|
@layer base {
|
|
2
|
+
|
|
2
3
|
*,
|
|
3
4
|
*::before,
|
|
4
5
|
*::after {
|
|
5
6
|
box-sizing: border-box;
|
|
6
7
|
}
|
|
7
8
|
|
|
9
|
+
html,
|
|
8
10
|
body {
|
|
9
11
|
margin: 0;
|
|
12
|
+
padding: 0;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
body {
|
|
10
16
|
min-height: 100vh;
|
|
11
|
-
font-family: var(--sp-font-family-sans, system-ui);
|
|
17
|
+
font-family: var(--sp-font-family-sans, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
|
|
12
18
|
font-size: var(--sp-font-md-size, 1rem);
|
|
13
19
|
line-height: var(--sp-font-md-line-height, 1.5);
|
|
14
20
|
color: var(--sp-color-neutral-900, #0f172a);
|
|
15
21
|
background-color: var(--sp-color-neutral-50, #f8fafc);
|
|
16
|
-
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
img,
|
|
25
|
+
picture,
|
|
26
|
+
video,
|
|
27
|
+
canvas,
|
|
28
|
+
svg {
|
|
29
|
+
display: block;
|
|
30
|
+
max-width: 100%;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
input,
|
|
34
|
+
button,
|
|
35
|
+
textarea,
|
|
36
|
+
select {
|
|
37
|
+
font: inherit;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
button {
|
|
41
|
+
border: none;
|
|
42
|
+
background: none;
|
|
43
|
+
padding: 0;
|
|
44
|
+
cursor: pointer;
|
|
17
45
|
}
|
|
18
46
|
|
|
19
47
|
a {
|
|
20
|
-
color: var(--sp-color-
|
|
48
|
+
color: var(--sp-link-color, var(--sp-color-primary-600, #4f46e5));
|
|
21
49
|
text-decoration: none;
|
|
22
|
-
font-weight: var(--sp-font-md-weight, 500);
|
|
23
|
-
transition: color var(--sp-duration-fast, 150ms) var(--sp-easing-out, ease);
|
|
24
50
|
}
|
|
25
51
|
|
|
26
|
-
a:hover
|
|
27
|
-
a:focus-visible {
|
|
28
|
-
color: var(--sp-color-brand-700, #5626b4);
|
|
52
|
+
a:hover {
|
|
29
53
|
text-decoration: underline;
|
|
30
54
|
}
|
|
31
55
|
|
|
32
56
|
:focus-visible {
|
|
33
|
-
outline:
|
|
34
|
-
|
|
35
|
-
outline-offset: var(--sp-focus-ring-offset, 2px);
|
|
57
|
+
outline: 2px solid var(--sp-focus-ring-color, #4f46e5);
|
|
58
|
+
outline-offset: 2px;
|
|
36
59
|
}
|
|
37
60
|
|
|
38
61
|
::selection {
|
|
39
|
-
background-color: var(--sp-
|
|
40
|
-
color:
|
|
62
|
+
background-color: var(--sp-selection-bg, rgba(79, 70, 229, 0.15));
|
|
63
|
+
color: inherit;
|
|
41
64
|
}
|
|
42
65
|
}
|
package/dist/components.css
CHANGED
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
@layer components {
|
|
2
|
+
|
|
3
|
+
/* BUTTONS -------------------------------------------------------------- */
|
|
2
4
|
.sp-btn {
|
|
3
5
|
display: inline-flex;
|
|
4
6
|
align-items: center;
|
|
@@ -11,145 +13,154 @@
|
|
|
11
13
|
font-size: var(--sp-font-md-size, 1rem);
|
|
12
14
|
line-height: 1;
|
|
13
15
|
font-weight: var(--sp-font-md-weight, 500);
|
|
14
|
-
transition:
|
|
16
|
+
transition:
|
|
17
|
+
background-color var(--sp-duration-fast, 150ms) var(--sp-easing-out, ease),
|
|
15
18
|
color var(--sp-duration-fast, 150ms) var(--sp-easing-out, ease),
|
|
16
|
-
box-shadow var(--sp-duration-fast, 150ms) var(--sp-easing-out, ease)
|
|
19
|
+
box-shadow var(--sp-duration-fast, 150ms) var(--sp-easing-out, ease),
|
|
20
|
+
border-color var(--sp-duration-fast, 150ms) var(--sp-easing-out, ease);
|
|
17
21
|
cursor: pointer;
|
|
18
22
|
min-height: var(--sp-min-touch-target, 44px);
|
|
19
23
|
}
|
|
20
24
|
|
|
21
|
-
.sp-btn
|
|
25
|
+
.sp-btn:disabled,
|
|
26
|
+
.sp-btn[aria-disabled="true"] {
|
|
27
|
+
cursor: not-allowed;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
/* sizes */
|
|
31
|
+
.sp-btn--sm {
|
|
22
32
|
padding: var(--sp-space-3xs, 0.125rem) var(--sp-space-sm, 0.75rem);
|
|
23
33
|
font-size: var(--sp-font-sm-size, 0.875rem);
|
|
24
34
|
line-height: var(--sp-font-sm-line-height, 1.5rem);
|
|
25
35
|
}
|
|
26
36
|
|
|
27
|
-
.sp-btn
|
|
37
|
+
.sp-btn--md {
|
|
28
38
|
padding: var(--sp-space-2xs, 0.25rem) var(--sp-space-md, 1rem);
|
|
29
39
|
font-size: var(--sp-font-md-size, 1rem);
|
|
30
40
|
line-height: var(--sp-font-md-line-height, 1.75rem);
|
|
31
41
|
}
|
|
32
42
|
|
|
33
|
-
.sp-btn
|
|
43
|
+
.sp-btn--lg {
|
|
34
44
|
padding: var(--sp-space-xs, 0.5rem) var(--sp-space-lg, 1.5rem);
|
|
35
|
-
font-size: var(--sp-font-lg-size, 1.
|
|
36
|
-
line-height: var(--sp-font-lg-line-height,
|
|
45
|
+
font-size: var(--sp-font-lg-size, 1.125rem);
|
|
46
|
+
line-height: var(--sp-font-lg-line-height, 1.75rem);
|
|
37
47
|
}
|
|
38
48
|
|
|
39
|
-
|
|
40
|
-
|
|
49
|
+
/* primary */
|
|
50
|
+
.sp-btn--primary {
|
|
51
|
+
background-color: var(--sp-button-primary-bg, #4f46e5);
|
|
41
52
|
color: var(--sp-button-primary-text, #ffffff);
|
|
42
53
|
box-shadow: var(--sp-shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.08));
|
|
43
54
|
}
|
|
44
55
|
|
|
45
|
-
.sp-btn
|
|
46
|
-
.sp-btn
|
|
47
|
-
background-color: var(--sp-button-primary-bghover, #
|
|
56
|
+
.sp-btn--primary.sp-btn--hover,
|
|
57
|
+
.sp-btn--primary:hover {
|
|
58
|
+
background-color: var(--sp-button-primary-bghover, #4338ca);
|
|
48
59
|
}
|
|
49
60
|
|
|
50
|
-
.sp-btn
|
|
51
|
-
.sp-btn
|
|
52
|
-
background-color: var(--sp-button-primary-bgactive, #
|
|
61
|
+
.sp-btn--primary.sp-btn--active,
|
|
62
|
+
.sp-btn--primary:active {
|
|
63
|
+
background-color: var(--sp-button-primary-bgactive, #3730a3);
|
|
53
64
|
}
|
|
54
65
|
|
|
55
|
-
.sp-btn
|
|
56
|
-
.sp-btn
|
|
57
|
-
background-color: var(--sp-button-primary-bgdisabled, #
|
|
58
|
-
color: var(--sp-button-primary-textdisabled, #
|
|
66
|
+
.sp-btn--primary.sp-btn--disabled,
|
|
67
|
+
.sp-btn--primary:disabled {
|
|
68
|
+
background-color: var(--sp-button-primary-bgdisabled, #e0e7ff);
|
|
69
|
+
color: var(--sp-button-primary-textdisabled, #9ca3af);
|
|
70
|
+
box-shadow: none;
|
|
59
71
|
}
|
|
60
72
|
|
|
61
|
-
|
|
73
|
+
/* secondary */
|
|
74
|
+
.sp-btn--secondary {
|
|
62
75
|
background-color: var(--sp-button-secondary-bg, #ffffff);
|
|
63
|
-
color: var(--sp-button-secondary-text, #
|
|
64
|
-
border-color: var(--sp-button-secondary-border, #
|
|
76
|
+
color: var(--sp-button-secondary-text, #4f46e5);
|
|
77
|
+
border-color: var(--sp-button-secondary-border, #4f46e5);
|
|
65
78
|
}
|
|
66
79
|
|
|
67
|
-
.sp-btn
|
|
68
|
-
.sp-btn
|
|
69
|
-
background-color: var(--sp-button-secondary-bghover, #
|
|
80
|
+
.sp-btn--secondary.sp-btn--hover,
|
|
81
|
+
.sp-btn--secondary:hover {
|
|
82
|
+
background-color: var(--sp-button-secondary-bghover, #eef2ff);
|
|
70
83
|
}
|
|
71
84
|
|
|
72
|
-
.sp-btn
|
|
73
|
-
.sp-btn
|
|
74
|
-
background-color: var(--sp-button-secondary-bgactive, #
|
|
85
|
+
.sp-btn--secondary.sp-btn--active,
|
|
86
|
+
.sp-btn--secondary:active {
|
|
87
|
+
background-color: var(--sp-button-secondary-bgactive, #e0e7ff);
|
|
75
88
|
}
|
|
76
89
|
|
|
77
|
-
.sp-btn
|
|
78
|
-
.sp-btn
|
|
79
|
-
background-color: var(--sp-button-secondary-bgdisabled, #
|
|
80
|
-
color: var(--sp-button-secondary-textdisabled, #
|
|
81
|
-
border-color: var(--sp-button-secondary-borderdisabled, #
|
|
90
|
+
.sp-btn--secondary.sp-btn--disabled,
|
|
91
|
+
.sp-btn--secondary:disabled {
|
|
92
|
+
background-color: var(--sp-button-secondary-bgdisabled, #f9fafb);
|
|
93
|
+
color: var(--sp-button-secondary-textdisabled, #9ca3af);
|
|
94
|
+
border-color: var(--sp-button-secondary-borderdisabled, #e5e7eb);
|
|
82
95
|
}
|
|
83
96
|
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
color:
|
|
97
|
+
/* ghost */
|
|
98
|
+
.sp-btn--ghost {
|
|
99
|
+
background-color: transparent;
|
|
100
|
+
color: var(--sp-button-ghost-text, #4f46e5);
|
|
87
101
|
}
|
|
88
102
|
|
|
89
|
-
.sp-btn
|
|
90
|
-
.sp-btn
|
|
91
|
-
background-color: var(--sp-button-ghost-bghover,
|
|
103
|
+
.sp-btn--ghost.sp-btn--hover,
|
|
104
|
+
.sp-btn--ghost:hover {
|
|
105
|
+
background-color: var(--sp-button-ghost-bghover, rgba(79, 70, 229, 0.06));
|
|
92
106
|
}
|
|
93
107
|
|
|
94
|
-
.sp-btn
|
|
95
|
-
.sp-btn
|
|
96
|
-
background-color: var(--sp-button-ghost-bgactive,
|
|
108
|
+
.sp-btn--ghost.sp-btn--active,
|
|
109
|
+
.sp-btn--ghost:active {
|
|
110
|
+
background-color: var(--sp-button-ghost-bgactive, rgba(79, 70, 229, 0.12));
|
|
97
111
|
}
|
|
98
112
|
|
|
99
|
-
.sp-btn
|
|
100
|
-
.sp-btn
|
|
101
|
-
color: var(--sp-button-ghost-textdisabled, #
|
|
102
|
-
background-color:
|
|
113
|
+
.sp-btn--ghost.sp-btn--disabled,
|
|
114
|
+
.sp-btn--ghost:disabled {
|
|
115
|
+
color: var(--sp-button-ghost-textdisabled, #9ca3af);
|
|
116
|
+
background-color: transparent;
|
|
103
117
|
}
|
|
104
118
|
|
|
105
|
-
|
|
106
|
-
|
|
119
|
+
/* danger */
|
|
120
|
+
.sp-btn--danger {
|
|
121
|
+
background-color: var(--sp-button-danger-bg, #dc2626);
|
|
107
122
|
color: var(--sp-button-danger-text, #ffffff);
|
|
108
123
|
}
|
|
109
124
|
|
|
110
|
-
.sp-btn
|
|
111
|
-
.sp-btn
|
|
112
|
-
background-color: var(--sp-button-danger-bghover, #
|
|
125
|
+
.sp-btn--danger.sp-btn--hover,
|
|
126
|
+
.sp-btn--danger:hover {
|
|
127
|
+
background-color: var(--sp-button-danger-bghover, #b91c1c);
|
|
113
128
|
}
|
|
114
129
|
|
|
115
|
-
.sp-btn
|
|
116
|
-
.sp-btn
|
|
117
|
-
background-color: var(--sp-button-danger-bgactive, #
|
|
130
|
+
.sp-btn--danger.sp-btn--active,
|
|
131
|
+
.sp-btn--danger:active {
|
|
132
|
+
background-color: var(--sp-button-danger-bgactive, #991b1b);
|
|
118
133
|
}
|
|
119
134
|
|
|
120
|
-
.sp-btn
|
|
121
|
-
.sp-btn
|
|
122
|
-
background-color: var(--sp-button-danger-bgdisabled, #
|
|
123
|
-
color: var(--sp-button-danger-textdisabled, #
|
|
135
|
+
.sp-btn--danger.sp-btn--disabled,
|
|
136
|
+
.sp-btn--danger:disabled {
|
|
137
|
+
background-color: var(--sp-button-danger-bgdisabled, #fee2e2);
|
|
138
|
+
color: var(--sp-button-danger-textdisabled, #9ca3af);
|
|
124
139
|
}
|
|
125
140
|
|
|
126
|
-
|
|
127
|
-
|
|
141
|
+
/* success */
|
|
142
|
+
.sp-btn--success {
|
|
143
|
+
background-color: var(--sp-button-success-bg, #16a34a);
|
|
128
144
|
color: var(--sp-button-success-text, #ffffff);
|
|
129
145
|
}
|
|
130
146
|
|
|
131
|
-
.sp-btn
|
|
132
|
-
.sp-btn
|
|
133
|
-
background-color: var(--sp-button-success-bghover, #
|
|
147
|
+
.sp-btn--success.sp-btn--hover,
|
|
148
|
+
.sp-btn--success:hover {
|
|
149
|
+
background-color: var(--sp-button-success-bghover, #15803d);
|
|
134
150
|
}
|
|
135
151
|
|
|
136
|
-
.sp-btn
|
|
137
|
-
.sp-btn
|
|
138
|
-
background-color: var(--sp-button-success-bgactive, #
|
|
152
|
+
.sp-btn--success.sp-btn--active,
|
|
153
|
+
.sp-btn--success:active {
|
|
154
|
+
background-color: var(--sp-button-success-bgactive, #166534);
|
|
139
155
|
}
|
|
140
156
|
|
|
141
|
-
.sp-btn
|
|
142
|
-
.sp-btn
|
|
157
|
+
.sp-btn--success.sp-btn--disabled,
|
|
158
|
+
.sp-btn--success:disabled {
|
|
143
159
|
background-color: var(--sp-button-success-bgdisabled, #bbf7d0);
|
|
144
|
-
color: var(--sp-button-success-textdisabled, #
|
|
160
|
+
color: var(--sp-button-success-textdisabled, #065f46);
|
|
145
161
|
}
|
|
146
162
|
|
|
147
|
-
|
|
148
|
-
.sp-btn:disabled {
|
|
149
|
-
cursor: not-allowed;
|
|
150
|
-
box-shadow: none;
|
|
151
|
-
opacity: var(--sp-opacity-disabled, 0.38);
|
|
152
|
-
}
|
|
163
|
+
/* INPUTS --------------------------------------------------------------- */
|
|
153
164
|
|
|
154
165
|
.sp-input {
|
|
155
166
|
width: 100%;
|
|
@@ -161,58 +172,76 @@
|
|
|
161
172
|
color: var(--sp-form-default-text, #0f172a);
|
|
162
173
|
font-family: var(--sp-font-family-sans, system-ui);
|
|
163
174
|
font-size: var(--sp-font-md-size, 1rem);
|
|
164
|
-
line-height: var(--sp-font-md-line-height, 1.
|
|
165
|
-
transition:
|
|
175
|
+
line-height: var(--sp-font-md-line-height, 1.5rem);
|
|
176
|
+
transition:
|
|
177
|
+
border-color var(--sp-duration-fast, 150ms) var(--sp-easing-out, ease),
|
|
166
178
|
box-shadow var(--sp-duration-fast, 150ms) var(--sp-easing-out, ease),
|
|
167
179
|
background-color var(--sp-duration-fast, 150ms) var(--sp-easing-out, ease);
|
|
168
180
|
}
|
|
169
181
|
|
|
170
182
|
.sp-input::placeholder {
|
|
171
|
-
color: var(--sp-form-default-placeholder, #
|
|
183
|
+
color: var(--sp-form-default-placeholder, #9ca3af);
|
|
172
184
|
}
|
|
173
185
|
|
|
174
186
|
.sp-input:focus,
|
|
175
|
-
.sp-input
|
|
176
|
-
border-color: var(--sp-form-focus-border, #
|
|
177
|
-
box-shadow: 0 0 0 var(--sp-focus-ring-width, 2px) var(--sp-form-focus-ring,
|
|
187
|
+
.sp-input--focus {
|
|
188
|
+
border-color: var(--sp-form-focus-border, #4f46e5);
|
|
189
|
+
box-shadow: 0 0 0 var(--sp-focus-ring-width, 2px) var(--sp-form-focus-ring, rgba(79, 70, 229, 0.5));
|
|
178
190
|
outline: none;
|
|
179
191
|
}
|
|
180
192
|
|
|
181
|
-
.sp-input
|
|
182
|
-
border-color: var(--sp-form-invalid-border, #
|
|
193
|
+
.sp-input--error {
|
|
194
|
+
border-color: var(--sp-form-invalid-border, #dc2626);
|
|
183
195
|
background-color: var(--sp-form-invalid-bg, #fef2f2);
|
|
184
|
-
color: var(--sp-form-invalid-text, #
|
|
196
|
+
color: var(--sp-form-invalid-text, #7f1d1d);
|
|
185
197
|
}
|
|
186
198
|
|
|
187
|
-
.sp-input
|
|
188
|
-
border-color: var(--sp-form-valid-border, #
|
|
189
|
-
background-color: var(--sp-form-valid-bg, #
|
|
190
|
-
color: var(--sp-form-valid-text, #
|
|
199
|
+
.sp-input--success {
|
|
200
|
+
border-color: var(--sp-form-valid-border, #16a34a);
|
|
201
|
+
background-color: var(--sp-form-valid-bg, #ecfdf3);
|
|
202
|
+
color: var(--sp-form-valid-text, #14532d);
|
|
191
203
|
}
|
|
192
204
|
|
|
193
|
-
.sp-input
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
border-color: var(--sp-form-disabled-border, #
|
|
197
|
-
color: var(--sp-form-disabled-text, #94a3b8);
|
|
198
|
-
cursor: not-allowed;
|
|
205
|
+
.sp-input--disabled {
|
|
206
|
+
background-color: var(--sp-form-disabled-bg, #f9fafb);
|
|
207
|
+
color: var(--sp-form-disabled-text, #9ca3af);
|
|
208
|
+
border-color: var(--sp-form-disabled-border, #e5e7eb);
|
|
199
209
|
}
|
|
200
210
|
|
|
211
|
+
.sp-input--disabled,
|
|
212
|
+
.sp-input--disabled:focus {
|
|
213
|
+
box-shadow: none;
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
/* CARDS ---------------------------------------------------------------- */
|
|
217
|
+
|
|
201
218
|
.sp-card {
|
|
202
|
-
background-color: var(--sp-
|
|
203
|
-
color: var(--sp-
|
|
219
|
+
background-color: var(--sp-card-bg, #ffffff);
|
|
220
|
+
color: var(--sp-card-text, #0f172a);
|
|
204
221
|
border-radius: var(--sp-radius-lg, 8px);
|
|
205
222
|
padding: var(--sp-space-lg, 1.5rem);
|
|
206
223
|
box-shadow: var(--sp-shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.08));
|
|
207
224
|
border: 1px solid transparent;
|
|
208
225
|
}
|
|
209
226
|
|
|
210
|
-
.sp-card
|
|
227
|
+
.sp-card--elevated {
|
|
211
228
|
box-shadow: var(--sp-shadow-lg, 0 8px 20px rgba(15, 23, 42, 0.18));
|
|
212
229
|
}
|
|
213
230
|
|
|
214
|
-
.sp-card
|
|
231
|
+
.sp-card--flat {
|
|
215
232
|
box-shadow: var(--sp-shadow-none, none);
|
|
216
|
-
border-color: var(--sp-color-neutral-200, #
|
|
233
|
+
border-color: var(--sp-color-neutral-200, #e5e7eb);
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
.sp-card--outline {
|
|
237
|
+
background-color: var(--sp-card-outline-bg, #ffffff);
|
|
238
|
+
border-color: var(--sp-card-outline-border, #e5e7eb);
|
|
239
|
+
box-shadow: var(--sp-shadow-none, none);
|
|
240
|
+
}
|
|
241
|
+
|
|
242
|
+
.sp-card--ghost {
|
|
243
|
+
background-color: transparent;
|
|
244
|
+
border-color: transparent;
|
|
245
|
+
box-shadow: none;
|
|
217
246
|
}
|
|
218
247
|
}
|