From 7166ce13914a1c836d9a3ed0ed877ca85911170c Mon Sep 17 00:00:00 2001
From: gaelle morin <gmorin.dev@gmail.com>
Date: Thu, 26 Nov 2020 19:17:12 +0100
Subject: [PATCH] featture: css - new structure > hubl-framework > commons

---
 src/styles/hubl-framework/commons/_index.scss |   4 +
 .../hubl-framework/commons/borders.scss       |  84 ++++++++++++
 src/styles/hubl-framework/commons/colors.scss | 120 ++++++++++++++++++
 .../hubl-framework/commons/shadows.scss       |  10 ++
 src/styles/hubl-framework/commons/texts.scss  |  48 +++++++
 5 files changed, 266 insertions(+)
 create mode 100644 src/styles/hubl-framework/commons/_index.scss
 create mode 100644 src/styles/hubl-framework/commons/borders.scss
 create mode 100644 src/styles/hubl-framework/commons/colors.scss
 create mode 100644 src/styles/hubl-framework/commons/shadows.scss
 create mode 100644 src/styles/hubl-framework/commons/texts.scss

diff --git a/src/styles/hubl-framework/commons/_index.scss b/src/styles/hubl-framework/commons/_index.scss
new file mode 100644
index 0000000..4151b5c
--- /dev/null
+++ b/src/styles/hubl-framework/commons/_index.scss
@@ -0,0 +1,4 @@
+@import 'colors';
+@import 'texts';
+@import 'borders';
+@import 'shadows';
diff --git a/src/styles/hubl-framework/commons/borders.scss b/src/styles/hubl-framework/commons/borders.scss
new file mode 100644
index 0000000..9e7f346
--- /dev/null
+++ b/src/styles/hubl-framework/commons/borders.scss
@@ -0,0 +1,84 @@
+.border {
+
+  &-thick {
+    border-width: thick;
+  }
+  &-color {
+    &-primary {
+      border-color: var(--color-primary);
+    }
+    &-secondary {
+      border-color: var(--color-secondary);
+    }
+    &-third {
+      border-color: var(--color-third);
+    }
+    &-heading {
+      border-color: var(--color-heading);
+    }
+  }
+  &-top {
+    border-top: 1px solid;
+    
+    &-color-primary {
+      border-color: var(--color-primary);
+    }
+    &-color-secondary {
+      border-color: var(--color-secondary);
+    }
+    &-color-third {
+      border-color: var(--color-third);
+    }
+    &-color-heading {
+      border-color: var(--color-heading);
+    }
+  }
+  &-right {
+    border-right: 1px solid;
+
+    &-color-primary {
+      border-color: var(--color-primary);
+    }
+    &-color-secondary {
+      border-color: var(--color-secondary);
+    }
+    &-color-third {
+      border-color: var(--color-third);
+    }
+    &-color-heading {
+      border-color: var(--color-heading);
+    }
+  }
+  &-bottom {
+    border-bottom: 1px solid;
+
+    &-color-primary {
+      border-color: var(--color-primary);
+    }
+    &-color-secondary {
+      border-color: var(--color-secondary);
+    }
+    &-color-third {
+      border-color: var(--color-third);
+    }
+    &-color-heading {
+      border-color: var(--color-heading);
+    }
+  }
+  &-left {
+    border-left: 1px solid;
+
+    &-color-primary {
+      border-color: var(--color-primary);
+    }
+    &-color-secondary {
+      border-color: var(--color-secondary);
+    }
+    &-color-third {
+      border-color: var(--color-third);
+    }
+    &-color-heading {
+      border-color: var(--color-heading);
+    }
+  }
+}
diff --git a/src/styles/hubl-framework/commons/colors.scss b/src/styles/hubl-framework/commons/colors.scss
new file mode 100644
index 0000000..459a3d6
--- /dev/null
+++ b/src/styles/hubl-framework/commons/colors.scss
@@ -0,0 +1,120 @@
+:root {
+  --color-primary: #FF0055;
+  --color-secondary: #0068FF;
+  --color-third: #00E3B4;
+  --color-heading: #2E3F58;
+}
+
+.bg-color-primary {
+  background-color: var(--color-primary);
+
+  &.active[active] {
+    background-color: var(--color-secondary);
+  }
+  &.hover:hover {
+    opacity: 0.3;
+  }
+  &.reverse {
+    background-color: var(--color-secondary);
+  }
+}
+
+.bg-color-secondary {
+  background-color: var(--color-secondary);
+
+  &.active[active] {
+    background-color: var(--color-primary);
+  }
+  &.hover:hover {
+    opacity: 0.3;
+  }
+  &.reverse {
+    background-color: var(--color-primary);
+  }
+}
+
+.bg-color-third {
+  background-color: var(--color-third);
+
+  &.active[active] {
+    background-color: var(--color-heading);
+  }
+  &.hover:hover {
+    opacity: 0.3;
+  }
+  &.reverse {
+    background-color: var(--color-heading);
+  }
+}
+
+.bg-color-heading {
+  background-color: var(--color-heading);
+
+  &.active[active] {
+    background-color: var(--color-third);
+  }
+  &.hover:hover {
+    opacity: 0.3;
+  }
+  &.reverse {
+    background-color: var(--color-third);
+  }
+}
+
+.text-color-primary {
+  color: var(--color-primary);
+
+  &.active[active] {
+    color: var(--color-secondary);
+  }
+  &.hover:hover {
+    opacity: 0.3;
+  }
+  &.reverse {
+    color: var(--color-secondary);
+  }
+}
+
+.text-color-secondary {
+  color: var(--color-secondary);
+
+  &.active[active] {
+    color: var(--color-primary);
+  }
+
+  &.hover:hover {
+    opacity: 0.3;
+  }
+
+  &.reverse {
+    color: var(--color-primary);
+  }
+}
+
+.text-color-third {
+  color: var(--color-third);
+
+  &.active[active] {
+    color: var(--color-heading);
+  }
+  &.hover:hover {
+    opacity: 0.3;
+  }
+  &.reverse {
+    color: var(--color-heading);
+  }
+}
+
+.text-color-heading {
+  color: var(--color-heading);
+
+  &.active[active] {
+    color: var(--color-third);
+  }
+  &.hover:hover {
+    opacity: 0.3;
+  }
+  &.reverse {
+    color: var(--color-third);
+  }
+}
diff --git a/src/styles/hubl-framework/commons/shadows.scss b/src/styles/hubl-framework/commons/shadows.scss
new file mode 100644
index 0000000..5a93c0d
--- /dev/null
+++ b/src/styles/hubl-framework/commons/shadows.scss
@@ -0,0 +1,10 @@
+.shadow {
+  box-shadow: 0 0 6px 0 rgba(46, 63, 88, 0.14);
+
+  &-small {
+    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.09);
+  }
+  &-large {
+    box-shadow: 0 7px 8px 0 rgba(46, 63, 88, 0.16);
+  }
+}
\ No newline at end of file
diff --git a/src/styles/hubl-framework/commons/texts.scss b/src/styles/hubl-framework/commons/texts.scss
new file mode 100644
index 0000000..cf0636a
--- /dev/null
+++ b/src/styles/hubl-framework/commons/texts.scss
@@ -0,0 +1,48 @@
+.text {
+
+  &-xsmall {
+    font-size: 12px;
+  }
+  &-small {
+    font-size: 13px;
+  }
+  &-normal {
+    font-size: 14px;
+  }
+  &-large {
+    font-size: 15px;
+  }
+  &-xlarge {
+    font-size: 16px;
+  }
+  &-xxlarge {
+    font-size: 18px;
+  }
+  &-normal {
+    font-weight: 400;
+  }
+  &-semibold {
+    font-weight: 600;
+  }
+  &-bold {
+    font-weight: 700;
+  }
+  &-uppercase {
+    text-transform: uppercase;
+  }
+  &-underline {
+    text-decoration: underline;
+  }
+  &-letter-spacing-large {
+    letter-spacing: 0.2px;
+  }
+  &-letter-spacing-larger {
+    letter-spacing: 0.38px;
+  }
+  &-center {
+    text-align: center;
+  }
+  &-right {
+    text-align: right;
+  }
+}