Skip to content

Commit 39716e6

Browse files
TaiizorTaiizor
committed
Add route caching example and cyan color styles
Introduced a new 'Route Caching' example button to AttributeRouting.razor and updated feature coverage to 92%. Extended app.min.css with new cyan color variables and gradient utility classes to support the new UI element.
1 parent a4749f1 commit 39716e6

File tree

2 files changed

+84
-1
lines changed

2 files changed

+84
-1
lines changed

‎samples/Blazouter.WebAssembly.Sample/Pages/AttributeRouting.razor‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,12 @@
8888
<h6 class="font-semibold text-red-900 dark:text-red-100 mb-2">7️⃣ Redirects</h6>
8989
<p class="text-sm text-red-700 dark:text-red-300">Automatic route redirection</p>
9090
</button>
91+
92+
<button @onclick='() => NavigationService.NavigateTo("/attribute-examples/cache")'
93+
class="p-4 bg-gradient-to-br from-cyan-50 to-cyan-100 dark:from-cyan-900/20 dark:to-cyan-800/20 border-2 border-cyan-200 dark:border-cyan-800 rounded-lg hover:from-cyan-100 hover:to-cyan-200 dark:hover:from-cyan-800/30 dark:hover:to-cyan-700/30 transition-all text-left">
94+
<h6 class="font-semibold text-cyan-900 dark:text-cyan-100 mb-2">8️⃣ Route Caching</h6>
95+
<p class="text-sm text-cyan-700 dark:text-cyan-300">Control per-route cache behavior</p>
96+
</button>
9197
</div>
9298
</div>
9399
</div>
@@ -117,7 +123,7 @@
117123
</div>
118124
<div class="flex items-start">
119125
<span class="mr-2">✓</span>
120-
<div><strong>Complete:</strong> 83% feature coverage (10/12 properties)</div>
126+
<div><strong>Complete:</strong> 92% feature coverage (11/12 properties)</div>
121127
</div>
122128
</div>
123129
</div>

