first chrome implementation

projects/common/src/lib/styles/_color.scss

@@ -0,0 +1,7 @@
+.sam-color-primary {
+  color: var(--primary);
+}
+
+.sam-color-danger {
+    color: var(--bs-danger);
+}

projects/common/src/lib/styles/_common.scss

@@ -0,0 +1,37 @@
+.sam-text-header {
+  background: var(--background);
+  z-index: 20;
+  padding-top: var(--size);
+  padding-bottom: var(--size);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+
+  span {
+    font-size: 20px;
+    font-weight: 500;
+  }
+}
+
+.sam-footer-grid-2 {
+  height: 60px;
+  min-height: 60px;
+  background: var(--background-light);
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: auto;
+  align-items: center;
+  column-gap: var(--size);
+  padding-left: var(--size);
+  padding-right: var(--size);
+}
+
+.sam-card {
+  padding: var(--size);
+  background: var(--background-light);
+  border-radius: 8px;
+  color: #ffffff;
+  display: flex;
+  flex-direction: column;
+}

projects/common/src/lib/styles/_flex.scss

@@ -0,0 +1,38 @@
+.sam-flex-column {
+  display: flex;
+  flex-direction: column;
+
+  &.gap {
+    row-gap: var(--size);
+  }
+
+  &.gap-h {
+    row-gap: var(--size-h);
+  }
+
+  &.center {
+    align-items: center;
+  }
+}
+
+.sam-flex-row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  &.gap {
+    column-gap: var(--size);
+  }
+
+  &.gap-h {
+    column-gap: var(--size-h);
+  }
+}
+
+.sam-flex-grow {
+  flex-grow: 1;
+}
+
+.sam-align-self-center {
+  align-self: center;
+}

projects/common/src/lib/styles/_spacing.scss

@@ -0,0 +1,55 @@
+.sam-mt {
+  margin-top: var(--size);
+}
+
+.sam-mt-2 {
+  margin-top: var(--size-2);
+}
+
+.sam-mt-h {
+  margin-top: var(--size-h);
+}
+
+.sam-mb {
+  margin-bottom: var(--size);
+}
+
+.sam-mb-2 {
+  margin-bottom: var(--size-2);
+}
+
+.sam-mb-h {
+  margin-bottom: var(--size-h);
+}
+
+.sam-mr {
+  margin-right: var(--size);
+}
+
+.sam-mr-h {
+  margin-right: var(--size-h);
+}
+
+.sam-ml {
+  margin-left: var(--size);
+}
+
+.sam-ml-h {
+  margin-left: var(--size-h);
+}
+
+.sam-pl {
+  padding-left: var(--size);
+}
+
+.sam-pl-h {
+  padding-left: var(--size-h);
+}
+
+.sam-pr {
+  padding-right: var(--size);
+}
+
+.sam-pr-h {
+  padding-right: var(--size-h);
+}

projects/common/src/lib/styles/_typography.scss

@@ -0,0 +1,19 @@
+.sam-text-muted {
+  color: gray;
+}
+
+.sam-text-lg {
+  font-size: 20px;
+}
+
+.sam-text-md {
+  font-size: 14px;
+}
+
+.sam-text-sm {
+  font-size: 12px;
+}
+
+.sam-text-align-center {
+  text-align: center;
+}

projects/common/src/lib/styles/styles.scss

@@ -0,0 +1,17 @@
+@use "_flex.scss";
+@use "_common.scss";
+@use "_typography.scss";
+@use "_spacing.scss";
+@use "_color.scss";
+
+:root {
+  --size-2: 32px;
+  --size: 16px;
+  --size-h: 8px;
+
+  --background: #161c26;
+  --background-light: #202733;
+  --background-light-hover: #383844;
+  --border: #525b6a;
+  --primary: #0d6efd;
+}