crayon-css 0.1.3 → 0.2.0
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 +1 -1
- package/src/_borders.scss +77 -0
- package/src/_config.scss +94 -42
- package/src/_display.scss +18 -7
- package/src/_flex.scss +13 -7
- package/src/_reset.scss +2 -2
- package/src/_typography.scss +5 -6
- package/src/crayon.scss +4 -3
package/package.json
CHANGED
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
@use "config";
|
|
2
|
+
@use "utility";
|
|
3
|
+
@use "sass:map";
|
|
4
|
+
|
|
5
|
+
// ─── Lookups ──────────────────────────────────────────────────────────────────
|
|
6
|
+
|
|
7
|
+
@function border-width($key: "DEFAULT") {
|
|
8
|
+
@return map.get(config.$border-widths, $key);
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
@function rounded($key: "DEFAULT") {
|
|
12
|
+
$value: map.get(config.$border-radii, $key);
|
|
13
|
+
@if $value == 0 or $value == 9999px { @return $value; }
|
|
14
|
+
@return utility.px-to-rem($value);
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
// ─── CSS Variables ────────────────────────────────────────────────────────────
|
|
18
|
+
|
|
19
|
+
:root {
|
|
20
|
+
@each $key, $value in config.$border-widths {
|
|
21
|
+
@if $key == "DEFAULT" {
|
|
22
|
+
--border: #{$value};
|
|
23
|
+
} @else {
|
|
24
|
+
--border-#{$key}: #{$value};
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
@each $key, $value in config.$border-radii {
|
|
29
|
+
$rem: if($value == 0 or $value == 9999px, $value, utility.px-to-rem($value));
|
|
30
|
+
@if $key == "DEFAULT" {
|
|
31
|
+
--rounded: #{$rem};
|
|
32
|
+
} @else {
|
|
33
|
+
--rounded-#{$key}: #{$rem};
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
// ─── Border Width ─────────────────────────────────────────────────────────────
|
|
39
|
+
|
|
40
|
+
@mixin _border-width-classes($suffix, $width) {
|
|
41
|
+
@if $suffix == "" {
|
|
42
|
+
.border { border-width: $width; }
|
|
43
|
+
.border-x { border-left-width: $width; border-right-width: $width; }
|
|
44
|
+
.border-y { border-top-width: $width; border-bottom-width: $width; }
|
|
45
|
+
.border-t { border-top-width: $width; }
|
|
46
|
+
.border-r { border-right-width: $width; }
|
|
47
|
+
.border-b { border-bottom-width: $width; }
|
|
48
|
+
.border-l { border-left-width: $width; }
|
|
49
|
+
} @else {
|
|
50
|
+
.border-#{$suffix} { border-width: $width; }
|
|
51
|
+
.border-x-#{$suffix} { border-left-width: $width; border-right-width: $width; }
|
|
52
|
+
.border-y-#{$suffix} { border-top-width: $width; border-bottom-width: $width; }
|
|
53
|
+
.border-t-#{$suffix} { border-top-width: $width; }
|
|
54
|
+
.border-r-#{$suffix} { border-right-width: $width; }
|
|
55
|
+
.border-b-#{$suffix} { border-bottom-width: $width; }
|
|
56
|
+
.border-l-#{$suffix} { border-left-width: $width; }
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
@each $key, $width in config.$border-widths {
|
|
61
|
+
@if $key == "DEFAULT" {
|
|
62
|
+
@include _border-width-classes("", $width);
|
|
63
|
+
} @else {
|
|
64
|
+
@include _border-width-classes($key, $width);
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
// ─── Border Radius ────────────────────────────────────────────────────────────
|
|
69
|
+
|
|
70
|
+
@each $key, $radius in config.$border-radii {
|
|
71
|
+
$rem: if($radius == 0 or $radius == 9999px, $radius, utility.px-to-rem($radius));
|
|
72
|
+
@if $key == "DEFAULT" {
|
|
73
|
+
.rounded { border-radius: $rem; }
|
|
74
|
+
} @else {
|
|
75
|
+
.rounded-#{$key} { border-radius: $rem; }
|
|
76
|
+
}
|
|
77
|
+
}
|
package/src/_config.scss
CHANGED
|
@@ -6,18 +6,31 @@ $convert-colorspace: true;
|
|
|
6
6
|
$output-colorspace: oklch;
|
|
7
7
|
|
|
8
8
|
// Layout divisions — used to generate fractional width/height classes like w-1/3, h-3/4 etc
|
|
9
|
-
$layout-divisions: (
|
|
10
|
-
2,
|
|
11
|
-
3,
|
|
12
|
-
4,
|
|
13
|
-
5,
|
|
14
|
-
6,
|
|
15
|
-
12
|
|
16
|
-
);
|
|
9
|
+
$layout-divisions: (2, 3, 4, 5, 6, 12);
|
|
17
10
|
|
|
18
11
|
// Layout columns — used to generate grid-cols-* and col/row-span-* classes
|
|
19
12
|
$layout-columns: 12;
|
|
20
13
|
|
|
14
|
+
$border-widths: (
|
|
15
|
+
"DEFAULT": 1px,
|
|
16
|
+
"0": 0px,
|
|
17
|
+
"2": 2px,
|
|
18
|
+
"4": 4px,
|
|
19
|
+
"8": 8px,
|
|
20
|
+
);
|
|
21
|
+
|
|
22
|
+
$border-radii: (
|
|
23
|
+
"none": 0,
|
|
24
|
+
"sm": 2px,
|
|
25
|
+
"DEFAULT": 4px,
|
|
26
|
+
"md": 6px,
|
|
27
|
+
"lg": 8px,
|
|
28
|
+
"xl": 12px,
|
|
29
|
+
"2xl": 16px,
|
|
30
|
+
"3xl": 24px,
|
|
31
|
+
"full": 9999px,
|
|
32
|
+
);
|
|
33
|
+
|
|
21
34
|
// Breakpoints
|
|
22
35
|
$breakpoints: (
|
|
23
36
|
"sm": 640px,
|
|
@@ -32,19 +45,58 @@ $font-family: sans-serif;
|
|
|
32
45
|
$base-font-size: 16px;
|
|
33
46
|
|
|
34
47
|
$font-sizes: (
|
|
35
|
-
"xs": (
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
"
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
"
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
"
|
|
48
|
+
"xs": (
|
|
49
|
+
$base-font-size * 0.75,
|
|
50
|
+
1rem,
|
|
51
|
+
),
|
|
52
|
+
"sm": (
|
|
53
|
+
$base-font-size * 0.875,
|
|
54
|
+
1.25rem,
|
|
55
|
+
),
|
|
56
|
+
"base": (
|
|
57
|
+
$base-font-size * 1,
|
|
58
|
+
1.5rem,
|
|
59
|
+
),
|
|
60
|
+
"lg": (
|
|
61
|
+
$base-font-size * 1.125,
|
|
62
|
+
1.75rem,
|
|
63
|
+
),
|
|
64
|
+
"xl": (
|
|
65
|
+
$base-font-size * 1.25,
|
|
66
|
+
1.75rem,
|
|
67
|
+
),
|
|
68
|
+
"2xl": (
|
|
69
|
+
$base-font-size * 1.5,
|
|
70
|
+
2rem,
|
|
71
|
+
),
|
|
72
|
+
"3xl": (
|
|
73
|
+
$base-font-size * 1.875,
|
|
74
|
+
2.25rem,
|
|
75
|
+
),
|
|
76
|
+
"4xl": (
|
|
77
|
+
$base-font-size * 2.25,
|
|
78
|
+
2.5rem,
|
|
79
|
+
),
|
|
80
|
+
"5xl": (
|
|
81
|
+
$base-font-size * 3,
|
|
82
|
+
1,
|
|
83
|
+
),
|
|
84
|
+
"6xl": (
|
|
85
|
+
$base-font-size * 3.75,
|
|
86
|
+
1,
|
|
87
|
+
),
|
|
88
|
+
"7xl": (
|
|
89
|
+
$base-font-size * 4.5,
|
|
90
|
+
1,
|
|
91
|
+
),
|
|
92
|
+
"8xl": (
|
|
93
|
+
$base-font-size * 6,
|
|
94
|
+
1,
|
|
95
|
+
),
|
|
96
|
+
"9xl": (
|
|
97
|
+
$base-font-size * 8,
|
|
98
|
+
1,
|
|
99
|
+
),
|
|
48
100
|
);
|
|
49
101
|
|
|
50
102
|
$font-weights: (
|
|
@@ -64,25 +116,25 @@ $highest-multiplier: 96;
|
|
|
64
116
|
|
|
65
117
|
/* Base sizes can be whatever you want, the multiplier just fills it the rest of the way to that number, so you can go beyond 96. Bases can have any name or multiplier you want for greater granularity */
|
|
66
118
|
$base-sizes: (
|
|
67
|
-
0.5
|
|
68
|
-
1
|
|
69
|
-
1.5
|
|
70
|
-
2
|
|
71
|
-
2.5
|
|
72
|
-
3
|
|
73
|
-
3.5
|
|
74
|
-
4
|
|
75
|
-
4.5
|
|
76
|
-
5
|
|
77
|
-
5.5
|
|
78
|
-
6
|
|
79
|
-
6.5
|
|
80
|
-
7
|
|
81
|
-
7.5
|
|
82
|
-
8
|
|
83
|
-
8.5
|
|
84
|
-
9
|
|
85
|
-
9.5
|
|
119
|
+
0.5: math.div($base-size, 2),
|
|
120
|
+
1: $base-size,
|
|
121
|
+
1.5: $base-size * 1.5,
|
|
122
|
+
2: $base-size * 2,
|
|
123
|
+
2.5: $base-size * 2.5,
|
|
124
|
+
3: $base-size * 3,
|
|
125
|
+
3.5: $base-size * 3.5,
|
|
126
|
+
4: $base-size * 4,
|
|
127
|
+
4.5: $base-size * 4.5,
|
|
128
|
+
5: $base-size * 5,
|
|
129
|
+
5.5: $base-size * 5.5,
|
|
130
|
+
6: $base-size * 6,
|
|
131
|
+
6.5: $base-size * 6.5,
|
|
132
|
+
7: $base-size * 7,
|
|
133
|
+
7.5: $base-size * 7.5,
|
|
134
|
+
8: $base-size * 8,
|
|
135
|
+
8.5: $base-size * 8.5,
|
|
136
|
+
9: $base-size * 9,
|
|
137
|
+
9.5: $base-size * 9.5,
|
|
86
138
|
);
|
|
87
139
|
|
|
88
140
|
/* The base color are the same as tailwind - it's all on you to extend etc */
|
|
@@ -375,5 +427,5 @@ $colors: (
|
|
|
375
427
|
|
|
376
428
|
// Base
|
|
377
429
|
"white": #ffffff,
|
|
378
|
-
"black": #000000
|
|
379
|
-
);
|
|
430
|
+
"black": #000000
|
|
431
|
+
);
|
package/src/_display.scss
CHANGED
|
@@ -8,9 +8,20 @@
|
|
|
8
8
|
$converted-value: utility.px-to-rem($value);
|
|
9
9
|
$escaped: utility.str-replace($size-name, ".", "\\.");
|
|
10
10
|
|
|
11
|
-
.gap-#{$escaped},
|
|
12
|
-
.gap
|
|
13
|
-
|
|
11
|
+
.gap-#{$escaped},
|
|
12
|
+
.gap#{$escaped} {
|
|
13
|
+
gap: $converted-value;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.gap-x-#{$escaped},
|
|
17
|
+
.gapx#{$escaped} {
|
|
18
|
+
column-gap: $converted-value;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.gap-y-#{$escaped},
|
|
22
|
+
.gapy#{$escaped} {
|
|
23
|
+
row-gap: $converted-value;
|
|
24
|
+
}
|
|
14
25
|
}
|
|
15
26
|
|
|
16
27
|
@each $size, $value in config.$base-sizes {
|
|
@@ -18,20 +29,20 @@
|
|
|
18
29
|
}
|
|
19
30
|
|
|
20
31
|
$gap-size: 10;
|
|
21
|
-
|
|
32
|
+
|
|
33
|
+
@while $gap-size <=config.$highest-multiplier {
|
|
22
34
|
@include gap-classes($gap-size, config.$base-size * $gap-size);
|
|
23
35
|
$gap-size: $gap-size + 1;
|
|
24
36
|
}
|
|
25
37
|
|
|
26
38
|
// ─── Display ──────────────────────────────────────────────────────────────────
|
|
27
39
|
|
|
28
|
-
|
|
29
40
|
.block {
|
|
30
41
|
display: block;
|
|
31
42
|
}
|
|
32
43
|
|
|
33
44
|
.inline-block {
|
|
34
|
-
display: inline-block
|
|
45
|
+
display: inline-block;
|
|
35
46
|
}
|
|
36
47
|
|
|
37
48
|
.inline {
|
|
@@ -71,4 +82,4 @@ $gap-size: 10;
|
|
|
71
82
|
max-width: $breakpoint;
|
|
72
83
|
}
|
|
73
84
|
}
|
|
74
|
-
}
|
|
85
|
+
}
|
package/src/_flex.scss
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
$flex: (
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
2
|
+
"row": row,
|
|
3
|
+
"col": column,
|
|
4
|
+
"row-reverse": row-reverse,
|
|
5
|
+
"col-reverse": column-reverse,
|
|
6
6
|
);
|
|
7
7
|
|
|
8
8
|
@each $name, $dir in $flex {
|
|
@@ -33,6 +33,12 @@ $flex: (
|
|
|
33
33
|
flex-shrink: 0;
|
|
34
34
|
}
|
|
35
35
|
|
|
36
|
-
.flex-wrap
|
|
37
|
-
|
|
38
|
-
|
|
36
|
+
.flex-wrap {
|
|
37
|
+
flex-wrap: wrap;
|
|
38
|
+
}
|
|
39
|
+
.flex-wrap-reverse {
|
|
40
|
+
flex-wrap: wrap-reverse;
|
|
41
|
+
}
|
|
42
|
+
.flex-nowrap {
|
|
43
|
+
flex-wrap: nowrap;
|
|
44
|
+
}
|
package/src/_reset.scss
CHANGED
|
@@ -27,8 +27,6 @@ blockquote,
|
|
|
27
27
|
dl,
|
|
28
28
|
dd {
|
|
29
29
|
margin-block-end: 0;
|
|
30
|
-
font-size: config.$base-font-size;
|
|
31
|
-
font-weight: typography.font-weight("normal");
|
|
32
30
|
}
|
|
33
31
|
|
|
34
32
|
/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
|
|
@@ -42,6 +40,8 @@ body {
|
|
|
42
40
|
min-height: 100vh;
|
|
43
41
|
line-height: 1.5;
|
|
44
42
|
margin: 0;
|
|
43
|
+
font-size: config.$base-font-size;
|
|
44
|
+
font-weight: typography.font-weight("normal");
|
|
45
45
|
}
|
|
46
46
|
|
|
47
47
|
/* Set shorter line heights on headings and interactive elements */
|
package/src/_typography.scss
CHANGED
|
@@ -48,7 +48,6 @@ figcaption,
|
|
|
48
48
|
caption,
|
|
49
49
|
small,
|
|
50
50
|
code {
|
|
51
|
-
|
|
52
51
|
//weights
|
|
53
52
|
@each $name, $value in config.$font-weights {
|
|
54
53
|
$escaped: utility.str-replace($name, ".", "\\.");
|
|
@@ -69,10 +68,10 @@ code {
|
|
|
69
68
|
}
|
|
70
69
|
|
|
71
70
|
// Font sizes
|
|
72
|
-
@each $
|
|
73
|
-
.text-#{$
|
|
74
|
-
font-size: utility.px-to-rem(list.nth($
|
|
75
|
-
line-height: list.nth($
|
|
71
|
+
@each $size, $value in config.$font-sizes {
|
|
72
|
+
.text-#{$size} {
|
|
73
|
+
font-size: utility.px-to-rem(list.nth($value, 1));
|
|
74
|
+
line-height: list.nth($value, 2);
|
|
76
75
|
}
|
|
77
76
|
}
|
|
78
77
|
|
|
@@ -81,4 +80,4 @@ code {
|
|
|
81
80
|
.font-#{$name} {
|
|
82
81
|
font-weight: $value;
|
|
83
82
|
}
|
|
84
|
-
}
|
|
83
|
+
}
|
package/src/crayon.scss
CHANGED
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
@forward "reset";
|
|
2
|
+
@forward "utility";
|
|
3
|
+
@forward "config";
|
|
2
4
|
@forward "accessibility";
|
|
3
5
|
@forward "display";
|
|
4
6
|
@forward "flex";
|
|
@@ -6,6 +8,5 @@
|
|
|
6
8
|
@forward "sizes";
|
|
7
9
|
@forward "colors";
|
|
8
10
|
@forward "typography";
|
|
9
|
-
@forward "
|
|
10
|
-
@forward "
|
|
11
|
-
@forward "config";
|
|
11
|
+
@forward "borders";
|
|
12
|
+
@forward "mixins";
|