studio-variable/designtopack
4
0
Fork 0
Code Issues 7 Pull requests Projects Releases Packages Wiki Activity Actions

Update CSS space variables names: use numbers instead of T-shirts sizes

Browse source
This commit is contained in:
Timothée Goguely 2024-09-04 18:52:12 +02:00
parent df8b08ee6d
commit a240c3a016
10 changed files with 106 additions and 103 deletions
Download patch file Download diff file Expand all files Collapse all files

17
src/assets/css/src/0.2.variables.css
View file

@ -30,13 +30,14 @@
--color-disabled: var(--color-grey-400); --color-disabled: var(--color-grey-400);
/* Space scale */ /* Space scale */
--space: .275em; /* typographic space */ --space-1: .275em; /* typographic space */
--space-xs: .25rem; /* 4px */ --space-4: .25rem;
--space-sm: .5rem; /* 8px */ --space-8: .5rem;
--space-md: .75rem; /* 12px */ --space-12: .75rem;
--space-lg: 1rem; /* 16px */ --space-16: 1rem;
--space-xl: 1.5rem; /* 24px */ --space-24: 1.5rem;
--space-2xl: 2rem; /* 32px */ --space-32: 2rem;
--space-40: 2.5rem;
/* Type scale */ /* Type scale */
--text-xs: .75rem; /* 12px */ --text-xs: .75rem; /* 12px */
@ -59,7 +60,7 @@
--sidebar-width: 22.25rem; /* 356px */ --sidebar-width: 22.25rem; /* 356px */
--flow-space: 1rem; --flow-space: 1rem;
--auto-grid-placement: auto-fill; --auto-grid-placement: auto-fill;
--gap: var(--space-lg); --gap: var(--space-16);
/* Borders */ /* Borders */
--rounded-xs: 1px; --rounded-xs: 1px;

46
src/assets/css/src/1.0.global.css
View file

