Skip to content

Commit 958b3e5

Browse files
skeepskeep
committed
Add comprehensive integration examples and test cases for Neumorphism Pro
1 parent d746f0c commit 958b3e5

File tree

1 file changed

+258
-0
lines changed

1 file changed

+258
-0
lines changed

‎docs/integration_examples.yaml‎

Lines changed: 258 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,258 @@
1+
# ==============================================================================
2+
# NEUMORPHISM PRO - HOME ASSISTANT INTEGRATION EXAMPLES
3+
# ==============================================================================
4+
# Test these examples in your Home Assistant dashboard to verify full integration
5+
# Copy these YAML snippets to your dashboard in edit mode
6+
# ==============================================================================
7+
8+
# ==============================================================================
9+
# EXAMPLE 1: BASIC BUTTON CARD
10+
# ==============================================================================
11+
type: button
12+
entity: light.living_room
13+
name: Living Room Light
14+
icon: mdi:lightbulb
15+
show_state: true
16+
tap_action:
17+
action: toggle
18+
19+
# Expected Result:
20+
# - Neumorphic raised shadow
21+
# - Nunito Sans font
22+
# - #31344b text color on #e6e7ee background
23+
# - 0.55rem border radius
24+
25+
# ==============================================================================
26+
# EXAMPLE 2: ENTITY CARD WITH MULTIPLE ENTITIES
27+
# ==============================================================================
28+
type: entities
29+
title: Climate Control
30+
entities:
31+
- entity: climate.thermostat
32+
name: Thermostat
33+
- entity: sensor.temperature
34+
name: Temperature
35+
- entity: sensor.humidity
36+
name: Humidity
37+
- entity: switch.fan
38+
name: Fan
39+
40+
# Expected Result:
41+
# - Card with convex shadow (6px 6px 12px)
42+
# - Switches with neumorphic styling
43+
# - Icons in #44476a color
44+
# - Active states in #31344b
45+
46+
# ==============================================================================
47+
# EXAMPLE 3: HORIZONTAL STACK WITH CHIPS
48+
# ==============================================================================
49+
type: horizontal-stack
50+
cards:
51+
- type: button
52+
entity: light.bedroom
53+
name: Bedroom
54+
icon: mdi:bed
55+
tap_action:
56+
action: toggle
57+
- type: button
58+
entity: light.kitchen
59+
name: Kitchen
60+
icon: mdi:stove
61+
tap_action:
62+
action: toggle
63+
- type: button
64+
entity: light.bathroom
65+
name: Bathroom
66+
icon: mdi:shower
67+
tap_action:
68+
action: toggle
69+
70+
# Expected Result:
71+
# - Three buttons with consistent spacing (0 8px)
72+
# - All with neumorphic raised shadow
73+
# - Hover effect should show enhanced shadow
74+
75+
# ==============================================================================
76+
# EXAMPLE 4: GRID CARD (VARIOUS ENTITY TYPES)
77+
# ==============================================================================
78+
type: grid
79+
columns: 2
80+
square: false
81+
cards:
82+
- type: button
83+
entity: switch.living_room_lamp
84+
name: Lamp
85+
icon: mdi:lamp
86+
- type: button
87+
entity: switch.bedroom_fan
88+
name: Fan
89+
icon: mdi:fan
90+
- type: sensor
91+
entity: sensor.temperature
92+
name: Temperature
93+
icon: mdi:thermometer
94+
- type: sensor
95+
entity: sensor.humidity
96+
name: Humidity
97+
icon: mdi:water-percent
98+
99+
# Expected Result:
100+
# - 16px gap between cards
101+
# - Sensor cards with proper state colors
102+
# - Success color (#18634B) for active states
103+
104+
# ==============================================================================
105+
# EXAMPLE 5: INPUT CONTROLS (SLIDERS, TOGGLES, TEXT)
106+
# ==============================================================================
107+
type: entities
108+
title: Controls
109+
entities:
110+
- entity: input_boolean.example_toggle
111+
name: Toggle Switch
112+
- entity: input_number.brightness
113+
name: Brightness Slider
114+
- entity: input_text.example_text
115+
name: Text Input
116+
- entity: input_select.example_select
117+
name: Dropdown Select
118+
119+
# Expected Result:
120+
# - Toggle: convex when off, concave when on
121+
# - Slider: #31344b knob, #d1d9e6 track
122+
# - Input field: concave shadow (inset effect)
123+
# - Dropdown: proper icon color #44476a
124+
125+
# ==============================================================================
126+
# EXAMPLE 6: WEATHER CARD
127+
# ==============================================================================
128+
type: weather-forecast
129+
entity: weather.home
130+
show_forecast: true
131+
132+
# Expected Result:
133+
# - Card background #e6e7ee
134+
# - Neumorphic shadow
135+
# - Text in #31344b / #44476a
136+
# - Proper icon colors
137+
138+
# ==============================================================================
139+
# EXAMPLE 7: MARKDOWN CARD (TYPOGRAPHY TEST)
140+
# ==============================================================================
141+
type: markdown
142+
content: |
143+
# Heading 1
144+
## Heading 2
145+
### Heading 3
146+
147+
Regular paragraph text with **bold** and *italic* styling.
148+
149+
- List item 1
150+
- List item 2
151+
- List item 3
152+
153+
```yaml
154+
# Code block
155+
entity: light.example
156+
state: "on"
157+
```
158+
159+
# Expected Result:
160+
# - Nunito Sans font throughout
161+
# - Headings in #262833
162+
# - Body text in #31344b
163+
# - Code background #dfe0e7
164+
# - Proper hierarchy and spacing
165+
166+
# ==============================================================================
167+
# EXAMPLE 8: MEDIA PLAYER CARD
168+
# ==============================================================================
169+
type: media-control
170+
entity: media_player.living_room
171+
172+
# Expected Result:
173+
# - Neumorphic card styling
174+
# - Play/pause buttons with raised shadow
175+
# - Volume slider with concave track
176+
# - Active state in #31344b
177+
178+
# ==============================================================================
179+
# EXAMPLE 9: THERMOSTAT CARD
180+
# ==============================================================================
181+
type: thermostat
182+
entity: climate.thermostat
183+
184+
# Expected Result:
185+
# - Circular control with neumorphic styling
186+
# - Temperature display in Nunito Sans
187+
# - Mode buttons with proper shadows
188+
# - Active mode highlighted in #31344b
189+
190+
# ==============================================================================
191+
# EXAMPLE 10: LIGHT CARD WITH BRIGHTNESS
192+
# ==============================================================================
193+
type: light
194+
entity: light.bedroom
195+
name: Bedroom Light
196+
icon: mdi:lightbulb
197+
198+
# Expected Result:
199+
# - Brightness slider with concave track
200+
# - Toggle with proper on/off colors
201+
# - Success color (#18634B) when on
202+
# - Disabled color (#93a5be) when off
203+
204+
# ==============================================================================
205+
# CARD-MOD ADVANCED EXAMPLE (Requires card-mod installed)
206+
# ==============================================================================
207+
type: button
208+
entity: light.example
209+
name: Custom Styled Button
210+
icon: mdi:lightbulb
211+
card_mod:
212+
style: |
213+
ha-card {
214+
background: var(--neumorphic-surface) !important;
215+
box-shadow: var(--neumorphic-convex-shadow-lg) !important;
216+
font-family: var(--primary-font-family) !important;
217+
transition: all 0.2s ease;
218+
}
219+
ha-card:hover {
220+
box-shadow: var(--neumorphic-hover-shadow) !important;
221+
transform: translateY(-2px);
222+
}
223+
ha-card:active {
224+
box-shadow: var(--neumorphic-active-shadow) !important;
225+
transform: translateY(0);
226+
}
227+
228+
# Expected Result:
229+
# - Extra large convex shadow
230+
# - Smooth hover effect with enhanced shadow
231+
# - Press effect with concave shadow
232+
# - Nunito Sans font
233+
234+
# ==============================================================================
235+
# VERIFICATION CHECKLIST
236+
# ==============================================================================
237+
# [ ] All cards have neumorphic shadows (convex/concave)
238+
# [ ] Text uses Nunito Sans font family
239+
# [ ] Colors match Themesberg reference:
240+
# - Background: #e6e7ee
241+
# - Text: #31344b (primary), #44476a (secondary)
242+
# - Shadows: #b8b9be (dark), #ffffff (light)
243+
# [ ] Border radius is 0.55rem on all cards
244+
# [ ] Active states use #31344b
245+
# [ ] Success states use #18634B (green)
246+
# [ ] Error states use #A91E2C (red)
247+
# [ ] Warning states use #F0B400 (yellow)
248+
# [ ] Info states use #0056B3 (blue)
249+
# [ ] Switches toggle between convex/concave shadows
250+
# [ ] Sliders have concave tracks
251+
# [ ] Input fields have inset shadow
252+
# [ ] Hover effects enhance shadows
253+
# [ ] Active/pressed states use inset shadows
254+
# [ ] All spacing follows grid (8px, 16px)
255+
# [ ] Icons use proper colors (#44476a inactive, #31344b active)
256+
# [ ] Disabled elements use #93a5be color
257+
# [ ] Dark mode uses #1D1F2F base with proper shadows
258+
# ==============================================================================

0 commit comments

Comments
 (0)