Refactoring code and new theme system, like MD3

gabriel-aplok · Aug 23, 2023 · 266dd45 · 266dd45
1 parent 0a5a05c
commit 266dd45
Show file tree

Hide file tree

Showing 15 changed files with 600 additions and 383 deletions.
diff --git a/_sass/base.scss b/_sass/base.scss
@@ -2,27 +2,84 @@
 @import url('https://fonts.googleapis.com/css2?family=Inconsolata&display=swap');
 
 :root {
-	--bg-color: #FAFAFA;
-	--bg-secondary-color: #EEEEEE;
-	--color-primary: #673AB7;
-	--color-lightGrey: #BDBDBD;
-	--color-grey: #616161;
-	--color-darkGrey: #424242;
-	--color-error: #D32F2F;
-	--color-success: #388E3C;
-	--font-color: #212121;
-	--grid-maxWidth: 120rem;
-	--grid-gutter: 2rem;
-	--font-size: 1.6rem;
-	--font-family-main: 'Lato', sans-serif;
-	--font-family-code: 'Inconsolata', monospace;;
+	--typography-font: "Lato", sans-serif;
+	--typography-code: "Inconsolata", monospace;
+	--typography-size: 1.6em;
+	--typography-line-height: 1.4;
+
+	--grid-max-width: 120rem;
+	--grid-gutter-size: 2rem;
+}
+
+:root,
+.light {
+	--color-primary: #6750A4;
+	--color-on-primary: #FFFFFF;
+	--color-primary-container: #EADDFF;
+	--color-on-primary-container: #21005D;
+	--color-secondary: #625B71;
+	--color-on-secondary: #FFFFFF;
+	--color-secondary-container: #E8DEF8;
+	--color-on-secondary-container: #1D192B;
+	--color-tertiary: #7D5260;
+	--color-on-tertiary: #FFFFFF;
+	--color-tertiary-container: #FFD8E4;
+	--color-on-tertiary-container: #31111D;
+	--color-error: #B3261E;
+	--color-on-error: #FFFFFF;
+	--color-error-container: #F9DEDC;
+	--color-on-error-container: #410E0B;
+	--color-outline: #79747E;
+	--color-background: #FFFBFE;
+	--color-on-background: #1C1B1F;
+	--color-surface: #FFFBFE;
+	--color-on-surface: #1C1B1F;
+	--color-surface-variant: #E7E0EC;
+	--color-on-surface-variant: #49454F;
+	--color-inverse-surface: #313033;
+	--color-inverse-on-surface: #F4EFF4;
+	--color-inverse-primary: #D0BCFF;
+	--color-shadow: #000000;
+	--color-surface-tint: #6750A4;
+	--color-outline-variant: #CAC4D0;
+	--color-scrim: #000000;
+}
+
+.dark {
+	--color-primary: #D0BCFF;
+	--color-on-primary: #381E72;
+	--color-primary-container: #4F378B;
+	--color-on-primary-container: #EADDFF;
+	--color-secondary: #CCC2DC;
+	--color-on-secondary: #332D41;
+	--color-secondary-container: #4A4458;
+	--color-on-secondary-container: #E8DEF8;
+	--color-tertiary: #EFB8C8;
+	--color-on-tertiary: #492532;
+	--color-tertiary-container: #633B48;
+	--color-on-tertiary-container: #FFD8E4;
+	--color-error: #F2B8B5;
+	--color-on-error: #601410;
+	--color-error-container: #8C1D18;
+	--color-on-error-container: #F9DEDC;
+	--color-outline: #938F99;
+	--color-background: #1C1B1F;
+	--color-on-background: #E6E1E5;
+	--color-surface: #1C1B1F;
+	--color-on-surface: #E6E1E5;
+	--color-surface-variant: #49454F;
+	--color-on-surface-variant: #CAC4D0;
+	--color-inverse-surface: #E6E1E5;
+	--color-inverse-on-surface: #313033;
+	--color-inverse-primary: #6750A4;
+	--color-shadow: #000000;
+	--color-surface-tint: #D0BCFF;
+	--color-outline-variant: #49454F;
+	--color-scrim: #000000;
 }
 
 html {
 	box-sizing: border-box;
-	font-size: 62.5%;
-	line-height: 1.15;
-	text-size-adjust: 100%;
 }
 
 *,
