feat(stark-ui): import old stark ui global theming

ISSUES CLOSED: NationalBankBelgium#456, NationalBankBelgium#472
catlabs · Jun 28, 2018 · 242e864 · 242e864
1 parent 1c3d7e4
commit 242e864
Showing 1 changed file with 88 additions and 37 deletions.
diff --git a/packages/stark-ui/assets/styles/_variables.scss b/packages/stark-ui/assets/styles/_variables.scss
@@ -1,6 +1,5 @@
 $border-radius: 2px;
 
-//Custom palette
 $primary-palette: (
   50: #e3f2fd,
   100: #bbdefb,
@@ -30,7 +29,7 @@ $primary-palette: (
     A100: $dark-primary-text,
     A200: $light-primary-text,
     A400: $light-primary-text,
-    A700: $light-primary-text,
+    A700: $light-primary-text
   )
 );
 
@@ -63,7 +62,7 @@ $accent-palette: (
     A100: $dark-primary-text,
     A200: $light-primary-text,
     A400: $light-primary-text,
-    A700: $light-primary-text,
+    A700: $light-primary-text
   )
 );
 
@@ -96,45 +95,44 @@ $warning-palette: (
     A100: $dark-primary-text,
     A200: $light-primary-text,
     A400: $light-primary-text,
-    A700: $light-primary-text,
+    A700: $light-primary-text
   )
 );
 
 $backgrounds: (
   status-bar: map_get($mat-grey, 300),
-  app-bar:    map_get($mat-grey, 100),
+  app-bar: map_get($mat-grey, 100),
   background: #f6f9fa,
-  hover:      rgba(black, 0.04),
-  card:       #ffffff,
-  dialog:     #ffffff,
+  hover: rgba(black, 0.04),
+  card: #ffffff,
+  dialog: #ffffff,
   disabled-button: rgba(black, 0.12),
   raised-button: #ffffff,
   focused-button: $dark-focused,
   selected-button: map_get($mat-grey, 300),
   selected-disabled-button: map_get($mat-grey, 400),
   disabled-button-toggle: map_get($mat-grey, 200),
   unselected-chip: map_get($mat-grey, 300),
-  disabled-list-option: map_get($mat-grey, 200),
+  disabled-list-option: map_get($mat-grey, 200)
 );
 
 $foregrounds: (
-  base:              black,
-  divider:           $dark-dividers,
-  dividers:          $dark-dividers,
-  disabled:          $dark-disabled-text,
-  disabled-button:   rgba(black, 0.26),
-  disabled-text:     $dark-disabled-text,
-  hint-text:         $dark-disabled-text,
-  secondary-text:    $dark-secondary-text,
-  icon:              rgba(black, 0.54),
-  icons:             rgba(black, 0.54),
-  text:              rgba(black, 0.87),
-  slider-min:        rgba(black, 0.87),
-  slider-off:        rgba(black, 0.26),
-  slider-off-active: rgba(black, 0.38),
+  base: black,
+  divider: $dark-dividers,
+  dividers: $dark-dividers,
+  disabled: $dark-disabled-text,
+  disabled-button: rgba(black, 0.26),
+  disabled-text: $dark-disabled-text,
+  hint-text: $dark-disabled-text,
+  secondary-text: $dark-secondary-text,
+  icon: rgba(black, 0.54),
+  icons: rgba(black, 0.54),
+  text: rgba(black, 0.87),
+  slider-min: rgba(black, 0.87),
+  slider-off: rgba(black, 0.26),
+  slider-off-active: rgba(black, 0.38)
 );
 
-
 $base-theme: (
   primary-palette: mat-palette($primary-palette),
   accent-palette: mat-palette($accent-palette),
@@ -170,17 +168,70 @@ $table-theme: (
 //font-size, line-height, font-weight
 $typography-theme: (
   font-family: 'Roboto, "Helvetica Neue", sans-serif',
-  display-4: (112px, 112px, 300),
-  display-3: (56px, 56px, 400),
-  display-2: (45px, 48px, 400),
-  display-1: (34px, 40px, 400),
-  headline: (24px, 32px, 400),
-  title: (20px, 32px, 500),
-  subheading-2: (16px, 28px, 400),
-  subheading-1: (15px, 24px, 400),
-  body-2: (14px, 24px, 500),
-  body-1: (14px, 20px, 400),
-  caption: (12px, 20px, 400),
-  button: (map-get($button-theme, font-size), map-get($button-theme, line-height), map-get($button-theme, font-weight)),
-  /* Line-height must be unit-less fraction of the font-size.*/ input: (inherit, 1.125, 400)
+  display-4: (
+    112px,
+    112px,
+    300
+  ),
+  display-3: (
+    56px,
+    56px,
+    400
+  ),
+  display-2: (
+    45px,
+    48px,
+    400
+  ),
+  display-1: (
+    34px,
+    40px,
+    400
+  ),
+  headline: (
+    24px,
+    32px,
+    400
+  ),
+  title: (
+    20px,
+    32px,
+    500
+  ),
+  subheading-2: (
+    16px,
+    28px,
+    400
+  ),
+  subheading-1: (
+    15px,
+    24px,
+    400
+  ),
+  body-2: (
+    14px,
+    24px,
+    500
+  ),
+  body-1: (
+    14px,
+    20px,
+    400
+  ),
+  caption: (
+    12px,
+    20px,
+    400
+  ),
+  button: (
+    map-get($button-theme, font-size),
+    map-get($button-theme, line-height),
+    map-get($button-theme, font-weight)
+  ),
+  /* Line-height must be unit-less fraction of the font-size.*/ input:
+    (
+      inherit,
+      1.125,
+      400
+    )
 );