@ -15,8 +15,8 @@ body {
-webkit-font-feature-settings: "liga", "clig"; -webkit-font-feature-settings: "liga", "clig";
font-feature-settings: "liga", "clig"; font-feature-settings: "liga", "clig";
background-color: var(--color-grey-50); background-color: var(--color-grey-50);
color: var(--color-text, black); color: var(--color-text, currentColor);
padding: 2rem var(--gutter); padding: var(--gutter);
} }
/* If an element is [hidden] it needs to be max priority */ /* If an element is [hidden] it needs to be max priority */
@ -64,7 +64,7 @@ h6 > a {
*:not(.sr-only) + h2, *:not(.sr-only) + h2,
*:not(.sr-only) + h3 { *:not(.sr-only) + h3 {
margin-top: var(--space-xs); margin-top: var(--space-4);
} }
@ -90,7 +90,7 @@ blockquote {
padding-left: 0; padding-left: 0;
} }
blockquote > * { blockquote > * {
padding-left: var(--space-md); padding-left: var(--space-12);
} }
@ -104,7 +104,7 @@ hr {
hr, hr,
hr + * { hr + * {
--flow-space: var(--space-xs); --flow-space: var(--space-4);
} }
/* Sub and sup */ /* Sub and sup */
@ -126,6 +126,9 @@ sup {
/* Details */ /* Details */
details {
position: relative;
}
summary { summary {
-webkit-appearance: none; -webkit-appearance: none;
list-style: none; list-style: none;
@ -140,22 +143,21 @@ summary::marker {
display: none; display: none;
content: ""; content: "";
} }
summary::before { summary::after {
content: '+'; content: "";
margin-right: var(--space); display: inline-block;
width: 3rem;
height: 3rem;
background-color: var(--color-background);
background-image: var(--icon-summary);
background-repeat: no-repeat;
background-position: center;
background-size: 1rem;
position: absolute;
right: 0;
} }
summary + p { details[open] > summary::after {
margin-top: 0; transform: rotate(180deg);
}
summary + .gallery,
summary + figure {
margin-top: .5em;
}
details > *:last-child {
margin-bottom: var(--space-xs);
}
details[open] > summary::before {
content: '−';
} }
@ -175,7 +177,7 @@ figcaption::before {
margin-left: var(--gap); margin-left: var(--gap);
} }
figure + p { figure + p {
margin-top: var(--space-xs); margin-top: var(--space-4);
} }
video { video {
@ -234,7 +236,7 @@ a.link-full:focus-visible::after {
form { form {
display: flex; display: flex;
gap: var(--space-xs); gap: var(--space-4);
} }
input { input {
font: inherit; font: inherit;

4
src/assets/css/src/1.3.compositions.flex.css
View file

@ -6,6 +6,6 @@
flex-wrap: var(--wrap, wrap); flex-wrap: var(--wrap, wrap);
align-items: var(--items, center); align-items: var(--items, center);
justify-content: var(--justify, flex-start); justify-content: var(--justify, flex-start);
column-gap: var(--column-gap, var(--gutter, var(--space-sm))); column-gap: var(--column-gap, var(--gutter, var(--space-8)));
row-gap: var(--row-gap, var(--gutter, var(--space-sm))); row-gap: var(--row-gap, var(--gutter, var(--space-8)));
} }

2
src/assets/css/src/1.4.compositions.with-sidebar.css
View file

@ -3,7 +3,7 @@
.with-sidebar { .with-sidebar {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: var(--space-2xl); gap: var(--space-32);
} }
.with-sidebar > :first-child { .with-sidebar > :first-child {

2
src/assets/css/src/2.blocks.button.css
View file

@ -6,7 +6,7 @@
display: inline-flex; display: inline-flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding: var(--space-md) var(--space-lg); padding: var(--space-12) var(--space-16);
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
font-size: var(--text-sm); font-size: var(--text-sm);

2
src/assets/css/src/2.blocks.header.css
View file

@ -6,6 +6,6 @@
align-items: flex-start; align-items: flex-start;
min-height: var(--header-height); min-height: var(--header-height);
padding: 0 var(--gutter); padding: 0 var(--gutter);
margin-bottom: var(--space-xl); margin-bottom: var(--space-24);
} }

6
src/assets/css/src/2.blocks.pill.css
View file

@ -4,8 +4,8 @@
display: inline-flex; display: inline-flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
gap: var(--space-sm); gap: var(--space-8);
padding: var(--space-xs) var(--space-md); padding: var(--space-4) var(--space-12);
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
font-size: var(--text-sm); font-size: var(--text-sm);
@ -22,6 +22,6 @@
} }
.pill[data-icon] { .pill[data-icon] {
padding: var(--space-sm) var(--space-lg); padding: var(--space-8) var(--space-16);
} }

116
src/assets/css/src/3.utilities.spacing.css
View file

@ -5,80 +5,80 @@
.m-0 { margin: 0 } .m-0 { margin: 0 }
.mb-0 { margin-bottom: 0 } .mb-0 { margin-bottom: 0 }
.mb-xs { margin-bottom: var(--space-xs) } .mb-xs { margin-bottom: var(--space-4) }
.mb-sm { margin-bottom: var(--space-sm) } .mb-sm { margin-bottom: var(--space-8) }
.mb-md { margin-bottom: var(--space-md) } .mb-md { margin-bottom: var(--space-12) }
.mb-lg { margin-bottom: var(--space-lg) } .mb-lg { margin-bottom: var(--space-16) }
.mb-xl { margin-bottom: var(--space-xl) } .mb-xl { margin-bottom: var(--space-24) }
.mb-2xl { margin-bottom: var(--space-2xl) } .mb-2xl { margin-bottom: var(--space-32) }
.ml-auto { margin-left: auto } .ml-auto { margin-left: auto }
.ml-xs { margin-left: var(--space-xs) } .ml-xs { margin-left: var(--space-4) }
.ml-sm { margin-left: var(--space-sm) } .ml-sm { margin-left: var(--space-8) }
.ml-md { margin-left: var(--space-md) } .ml-md { margin-left: var(--space-12) }
.ml-lg { margin-left: var(--space-lg) } .ml-lg { margin-left: var(--space-16) }
.ml-xl { margin-left: var(--space-xl) } .ml-xl { margin-left: var(--space-24) }
.mr-auto { margin-right: auto } .mr-auto { margin-right: auto }
.mr-xs { margin-right: var(--space-xs) } .mr-xs { margin-right: var(--space-4) }
.mr-sm { margin-right: var(--space-sm) } .mr-sm { margin-right: var(--space-8) }
.mr-md { margin-right: var(--space-md) } .mr-md { margin-right: var(--space-12) }
.mr-lg { margin-right: var(--space-lg) } .mr-lg { margin-right: var(--space-16) }
.mr-xl { margin-right: var(--space-xl) } .mr-xl { margin-right: var(--space-24) }
.-mt-px { margin-top: -1px } .-mt-px { margin-top: -1px }
.mt-0 { margin-top: 0 } .mt-0 { margin-top: 0 }
.mt-xs { margin-top: var(--space-xs) } .mt-xs { margin-top: var(--space-4) }
.mt-sm { margin-top: var(--space-sm) } .mt-sm { margin-top: var(--space-8) }
.mt-md { margin-top: var(--space-md) } .mt-md { margin-top: var(--space-12) }
.mt-lg { margin-top: var(--space-lg) } .mt-lg { margin-top: var(--space-16) }
.mt-xl { margin-top: var(--space-xl) } .mt-xl { margin-top: var(--space-24) }
.mt-2xl { margin-top: var(--space-2xl) } .mt-2xl { margin-top: var(--space-32) }
.mx-px { margin-left: 1px ; margin-right: 1px } .mx-px { margin-left: 1px ; margin-right: 1px }
.mx-xs { margin-left: var(--space-xs) ; margin-right: var(--space-xs) } .mx-xs { margin-left: var(--space-4) ; margin-right: var(--space-4) }
.mx-sm { margin-left: var(--space-sm) ; margin-right: var(--space-sm) } .mx-sm { margin-left: var(--space-8) ; margin-right: var(--space-8) }
.mx-md { margin-left: var(--space-md) ; margin-right: var(--space-md) } .mx-md { margin-left: var(--space-12) ; margin-right: var(--space-12) }
.mx-lg { margin-left: var(--space-lg) ; margin-right: var(--space-lg) } .mx-lg { margin-left: var(--space-16) ; margin-right: var(--space-16) }
.mx-xl { margin-left: var(--space-xl) ; margin-right: var(--space-xl) } .mx-xl { margin-left: var(--space-24) ; margin-right: var(--space-24) }
.mx-2xl { margin-left: var(--space-2xl); margin-right: var(--space-2xl) } .mx-2xl { margin-left: var(--space-32); margin-right: var(--space-32) }
.my-xs { margin-top: var(--space-xs) ; margin-bottom: var(--space-xs) } .my-xs { margin-top: var(--space-4) ; margin-bottom: var(--space-4) }
.my-sm { margin-top: var(--space-sm) ; margin-bottom: var(--space-sm) } .my-sm { margin-top: var(--space-8) ; margin-bottom: var(--space-8) }
.my-md { margin-top: var(--space-md) ; margin-bottom: var(--space-md) } .my-md { margin-top: var(--space-12) ; margin-bottom: var(--space-12) }
.my-lg { margin-top: var(--space-lg) ; margin-bottom: var(--space-lg) } .my-lg { margin-top: var(--space-16) ; margin-bottom: var(--space-16) }
.my-xl { margin-top: var(--space-xl) ; margin-bottom: var(--space-xl) } .my-xl { margin-top: var(--space-24) ; margin-bottom: var(--space-24) }
.my-2xl { margin-top: var(--space-2xl); margin-bottom: var(--space-2xl) } .my-2xl { margin-top: var(--space-32); margin-bottom: var(--space-32) }
/* Padding */ /* Padding */
.pl-0 { padding-left: 0 } .pl-0 { padding-left: 0 }
.pt-xs { padding-top: var(--space-xs) } .pt-xs { padding-top: var(--space-4) }
.pt-sm { padding-top: var(--space-sm) } .pt-sm { padding-top: var(--space-8) }
.pt-md { padding-top: var(--space-md) } .pt-md { padding-top: var(--space-12) }
.pt-lg { padding-top: var(--space-lg) } .pt-lg { padding-top: var(--space-16) }
.pt-xl { padding-top: var(--space-xl) } .pt-xl { padding-top: var(--space-24) }
.pt-2xl { padding-top: var(--space-2xl) } .pt-2xl { padding-top: var(--space-32) }
.pb-xs { padding-bottom: var(--space-xs) } .pb-xs { padding-bottom: var(--space-4) }
.pb-sm { padding-bottom: var(--space-sm) } .pb-sm { padding-bottom: var(--space-8) }
.pb-md { padding-bottom: var(--space-md) } .pb-md { padding-bottom: var(--space-12) }
.pb-lg { padding-bottom: var(--space-lg) } .pb-lg { padding-bottom: var(--space-16) }
.pb-xl { padding-bottom: var(--space-xl) } .pb-xl { padding-bottom: var(--space-24) }
.pb-2xl { padding-bottom: var(--space-2xl) } .pb-2xl { padding-bottom: var(--space-32) }
.px-xs { padding-left: var(--space-xs) ; padding-right: var(--space-xs) } .px-xs { padding-left: var(--space-4) ; padding-right: var(--space-4) }
.px-sm { padding-left: var(--space-sm) ; padding-right: var(--space-sm) } .px-sm { padding-left: var(--space-8) ; padding-right: var(--space-8) }
.px-md { padding-left: var(--space-md) ; padding-right: var(--space-md) } .px-md { padding-left: var(--space-12) ; padding-right: var(--space-12) }
.px-lg { padding-left: var(--space-lg) ; padding-right: var(--space-lg) } .px-lg { padding-left: var(--space-16) ; padding-right: var(--space-16) }
.px-xl { padding-left: var(--space-xl) ; padding-right: var(--space-xl) } .px-xl { padding-left: var(--space-24) ; padding-right: var(--space-24) }
.px-2xl { padding-left: var(--space-2xl); padding-right: var(--space-2xl) } .px-2xl { padding-left: var(--space-32); padding-right: var(--space-32) }
.py-xs { padding-top: var(--space-xs) ; padding-bottom: var(--space-xs) } .py-xs { padding-top: var(--space-4) ; padding-bottom: var(--space-4) }
.py-sm { padding-top: var(--space-sm) ; padding-bottom: var(--space-sm) } .py-sm { padding-top: var(--space-8) ; padding-bottom: var(--space-8) }
.py-md { padding-top: var(--space-md) ; padding-bottom: var(--space-md) } .py-md { padding-top: var(--space-12) ; padding-bottom: var(--space-12) }
.py-lg { padding-top: var(--space-lg) ; padding-bottom: var(--space-lg) } .py-lg { padding-top: var(--space-16) ; padding-bottom: var(--space-16) }
.py-xl { padding-top: var(--space-xl) ; padding-bottom: var(--space-xl) } .py-xl { padding-top: var(--space-24) ; padding-bottom: var(--space-24) }
.py-2xl { padding-top: var(--space-2xl); padding-bottom: var(--space-2xl) } .py-2xl { padding-top: var(--space-32); padding-bottom: var(--space-32) }

4
src/components/Project.vue
View file

@ -40,7 +40,7 @@ const frenchFormattedModified = dayjs(project.modified).format(
.project-item h3 { .project-item h3 {
font-family: var(--font-serif); font-family: var(--font-serif);
font-size: var(--text-lg); font-size: var(--text-lg);
margin-bottom: var(--space-sm); margin-bottom: var(--space-8);
} }
.project-item p { .project-item p {
font-size: var(--text-sm); font-size: var(--text-sm);
@ -61,7 +61,7 @@ const frenchFormattedModified = dayjs(project.modified).format(
--color: var(--color-primary-100); --color: var(--color-primary-100);
flex: 1 1 0%; flex: 1 1 0%;
display: flex; display: flex;
gap: var(--space-lg); gap: var(--space-16);
margin-top: -2.75rem; margin-top: -2.75rem;
position: relative; position: relative;
} }

10
src/components/Tabs.vue
View file

@ -54,15 +54,15 @@ function changeTab(tabId) {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
justify-content: center; justify-content: center;
margin: 0 auto var(--space-md); margin: 0 auto var(--space-12);
border-radius: var(--rounded-full); border-radius: var(--rounded-full);
min-height: 60px; height: 3.75rem; /* 60px */
} }
[role="tab"] { [role="tab"] {
--tab-height: 2.5rem; --tab-height: 2.5rem;
--tab-py: var(--space-md); --tab-py: var(--space-12);
--tab-px: var(--space-lg); --tab-px: var(--space-16);
position: relative; position: relative;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
@ -74,7 +74,7 @@ function changeTab(tabId) {
padding: var(--tab-py) var(--tab-px); padding: var(--tab-py) var(--tab-px);
margin: 0; margin: 0;
cursor: pointer; cursor: pointer;
gap: var(--space-lg); gap: var(--space-16);
height: var(--tab-height); height: var(--tab-height);
} }
[role="tab"]:focus, [role="tab"]:focus,