@coopdigital/styles 0.5.6 → 0.5.7

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.
Files changed (9) hide show
  1. package/dist/components/EditorialCard.css +51 -0
  2. package/dist/main.css +18 -8
  3. package/dist/reset.css +12 -7
  4. package/dist/vars.css +6 -1
  5. package/package.json +3 -3
  6. package/src/components/EditorialCard.scss +65 -0
  7. package/src/reset.scss +12 -7
  8. package/src/vars/_typography.scss +7 -0
  9. package/src/vars/_ui.scss +1 -1
package/dist/components/EditorialCard.css ADDED
@@ -0,0 +1,51 @@
1
+ .coop-editorial-card {
2
+ --flex-direction: column;
3
+ --image-max-width: 100%;
4
+ border-radius: var(--ui-border-radius-m);
5
+ box-shadow: var(--ui-shadow);
6
+ transition: box-shadow var(--ui-transition-hover);
7
+ }
8
+ .coop-editorial-card[data-layout=horizontal] {
9
+ --flex-direction: row;
10
+ --image-max-width: calc(100% / 3);
11
+ }
12
+ .coop-editorial-card:hover, .coop-editorial-card:focus {
13
+ box-shadow: var(--ui-shadow-hover);
14
+ }
15
+ .coop-editorial-card h3 {
16
+ font-weight: var(--type-weight-demibold);
17
+ font-size: var(--type-size-20);
18
+ margin: 0;
19
+ }
20
+ .coop-editorial-card picture {
21
+ margin: 0;
22
+ max-width: var(--image-max-width);
23
+ overflow: hidden;
24
+ }
25
+ .coop-editorial-card img {
26
+ height: 100%;
27
+ }
28
+ .coop-editorial-card p {
29
+ margin: 0;
30
+ }
31
+ .coop-editorial-card a {
32
+ display: block;
33
+ text-decoration: none;
34
+ color: inherit;
35
+ }
36
+ .coop-editorial-card a:hover h3, .coop-editorial-card a:focus h3 {
37
+ text-decoration: underline;
38
+ }
39
+ .coop-editorial-card--inner {
40
+ display: flex;
41
+ flex-direction: var(--flex-direction);
42
+ overflow: hidden;
43
+ border-radius: var(--ui-border-radius-m);
44
+ }
45
+ .coop-editorial-card--content {
46
+ display: flex;
47
+ flex-direction: column;
48
+ gap: var(--spacing-12);
49
+ padding: var(--spacing-20);
50
+ background: var(--color-white);
51
+ }
package/dist/main.css CHANGED
@@ -110,7 +110,7 @@
110
110
 
