@coopdigital/styles 0.42.2 → 0.43.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.
@@ -1,63 +0,0 @@
1
- $spacing: (
2
- "64",
3
- "56",
4
- "48",
5
- "32",
6
- "24",
7
- "20",
8
- "18",
9
- "16",
10
- "14",
11
- "12",
12
- "10",
13
- "8",
14
- "6",
15
- "4",
16
- "2",
17
- "0"
18
- );
19
-
20
- @each $k in $spacing {
21
- .m-#{$k} {
22
- margin: var(--spacing-#{$k});
23
- }
24
- .mx-#{$k} {
25
- margin-inline: var(--spacing-#{$k});
26
- }
27
- .my-#{$k} {
28
- margin-block: var(--spacing-#{$k});
29
- }
30
- .mt-#{$k} {
31
- margin-top: var(--spacing-#{$k});
32
- }
33
- .mb-#{$k} {
34
- margin-bottom: var(--spacing-#{$k});
35
- }
36
- .ml-#{$k} {
37
- margin-left: var(--spacing-#{$k});
38
- }
39
- .mr-#{$k} {
40
- margin-right: var(--spacing-#{$k});
41
- }
42
- .p-#{$k} {
43
- padding: var(--spacing-#{$k});
44
- }
45
- .px-#{$k} {
46
- padding-inline: var(--spacing-#{$k});
47
- }
48
- .py-#{$k} {
49
- padding-block: var(--spacing-#{$k});
50
- }
51
- .pt-#{$k} {
52
- padding-top: var(--spacing-#{$k});
53
- }
54
- .pb-#{$k} {
55
- padding-bottom: var(--spacing-#{$k});
56
- }
57
- .pl-#{$k} {
58
- padding-left: var(--spacing-#{$k});
59
- }
60
- .pr-#{$k} {
61
- padding-right: var(--spacing-#{$k});
62
- }
63
- }
@@ -1,131 +0,0 @@
1
- @use "sass:selector";
2
- @use "../vars/colors-palette" as *;
3
-
4
- $sizes: (
5
- 10,
6
- 11,
7
- 12 "xs",
8
- 13,
9
- 14 "sm",
10
- 16 "base",
11
- 18 "lg",
12
- 20 "xl",
13
- 22,
14
- 24 "2xl",
15
- 26,
16
- 28,
17
- 30 "3xl",
18
- 32,
19
- 36 "4xl",
20
- 40,
21
- 46,
22
- 48 "5xl",
23
- 56,
24
- 60 "6xl",
25
- 64,
26
- 72 "7xl",
27
- 82 "mega",
28
- 96 "8xl"
29
- );
30
-
31
- @each $size, $name in $sizes {
32
- $px: ".text-#{$size}";
33
- $selector: ($px);
34
-
35
- @if $name {
36
- $selector: selector.extend($selector, $px, (".text-#{$name}"));
37
- }
38
-
39
- #{$selector} {
40
- font-size: var(--text-size-#{$size});
41
- }
42
- }
43
-
44
- .font-headline {
45
- font-family: var(--font-family-headline);
46
- }
47
-
48
- .font-avenir {
49
- font-family: var(--font-family);
50
- }
51
-
52
- .font-mono {
53
- font-family: monospace;
54
- }
55
-
56
- $text-transform-options: (capitalize, uppercase, lowercase);
57
-
58
- @each $option in $text-transform-options {
59
- .text-#{$option} {
60
- text-transform: #{$option};
61
- }
62
- }
63
-
64
- $text-wrap-options: ("wrap", "nowrap", "balance", "pretty");
65
-
66
- @each $option in $text-wrap-options {
67
- .text-#{$option} {
68
- text-wrap: #{$option};
69
- }
70
- }
71
-
72
- $text-align-options: ("left", "center", "right", "justify", "start", "end");
73
-
74
- @each $option in $text-align-options {
75
- .text-#{$option} {
76
- text-align: #{$option};
77
- }
78
- }
79
-
80
- $font-weight-options: (300 "light", 400 "normal", 500 "medium", 600 "semibold", 700 "bold");
81
-
82
- @each $weight, $name in $font-weight-options {
83
- .font-#{$name} {
84
- font-weight: #{$weight};
85
- }
86
- }
87
-
88
- .italic {
89
- font-style: italic;
90
- }
91
-
92
- $text-decoration-line-options: (underline, overline, line-through, no-underline);
93
-
94
- @each $option in $text-decoration-line-options {
95
- .#{$option} {
96
- text-decoration-line: if($option == "no-underline", none, $option);
97
- }
98
- }
99
-
100
- $letter-spacing-options: (
101
- "tracking-tighter": "-0.05em",
102
- "tracking-tight": "-0.025em",
103
- "tracking-normal": "0em",
104
- "tracking-wide": "0.025em",
105
- "tracking-wider": "0.05em",
106
- "tracking-widest": "0.1em",
107
- );
108
-
109
- @each $option, $value in $letter-spacing-options {
110
- .#{$option} {
111
- letter-spacing: #{$value};
112
- }
113
- }
114
-
115
- @each $key, $color in $dark-colors {
116
- .text-dark-#{$key} {
117
- color: #{$color};
118
- }
119
- }
120
-
121
- @each $key, $color in $text-colors {
122
- .text-#{$key} {
123
- color: #{$color};
124
- }
125
- }
126
-
127
- @each $key, $color in $standalone-colors {
128
- .text-#{$key} {
129
- color: #{$color};
130
- }
131
- }
@@ -1,9 +0,0 @@
1
- @use "./utilities/background";
2
- @use "./utilities/border";
3
- @use "./utilities/typography";
4
- @use "./utilities/grid";
5
- @use "./utilities/display";
6
- @use "./utilities/spacing";
7
- @use "./utilities/flex";
8
- @use "./utilities/position";
9
- @use "./utilities/sizing";