@cerca/design-system 1.0.2 → 1.0.3
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/package.json
CHANGED
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
/* =========================================
|
|
2
|
+
DESIGN SYSTEM THEME
|
|
3
|
+
Mapeo de Design System Tokens
|
|
4
|
+
========================================= */
|
|
5
|
+
|
|
6
|
+
@use '../tokens/colors' as *;
|
|
7
|
+
@use '../tokens/typography' as *;
|
|
8
|
+
@use '../tokens/spacing' as *;
|
|
9
|
+
@use '../tokens/radius' as *;
|
|
10
|
+
@use '../tokens/elevations' as *;
|
|
11
|
+
|
|
12
|
+
/* --- Primary Theme Colors (Cerca Brand) --- */
|
|
13
|
+
$primary-color: var(--color-primary); // Sky-600 (#0284C7)
|
|
14
|
+
$success-color: var(--color-success); // Emerald-500 (#10B981)
|
|
15
|
+
$error-color: var(--color-alert); // Rose-500 (#F43F5E)
|
|
16
|
+
$warning-color: var(--color-warning); // Amber-500 (#F59E0B)
|
|
17
|
+
$info-color: var(--color-primary); // Blue-500 (#3B82F6)
|
|
18
|
+
|
|
19
|
+
/* --- Text Colors --- */
|
|
20
|
+
$text-color: var(--color-slate-900); // Stone-900
|
|
21
|
+
$text-color-secondary: var(--color-secondary); // Stone-600
|
|
22
|
+
$heading-color: var(--color-slate-900);
|
|
23
|
+
$disabled-color: var(--color-slate-400);
|
|
24
|
+
|
|
25
|
+
/* --- Background Colors --- */
|
|
26
|
+
$body-background: var(--color-background); // Stone-50
|
|
27
|
+
$component-background: var(--color-surface); // White
|
|
28
|
+
$background-color-light: var(--color-background);
|
|
29
|
+
$background-color-base: var(--color-slate-100);
|
|
30
|
+
|
|
31
|
+
/* --- Border Colors --- */
|
|
32
|
+
$border-color-base: var(--color-border);
|
|
33
|
+
$border-color-split: var(--color-border);
|
|
34
|
+
|
|
35
|
+
/* --- Border Radius (from Design System) --- */
|
|
36
|
+
$border-radius-base: var(--radius-cerca); // 8px
|
|
37
|
+
$border-radius-sm: var(--radius-cerca-sm); // 4px
|
|
38
|
+
|
|
39
|
+
/* --- Shadows (from Design System) --- */
|
|
40
|
+
$box-shadow-base: var(--shadow-premium);
|
|
41
|
+
$shadow-1-up: var(--shadow-premium);
|
|
42
|
+
$shadow-1-down: var(--shadow-premium);
|
|
43
|
+
$shadow-2: var(--shadow-premium-hover);
|
|
44
|
+
|
|
45
|
+
/* --- Typography --- */
|
|
46
|
+
$font-family: $font-family-base;
|
|
47
|
+
$font-size-base: $font-size-md; // 16px
|
|
48
|
+
$font-size-lg: $font-size-lg; // 18px
|
|
49
|
+
$font-size-sm: $font-size-sm; // 14px
|
|
50
|
+
|
|
51
|
+
/* --- Layout --- */
|
|
52
|
+
$layout-header-background: var(--color-surface);
|
|
53
|
+
$layout-body-background: var(--color-background);
|
|
54
|
+
$layout-sider-background: var(--color-slate-900);
|
|
55
|
+
|
|
56
|
+
/* --- Animation --- */
|
|
57
|
+
$animation-duration-slow: 0.3s;
|
|
58
|
+
$animation-duration-base: 0.2s;
|
|
59
|
+
$animation-duration-fast: 0.1s;
|
|
60
|
+
|
|
61
|
+
/* --- Utilities --- */
|
|
62
|
+
.accent-text {
|
|
63
|
+
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-accent, #00d2ff) 100%);
|
|
64
|
+
-webkit-background-clip: text;
|
|
65
|
+
background-clip: text;
|
|
66
|
+
-webkit-text-fill-color: transparent;
|
|
67
|
+
margin-left: 0.3rem;
|
|
68
|
+
|
|
69
|
+
// Auto-apply dark mode styles
|
|
70
|
+
:host-context(.dark) &,
|
|
71
|
+
.dark & {
|
|
72
|
+
background: linear-gradient(135deg, #38BDF8 0%, #22D3EE 100%);
|
|
73
|
+
/* Sky-400 to Cyan-400 */
|
|
74
|
+
-webkit-background-clip: text;
|
|
75
|
+
background-clip: text;
|
|
76
|
+
-webkit-text-fill-color: transparent;
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.accent-text-dark {
|
|
81
|
+
background: linear-gradient(135deg, #38BDF8 0%, #22D3EE 100%);
|
|
82
|
+
/* Sky-400 to Cyan-400 */
|
|
83
|
+
-webkit-background-clip: text;
|
|
84
|
+
background-clip: text;
|
|
85
|
+
-webkit-text-fill-color: transparent;
|
|
86
|
+
margin-left: 0.3rem;
|
|
87
|
+
}
|