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

Update CSS

Browse source
This commit is contained in:
Timothée Goguely 2024-09-02 21:19:06 +02:00
parent d85a5b3d2f
commit 26b86f94f9
6 changed files with 78 additions and 84 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/assets/css/src/0.0.reset.css
View file

@ -19,6 +19,7 @@ html {
/* Remove default margin in favour of better control in authored CSS */ /* Remove default margin in favour of better control in authored CSS */
body, h1, h2, h3, h4, p, body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd { figure, blockquote, dl, dd {
margin: 0;
margin-block-end: 0; margin-block-end: 0;
} }

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

@ -2,78 +2,80 @@
:root { :root {
/* Fonts */ /* Fonts */
--font-sans: "Cera Pro", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; --font-sans: "Cera Pro", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--font-serif: "Vollkorn", serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; --font-serif: "Vollkorn", serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
/* Colors */ /* Colors */
--color-white-10: hsla(0, 0%, 100%, .1); /* White 10 */ --color-white-10: hsla(0, 0%, 100%, .1); /* White 10 */
--color-white-100: hsla(0, 0%, 100%, 1); /* White 100 */ --color-white-100: hsla(0, 0%, 100%, 1); /* White 100 */
--color-white: var(--color-white-100); /* White */ --color-white: var(--color-white-100); /* White */
--color-grey-50: hsla(0, 0%, 95%, 1); /* Light Grey */ --color-grey-50: hsla(0, 0%, 95%, 1); /* Light Grey */
--color-grey-200: hsla(0, 0%, 85%, 1); /* Grey - 01 */ --color-grey-200: hsla(0, 0%, 85%, 1); /* Grey - 01 */
--color-grey-400: hsla(180, 2%, 62%, 1); /* Grey - 02 */ --color-grey-300: hsla(0, 0%, 74%, 1);
--color-grey-700: hsla(180, 1%, 37%, 1); /* Grey - 03 */ --color-grey-400: hsla(180, 2%, 62%, 1); /* Grey - 02 */
--color-black: hsla(0, 0%, 10%, 1); /* Black */ --color-grey-700: hsla(180, 1%, 37%, 1); /* Grey - 03 */
--color-primary-10: hsla(177, 100%, 29%, .1); /* Focus 10% */ --color-black: hsla(0, 0%, 10%, 1); /* Black */
--color-primary-20: hsla(177, 100%, 29%, .2); /* Focus 20% */ --color-primary-10: hsla(177, 100%, 29%, .1); /* Focus 10% */
--color-primary-40: hsla(177, 100%, 29%, .4); /* Focus 40% */ --color-primary-20: hsla(177, 100%, 29%, .2); /* Focus 20% */
--color-primary-70: hsla(177, 100%, 29%, .7); /* Focus 70% */ --color-primary-40: hsla(177, 100%, 29%, .4); /* Focus 40% */
--color-primary-100: hsla(177, 100%, 29%, 1); /* Focus 100% */ --color-primary-70: hsla(177, 100%, 29%, .7); /* Focus 70% */
--color-primary: var(--color-primary-100); /* Focus */ --color-primary-100: hsla(177, 100%, 29%, 1); /* Focus 100% */
--color-brand-100: hsla(347, 84%, 45%, 1); /* Brand 100% */ --color-primary: var(--color-primary-100); /* Focus */
--color-brand: var(--color-brand-100); /* Brand */ --color-brand-100: hsla(347, 84%, 45%, 1); /* Brand 100% */
--color-background: var(--color-white); --color-brand: var(--color-brand-100); /* Brand */
--color-text: var(--color-black); --color-background: var(--color-white);
--color-focus-ring: var(--color-primary-100); --color-text: var(--color-black);
--color-disabled: var(--color-grey-400); --color-focus-ring: var(--color-primary-100);
--color-disabled: var(--color-grey-400);
/* Space scale */ /* Space scale */
--space: .275em; /* typographic space */ --space: .275em; /* typographic space */
--space-xs: .25rem; /* 4px */ --space-xs: .25rem; /* 4px */
--space-sm: .5rem; /* 8px */ --space-sm: .5rem; /* 8px */
--space-md: .75rem; /* 12px */ --space-md: .75rem; /* 12px */
--space-lg: 1rem; /* 16px */ --space-lg: 1rem; /* 16px */
--space-xl: 1.5rem; /* 24px */ --space-xl: 1.5rem; /* 24px */
--space-2xl: 2rem; /* 32px */ --space-2xl: 2rem; /* 32px */
/* Type scale */ /* Type scale */
--text-sm: 0.75rem; /* 12px */ --text-sm: 0.75rem; /* 12px */
--text-md: 0.875rem; /* 14px */ --text-md: 0.875rem; /* 14px */
--text-lg: 0.9375rem; /* 16px */ --text-lg: 0.9375rem; /* 16px */
--text-xl: 1.5rem; /* 24px */ --text-xl: 1.5rem; /* 24px */
/* Leading */ /* Leading */
--leading-none: 1; --leading-none: 1;
--leading-sm: 1.25; --leading-sm: 1.25;
--leading-md: 1.4285714286; /* 20/14 */ --leading-md: 1.4285714286; /* 20/14 */
--leading-lg: 1.5; /* 24/16 */ --leading-lg: 1.5; /* 24/16 */
/* Tracking */ /* Tracking */
--tracking-wide: 0.01em; --tracking-wide: 0.01em;
/* Layout */ /* Layout */
--gutter: 32px; --gutter: 32px;
--header-height: 3.5rem; /* 56px */ --header-height: 3.5rem; /* 56px */
--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-lg);
/* Borders */
--rounded-xs: 1px;
--rounded-sm: 4px;
--rounded-md: 12px;
--rounded-lg: 20px;
--rounded-full: 9999px;
--border-width: 1px;
--border-color: var(--color-black);
--border: var(--border-width) solid var(--border-color);
/* Prose */
--max-width: 64ch;
/* Transitions */
--timing: 200ms;
--easing: ease;
/* Borders */
--rounded-xs: 1px;
--rounded-sm: 4px;
--rounded-md: 12px;
--rounded-lg: 20px;
--rounded-full: 9999px;
--border-width: 1px;
--border-color: var(--color-black);
--border: var(--border-width) solid var(--border-color);
/* Prose */
--max-width: 64ch;
/* Transitions */
--timing: 200ms;
--easing: ease;
} }

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

