📦 deps(thirdparty): update snapshots

2026-06-19 16:05:48 +00:00
parent 9ba2cc82e2
commit 0e1bb1aef3
318 changed files with 53986 additions and 837 deletions
@@ -0,0 +1,307 @@
+---
+name: soft-pastel
+description: Web and App implementation guide for Soft Pastel Design. Trigger when user wants gentle colors, calming UI, baby/lifestyle branding, or low-contrast aesthetics.
+date_added: "2026-06-17"
+risk: safe
+source: self
+source_type: self
+---
+
+# Soft Pastel Design
+
+> "Calm, airy, and gentle. A low-stress interface built on washed-out, cheerful hues."
+
+
+## When to Use
+Use this sub-style when the user's request matches the aesthetic described above. This is a child reference of the `design-it` skill and is not meant to be triggered directly.
+
+## Core Principles
+1. **Desaturated, High-Lightness Colors**: Every color is mixed with a heavy amount of white.
+2. **Soft, Rounded Edges**: Border radii are large and friendly.
+3. **Airy Spacing**: Generous whitespace prevents the soft colors from feeling muddy or crowded.
+
+## Visual DNA
+- **Colors**: Mint green, baby blue, blush pink, lavender, and buttercream yellow. Use a warm, slightly off-white background (e.g., `#FFFBF7`) rather than clinical `#FFFFFF`.
+- **Typography**: Soft, rounded sans-serifs (`Quicksand`, `Nunito`) or elegant, low-contrast serifs. Avoid aggressive, ultra-bold fonts.
+- **Shadows**: Very soft, large-spread shadows, often tinted with the pastel color rather than black.
+
+## Web Implementation
+- **CSS Example**:
+```css
+:root {
+  --pastel-bg: #FFFBF7;
+  --pastel-pink: #FFD1DC;
+  --pastel-blue: #AEC6CF;
+  --pastel-green: #B7E4C7;
+  --pastel-text: #4A4A4A; /* Soft dark grey, NOT pure black */
+}
+
+body {
+  background-color: var(--pastel-bg);
+  color: var(--pastel-text);
+  font-family: 'Nunito', sans-serif;
+  line-height: 1.6;
+}
+
+.pastel-card {
+  background-color: #ffffff;
+  border-radius: 24px;
+  padding: 40px;
+  /* Tinted, very soft shadow */
+  box-shadow: 0 20px 40px rgba(174, 198, 207, 0.15); 
+}
+
+.pastel-pill {
+  background-color: var(--pastel-pink);
+  color: #a05a6c; /* Darker version of the pink for contrast */
+  border-radius: 50px;
+  padding: 8px 24px;
+  font-weight: 700;
+  display: inline-block;
+}
+
+.pastel-btn {
+  background-color: var(--pastel-blue);
+  color: #2b5563; /* Darker text */
+  border: none;
+  border-radius: 12px;
+  padding: 16px 32px;
+  transition: transform 0.2s;
+}
+.pastel-btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 10px 20px rgba(174, 198, 207, 0.4);
+}
+```
+
+## App Implementation
+
+### SwiftUI
+```swift
+struct SoftPastelView: View {
+    // Pastel Palette
+    let bg = Color(hex: "FFFBF7")
+    let pink = Color(hex: "FFD1DC")
+    let blue = Color(hex: "AEC6CF")
+    let textDark = Color(hex: "4A4A4A")
+    
+    var body: some View {
+        ScrollView {
+            VStack(spacing: 32) {
+                // Pastel Card
+                VStack(alignment: .leading, spacing: 16) {
+                    Text("Calm & Airy")
+                        .font(.custom("Nunito-Bold", size: 28))
+                        .foregroundColor(textDark)
+                    
+                    Text("Generous whitespace and soft corners prevent the desaturated colors from feeling muddy.")
+                        .font(.custom("Nunito-Regular", size: 16))
+                        .foregroundColor(textDark.opacity(0.8))
+                        .lineSpacing(6)
+                }
+                .padding(40)
+                .frame(maxWidth: .infinity, alignment: .leading)
+                .background(Color.white)
+                .cornerRadius(32) // Soft, large radius
+                // Tinted pastel shadow instead of black/gray
+                .shadow(color: blue.opacity(0.2), radius: 30, y: 15)
+                
+                // Pastel Button
+                Button(action: {}) {
+                    Text("Gentle Action")
+                        .font(.custom("Nunito-Bold", size: 18))
+                        .foregroundColor(Color(hex: "2B5563")) // Darker contrast of the blue
+                        .frame(maxWidth: .infinity)
+                        .padding(.vertical, 20)
+                        .background(blue)
+                        .cornerRadius(20)
+                }
+            }
+            .padding(24)
+        }
+        .background(bg.ignoresSafeArea())
+    }
+}
+```
+- A custom font like Nunito or Quicksand is practically required. System fonts are often too rigid.
+- The `shadow(color:)` must be tinted with one of your pastel palette colors, never black or gray.
+- Corner radii should be very large (20-32).
+
+### Flutter
+```dart
+class SoftPastelScreen extends StatelessWidget {
+  final Color bg = const Color(0xFFFFFBF7);
+  final Color pink = const Color(0xFFFFD1DC);
+  final Color blue = const Color(0xFFAEC6CF);
+  final Color textDark = const Color(0xFF4A4A4A);
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      backgroundColor: bg,
+      body: SingleChildScrollView(
+        padding: const EdgeInsets.all(24.0),
+        child: Column(
+          children: [
+            // Pastel Card
+            Container(
+              width: double.infinity,
+              padding: const EdgeInsets.all(40),
+              decoration: BoxDecoration(
+                color: Colors.white,
+                borderRadius: BorderRadius.circular(32), // Soft edges
+                boxShadow: [
+                  // Tinted shadow
+                  BoxShadow(color: blue.withOpacity(0.2), blurRadius: 30, offset: const Offset(0, 15))
+                ],
+              ),
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  Text('Calm & Airy', style: TextStyle(fontFamily: 'Nunito', fontSize: 28, fontWeight: FontWeight.bold, color: textDark)),
+                  const SizedBox(height: 16),
+                  Text('Generous whitespace and soft corners.', style: TextStyle(fontFamily: 'Nunito', fontSize: 16, height: 1.6, color: textDark.withOpacity(0.8))),
+                ],
+              ),
+            ),
+            const SizedBox(height: 32),
+            
+            // Pastel Button
+            ElevatedButton(
+              onPressed: () {},
+              style: ElevatedButton.styleFrom(
+                backgroundColor: blue,
+                foregroundColor: const Color(0xFF2B5563), // Darker text for contrast
+                minimumSize: const Size(double.infinity, 60),
+                shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
+                elevation: 0, // Remove default harsh shadow
+              ),
+              child: const Text('Gentle Action', style: TextStyle(fontFamily: 'Nunito', fontSize: 18, fontWeight: FontWeight.bold)),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
+```
+- Disable `elevation` on Flutter buttons and cards if you want to apply custom tinted drop shadows. Default elevations cast black shadows.
+
+### React Native
+```jsx
+const SoftPastelScreen = () => {
+  const colors = {
+    bg: '#FFFBF7',
+    blue: '#AEC6CF',
+    textDark: '#4A4A4A'
+  };
+
+  return (
+    <ScrollView style={{ flex: 1, backgroundColor: colors.bg, padding: 24 }}>
+      
+      {/* Pastel Card */}
+      <View style={{
+        backgroundColor: '#FFFFFF',
+        borderRadius: 32,
+        padding: 40,
+        marginBottom: 32,
+        // iOS tinted shadow
+        shadowColor: colors.blue, shadowOffset: { width: 0, height: 15 },
+        shadowOpacity: 0.2, shadowRadius: 30,
+        // Android tinted shadow (Requires Android 9+)
+        elevation: 10, shadowColor: colors.blue,
+      }}>
+        <Text style={{ fontFamily: 'Nunito-Bold', fontSize: 28, color: colors.textDark, marginBottom: 16 }}>
+          Calm & Airy
+        </Text>
+        <Text style={{ fontFamily: 'Nunito-Regular', fontSize: 16, lineHeight: 26, color: colors.textDark, opacity: 0.8 }}>
+          Generous whitespace and soft corners prevent the desaturated colors from feeling muddy.
+        </Text>
+      </View>
+
+      {/* Pastel Button */}
+      <TouchableOpacity style={{
+        backgroundColor: colors.blue,
+        borderRadius: 20,
+        paddingVertical: 20,
+        alignItems: 'center'
+      }}>
+        <Text style={{ fontFamily: 'Nunito-Bold', fontSize: 18, color: '#2B5563' }}>
+          Gentle Action
+        </Text>
+      </TouchableOpacity>
+      
+    </ScrollView>
+  );
+};
+```
+- Make sure you are using a soft, non-pure-white background (`#FFFBF7`) so that pure `#FFFFFF` cards pop nicely against it without harsh borders.
+- Tinted shadows work on Android 9+ via `shadowColor` combined with `elevation`.
+
+### Jetpack Compose
+```kotlin
+@Composable
+fun SoftPastelScreen() {
+    val bg = Color(0xFFFFFBF7)
+    val blue = Color(0xFFAEC6CF)
+    val textDark = Color(0xFF4A4A4A)
+
+    Column(
+        modifier = Modifier.fillMaxSize().background(bg).verticalScroll(rememberScrollState()).padding(24.dp)
+    ) {
+        // Pastel Card
+        Box(
+            modifier = Modifier
+                .fillMaxWidth()
+                .shadow(
+                    elevation = 20.dp, 
+                    shape = RoundedCornerShape(32.dp), 
+                    ambientColor = blue, // Tinted shadow
+                    spotColor = blue
+                )
+                .background(Color.White, RoundedCornerShape(32.dp))
+                .padding(40.dp)
+        ) {
+            Column {
+                Text(
+                    text = "Calm & Airy",
+                    fontSize = 28.sp,
+                    fontWeight = FontWeight.Bold,
+                    color = textDark,
+                    fontFamily = FontFamily.SansSerif // Replace with Nunito
+                )
+                Spacer(Modifier.height(16.dp))
+                Text(
+                    text = "Generous whitespace and soft corners.",
+                    fontSize = 16.sp,
+                    lineHeight = 26.sp,
+                    color = textDark.copy(alpha = 0.8f),
+                    fontFamily = FontFamily.SansSerif
+                )
+            }
+        }
+        
+        Spacer(Modifier.height(32.dp))
+        
+        // Pastel Button
+        Button(
+            onClick = { },
+            colors = ButtonDefaults.buttonColors(containerColor = blue, contentColor = Color(0xFF2B5563)),
+            shape = RoundedCornerShape(20.dp),
+            modifier = Modifier.fillMaxWidth().height(60.dp),
+            elevation = null
+        ) {
+            Text("Gentle Action", fontSize = 18.sp, fontWeight = FontWeight.Bold)
+        }
+    }
+}
+```
+- The `shadow` modifier in Compose takes `ambientColor` and `spotColor`. Set both to your pastel accent color to achieve the soft tinted glow.
+
+## Do's and Don'ts
+- **DO**: Use illustrative assets that match the pastel vibe (flat vectors, soft gradients).
+- **DON'T**: Use stark black borders, sharp corners, or high-saturation primary colors.
+
+## Limitations
+- This is a styling reference and does not replace environment-specific validation, accessibility testing, or expert review.
+- Ensure appropriate contrast ratios and responsive behaviors are verified separately.