@san-siva/stylekit 1.0.6 → 1.0.8
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/README.md +4 -4
- package/package.json +1 -1
- package/styles/colors.module.scss +32 -32
- package/styles/globals.scss +11 -10
- package/styles/typography.module.scss +3 -3
package/README.md
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
A comprehensive, modular SCSS design system providing colors, typography, animations, utilities, and layout dimensions for building consistent, beautiful user interfaces. Built with CSS Modules support and designed for modern web applications.
|
|
6
6
|
|
|
7
|
-
**[View Full Documentation](https://stylekit
|
|
7
|
+
**[View Full Documentation](https://stylekit.santhoshsiva.dev/)**
|
|
8
8
|
|
|
9
9
|
## Overview
|
|
10
10
|
|
|
@@ -89,7 +89,7 @@ export function MyComponent() {
|
|
|
89
89
|
|
|
90
90
|
## Documentation
|
|
91
91
|
|
|
92
|
-
Comprehensive documentation is available at [https://stylekit
|
|
92
|
+
Comprehensive documentation is available at [https://stylekit.santhoshsiva.dev/](https://stylekit.santhoshsiva.dev/)
|
|
93
93
|
|
|
94
94
|
The documentation includes:
|
|
95
95
|
|
|
@@ -207,9 +207,9 @@ The package provides multiple entry points for flexible imports:
|
|
|
207
207
|
|
|
208
208
|
StyleKit is used in production on these sites:
|
|
209
209
|
|
|
210
|
-
- **[StyleKit Documentation](https://stylekit
|
|
210
|
+
- **[StyleKit Documentation](https://stylekit.santhoshsiva.dev/)** - Interactive documentation site
|
|
211
211
|
- **[Blogkit Documentation](https://blogkit-c367c.web.app/)** - Component library docs
|
|
212
|
-
- **[Gitsy](https://gitsy
|
|
212
|
+
- **[Gitsy](https://gitsy.santhoshsiva.dev/)** - Blog application
|
|
213
213
|
- **[Personal Portfolio](https://santhoshsiva.dev)** - Developer portfolio
|
|
214
214
|
|
|
215
215
|
## Works Great With
|
package/package.json
CHANGED
|
@@ -1,53 +1,53 @@
|
|
|
1
1
|
// Define Colors
|
|
2
|
-
$color--primary: #4242fa;
|
|
3
|
-
$color--primary-light: rgba(66, 66, 250, 0.05);
|
|
4
|
-
$color--primary-lighter: rgba(66, 66, 250, 0.02);
|
|
2
|
+
$color--primary: #4242fa !default;
|
|
3
|
+
$color--primary-light: rgba(66, 66, 250, 0.05) !default;
|
|
4
|
+
$color--primary-lighter: rgba(66, 66, 250, 0.02) !default;
|
|
5
5
|
|
|
6
|
-
$color--primary-accent: #fed600;
|
|
7
|
-
$color--primary-accent-light: #fef1c4;
|
|
8
|
-
$color--primary-accent-lighter: #fef8e0;
|
|
6
|
+
$color--primary-accent: #fed600 !default;
|
|
7
|
+
$color--primary-accent-light: #fef1c4 !default;
|
|
8
|
+
$color--primary-accent-lighter: #fef8e0 !default;
|
|
9
9
|
|
|
10
10
|
// Secondary Colors
|
|
11
|
-
$color--secondary: #3dad84;
|
|
12
|
-
$color--secondary-light: #ecf7f3;
|
|
13
|
-
$color--secondary-lighter: #f2f9f7;
|
|
11
|
+
$color--secondary: #3dad84 !default;
|
|
12
|
+
$color--secondary-light: #ecf7f3 !default;
|
|
13
|
+
$color--secondary-lighter: #f2f9f7 !default;
|
|
14
14
|
|
|
15
15
|
// Base Colors
|
|
16
|
-
$color--base: #ffffff;
|
|
17
|
-
$color--surface: #f6f6f6;
|
|
18
|
-
$color--code: #e8f1fc;
|
|
19
|
-
$color--code-numbers: #6272a4;
|
|
20
|
-
$color--base-background: #ddeef8; // Container
|
|
21
|
-
$color--base-background-dark: #c5eafc;
|
|
22
|
-
$color--base-background-darker: #9bd3ed;
|
|
16
|
+
$color--base: #ffffff !default;
|
|
17
|
+
$color--surface: #f6f6f6 !default;
|
|
18
|
+
$color--code: #e8f1fc !default;
|
|
19
|
+
$color--code-numbers: #6272a4 !default;
|
|
20
|
+
$color--base-background: #ddeef8 !default; // Container
|
|
21
|
+
$color--base-background-dark: #c5eafc !default;
|
|
22
|
+
$color--base-background-darker: #9bd3ed !default;
|
|
23
23
|
|
|
24
24
|
// Grey Scale
|
|
25
|
-
$color--grey-light: #e1e5e9;
|
|
26
|
-
$color--grey-medium-light: #95a1b1;
|
|
27
|
-
$color--grey-medium: #c6c6c7;
|
|
28
|
-
$color--grey-medium-dark: #d9d9d9;
|
|
29
|
-
$color--grey-dark: #6b7c93;
|
|
30
|
-
$color--grey-darker: #4f5969;
|
|
25
|
+
$color--grey-light: #e1e5e9 !default;
|
|
26
|
+
$color--grey-medium-light: #95a1b1 !default;
|
|
27
|
+
$color--grey-medium: #c6c6c7 !default;
|
|
28
|
+
$color--grey-medium-dark: #d9d9d9 !default;
|
|
29
|
+
$color--grey-dark: #6b7c93 !default;
|
|
30
|
+
$color--grey-darker: #4f5969 !default;
|
|
31
31
|
|
|
32
|
-
$color--pink: #e60067;
|
|
32
|
+
$color--pink: #e60067 !default;
|
|
33
33
|
|
|
34
34
|
// Error Colors
|
|
35
|
-
$color--error: #ff4232;
|
|
36
|
-
$color--error-light: #ffecea;
|
|
35
|
+
$color--error: #ff4232 !default;
|
|
36
|
+
$color--error-light: #ffecea !default;
|
|
37
37
|
|
|
38
38
|
// Link Colors
|
|
39
|
-
$color--link: #0d6efd;
|
|
39
|
+
$color--link: #0d6efd !default;
|
|
40
40
|
|
|
41
41
|
// Dark & Black Colors
|
|
42
|
-
$color--dark: #313030;
|
|
43
|
-
$color--black: #000;
|
|
42
|
+
$color--dark: #313030 !default;
|
|
43
|
+
$color--black: #000 !default;
|
|
44
44
|
|
|
45
|
-
$color--glass: rgba(255, 255, 255, 0.85);
|
|
46
|
-
$color--border: #6b7c9333;
|
|
45
|
+
$color--glass: rgba(255, 255, 255, 0.85) !default;
|
|
46
|
+
$color--border: #6b7c9333 !default;
|
|
47
47
|
|
|
48
48
|
.error {
|
|
49
49
|
color: $color--error;
|
|
50
50
|
}
|
|
51
51
|
|
|
52
|
-
$color--shadow: drop-shadow(0px 4px 4px rgba(0, 1, 1, 0.02));
|
|
53
|
-
$color--shadow-dark: drop-shadow(0px 2px 2px rgba(0, 1, 1, 0.18));
|
|
52
|
+
$color--shadow: drop-shadow(0px 4px 4px rgba(0, 1, 1, 0.02)) !default;
|
|
53
|
+
$color--shadow-dark: drop-shadow(0px 2px 2px rgba(0, 1, 1, 0.18)) !default;
|
package/styles/globals.scss
CHANGED
|
@@ -92,7 +92,7 @@ typo.$font-sizes: (
|
|
|
92
92
|
button: typo.$font-size--button,
|
|
93
93
|
small: typo.$font-size--small,
|
|
94
94
|
cite: typo.$font-size--small,
|
|
95
|
-
code: typo.$font-size--small
|
|
95
|
+
code: typo.$font-size--small
|
|
96
96
|
);
|
|
97
97
|
|
|
98
98
|
@each $element, $fs in typo.$font-sizes {
|
|
@@ -119,7 +119,7 @@ a {
|
|
|
119
119
|
cursor: pointer;
|
|
120
120
|
|
|
121
121
|
&:hover {
|
|
122
|
-
|
|
122
|
+
color: colors.$color--primary;
|
|
123
123
|
text-decoration: underline;
|
|
124
124
|
text-decoration-color: colors.$color--primary;
|
|
125
125
|
}
|
|
@@ -142,8 +142,9 @@ code {
|
|
|
142
142
|
font-family: typo.$font-family--code;
|
|
143
143
|
font-size: typo.$font-size--p-small;
|
|
144
144
|
padding: utils.rem(2) utils.rem(4);
|
|
145
|
-
|
|
146
|
-
|
|
145
|
+
background-color: colors.$color--code;
|
|
146
|
+
height: fit-content;
|
|
147
|
+
font-weight: typo.$font-weight--500;
|
|
147
148
|
|
|
148
149
|
white-space: pre-wrap;
|
|
149
150
|
word-wrap: break-word;
|
|
@@ -153,8 +154,8 @@ code {
|
|
|
153
154
|
mark {
|
|
154
155
|
background-color: colors.$color--primary-accent-light;
|
|
155
156
|
font-family: inherit;
|
|
156
|
-
|
|
157
|
-
|
|
157
|
+
font-size: inherit;
|
|
158
|
+
padding: unset;
|
|
158
159
|
}
|
|
159
160
|
|
|
160
161
|
ol,
|
|
@@ -169,9 +170,9 @@ li {
|
|
|
169
170
|
}
|
|
170
171
|
|
|
171
172
|
button {
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
173
|
+
padding: utils.space(1, true) utils.space(2, true);
|
|
174
|
+
background-color: colors.$color--primary;
|
|
175
|
+
color: colors.$color--base;
|
|
175
176
|
|
|
176
|
-
|
|
177
|
+
cursor: pointer;
|
|
177
178
|
}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
@use 'colors.module.scss' as colors;
|
|
2
2
|
@use 'utils.module.scss' as utils;
|
|
3
3
|
|
|
4
|
-
$font-family--primary: 'Rubik', sans-serif;
|
|
5
|
-
$font-family--secondary: 'Montserrat', sans-serif;
|
|
6
|
-
$font-family--code: 'JetBrains Mono', monospace;
|
|
4
|
+
$font-family--primary: 'Rubik', sans-serif !default;
|
|
5
|
+
$font-family--secondary: 'Montserrat', sans-serif !default;
|
|
6
|
+
$font-family--code: 'JetBrains Mono', monospace !default;
|
|
7
7
|
$font-family: $font-family--code;
|
|
8
8
|
|
|
9
9
|
$font-weight: 400;
|