Skip to content

Commit be6d4b8

Browse files
burieberryburieberry
committed
update seed realm
1 parent 4255d1e commit be6d4b8

11 files changed

+67
-111
lines changed

‎packages/experiments-realm/blog-category.gts

-3
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,6 @@ let BlogCategoryTemplate = class Embedded extends Component<
5959
}
6060
</style>
6161
<div class='blog-category'>
62-
{{! template-lint-disable no-inline-styles }}
6362
<div class='category-name' style={{categoryStyle @model}}>
6463
<@fields.shortName />
6564
</div>
@@ -104,7 +103,6 @@ export class BlogCategory extends CardDef {
104103
}
105104
</style>
106105
<div class='category-atom'>
107-
{{! template-lint-disable no-inline-styles }}
108106
<div class='circle' style={{cssVar category-swatch=@model.pillColor}} />
109107
<@fields.longName />
110108
</div>
@@ -207,7 +205,6 @@ export class BlogCategory extends CardDef {
207205
}
208206
</style>
209207
<div class='blog-category'>
210-
{{! template-lint-disable no-inline-styles }}
211208
<div class='category-name' style={{categoryStyle @model}}>
212209
<@fields.shortName />
213210
</div>

‎packages/seed-realm/BlogCategory/5c529dbb-bc16-41ee-9c31-a2b28e07b79d.json

+1-6
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,7 @@
55
"longName": "Movie Review",
66
"shortName": "Movies",
77
"slug": "movies",
8-
"backgroundColor": {
9-
"hexValue": "#FBEB06"
10-
},
11-
"textColor": {
12-
"hexValue": "#000000"
13-
},
8+
"pillColor": "#FBEB06",
149
"description": null,
1510
"title": "Movie Review",
1611
"thumbnailURL": null

‎packages/seed-realm/BlogCategory/a4ee8a18-182b-47ff-b557-ef2e529c97ec.json

+1-6
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,7 @@
55
"longName": "TV Series",
66
"shortName": "TV",
77
"slug": "tv-series",
8-
"backgroundColor": {
9-
"hexValue": "#9D00FF"
10-
},
11-
"textColor": {
12-
"hexValue": "#ffffff"
13-
},
8+
"pillColor": "#9D00FF",
149
"description": null,
1510
"title": "TV Series",
1611
"thumbnailURL": null

‎packages/seed-realm/BlogCategory/city-design.json

+1-6
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,7 @@
55
"longName": "City Design",
66
"shortName": "Design",
77
"slug": "city-design",
8-
"backgroundColor": {
9-
"hexValue": "#1EDF67"
10-
},
11-
"textColor": {
12-
"hexValue": "#ffffff"
13-
},
8+
"pillColor": "#1EDF67",
149
"description": "Showcasing architecture and urban planning brilliance.",
1510
"title": "City Design",
1611
"thumbnailURL": null

‎packages/seed-realm/BlogCategory/cultural-scenes.json

+1-6
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,7 @@
55
"longName": "Cultural Scenes",
66
"shortName": "Culture",
77
"slug": "cultural-scenes",
8-
"backgroundColor": {
9-
"hexValue": "#FA7F01"
10-
},
11-
"textColor": {
12-
"hexValue": "#ffffff"
13-
},
8+
"pillColor": "#FA7F01",
149
"description": "Capturing the vibrant art, food, and music of cities.",
1510
"title": "Cultural Scenes",
1611
"thumbnailURL": null

‎packages/seed-realm/BlogCategory/future-tech.json

+1-6
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,7 @@
55
"longName": "Future Tech",
66
"shortName": "Tech",
77
"slug": "future-tech",
8-
"backgroundColor": {
9-
"hexValue": "#000000"
10-
},
11-
"textColor": {
12-
"hexValue": "#ffffff"
13-
},
8+
"pillColor": "#000000",
149
"description": "Highlighting technology shaping tomorrow’s cities.",
1510
"title": "Future Tech",
1611
"thumbnailURL": null

‎packages/seed-realm/BlogCategory/street-life.json

+1-6
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,7 @@
55
"longName": "Street Life",
66
"shortName": "Streets",
77
"slug": "street-life",
8-
"backgroundColor": {
9-
"hexValue": "#39B1FF"
10-
},
11-
"textColor": {
12-
"hexValue": "#ffffff"
13-
},
8+
"pillColor": "#39B1FF",
149
"description": "Discovering the stories of streets and public spaces.",
1510
"title": "Street Life",
1611
"thumbnailURL": null

‎packages/seed-realm/BlogCategory/urban-work.json

+1-6
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,7 @@
55
"longName": "Urban Work",
66
"shortName": "Work",
77
"slug": "urban-work",
8-
"backgroundColor": {
9-
"hexValue": "#A6F4CA"
10-
},
11-
"textColor": {
12-
"hexValue": "#000000"
13-
},
8+
"pillColor": "#A6F4CA",
149
"description": "Exploring work trends in the evolving city landscape.",
1510
"title": "Work",
1611
"thumbnailURL": null