111
111
  :root {
112
112
  --ui-shadow: 0 2px 4px 0 rgb(0 0 0 / 15%);
113
- --ui-shadow-hover: 0 2px 4px 0 rgb(0 0 0 / 35%);
113
+ --ui-shadow-hover: 0 2px 4px 0 rgb(0 0 0 / 25%);
114
114
  --ui-transition-hover: 0.1s ease-out;
115
115
  --ui-transition-hover-property: background-color, color;
116
116
  --ui-border-radius: 4px;
@@ -139,6 +139,10 @@
139
139
  :root {
140
140
  --font-family: "Avenir-Next", "Helvetica Neue", Helvetica, Arial, sans-serif;
141
141
  --font-family-headline: "Co-opHeadline", "Impact", Helvetica, Arial, sans-serif;
142
+ /* Weights */
143
+ --type-weight-default: normal;
144
+ --type-weight-medium: 500;
145
+ --type-weight-demibold: 600;
142
146
  /* Typography Sizes */
143
147
  --type-size-10: 0.625rem;
144
148
  --type-size-12: 0.75rem;
@@ -158,6 +162,7 @@
158
162
  --type-size-56: 3.5rem;
159
163
  --type-size-64: 4rem;
160
164
  --type-size-82: 5.125rem;
165
+ --type-size-default: var(--type-size-16);
161
166
  /* Typography Line Height */
162
167
  --type-line-height-default: 1.5;
163
168
  --type-line-height-tight: 1.25;
@@ -233,13 +238,6 @@ label {
233
238
  line-height: 1.1;
234
239
  }
235
240
 
236
- h1,
237
- h2,
238
- h3,
239
- h4 {
240
- text-wrap: balance;
241
- }
242
-
243
241
  a:not([class]) {
244
242
  text-decoration-skip-ink: auto;
245
243
  }
@@ -249,6 +247,18 @@ picture {
249
247
  display: block;
250
248
  max-width: 100%;
251
249
  }
250
+ img[data-crop],
251
+ picture[data-crop] {
252
+ object-fit: cover;
253
+ }
254
+ img[data-crop=square],
255
+ picture[data-crop=square] {
256
+ aspect-ratio: 1/1;
257
+ }
258
+ img[data-crop=wide],
259
+ picture[data-crop=wide] {
260
+ aspect-ratio: 16/9;
261
+ }
252
262
 
253
263
  :target {
254
264
  scroll-margin-block: 5ex;
package/dist/reset.css CHANGED
@@ -67,13 +67,6 @@ label {
67
67
  line-height: 1.1;
68
68
  }
69
69
 
70
- h1,
71
- h2,
72
- h3,
73
- h4 {
74
- text-wrap: balance;
75
- }
76
-
77
70
  a:not([class]) {
78
71
  text-decoration-skip-ink: auto;
79
72
  }
@@ -83,6 +76,18 @@ picture {
83
76
  display: block;
84
77
  max-width: 100%;
85
78
  }
79
+ img[data-crop],
80
+ picture[data-crop] {
81
+ object-fit: cover;
82
+ }
83
+ img[data-crop=square],
84
+ picture[data-crop=square] {
85
+ aspect-ratio: 1/1;
86
+ }
87
+ img[data-crop=wide],
88
+ picture[data-crop=wide] {
89
+ aspect-ratio: 16/9;
90
+ }
86
91
 
87
92
  :target {
88
93
  scroll-margin-block: 5ex;
package/dist/vars.css CHANGED
@@ -109,7 +109,7 @@
109
109
 
110
110
  :root {
111
111
  --ui-shadow: 0 2px 4px 0 rgb(0 0 0 / 15%);
112
- --ui-shadow-hover: 0 2px 4px 0 rgb(0 0 0 / 35%);
112
+ --ui-shadow-hover: 0 2px 4px 0 rgb(0 0 0 / 25%);
113
113
  --ui-transition-hover: 0.1s ease-out;
114
114
  --ui-transition-hover-property: background-color, color;
115
115
  --ui-border-radius: 4px;
@@ -138,6 +138,10 @@
138
138
  :root {
139
139
  --font-family: "Avenir-Next", "Helvetica Neue", Helvetica, Arial, sans-serif;
140
140
  --font-family-headline: "Co-opHeadline", "Impact", Helvetica, Arial, sans-serif;
141
+ /* Weights */
142
+ --type-weight-default: normal;
143
+ --type-weight-medium: 500;
144
+ --type-weight-demibold: 600;
141
145
  /* Typography Sizes */
142
146
  --type-size-10: 0.625rem;
143
147
  --type-size-12: 0.75rem;
@@ -157,6 +161,7 @@
157
161
  --type-size-56: 3.5rem;
158
162
  --type-size-64: 4rem;
159
163
  --type-size-82: 5.125rem;
164
+ --type-size-default: var(--type-size-16);
160
165
  /* Typography Line Height */
161
166
  --type-line-height-default: 1.5;
162
167
  --type-line-height-tight: 1.25;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@coopdigital/styles",
3
3
  "type": "module",
4
- "version": "0.5.6",
4
+ "version": "0.5.7",
5
5
  "private": false,
6
6
  "publishConfig": {
7
7
  "access": "public"
@@ -29,7 +29,7 @@
29
29
  "description": "",
30
30
  "devDependencies": {
31
31
  "glob": "^11.0.1",
32
- "sass-embedded": "^1.85.1"
32
+ "sass-embedded": "^1.86.0"
33
33
  },
34
- "gitHead": "a275fea237a8e1f918e9fd4bd0f18ba114e7ab34"
34
+ "gitHead": "618022f347d8099ec9aed4413057ed91cce96778"
35
35
  }
package/src/components/EditorialCard.scss ADDED
@@ -0,0 +1,65 @@
1
+ .coop-editorial-card {
2
+ --flex-direction: column;
3
+ --image-max-width: 100%;
4
+ border-radius: var(--ui-border-radius-m);
5
+ box-shadow: var(--ui-shadow);
6
+ transition: box-shadow var(--ui-transition-hover);
7
+
8
+ &[data-layout="horizontal"] {
9
+ --flex-direction: row;
10
+ --image-max-width: calc(100% / 3);
11
+ }
12
+
13
+ &:hover,
14
+ &:focus {
15
+ box-shadow: var(--ui-shadow-hover);
16
+ }
17
+
18
+ h3 {
19
+ font-weight: var(--type-weight-demibold);
20
+ font-size: var(--type-size-20);
21
+ margin: 0;
22
+ }
23
+
24
+ picture {
25
+ margin: 0;
26
+ max-width: var(--image-max-width);
27
+ overflow: hidden;
28
+ }
29
+
30
+ img {
31
+ height: 100%;
32
+ }
33
+
34
+ p {
35
+ margin: 0;
36
+ }
37
+
38
+ a {
39
+ display: block;
40
+ text-decoration: none;
41
+ color: inherit;
42
+
43
+ &:hover,
44
+ &:focus {
45
+ h3 {
46
+ text-decoration: underline;
47
+ }
48
+ }
49
+ }
50
+
51
+ &--inner {
52
+ display: flex;
53
+ flex-direction: var(--flex-direction);
54
+ overflow: hidden;
55
+ border-radius: var(--ui-border-radius-m);
56
+ }
57
+
58
+ &--content {
59
+ display: flex;
60
+ flex-direction: column;
61
+ gap: var(--spacing-12);
62
+ padding: var(--spacing-20);
63
+ background: var(--color-white);
64
+ }
65
+ }
package/src/reset.scss CHANGED
@@ -68,13 +68,6 @@ label {
68
68
  line-height: 1.1;
69
69
  }
70
70
 
71
- h1,
72
- h2,
73
- h3,
74
- h4 {
75
- text-wrap: balance;
76
- }
77
-
78
71
  a:not([class]) {
79
72
  text-decoration-skip-ink: auto;
80
73
  }
@@ -83,6 +76,18 @@ img,
83
76
  picture {
84
77
  display: block;
85
78
  max-width: 100%;
79
+
80
+ &[data-crop] {
81
+ object-fit: cover;
82
+ }
83
+
84
+ &[data-crop="square"] {
85
+ aspect-ratio: 1 / 1;
86
+ }
87
+
88
+ &[data-crop="wide"] {
89
+ aspect-ratio: 16 / 9;
90
+ }
86
91
  }
87
92
 
88
93
  :target {
package/src/vars/_typography.scss CHANGED
@@ -2,6 +2,11 @@
2
2
  --font-family: "Avenir-Next", "Helvetica Neue", Helvetica, Arial, sans-serif;
3
3
  --font-family-headline: "Co-opHeadline", "Impact", Helvetica, Arial, sans-serif;
4
4
 
5
+ /* Weights */
6
+ --type-weight-default: normal;
7
+ --type-weight-medium: 500;
8
+ --type-weight-demibold: 600;
9
+
5
10
  /* Typography Sizes */
6
11
  --type-size-10: 0.625rem;
7
12
  --type-size-12: 0.75rem;
@@ -26,6 +31,8 @@
26
31
 
27
32
  --type-size-82: 5.125rem;
28
33
 
34
+ --type-size-default: var(--type-size-16);
35
+
29
36
  /* Typography Line Height */
30
37
  --type-line-height-default: 1.5;
31
38
  --type-line-height-tight: 1.25;
package/src/vars/_ui.scss CHANGED
@@ -1,6 +1,6 @@
1
1
  :root {
2
2
  --ui-shadow: 0 2px 4px 0 rgb(0 0 0 / 15%);
3
- --ui-shadow-hover: 0 2px 4px 0 rgb(0 0 0 / 35%);
3
+ --ui-shadow-hover: 0 2px 4px 0 rgb(0 0 0 / 25%);
4
4
  --ui-transition-hover: 0.1s ease-out;
5
5
  --ui-transition-hover-property: background-color, color;
6
6