‎samples/Blazouter.WebAssembly.Sample/wwwroot/css/app.min.css‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,7 @@
6464
--color-teal-700: oklch(51.1% 0.096 186.391);
6565
--color-teal-900: oklch(38.6% 0.063 188.416);
6666
--color-cyan-50: oklch(98.4% 0.019 200.873);
67+
--color-cyan-100: oklch(95.6% 0.045 203.388);
6768
--color-cyan-200: oklch(91.7% 0.08 205.041);
6869
--color-cyan-300: oklch(86.5% 0.127 207.078);
6970
--color-cyan-600: oklch(60.9% 0.126 221.723);
@@ -1345,6 +1346,10 @@
13451346
--tw-gradient-from: var(--color-blue-600);
13461347
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
13471348
}
1349+
.from-cyan-50 {
1350+
--tw-gradient-from: var(--color-cyan-50);
1351+
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
1352+
}
13481353
.from-emerald-50 {
13491354
--tw-gradient-from: var(--color-emerald-50);
13501355
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
@@ -1381,6 +1386,10 @@
13811386
--tw-gradient-to: var(--color-blue-100);
13821387
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
13831388
}
1389+
.to-cyan-100 {
1390+
--tw-gradient-to: var(--color-cyan-100);
1391+
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
1392+
}
13841393
.to-green-100 {
13851394
--tw-gradient-to: var(--color-green-100);
13861395
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
@@ -1592,6 +1601,9 @@
15921601
.text-cyan-800 {
15931602
color: var(--color-cyan-800);
15941603
}
1604+
.text-cyan-900 {
1605+
color: var(--color-cyan-900);
1606+
}
15951607
.text-gray-200 {
15961608
color: var(--color-gray-200);
15971609
}
@@ -1900,6 +1912,14 @@
19001912
}
19011913
}
19021914
}
1915+
.hover\:from-cyan-100 {
1916+
&:hover {
1917+
@media (hover: hover) {
1918+
--tw-gradient-from: var(--color-cyan-100);
1919+
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
1920+
}
1921+
}
1922+
}
19031923
.hover\:from-green-100 {
19041924
&:hover {
19051925
@media (hover: hover) {
@@ -1956,6 +1976,14 @@
19561976
}
19571977
}
19581978
}
1979+
.hover\:to-cyan-200 {
1980+
&:hover {
1981+
@media (hover: hover) {
1982+
--tw-gradient-to: var(--color-cyan-200);
1983+
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
1984+
}
1985+
}
1986+
}
19591987
.hover\:to-green-200 {
19601988
&:hover {
19611989
@media (hover: hover) {
@@ -2384,6 +2412,15 @@
23842412
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
23852413
}
23862414
}
2415+
.dark\:from-cyan-900\/20 {
2416+
&:is(.dark *) {
2417+
--tw-gradient-from: color-mix(in srgb, oklch(39.8% 0.07 227.392) 20%, transparent);
2418+
@supports (color: color-mix(in lab, red, red)) {
2419+
--tw-gradient-from: color-mix(in oklab, var(--color-cyan-900) 20%, transparent);
2420+
}
2421+
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
2422+
}
2423+
}
23872424
.dark\:from-emerald-900\/20 {
23882425
&:is(.dark *) {
23892426
--tw-gradient-from: color-mix(in srgb, oklch(37.8% 0.077 168.94) 20%, transparent);
@@ -2465,6 +2502,15 @@
24652502
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
24662503
}
24672504
}
2505+
.dark\:to-cyan-800\/20 {
2506+
&:is(.dark *) {
2507+
--tw-gradient-to: color-mix(in srgb, oklch(45% 0.085 224.283) 20%, transparent);
2508+
@supports (color: color-mix(in lab, red, red)) {
2509+
--tw-gradient-to: color-mix(in oklab, var(--color-cyan-800) 20%, transparent);
2510+
}
2511+
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
2512+
}
2513+
}
24682514
.dark\:to-green-800\/20 {
24692515
&:is(.dark *) {
24702516
--tw-gradient-to: color-mix(in srgb, oklch(44.8% 0.119 151.328) 20%, transparent);
@@ -2576,6 +2622,11 @@
25762622
color: var(--color-blue-400);
25772623
}
25782624
}
2625+
.dark\:text-cyan-100 {
2626+
&:is(.dark *) {
2627+
color: var(--color-cyan-100);
2628+
}
2629+
}
25792630
.dark\:text-cyan-200 {
25802631
&:is(.dark *) {
25812632
color: var(--color-cyan-200);
@@ -2803,6 +2854,19 @@
28032854
}
28042855
}
28052856
}
2857+
.dark\:hover\:from-cyan-800\/30 {
2858+
&:is(.dark *) {
2859+
&:hover {
2860+
@media (hover: hover) {
2861+
--tw-gradient-from: color-mix(in srgb, oklch(45% 0.085 224.283) 30%, transparent);
2862+
@supports (color: color-mix(in lab, red, red)) {
2863+
--tw-gradient-from: color-mix(in oklab, var(--color-cyan-800) 30%, transparent);
2864+
}
2865+
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
2866+
}
2867+
}
2868+
}
2869+
}
28062870
.dark\:hover\:from-green-800\/30 {
28072871
&:is(.dark *) {
28082872
&:hover {
@@ -2894,6 +2958,19 @@
28942958
}
28952959
}
28962960
}
2961+
.dark\:hover\:to-cyan-700\/30 {
2962+
&:is(.dark *) {
2963+
&:hover {
2964+
@media (hover: hover) {
2965+
--tw-gradient-to: color-mix(in srgb, oklch(52% 0.105 223.128) 30%, transparent);
2966+
@supports (color: color-mix(in lab, red, red)) {
2967+
--tw-gradient-to: color-mix(in oklab, var(--color-cyan-700) 30%, transparent);
2968+
}
2969+
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
2970+
}
2971+
}
2972+
}
2973+
}
28972974
.dark\:hover\:to-green-700\/30 {
28982975
&:is(.dark *) {
28992976
&:hover {

0 commit comments

Comments
 (0)