tailwind-softpop-plugin 0.0.1
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/LICENSE +21 -0
- package/LLM.txt +37 -0
- package/README.md +92 -0
- package/package.json +29 -0
- package/src/index.css +164 -0
- package/src/index.js +124 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 CarfDev
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/LLM.txt
ADDED
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
# Project Overview: tailwind-softpop-plugin
|
|
2
|
+
|
|
3
|
+
This project is a Tailwind CSS v4 plugin that implements the "Soft Pop" design system. It combines CSS theme configuration with a JavaScript plugin for complex components.
|
|
4
|
+
|
|
5
|
+
## Technical Summary
|
|
6
|
+
|
|
7
|
+
- **Framework**: Tailwind CSS v4
|
|
8
|
+
- **Modules**: ESM (`type: "module"`)
|
|
9
|
+
- **Format**: Hybrid (CSS + JS)
|
|
10
|
+
|
|
11
|
+
## File Structure
|
|
12
|
+
|
|
13
|
+
### `src/index.css`
|
|
14
|
+
The main entry point exported by the package.
|
|
15
|
+
- **Theme**: Defines CSS variables for `oklch` color palettes, fonts, and shadows under `@theme`.
|
|
16
|
+
- **Base**: Applies base styles to `body` and headings (h1-h6).
|
|
17
|
+
- **Plugin Import**: Loads the JS component plugin via `@plugin "./index.js";`.
|
|
18
|
+
|
|
19
|
+
### `src/index.js`
|
|
20
|
+
A Tailwind CSS plugin defined using `plugin` from `tailwindcss/plugin`.
|
|
21
|
+
- **Components**:
|
|
22
|
+
- `.section-container`: Responsive constrained width container.
|
|
23
|
+
- `.btn`: Buttons with "hard shadow" pop effect (`box-shadow`, `transform` on hover/active). Variants: `primary`, `secondary`, `outline`.
|
|
24
|
+
- `.card`: Container query-based card component (`containerType: "inline-size"`).
|
|
25
|
+
- Adapts layout (e.g., `.card.horizontal`) based on container width.
|
|
26
|
+
- Adapts font sizes for small containers.
|
|
27
|
+
|
|
28
|
+
## Key Design Tokens
|
|
29
|
+
|
|
30
|
+
- **Fonts**: `Nunito` (Heading), `Mulish` (Body).
|
|
31
|
+
- **Shadows**: Hard shadows (e.g., `4px 4px 0px`) for a retro/pop feel.
|
|
32
|
+
- **Colors**: Comprehensive `oklch` palettes (Primary, Secondary, Accent, Neutral, etc.).
|
|
33
|
+
|
|
34
|
+
## Usage Context
|
|
35
|
+
|
|
36
|
+
This package is intended to be imported directly in a Tailwind v4 CSS file:
|
|
37
|
+
`@import "tailwind-softpop-plugin";`
|
package/README.md
ADDED
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
# Tailwind Soft Pop Plugin
|
|
2
|
+
|
|
3
|
+
A Tailwind CSS v4 plugin that implements the "Soft Pop" design system. This plugin provides a vibrant, playful aesthetic with hard shadows, bold borders, and a comprehensive color palette using accessible `oklch` colors.
|
|
4
|
+
|
|
5
|
+
## Features
|
|
6
|
+
|
|
7
|
+
- **🎨 Radiant Colors:** Complete 50-950 color palette using `oklch` for Primary, Secondary, Accent, Base, Neutral, and functional colors (Success, Warning, Error, Info).
|
|
8
|
+
- **🔤 Typography:** Pre-configured font families (Nunito for headings, Mulish for body).
|
|
9
|
+
- **📦 Components:** Ready-to-use accessible components like Buttons and Cards.
|
|
10
|
+
- **📏 Layout:** Responsive container utilities.
|
|
11
|
+
- **🔍 Container Queries:** Intelligent card layouts that adapt to their container size.
|
|
12
|
+
|
|
13
|
+
## Installation
|
|
14
|
+
|
|
15
|
+
```bash
|
|
16
|
+
npm install tailwind-softpop-plugin
|
|
17
|
+
# or
|
|
18
|
+
pnpm add tailwind-softpop-plugin
|
|
19
|
+
# or
|
|
20
|
+
yarn add tailwind-softpop-plugin
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
## Usage
|
|
24
|
+
|
|
25
|
+
Since this is a Tailwind CSS v4 plugin, you simply need to import it into your main CSS file.
|
|
26
|
+
|
|
27
|
+
```css
|
|
28
|
+
@import "tailwindcss";
|
|
29
|
+
@import "tailwind-softpop-plugin";
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
This will automatically configure the theme variables, base styles, and load the component plugin.
|
|
33
|
+
|
|
34
|
+
## Design System
|
|
35
|
+
|
|
36
|
+
### Colors
|
|
37
|
+
|
|
38
|
+
The system uses `oklch` for inconsistent perceptual brightness.
|
|
39
|
+
|
|
40
|
+
- **Primary**: Cyan/Blue tones
|
|
41
|
+
- **Secondary**: Orange/Yellow tones
|
|
42
|
+
- **Accent**: Purple/Pink tones
|
|
43
|
+
- **Neutral**: Slate/Grey tones
|
|
44
|
+
|
|
45
|
+
### Components
|
|
46
|
+
|
|
47
|
+
#### Buttons (`.btn`)
|
|
48
|
+
|
|
49
|
+
Available variants:
|
|
50
|
+
|
|
51
|
+
- `.btn-primary`
|
|
52
|
+
- `.btn-secondary`
|
|
53
|
+
- `.btn-outline`
|
|
54
|
+
|
|
55
|
+
```html
|
|
56
|
+
<button class="btn btn-primary">Click Me</button>
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
#### Cards (`.card`)
|
|
60
|
+
|
|
61
|
+
Responsive cards that support Container Queries.
|
|
62
|
+
|
|
63
|
+
```html
|
|
64
|
+
<div class="card">
|
|
65
|
+
<div class="card-icon">★</div>
|
|
66
|
+
<div class="card-title">Card Title</div>
|
|
67
|
+
<p>Some awesome content here.</p>
|
|
68
|
+
</div>
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
**Horizontal Card**:
|
|
72
|
+
Add `.horizontal` to make the card adapt to a row layout when width permits (>450px).
|
|
73
|
+
|
|
74
|
+
```html
|
|
75
|
+
<div class="card horizontal">
|
|
76
|
+
<!-- content -->
|
|
77
|
+
</div>
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
#### Section Container (`.section-container`)
|
|
81
|
+
|
|
82
|
+
A responsive container that handles max-width and padding automatically across breakpoints.
|
|
83
|
+
|
|
84
|
+
```html
|
|
85
|
+
<section class="section-container">
|
|
86
|
+
<!-- content -->
|
|
87
|
+
</section>
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
## License
|
|
91
|
+
|
|
92
|
+
MIT © [CarfDev](https://github.com/carfdev/tailwind-softpop-plugin/blob/main/LICENSE)
|
package/package.json
ADDED
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "tailwind-softpop-plugin",
|
|
3
|
+
"version": "0.0.1",
|
|
4
|
+
"description": "Tailwind CSS plugin for softpop design system",
|
|
5
|
+
"style": "./src/index.css",
|
|
6
|
+
"exports": {
|
|
7
|
+
".": "./src/index.css",
|
|
8
|
+
"./index.css": "./src/index.css"
|
|
9
|
+
},
|
|
10
|
+
"type": "module",
|
|
11
|
+
"keywords": [
|
|
12
|
+
"tailwind",
|
|
13
|
+
"css",
|
|
14
|
+
"plugin",
|
|
15
|
+
"softpop",
|
|
16
|
+
"design system"
|
|
17
|
+
],
|
|
18
|
+
"author": "CarfDev (@carfdev)",
|
|
19
|
+
"license": "MIT",
|
|
20
|
+
"peerDependencies": {
|
|
21
|
+
"tailwindcss": "^4.0.0"
|
|
22
|
+
},
|
|
23
|
+
"devDependencies": {
|
|
24
|
+
"tailwindcss": "4.1.18"
|
|
25
|
+
},
|
|
26
|
+
"scripts": {
|
|
27
|
+
"publish:official": "pnpm publish --access public --no-git-checks"
|
|
28
|
+
}
|
|
29
|
+
}
|
package/src/index.css
ADDED
|
@@ -0,0 +1,164 @@
|
|
|
1
|
+
@theme {
|
|
2
|
+
--font-heading: "Nunito", "Nunito Variable", sans-serif;
|
|
3
|
+
--font-body: "Mulish", "Mulish Variable", sans-serif;
|
|
4
|
+
|
|
5
|
+
--color-primary-50: oklch(0.9784 0.0053 197.07);
|
|
6
|
+
--color-primary-100: oklch(0.9299 0.0182 188.37);
|
|
7
|
+
--color-primary-200: oklch(0.8577 0.035 192.02);
|
|
8
|
+
--color-primary-300: oklch(0.7624 0.0527 191.47);
|
|
9
|
+
--color-primary-400: oklch(0.6216 0.0582 194.28);
|
|
10
|
+
--color-primary-500: oklch(0.5707 0.0609 195.58);
|
|
11
|
+
--color-primary-600: oklch(0.4814 0.0506 197.42);
|
|
12
|
+
--color-primary-700: oklch(0.4193 0.0415 197.97);
|
|
13
|
+
--color-primary-800: oklch(0.3661 0.0318 198.94);
|
|
14
|
+
--color-primary-900: oklch(0.3347 0.0266 195.95);
|
|
15
|
+
--color-primary-950: oklch(0.2282 0.0185 207.99);
|
|
16
|
+
|
|
17
|
+
--color-secondary-50: oklch(0.9763 0.0105 39.44);
|
|
18
|
+
--color-secondary-100: oklch(0.9476 0.027 37.63);
|
|
19
|
+
--color-secondary-200: oklch(0.9053 0.0506 37.9);
|
|
20
|
+
--color-secondary-300: oklch(0.8686 0.0724 37.64);
|
|
21
|
+
--color-secondary-400: oklch(0.7594 0.143 37.81);
|
|
22
|
+
--color-secondary-500: oklch(0.6879 0.1818 37.42);
|
|
23
|
+
--color-secondary-600: oklch(0.6211 0.193 36.28);
|
|
24
|
+
--color-secondary-700: oklch(0.5437 0.1709 36.23);
|
|
25
|
+
--color-secondary-800: oklch(0.4779 0.1435 36.54);
|
|
26
|
+
--color-secondary-900: oklch(0.4267 0.1165 37.04);
|
|
27
|
+
--color-secondary-950: oklch(0.2784 0.0777 37.47);
|
|
28
|
+
|
|
29
|
+
--color-accent-50: oklch(0.9767 0.0055 31.05);
|
|
30
|
+
--color-accent-100: oklch(0.947 0.0142 22.77);
|
|
31
|
+
--color-accent-200: oklch(0.9057 0.0246 23.86);
|
|
32
|
+
--color-accent-300: oklch(0.8387 0.0429 25.29);
|
|
33
|
+
--color-accent-400: oklch(0.7709 0.061 24.99);
|
|
34
|
+
--color-accent-500: oklch(0.6497 0.0941 25.8);
|
|
35
|
+
--color-accent-600: oklch(0.5705 0.103 26.91);
|
|
36
|
+
--color-accent-700: oklch(0.4978 0.0902 27.12);
|
|
37
|
+
--color-accent-800: oklch(0.4422 0.0744 26.2);
|
|
38
|
+
--color-accent-900: oklch(0.402 0.0603 25.93);
|
|
39
|
+
--color-accent-950: oklch(0.2598 0.04 25.08);
|
|
40
|
+
|
|
41
|
+
--color-base-50: oklch(0.9763 0.007 88.64);
|
|
42
|
+
--color-base-100: oklch(0.949 0.0165 91.55);
|
|
43
|
+
--color-base-200: oklch(0.8899 0.0298 87.55);
|
|
44
|
+
--color-base-300: oklch(0.8164 0.0496 84.52);
|
|
45
|
+
--color-base-400: oklch(0.7299 0.0667 78.09);
|
|
46
|
+
--color-base-500: oklch(0.6663 0.0769 73.28);
|
|
47
|
+
--color-base-600: oklch(0.6138 0.0761 65.6);
|
|
48
|
+
--color-base-700: oklch(0.5338 0.0656 60.69);
|
|
49
|
+
--color-base-800: oklch(0.4616 0.0508 54.78);
|
|
50
|
+
--color-base-900: oklch(0.4046 0.042 54.89);
|
|
51
|
+
--color-base-950: oklch(0.2663 0.026 50.99);
|
|
52
|
+
|
|
53
|
+
--color-neutral-50: oklch(0.9766 0.0034 174.48);
|
|
54
|
+
--color-neutral-100: oklch(0.9236 0.01 181.39);
|
|
55
|
+
--color-neutral-200: oklch(0.8438 0.0189 184.18);
|
|
56
|
+
--color-neutral-300: oklch(0.7398 0.0289 188.05);
|
|
57
|
+
--color-neutral-400: oklch(0.6288 0.0351 189);
|
|
58
|
+
--color-neutral-500: oklch(0.5385 0.0347 191.06);
|
|
59
|
+
--color-neutral-600: oklch(0.4579 0.03 193.07);
|
|
60
|
+
--color-neutral-700: oklch(0.3822 0.0228 192);
|
|
61
|
+
--color-neutral-800: oklch(0.3541 0.0195 191.26);
|
|
62
|
+
--color-neutral-900: oklch(0.3224 0.0149 189.67);
|
|
63
|
+
--color-neutral-950: oklch(0.2258 0.0132 187.88);
|
|
64
|
+
|
|
65
|
+
--color-success-50: oklch(0.9712 0.0075 151.89);
|
|
66
|
+
--color-success-100: oklch(0.9297 0.0222 145.39);
|
|
67
|
+
--color-success-200: oklch(0.8616 0.0385 148.85);
|
|
68
|
+
--color-success-300: oklch(0.7457 0.0672 149.5);
|
|
69
|
+
--color-success-400: oklch(0.6484 0.0818 149.79);
|
|
70
|
+
--color-success-500: oklch(0.5498 0.0878 150.29);
|
|
71
|
+
--color-success-600: oklch(0.4627 0.0781 150.01);
|
|
72
|
+
--color-success-700: oklch(0.398 0.0644 151.04);
|
|
73
|
+
--color-success-800: oklch(0.3456 0.0509 151.81);
|
|
74
|
+
--color-success-900: oklch(0.3074 0.0431 152.51);
|
|
75
|
+
--color-success-950: oklch(0.2188 0.0264 155.37);
|
|
76
|
+
|
|
77
|
+
--color-warning-50: oklch(0.9795 0.0139 88.68);
|
|
78
|
+
--color-warning-100: oklch(0.9409 0.0371 90.07);
|
|
79
|
+
--color-warning-200: oklch(0.8758 0.0767 88.25);
|
|
80
|
+
--color-warning-300: oklch(0.8222 0.1011 84.95);
|
|
81
|
+
--color-warning-400: oklch(0.7492 0.1259 78.16);
|
|
82
|
+
--color-warning-500: oklch(0.6823 0.133 65.55);
|
|
83
|
+
--color-warning-600: oklch(0.5972 0.1277 55.44);
|
|
84
|
+
--color-warning-700: oklch(0.5068 0.115 46.6);
|
|
85
|
+
--color-warning-800: oklch(0.4372 0.0969 41.92);
|
|
86
|
+
--color-warning-900: oklch(0.3869 0.0796 41.59);
|
|
87
|
+
--color-warning-950: oklch(0.2607 0.0577 39.75);
|
|
88
|
+
|
|
89
|
+
--color-error-50: oklch(0.9748 0.0064 17.27);
|
|
90
|
+
--color-error-100: oklch(0.9437 0.0174 17.47);
|
|
91
|
+
--color-error-200: oklch(0.8979 0.0335 17.79);
|
|
92
|
+
--color-error-300: oklch(0.8252 0.0593 18.43);
|
|
93
|
+
--color-error-400: oklch(0.6821 0.1135 20.44);
|
|
94
|
+
--color-error-500: oklch(0.633 0.1259 21.26);
|
|
95
|
+
--color-error-600: oklch(0.5553 0.1383 22.67);
|
|
96
|
+
--color-error-700: oklch(0.4842 0.1227 22.8);
|
|
97
|
+
--color-error-800: oklch(0.4306 0.1031 22.38);
|
|
98
|
+
--color-error-900: oklch(0.3916 0.0803 21.42);
|
|
99
|
+
--color-error-950: oklch(0.2534 0.0559 21.84);
|
|
100
|
+
|
|
101
|
+
--color-info-50: oklch(0.9767 0.005 228.82);
|
|
102
|
+
--color-info-100: oklch(0.9441 0.0126 236.63);
|
|
103
|
+
--color-info-200: oklch(0.9035 0.0211 232.15);
|
|
104
|
+
--color-info-300: oklch(0.8403 0.036 226.65);
|
|
105
|
+
--color-info-400: oklch(0.757 0.0533 230.57);
|
|
106
|
+
--color-info-500: oklch(0.7118 0.0605 238.55);
|
|
107
|
+
--color-info-600: oklch(0.6178 0.0742 246.63);
|
|
108
|
+
--color-info-700: oklch(0.5628 0.0742 252.4);
|
|
109
|
+
--color-info-800: oklch(0.4953 0.0608 253.17);
|
|
110
|
+
--color-info-900: oklch(0.4321 0.0471 253.37);
|
|
111
|
+
--color-info-950: oklch(0.3211 0.0292 254.66);
|
|
112
|
+
|
|
113
|
+
--radius-btn: 999px;
|
|
114
|
+
--radius-card: 16px;
|
|
115
|
+
|
|
116
|
+
--shadow-hard: 4px 4px 0px var(--color-neutral-700);
|
|
117
|
+
--shadow-hard-hover: 6px 6px 0px var(--color-neutral-700);
|
|
118
|
+
--shadow-hard-active: 2px 2px 0px var(--color-neutral-700);
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
@layer base {
|
|
122
|
+
body {
|
|
123
|
+
background-color: var(--color-base-50);
|
|
124
|
+
color: var(--color-neutral-700);
|
|
125
|
+
font-family: var(--font-body);
|
|
126
|
+
font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
|
|
127
|
+
line-height: 1.6;
|
|
128
|
+
-webkit-font-smoothing: antialiased;
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
h1,
|
|
132
|
+
h2,
|
|
133
|
+
h3,
|
|
134
|
+
h4,
|
|
135
|
+
h5,
|
|
136
|
+
h6 {
|
|
137
|
+
font-family: var(--font-heading);
|
|
138
|
+
color: var(--color-neutral-900);
|
|
139
|
+
letter-spacing: -0.02em;
|
|
140
|
+
line-height: 1.1;
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
h1 {
|
|
144
|
+
font-size: clamp(2.25rem, 1.5rem + 3.75vw, 4rem);
|
|
145
|
+
font-weight: 800;
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
h2 {
|
|
149
|
+
font-size: clamp(1.75rem, 1.25rem + 2.5vw, 3rem);
|
|
150
|
+
font-weight: 700;
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
h3 {
|
|
154
|
+
font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2rem);
|
|
155
|
+
font-weight: 700;
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
p {
|
|
159
|
+
margin-bottom: 1.5em;
|
|
160
|
+
max-width: 75ch;
|
|
161
|
+
}
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
@plugin "./index.js";
|
package/src/index.js
ADDED
|
@@ -0,0 +1,124 @@
|
|
|
1
|
+
const plugin = require("tailwindcss/plugin");
|
|
2
|
+
|
|
3
|
+
module.exports = plugin(function ({ addComponents }) {
|
|
4
|
+
addComponents({
|
|
5
|
+
".section-container": {
|
|
6
|
+
width: "100%",
|
|
7
|
+
marginInline: "auto",
|
|
8
|
+
paddingInline: "1.5rem",
|
|
9
|
+
"@media (width >= 40rem)": {
|
|
10
|
+
maxWidth: "40rem",
|
|
11
|
+
},
|
|
12
|
+
"@media (width >= 48rem)": {
|
|
13
|
+
maxWidth: "48rem",
|
|
14
|
+
paddingInline: "3rem",
|
|
15
|
+
},
|
|
16
|
+
"@media (width >= 64rem)": {
|
|
17
|
+
maxWidth: "64rem",
|
|
18
|
+
},
|
|
19
|
+
"@media (width >= 80rem)": {
|
|
20
|
+
maxWidth: "80rem",
|
|
21
|
+
},
|
|
22
|
+
"@media (width >= 96rem)": {
|
|
23
|
+
maxWidth: "96rem",
|
|
24
|
+
},
|
|
25
|
+
},
|
|
26
|
+
".btn": {
|
|
27
|
+
display: "inline-flex",
|
|
28
|
+
alignItems: "center",
|
|
29
|
+
justifyContent: "center",
|
|
30
|
+
gap: "0.5rem",
|
|
31
|
+
transitionProperty: "all",
|
|
32
|
+
transitionDuration: "200ms",
|
|
33
|
+
cursor: "pointer",
|
|
34
|
+
userSelect: "none",
|
|
35
|
+
textDecoration: "none",
|
|
36
|
+
|
|
37
|
+
fontFamily: "var(--font-heading)",
|
|
38
|
+
fontWeight: "700",
|
|
39
|
+
fontSize: "1.125rem",
|
|
40
|
+
|
|
41
|
+
borderRadius: "999px",
|
|
42
|
+
borderWidth: "2px",
|
|
43
|
+
borderStyle: "solid",
|
|
44
|
+
borderColor: "var(--color-neutral-700)",
|
|
45
|
+
|
|
46
|
+
boxShadow: `4px 4px 0px var(--color-neutral-700)`,
|
|
47
|
+
padding: "1rem 2rem",
|
|
48
|
+
|
|
49
|
+
"&:hover": {
|
|
50
|
+
transform: "translate(-2px, -2px)",
|
|
51
|
+
boxShadow: `6px 6px 0px var(--color-neutral-700)`,
|
|
52
|
+
},
|
|
53
|
+
"&:active": {
|
|
54
|
+
transform: "translate(2px, 2px)",
|
|
55
|
+
boxShadow: `2px 2px 0px var(--color-neutral-700)`,
|
|
56
|
+
},
|
|
57
|
+
},
|
|
58
|
+
".btn-primary": {
|
|
59
|
+
backgroundColor: "var(--color-primary-400)",
|
|
60
|
+
color: "#ffffff",
|
|
61
|
+
},
|
|
62
|
+
".btn-secondary": {
|
|
63
|
+
backgroundColor: "var(--color-secondary-300)",
|
|
64
|
+
color: "var(--color-neutral-800)",
|
|
65
|
+
},
|
|
66
|
+
".btn-outline": {
|
|
67
|
+
backgroundColor: "transparent",
|
|
68
|
+
color: "var(--color-neutral-800)",
|
|
69
|
+
},
|
|
70
|
+
".card": {
|
|
71
|
+
containerType: "inline-size",
|
|
72
|
+
containerName: "card",
|
|
73
|
+
|
|
74
|
+
backgroundColor: "#ffffff",
|
|
75
|
+
borderWidth: "2px",
|
|
76
|
+
borderColor: "var(--color-neutral-700)",
|
|
77
|
+
transitionProperty: "transform",
|
|
78
|
+
transitionDuration: "300ms",
|
|
79
|
+
display: "flex",
|
|
80
|
+
flexDirection: "column",
|
|
81
|
+
|
|
82
|
+
borderRadius: "16px",
|
|
83
|
+
boxShadow: `4px 4px 0px var(--color-neutral-700)`,
|
|
84
|
+
padding: "clamp(1.5rem, 5cqw, 2.5rem)",
|
|
85
|
+
|
|
86
|
+
"&:hover": {
|
|
87
|
+
transform: "translateY(-4px)",
|
|
88
|
+
},
|
|
89
|
+
},
|
|
90
|
+
".card-icon": {
|
|
91
|
+
color: "var(--color-primary-400)",
|
|
92
|
+
marginBottom: "1rem",
|
|
93
|
+
fontSize: "3rem",
|
|
94
|
+
lineHeight: "1",
|
|
95
|
+
"@container card (max-width: 350px)": {
|
|
96
|
+
fontSize: "2.5rem",
|
|
97
|
+
},
|
|
98
|
+
},
|
|
99
|
+
".card-title": {
|
|
100
|
+
fontWeight: "700",
|
|
101
|
+
fontSize: "1.25rem",
|
|
102
|
+
lineHeight: "1.75rem",
|
|
103
|
+
marginBottom: "0.5rem",
|
|
104
|
+
color: "var(--color-neutral-800)",
|
|
105
|
+
fontFamily: "var(--font-heading)",
|
|
106
|
+
"@container card (max-width: 350px)": {
|
|
107
|
+
fontSize: "1.25rem",
|
|
108
|
+
},
|
|
109
|
+
},
|
|
110
|
+
".card.horizontal": {
|
|
111
|
+
"@container card (min-width: 450px)": {
|
|
112
|
+
flexDirection: "row",
|
|
113
|
+
alignItems: "center",
|
|
114
|
+
gap: "1.5rem",
|
|
115
|
+
textAlign: "left",
|
|
116
|
+
},
|
|
117
|
+
},
|
|
118
|
+
".card.horizontal .card-icon": {
|
|
119
|
+
"@container card (min-width: 450px)": {
|
|
120
|
+
marginBottom: "0",
|
|
121
|
+
},
|
|
122
|
+
},
|
|
123
|
+
});
|
|
124
|
+
});
|