Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Group formats #137

Merged
merged 20 commits into from
Dec 19, 2023
Merged

Group formats #137

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
ddfb010
Group formats
jamesnw Oct 26, 2023
135b86b
Fix test
jamesnw Oct 26, 2023
77ff48a
Lint
jamesnw Oct 26, 2023
68dae99
Tests for FormatGroup
jamesnw Oct 26, 2023
4f6f6bd
Merge branch 'main' into group-formats
jgerigmeyer Oct 31, 2023
7cf4118
review
jgerigmeyer Oct 31, 2023
2152706
fix target spaces
jgerigmeyer Oct 31, 2023
82a5ab9
test
jgerigmeyer Oct 31, 2023
dbb0d39
Add explicit name, gamut name, and gamut testing format for Format Gr…
jamesnw Oct 31, 2023
5b436b7
move headings up a level as they are independent of the result ratio
stacyk Nov 13, 2023
4d60df1
remove unused
stacyk Nov 13, 2023
41aa529
Update styles for grouped formats
stacyk Nov 13, 2023
b3cbf67
capitalization from source since sRGB should have lowercase "s"
stacyk Nov 13, 2023
5b22ab7
Merge branch 'main' into group-formats
jgerigmeyer Nov 13, 2023
d999b99
capitalize P3
jgerigmeyer Nov 13, 2023
8bd1cef
use logical properties
stacyk Nov 13, 2023
8be40b0
Add flex container to section headers and errors
stacyk Nov 21, 2023
065567c
Merge branch 'main' into group-formats
jgerigmeyer Nov 22, 2023
55cd0a1
Merge branch 'refs/heads/main' into group-formats
stacyk Dec 19, 2023
8b130b1
remove unused grid
stacyk Dec 19, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 8 additions & 3 deletions src/lib/components/colors/FormatGroup.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
</script>

<div data-content="format-group">
<h5>{formatGroup.name}</h5>
<h2 class="label section-heading">{formatGroup.name}</h2>
{#if !isInGamut}
<span data-color-info="warning"
>Selected color is <ExternalLink
Expand All @@ -39,7 +39,12 @@
</div>

<style lang="scss">
[data-color-info='warning'] {
grid-area: message;
[data-content~='format-group'] {
--heading-transform: none;

column-gap: var(--gutter);
display: grid;
grid-template-columns: auto 1fr;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What is the purpose of this grid? It seems like nothing is ever in the second column?

Screenshot 2023-11-22 at 9 32 27 AM

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

fixed in 8b130b1

margin-block-end: var(--double-gutter);
}
</style>
8 changes: 4 additions & 4 deletions src/lib/components/colors/Formats.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,18 +30,18 @@
</script>

<div data-content="formats" data-column="tool">
<h4 class="small-only label">{displayType} Color</h4>
<h2 class="small-only label">{displayType} Color</h2>
stacyk marked this conversation as resolved.
Show resolved Hide resolved
{#each otherFormats as formatGroup}
<FormatGroup {type} {color} {formatGroup} />
{/each}
</div>

<style lang="scss">
[data-content~='formats'] {
margin-bottom: var(--double-gutter);
margin-block-end: var(--double-gutter);
}

.label {
--label-margin-bottom: var(--gutter);
.small-only {
margin-block-end: var(--gutter);
}
</style>
12 changes: 5 additions & 7 deletions src/lib/components/colors/Output.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,15 +28,13 @@
</ul>

<style lang="scss">
[data-group~='output'] {
grid-column: 1 / -1;
}

li {
column-gap: 1ch;
display: grid;
grid-template:
'copy color' auto
'copy message' 3ex / auto 1fr;
}

[data-color-info='value'] {
grid-area: color;
grid-template-columns: auto 1fr;
}
</style>
1 change: 0 additions & 1 deletion src/lib/components/colors/index.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@
<Sliders type="fg" color={fg} format={$format} />
</form>

<h3 class="label section-heading">Additional Formats</h3>
<div data-layout="split">
<Formats type="bg" color={$bg} format={$format} />
<Formats type="fg" color={$fg} format={$format} />
Expand Down
11 changes: 7 additions & 4 deletions src/lib/components/ratio/index.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@
</div>

<div class="contrast-defined">
<h4 class="label">AA Contrast Ratio</h4>
<h3 class="label">AA Contrast Ratio</h3>
stacyk marked this conversation as resolved.
Show resolved Hide resolved

<dl>
<dt><strong>{RATIOS.AA.Normal}</strong> : 1</dt>
Expand All @@ -47,7 +47,7 @@
<dd>Large Text</dd>
</dl>

<h4 class="label">AAA Contrast Ratio</h4>
<h3 class="label">AAA Contrast Ratio</h3>
<dl>
<dt><strong>{RATIOS.AAA.Normal}</strong> : 1</dt>
<dd>Normal Text</dd>
Expand All @@ -56,7 +56,7 @@
<dd>Large Text</dd>
</dl>

<h4 class="label">Large Text Size</h4>
<h3 class="label">Large Text Size</h3>
<dl>
<dt><strong>≥ 24px</strong></dt>
<dd>Regular Weight</dd>
Expand Down Expand Up @@ -135,8 +135,11 @@
align-items: start;
display: inline-flex;
grid-area: number;
justify-content: flex-end;
line-height: 0.7; // weird number alignment

@include config.between('sm-column-break', 'lg-page-break') {
justify-content: flex-end;
}
}

.result-ratio-number {
Expand Down
6 changes: 3 additions & 3 deletions src/lib/constants.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,14 +33,14 @@ export type FormatGroup = {

export const FORMAT_GROUPS: FormatGroup[] = [
{
name: 'sRGB Formats',
name: 'sRGB FORMATS',
stacyk marked this conversation as resolved.
Show resolved Hide resolved
formats: ['hex', 'hsl', 'srgb'],
gamutFormat: 'srgb',
gamutName: 'sRGB',
},
{ name: 'Unbounded Spaces', formats: ['lab', 'lch', 'oklab', 'oklch'] },
{ name: 'UNBOUNDED SPACES', formats: ['lab', 'lch', 'oklab', 'oklch'] },
{
name: 'Display p3 Space',
name: 'DISPLAY P3 SPACE',
formats: ['p3'],
gamutFormat: 'p3',
gamutName: 'p3',
Expand Down
5 changes: 2 additions & 3 deletions src/sass/initial/_type.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,7 @@

h1,
h2,
h3,
h4 {
h3 {
font-weight: normal;
margin: 0;
}
Expand All @@ -49,7 +48,7 @@ h4 {
.section-heading {
@include heading;

--label-margin-bottom: var(--gutter-plus);
--label-margin-bottom: var(--gutter);

@include config.below('sm-page-break') {
--heading-size: var(--medium);
Expand Down