@ -40,8 +40,6 @@ body {
/* Main */ /* Main */
main { main {
position: relative; position: relative;
border-top: var(--border);
padding-top: var(--space-md);
} }
@ -254,16 +252,7 @@ button {
/* General interactive states */ /* General interactive states */
:focus-visible { :focus-visible {
outline: none;
text-decoration: underline;
outline-offset: 0;
color: var(--color-background) !important;
background: var(--color-text);
}
input:focus-visible {
text-decoration: none;
color: var(--color-text) !important;
background: var(--color-background);
} }

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

@ -6,7 +6,6 @@
display: inline-flex; display: inline-flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
align-self: flex-start;
padding: var(--space-md) var(--space-lg); padding: var(--space-md) var(--space-lg);
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;

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

@ -1,12 +1,10 @@
/* PILL BLOCK */ /* PILL BLOCK */
.pill { .pill {
--background: var(--color-primary-100);
--color: var(--color-white);
display: inline-flex; display: inline-flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
align-self: flex-start; gap: var(--space-sm);
padding: var(--space-xs) var(--space-md); padding: var(--space-xs) var(--space-md);
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
@ -15,6 +13,7 @@
border-radius: var(--rounded-full); border-radius: var(--rounded-full);
background-color: var(--background, var(--color-primary-100)); background-color: var(--background, var(--color-primary-100));
color: var(--color, var(--color-white)); color: var(--color, var(--color-white));
white-space: pre;
} }
.pill--secondary { .pill--secondary {
@ -22,3 +21,7 @@
--color: var(--color-primary-100); --color: var(--color-primary-100);
} }
.pill[data-icon] {
padding: var(--space-sm) var(--space-lg);
}

2
src/assets/css/src/3.utilities.text.css
View file

@ -1,6 +1,6 @@
/* TEXT UTILITY */ /* TEXT UTILITY */
/* Font family*/ /* Font family */
.font-serif { .font-serif {
font-family: var(--font-serif); font-family: var(--font-serif);