‎packages/seed-realm/blog-category.gts

+30-27
Original file line numberDiff line numberDiff line change
@@ -9,19 +9,21 @@ import StringField from 'https://cardstack.com/base/string';
99
import { BlogApp as BlogAppCard } from './blog-app';
1010
import { htmlSafe } from '@ember/template';
1111
import { ColorField } from './fields/color';
12-
13-
function htmlSafeColor(color?: string) {
14-
return htmlSafe(`background-color: ${color || ''}`);
15-
}
12+
import { cssVar, getContrastColor } from '@cardstack/boxel-ui/helpers';
1613

1714
export const categoryStyle = (category: Partial<BlogCategory>) => {
1815
if (!category) {
1916
return;
2017
}
18+
const pillColor = category.pillColor ?? '#e8e8e8'; // var(--boxel-200)
19+
const borderColor = category.pillColor ?? '#d3d3d3'; // var(--boxel-border-color)
2120
return htmlSafe(`
22-
background-color: ${category.backgroundColor?.hexValue || '#000000'};
23-
color: ${category.textColor?.hexValue || '#ffffff'};
24-
`);
21+
background-color: ${pillColor};
22+
color: ${getContrastColor(pillColor, undefined, undefined, {
23+
isSmallText: true,
24+
})};
25+
border: 1px solid ${borderColor}
26+
`);
2527
};
2628

2729
let BlogCategoryTemplate = class Embedded extends Component<
@@ -34,27 +36,29 @@ let BlogCategoryTemplate = class Embedded extends Component<
3436
padding: var(--boxel-sp);
3537
}
3638
.category-name {
37-
padding: var(--boxel-sp-xxs);
38-
color: white;
39+
padding: var(--boxel-sp-xxxs) var(--boxel-sp-xs);
3940
border-radius: var(--boxel-border-radius-sm);
40-
font-weight: bold;
41+
font: 600 var(--boxel-font-xs);
42+
letter-spacing: var(--boxel-lsp-sm);
4143
display: inline-block;
4244
}
4345
.category-label {
44-
color: var(--boxel-400);
45-
margin-top: var(--boxel-sp-sm);
46+
color: var(--boxel-450);
47+
font: 500 var(--boxel-font-xs);
48+
letter-spacing: var(--boxel-lsp-sm);
49+
margin-top: var(--boxel-sp);
4650
}
4751
.category-full-name {
4852
font-size: var(--boxel-font-size);
4953
font-weight: bold;
5054
}
5155
.category-description {
5256
margin-top: var(--boxel-sp-sm);
53-
color: var(--boxel-400);
57+
font: 400 var(--boxel-font-xs);
58+
letter-spacing: var(--boxel-lsp-sm);
5459
}
5560
</style>
5661
<div class='blog-category'>
57-
{{! template-lint-disable no-inline-styles }}
5862
<div class='category-name' style={{categoryStyle @model}}>
5963
<@fields.shortName />
6064
</div>
@@ -75,8 +79,7 @@ export class BlogCategory extends CardDef {
7579
@field longName = contains(StringField);
7680
@field shortName = contains(StringField);
7781
@field slug = contains(StringField);
78-
@field backgroundColor = contains(ColorField);
79-
@field textColor = contains(ColorField);
82+
@field pillColor = contains(ColorField);
8083
@field description = contains(StringField);
8184
@field blog = linksTo(BlogAppCard, { isUsed: true });
8285

@@ -91,18 +94,16 @@ export class BlogCategory extends CardDef {
9194
border-radius: 50%;
9295
display: inline-block;
9396
margin-right: var(--boxel-sp-xxs);
97+
background-color: var(--category-swatch);
9498
}
9599
.category-atom {
96100
display: inline-flex;
97101
align-items: center;
102+
font-weight: 600;
98103
}
99104
</style>
100105
<div class='category-atom'>
101-
{{! template-lint-disable no-inline-styles }}
102-
<div
103-
class='circle'
104-
style={{htmlSafeColor @model.backgroundColor.hexValue}}
105-
/>
106+
<div class='circle' style={{cssVar category-swatch=@model.pillColor}} />
106107
<@fields.longName />
107108
</div>
108109
</template>
@@ -116,14 +117,16 @@ export class BlogCategory extends CardDef {
116117
padding: var(--boxel-sp-xs);
117118
}
118119
.category-name {
119-
padding: var(--boxel-sp-xxs);
120-
color: white;
120+
padding: var(--boxel-sp-xxxs) var(--boxel-sp-xs);
121121
border-radius: var(--boxel-border-radius-sm);
122-
font-weight: bold;
122+
font: 600 var(--boxel-font-xs);
123+
letter-spacing: var(--boxel-lsp-sm);
123124
display: inline-block;
124125
}
125126
.category-label {
126-
color: var(--boxel-400);
127+
color: var(--boxel-450);
128+
font: 500 var(--boxel-font-xs);
129+
letter-spacing: var(--boxel-lsp-sm);
127130
margin-top: var(--boxel-sp-sm);
128131
}
129132
.category-full-name {
@@ -136,12 +139,13 @@ export class BlogCategory extends CardDef {
136139
}
137140
.category-description {
138141
margin-top: var(--boxel-sp-sm);
139-
color: var(--boxel-400);
140142
display: -webkit-box;
141143
-webkit-box-orient: vertical;
142144
-webkit-line-clamp: 3;
143145
overflow: hidden;
144146
text-overflow: ellipsis;
147+
font: 400 var(--boxel-font-sm);
148+
letter-spacing: var(--boxel-lsp);
145149
}
146150
@container fitted-card ((aspect-ratio <= 0.92) and (height <= 182px)) {
147151
.category-description {
@@ -201,7 +205,6 @@ export class BlogCategory extends CardDef {
201205
}
202206
</style>
203207
<div class='blog-category'>
204-
{{! template-lint-disable no-inline-styles }}
205208
<div class='category-name' style={{categoryStyle @model}}>
206209
<@fields.shortName />
207210
</div>

‎packages/seed-realm/blog-post.gts

+24-18
Original file line numberDiff line numberDiff line change
@@ -31,10 +31,9 @@ class EmbeddedTemplate extends Component<typeof BlogPost> {
3131
{{#if @model.categories.length}}
3232
<div class='categories'>
3333
{{#each @model.categories as |category|}}
34-
<div
35-
class='category'
36-
style={{categoryStyle category}}
37-
>{{category.shortName}}</div>
34+
<div class='category' style={{categoryStyle category}}>
35+
{{category.shortName}}
36+
</div>
3837
{{/each}}
3938
</div>
4039
{{/if}}
@@ -111,6 +110,9 @@ class EmbeddedTemplate extends Component<typeof BlogPost> {
111110
112111
.categories {
113112
margin-top: var(--boxel-sp);
113+
display: flex;
114+
flex-wrap: wrap;
115+
gap: var(--boxel-sp-xxxs);
114116
}
115117
116118
.category {
@@ -130,10 +132,9 @@ class FittedTemplate extends Component<typeof BlogPost> {
130132
<div class='thumbnail' style={{setBackgroundImage @model.thumbnailURL}} />
131133
<div class='categories'>
132134
{{#each @model.categories as |category|}}
133-
<div
134-
class='category'
135-
style={{categoryStyle category}}
136-
>{{category.shortName}}</div>
135+
<div class='category' style={{categoryStyle category}}>
136+
{{category.shortName}}
137+
</div>
137138
{{/each}}
138139
</div>
139140
<div class='content'>
@@ -217,16 +218,16 @@ class FittedTemplate extends Component<typeof BlogPost> {
217218
height: 20px;
218219
margin-left: 7px;
219220
display: none;
221+
overflow: hidden;
220222
}
221223
222224
.category {
223-
font-size: 0.6rem;
224-
height: 18px;
225+
height: 20px;
225226
padding: 3px 4px;
226227
border-radius: var(--boxel-border-radius-sm);
227228
display: inline-block;
228-
font-family: var(--boxel-font-family);
229-
font-weight: 600;
229+
font: 500 var(--boxel-font-xs);
230+
letter-spacing: var(--boxel-lsp-sm);
230231
margin-right: var(--boxel-sp-xxxs);
231232
overflow: hidden;
232233
text-overflow: ellipsis;
@@ -713,10 +714,9 @@ export class BlogPost extends CardDef {
713714
{{#if @model.categories.length}}
714715
<div class='categories'>
715716
{{#each @model.categories as |category|}}
716-
<div
717-
class='category'
718-
style={{categoryStyle category}}
719-
>{{category.shortName}}</div>
717+
<div class='category' style={{categoryStyle category}}>
718+
{{category.shortName}}
719+
</div>
720720
{{/each}}
721721
</div>
722722
{{/if}}
@@ -841,13 +841,19 @@ export class BlogPost extends CardDef {
841841
}
842842
.categories {
843843
margin-top: var(--boxel-sp);
844+
display: flex;
845+
flex-wrap: wrap;
846+
gap: var(--boxel-sp-xxs);
847+
}
848+
.featured-image + .categories {
849+
margin-top: var(--boxel-sp-xl);
844850
}
845851
.category {
846852
display: inline-block;
847853
padding: 3px var(--boxel-sp-xxxs);
848854
border-radius: var(--boxel-border-radius-sm);
849-
font: 500 var(--boxel-font-sm);
850-
letter-spacing: var(--boxel-lsp-xs);
855+
font: 500 var(--boxel-font-xs);
856+
letter-spacing: var(--boxel-lsp-sm);
851857
}
852858
</style>
853859
</template>

0 commit comments

Comments
 (0)