@munishwar/snap-ui 0.0.10 → 0.0.12
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 +10 -7
- package/src/lib/theme/_variables.scss +87 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@munishwar/snap-ui",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.12",
|
|
4
4
|
"description": "Reusable Angular UI Component Library",
|
|
5
5
|
"author": "Munishwar Kalra",
|
|
6
6
|
"license": "MIT",
|
|
@@ -14,15 +14,18 @@
|
|
|
14
14
|
"tslib": "^2.3.0"
|
|
15
15
|
},
|
|
16
16
|
"sideEffects": false,
|
|
17
|
-
"module": "fesm2022/munishwar-snap-ui.mjs",
|
|
18
|
-
"typings": "index.d.ts",
|
|
19
17
|
"exports": {
|
|
20
|
-
"./package.json": {
|
|
21
|
-
"default": "./package.json"
|
|
22
|
-
},
|
|
23
18
|
".": {
|
|
19
|
+
"import": "./fesm2015/snap-ui.js",
|
|
20
|
+
"require": "./bundles/snap-ui.umd.js",
|
|
24
21
|
"types": "./index.d.ts",
|
|
25
22
|
"default": "./fesm2022/munishwar-snap-ui.mjs"
|
|
23
|
+
},
|
|
24
|
+
"./theme/_variables.scss": "./lib/theme/_variables.scss",
|
|
25
|
+
"./package.json": {
|
|
26
|
+
"default": "./package.json"
|
|
26
27
|
}
|
|
27
|
-
}
|
|
28
|
+
},
|
|
29
|
+
"module": "fesm2022/munishwar-snap-ui.mjs",
|
|
30
|
+
"typings": "index.d.ts"
|
|
28
31
|
}
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
// ============================================
|
|
2
|
+
// DESIGN TOKENS
|
|
3
|
+
// Define all your design system tokens here
|
|
4
|
+
// ============================================
|
|
5
|
+
|
|
6
|
+
// Color tokens - Primary palette
|
|
7
|
+
$token-primary-50: #e3f2fd;
|
|
8
|
+
$token-primary-100: #bbdefb;
|
|
9
|
+
$token-primary-200: #90caf9;
|
|
10
|
+
$token-primary-300: #64b5f6;
|
|
11
|
+
$token-primary-400: #42a5f5;
|
|
12
|
+
$token-primary-500: #CCA225; // Main brand color
|
|
13
|
+
$token-primary-600: #25e51e;
|
|
14
|
+
$token-primary-700: #0c0c0c;
|
|
15
|
+
$token-primary-800: #1565c0;
|
|
16
|
+
$token-primary-900: #0d47a1;
|
|
17
|
+
|
|
18
|
+
// Spacing tokens
|
|
19
|
+
$token-spacing-xs: 4px;
|
|
20
|
+
$token-spacing-sm: 8px;
|
|
21
|
+
$token-spacing-md: 16px;
|
|
22
|
+
$token-spacing-lg: 24px;
|
|
23
|
+
$token-spacing-xl: 32px;
|
|
24
|
+
|
|
25
|
+
// Border radius tokens
|
|
26
|
+
$token-border-radius-sm: 4px;
|
|
27
|
+
$token-border-radius-md: 8px;
|
|
28
|
+
$token-border-radius-lg: 16px;
|
|
29
|
+
|
|
30
|
+
// Typography tokens
|
|
31
|
+
$token-font-size-xs: 0.75rem;
|
|
32
|
+
$token-font-size-sm: 0.875rem;
|
|
33
|
+
$token-font-size-md: 1rem;
|
|
34
|
+
$token-font-size-lg: 1.25rem;
|
|
35
|
+
$token-font-size-xl: 1.5rem;
|
|
36
|
+
|
|
37
|
+
// Material palette using tokens
|
|
38
|
+
$my-primary: (
|
|
39
|
+
50: $token-primary-50,
|
|
40
|
+
100: $token-primary-100,
|
|
41
|
+
200: $token-primary-200,
|
|
42
|
+
300: $token-primary-300,
|
|
43
|
+
400: $token-primary-400,
|
|
44
|
+
500: $token-primary-500,
|
|
45
|
+
600: $token-primary-600,
|
|
46
|
+
700: $token-primary-700,
|
|
47
|
+
800: $token-primary-800,
|
|
48
|
+
900: $token-primary-900,
|
|
49
|
+
contrast: (
|
|
50
|
+
50: rgba(black, 0.87),
|
|
51
|
+
100: rgba(black, 0.87),
|
|
52
|
+
200: rgba(black, 0.87),
|
|
53
|
+
300: rgba(black, 0.87),
|
|
54
|
+
400: rgba(black, 0.87),
|
|
55
|
+
500: white,
|
|
56
|
+
600: white,
|
|
57
|
+
700: white,
|
|
58
|
+
800: white,
|
|
59
|
+
900: white,
|
|
60
|
+
)
|
|
61
|
+
);
|
|
62
|
+
|
|
63
|
+
@use '@angular/material' as mat;
|
|
64
|
+
|
|
65
|
+
// Include the common styles for Angular Material
|
|
66
|
+
@include mat.core();
|
|
67
|
+
|
|
68
|
+
// Create your custom theme using the palette defined above
|
|
69
|
+
$my-primary-palette: mat.m2-define-palette($my-primary);
|
|
70
|
+
$my-accent: mat.m2-define-palette(mat.$m2-pink-palette);
|
|
71
|
+
$my-warn: mat.m2-define-palette(mat.$m2-red-palette);
|
|
72
|
+
|
|
73
|
+
$my-theme: mat.m2-define-light-theme((
|
|
74
|
+
color: (
|
|
75
|
+
primary: $my-primary-palette,
|
|
76
|
+
accent: $my-accent,
|
|
77
|
+
warn: $my-warn,
|
|
78
|
+
)
|
|
79
|
+
));
|
|
80
|
+
|
|
81
|
+
// Include theme styles for core and each component used in your app
|
|
82
|
+
@include mat.all-component-themes($my-theme);
|
|
83
|
+
|
|
84
|
+
// Global button customization (optional - for additional styling)
|
|
85
|
+
.mat-mdc-button, .mat-mdc-raised-button, .mat-mdc-unelevated-button {
|
|
86
|
+
border-radius: $token-border-radius-md;
|
|
87
|
+
}
|