@@ -32,153 +89,25 @@ html {
 }
 
 body {
-	background-color: var(--bg-color);
-	color: var(--font-color);
+	background-color: var(--color-background);
+	color: var(--color-on-background);
 	accent-color: var(--color-primary);
-	font-family: var(--font-family-main);
-	font-size: var(--font-size);
-	line-height: 1.6;
 	max-width: 100vw;
 	margin: 0;
 	padding: 0;
 }
 
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-	font-weight: bold;
-	margin: 0.35em 0 0.7em;
-}
-
-h1 {
-	font-size: 2em;
-}
-
-h2 {
-	font-size: 1.75em;
-}
-
-h3 {
-	font-size: 1.5em;
-}
-
-h4 {
-	font-size: 1.25em;
-}
-
-h5 {
-	font-size: 1em;
-}
-
-h6 {
-	font-size: 0.85em;
-}
-
-p {
-	margin-top: 0;
-}
-
-a {
-	color: var(--color-primary);
-	text-decoration: none;
-}
-
-a:hover:not(.button) {
-	opacity: 0.75;
-}
-
-button {
-	font-family: inherit;
-}
-
-blockquote {
-	background-color: var(--bg-secondary-color);
-	border-left: 3px solid var(--color-lightGrey);
-	border-radius: 4px;
-	margin: 1.5rem;
-	padding: 1.5rem 2rem;
-}
-
 dl dt {
 	font-weight: bold;
 }
 
 hr {
-	background-color: var(--color-lightGrey);
+	background-color: var(--color-secondary-container);
 	border: none;
 	height: 1px;
 	margin: 1rem 0;
 }
 
-table {
-	width: 100%;
-	border: none;
-	border-collapse: collapse;
-	border-spacing: 0;
-	text-align: left;
-}
-
-table.striped tr:nth-of-type(2n) {
-	background-color: var(--bg-secondary-color);
-}
-
-td,
-th {
-	vertical-align: middle;
-	padding: 1.2rem 0.4rem;
-}
-
-thead {
-	border-bottom: 2px solid var(--color-lightGrey);
-}
-
-tfoot {
-	border-top: 2px solid var(--color-lightGrey);
-}
-
-code,
-kbd,
-pre,
-samp,
-tt {
-	font-family: var(--font-family-code);
-}
-
-code,
-kbd {
-	font-size: 90%;
-	white-space: pre-wrap;
-	border-radius: 4px;
-	padding: 0.2em 0.4em;
-	background-color: var(--bg-secondary-color);
-	color: var(--color-error);
-}
-
-pre {
-	background-color: var(--bg-secondary-color);
-	font-size: 1em;
-	padding: 1rem;
-	overflow-x: auto;
-}
-
-pre code {
-	background: none;
-	padding: 0;
-}
-
-abbr[title] {
-	border-bottom: none;
-	text-decoration: underline;
-	text-decoration: underline dotted;
-}
-
-fieldset {
-	border: 1px solid var(--color-lightGrey);
-}
-
 iframe {
 	border: 0;
 }

diff --git a/_sass/card.scss b/_sass/card.scss
@@ -1,9 +1,12 @@
 .card {
-	background-color: var(--bg-secondary-color);
-	border: 1px solid var(--color-lightGrey);
-	border-radius: 4px;
-	padding: 1rem 2rem;
-	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+	background-color: var(--color-secondary-container);
+	color: var(--color-on-secondary-container);
+	border-radius: 14px;
+	padding: 2.5rem 2rem;
+
+	&.border {
+		border: 1px solid var(--color-on-secondary-container);
+	}
 }
 
 .card header > * {
@@ -13,9 +16,4 @@
 
 .card p:last-child {
 	margin: 0;
-}
-
-.card.focusable:hover {
-	transform: translateY(-5px);
-	transition: transform 0.2s ease;
 }