Skip to content

Commit

Permalink
clean base.css and main.css and create new color variables
Browse files Browse the repository at this point in the history
  • Loading branch information
olyn-octo committed Jul 2, 2024
1 parent 0c8de53 commit 1245b43
Show file tree
Hide file tree
Showing 7 changed files with 33 additions and 123 deletions.
79 changes: 1 addition & 78 deletions src/assets/base.css
Original file line number Diff line number Diff line change
@@ -1,55 +1,3 @@
/* color palette from <https://github.com/vuejs/theme> */
:root {
--vt-c-white: #ffffff;
--vt-c-white-soft: #f8f8f8;
--vt-c-white-mute: #f2f2f2;

--vt-c-black: #181818;
--vt-c-black-soft: #222222;
--vt-c-black-mute: #282828;

--vt-c-indigo: #2c3e50;

--vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
--vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
--vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
--vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);

--vt-c-text-light-1: var(--vt-c-indigo);
--vt-c-text-light-2: rgba(60, 60, 60, 0.66);
--vt-c-text-dark-1: var(--vt-c-white);
--vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
}

/* semantic color variables for this project */
:root {
--color-background: var(--vt-c-white);
--color-background-soft: var(--vt-c-white-soft);
--color-background-mute: var(--vt-c-white-mute);

--color-border: var(--vt-c-divider-light-2);
--color-border-hover: var(--vt-c-divider-light-1);

--color-heading: var(--vt-c-text-light-1);
--color-text: var(--vt-c-text-light-1);

--section-gap: 160px;
}

@media (prefers-color-scheme: dark) {
:root {
--color-background: var(--vt-c-black);
--color-background-soft: var(--vt-c-black-soft);
--color-background-mute: var(--vt-c-black-mute);

--color-border: var(--vt-c-divider-dark-2);
--color-border-hover: var(--vt-c-divider-dark-1);

--color-heading: var(--vt-c-text-dark-1);
--color-text: var(--vt-c-text-dark-2);
}
}

*,
*::before,
*::after {
Expand All @@ -58,29 +6,4 @@
font-weight: normal;
}

body {
min-height: 100vh;
color: var(--color-text);
background: var(--color-background);
transition:
color 0.5s,
background-color 0.5s;
line-height: 1.6;
font-family:
Roboto,
Oxygen,
Ubuntu,
Inter,
-apple-system,
BlinkMacSystemFont,
'Segoe UI',
Cantarell,
'Fira Sans',
'Droid Sans',
'Helvetica Neue',
sans-serif;
font-size: 15px;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

Binary file added src/assets/fonts/Roboto-Bold.ttf
Binary file not shown.
Binary file added src/assets/fonts/Roboto-Light.ttf
Binary file not shown.
Binary file added src/assets/fonts/Roboto-Regular.ttf
Binary file not shown.
37 changes: 8 additions & 29 deletions src/assets/main.css
Original file line number Diff line number Diff line change
@@ -1,36 +1,15 @@
@import './base.css';
@import '../tokens/colors.css';

#app {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
font-weight: normal;
@font-face {
font-family: "Roboto";
font-style: normal;
font-weight: 400;
font-display: fallback;
src: url("fonts/Roboto-Regular.ttf") format("ttf");
}

a,
.green {
text-decoration: none;
color: hsla(160, 100%, 37%, 1);
transition: 0.4s;
padding: 3px;
}

@media (hover: hover) {
a:hover {
background-color: hsla(160, 100%, 37%, 0.2);
}
}

@media (min-width: 1024px) {
body {
display: flex;
place-items: center;
}
:root{
font-family: "Roboto";

#app {
display: grid;
grid-template-columns: 1fr 1fr;
padding: 0 2rem;
}
}
1 change: 1 addition & 0 deletions src/stories/Button.vue
Original file line number Diff line number Diff line change
Expand Up @@ -46,4 +46,5 @@ const onClick = () => {
};
</script>
<style src="src/assets/main.css" lang="css"/>

39 changes: 23 additions & 16 deletions src/tokens/colors.css
Original file line number Diff line number Diff line change
Expand Up @@ -49,32 +49,39 @@
--color-red-100: #F7D2D1FF;
--color-red-050: #FBE9E8FF;


/*COLORS VARIABLES*/
--navy-primary:var(--color-navy-500);
--navy-primary-variant:var(--color-navy-700);
--red-primary: var(--color-red-500);
--red-primary-variant: var(--color-red-600);

/*TOKENS*/

--color-button-text-primary: white;
--color-button-background-primary: var(--color-navy-500);
--color-button-background-primary-hover: var(--color-navy-700);
--color-button-border-primary: var(--color-navy-500);
--color-button-border-primary-active: var(--color-navy-500);
--color-button-border-primary-hover:var(--color-navy-700);
--color-button-background-primary: var( --navy-primary);
--color-button-background-primary-hover: var(--navy-primary-variant);
--color-button-border-primary: var( --navy-primary);
--color-button-border-primary-active: var( --navy-primary);
--color-button-border-primary-hover:var(--navy-primary-variant);
--color-button-shadow-primary: var(--color-blue-500);
--color-button-shadow-primary-active: var(--color-navy-500);
--color-button-shadow-primary-active: var( --navy-primary);

--color-button-text-secondary:var(--color-navy-500);
--color-button-text-secondary-hover:var(--color-navy-700);
--color-button-border-secondary:var(--color-navy-500);
--color-button-border-secondary-hover:var(--color-navy-700);
--color-button-border-secondary-active:var(--color-navy-500);
--color-button-text-secondary:var(--navy-primary);
--color-button-text-secondary-hover:var(--navy-primary-variant);
--color-button-border-secondary:var(--navy-primary);
--color-button-border-secondary-hover:var(--navy-primary-variant);
--color-button-border-secondary-active:var(--navy-primary);
--color-button-shadow-secondary: var(--color-blue-500);
--color-button-shadow-secondary-active: var(--color-navy-500);
--color-button-shadow-secondary-active: var(--navy-primary);


--color-button-text-destructive: white;
--color-button-background-destructive:var(--color-red-600);
--color-button-border-destructive:var(--color-red-500);
--color-button-shadow-destructive:var(--color-red-500);
--color-button-background-destructive:var(--red-primary-variant);
--color-button-border-destructive:var(--red-primary);
--color-button-shadow-destructive:var(--red-primary);
--color-button-shadow-destructive-active:var(--color-red-200);
/*TODO* variablisier les couleurs primary*/

}


Expand Down

0 comments on commit 1245b43

Please sign in to comment.