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;
} }

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

@ -12,6 +12,7 @@
--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-300: hsla(0, 0%, 74%, 1);
--color-grey-400: hsla(180, 2%, 62%, 1); /* Grey - 02 */ --color-grey-400: hsla(180, 2%, 62%, 1); /* Grey - 02 */
--color-grey-700: hsla(180, 1%, 37%, 1); /* Grey - 03 */ --color-grey-700: hsla(180, 1%, 37%, 1); /* Grey - 03 */
--color-black: hsla(0, 0%, 10%, 1); /* Black */ --color-black: hsla(0, 0%, 10%, 1); /* Black */
@ -76,4 +77,5 @@
/* Transitions */ /* Transitions */
--timing: 200ms; --timing: 200ms;
--easing: ease; --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);
}