Skip to content

Commit

Permalink
feat(stark-ui): import old stark ui global theming
Browse files Browse the repository at this point in the history 
ISSUES CLOSED: #456, #472

# Conflicts:
#	showcase/package.json
#	starter/package.json
  • Loading branch information
@catlabs
catlabs committed Jun 29, 2018
1 parent f096187 commit 9ac8dde
Show file tree
Hide file tree
Showing 19 changed files with 799 additions and 254 deletions.
165 changes: 165 additions & 0 deletions packages/stark-ui/assets/styles/_base.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,165 @@
.stark-app {
visibility: visible;
&.stark-init,
&.stark-exit {
visibility: hidden;
display: none;
}
/* class added by translate-cloak directive while loading translations */
&.translate-cloak {
visibility: hidden;
}
}

.stark-login-container {
display: none;
&.stark-init,
&.stark-exit {
display: block;
}
}

.stark-container {
max-width: $stark-max-content-width;
margin: 0 auto;
display: block;
width: 100%;
}

@media screen {
html,
body {
overflow: hidden;
}

.stark-app {
display: flex;
flex-direction: column;
height: 100%;
&:not(.stark-init) {
overflow-y: hidden;
}
& .content-wrapper {
flex: 1;
display: flex;
overflow-y: hidden;
position: relative;
}
& .stark-app-menu {
display: flex;
flex-direction: column;
}
& main {
flex: 1;
display: flex;
flex-direction: column;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
& > ui-view {
flex: 1 0 auto;
padding: 16px;
}
}
}
}

/********** TYPOGRAPHY **********/
body {
/* system sans-serif font stack */
font-family: mat-font-family($typography-config);
font-size: mat-font-size($typography-config, body-1);
}

h1,
h2,
h3,
h4 {
margin: 0;
padding: 0;
}

h1 {
font-size: 34px;
line-height: 40px;
font-weight: 400;
margin-bottom: 16px;
color: $secondary-dark-text-color;
}

h2 {
font-size: 24px;
line-height: 28px;
font-weight: 500;
margin-bottom: 8px;
}

h3 {
font-size: 16px;
line-height: 24px;
font-weight: 400;
margin-bottom: 4px;
}

@media #{$desktop-query} {
body:not(.full-curtain) {
& h1,
& h2,
& h3 {
line-height: 1.2;
margin-bottom: 8px;
}
& h1 {
font-size: 24px;
font-weight: 500;
}
& h2 {
font-size: 16px;
}
& h3 {
font-size: 14px;
}
}
}

/********** COLORS **********/
body {
background-color: $offwhite;
color: $primary-dark-text-color;
}

a {
color: $md-primary-700;
}


/* utility class to fill to max. size in flex systems */
.flex-fill {
flex: 1;
}

td {
background: #fff;
border-bottom: solid 1px #fafafa;
}

.stark-container {
max-width: $stark-max-content-width;
margin: auto;
position: relative;
}


@media screen and (max-width: 1230px) {
.stark-header-extra,
.stark-page-header-actions {
margin-right: 15px;
}

.stark-container,
.stark-fixed-header-container .stark-generic-search .stark-generic-search-container .stark-container,
.stark-table-action-bar-container {
box-sizing: border-box;
padding-left: 15px;
padding-right: 15px;
}
}
11 changes: 11 additions & 0 deletions packages/stark-ui/assets/styles/_colors.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
$mat-light-theme-background: $backgrounds;

@if variable-exists(stark-base-theme) {
$base-theme: map-merge($base-theme, $stark-base-theme);
@if map-has-key($stark-base-theme, backgrounds) {
$mat-light-theme-background: map-merge($backgrounds, map-get($stark-base-theme, backgrounds));
}
}

$stark-color-theme: mat-light-theme(map-get($base-theme, primary-palette), map-get($base-theme, accent-palette), map-get($base-theme, warn-palette)) !default;
@include angular-material-theme($stark-color-theme);
87 changes: 87 additions & 0 deletions packages/stark-ui/assets/styles/_old-variables.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
// Old Stark vars
$tablet-query: "(min-width: 600px)";
$tablet-screen-query: "screen and (min-width: 600px)";
$desktop-query: "(min-width: 960px)";
$desktop-screen-query: "screen and (min-width: 960px)";
$mobile-only-query: "(max-width: 599px)";
$mobile-only-screen-query: "screen and (max-width: 599px)";
$tablet-only-query: "(min-width: 600px) and (max-width: 959px)";
$tablet-only-screen-query: "screen and (min-width: 600px) and (max-width: 959px)";

$elevation-1: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12);
$elevation-2: 0 1px 5px 0 rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12);
$elevation-3: 0 1px 8px 0 rgba(0, 0, 0, 0.2), 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 3px 3px -2px rgba(0, 0, 0, 0.12);
$elevation-4: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
$elevation-6: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12);
$elevation-8: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
$elevation-9: 0 5px 6px -3px rgba(0, 0, 0, 0.2), 0 9px 12px 1px rgba(0, 0, 0, 0.14), 0 3px 16px 2px rgba(0, 0, 0, 0.12);
$elevation-12: 0 7px 8px -4px rgba(0, 0, 0, 0.2), 0 12px 17px 2px rgba(0, 0, 0, 0.14), 0 5px 22px 4px rgba(0, 0, 0, 0.12);
$elevation-16: 0 8px 10px -5px rgba(0, 0, 0, 0.2), 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12);
$elevation-24: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12);

$compact-label-width: 130px;
$compact-label-spacing: 140px;

$stark-header-size: 100px;
$stark-header-size-desktop: 128px;
$stark-header-actions-top: 78px;
$stark-header-actions-top-desktop: 106px;
$stark-max-content-width: 1200px;

$primary-dark-text-color: map-get($mat-light-theme-foreground, base);
$secondary-dark-text-color: rgba(0, 0, 0, 0.7);
$tertiary-dark-text-color: rgba(0, 0, 0, 0.45);


$disabled-color: map-get($mat-light-theme-foreground, disabled-text);
$divider-color: map-get($mat-light-theme-foreground, divider);
$placeholder-color: $secondary-dark-text-color;

$primary-light-text-color: rgba(255, 255, 255, 0.7);
$secondary-light-text-color: rgba(255, 255, 255, 0.95);

$offwhite: map-get($mat-light-theme-background, background);

$message-info: #0076c8;
$message-info-700: #0063bb;
$message-warning: #ff9800;
$message-warning-700: #f57c00;
$message-alert: #d32f2f;
$message-alert-700: #b71c1c;
$message-success: #4caf50;
$message-success-700: #388e3c;
$message-neutral: #bfbfbf;
$message-neutral-700: #999;

$md-primary-100: #b2d5ee; /* rgb(178, 213, 238) */

$md-primary: mat-color(map-get($base-theme, primary-palette));
$md-primary-600: mat-color(map-get($base-theme, primary-palette), 600); /* rgb(0, 106, 180) */
$md-primary-700: mat-color(map-get($base-theme, primary-palette), 700); /* rgb(0, 94, 160) */
$md-primary-alpha-10: rgba(0, 118, 200, 0.1);
$md-primary-alpha-26: rgba(0, 118, 200, 0.26);
$md-primary-alpha-50: rgba(0, 118, 200, 0.5);
$md-primary-alpha-60: rgba(0, 118, 200, 0.6);
$md-primary-alpha-87: rgba(0, 118, 200, 0.87);
$md-primary-200-alpha-38: rgba(127, 186, 227, 0.38);

$md-accent-50: mat-color(map-get($base-theme, accent-palette), 50);
$md-accent-100: mat-color(map-get($base-theme, accent-palette), 100); /* rgb(255, 77, 148) */
$md-accent: mat-color(map-get($base-theme, accent-palette)); /* rgb(143, 0, 57) */
$md-accent-600: mat-color(map-get($base-theme, accent-palette), 600); /* rgb(112, 0, 45) */
$md-accent-alpha-20: rgba(143, 0, 57, 0.2);
$md-accent-alpha-26: rgba(143, 0, 57, 0.26);
$md-accent-alpha-50: rgba(143, 0, 57, 0.5);
$md-accent-alpha-87: rgba(143, 0, 57, 0.87);

$md-warn-100: mat-color(map-get($base-theme, warn-palette), 100); /* rgb(255, 204, 188) */
$md-warn: mat-color(map-get($base-theme, warn-palette)); /* rgb(255, 87, 34) */
$md-warn-600: mat-color(map-get($base-theme, warn-palette), 600); /* rgb(244, 81, 30) */
$md-warn-700: mat-color(map-get($base-theme, warn-palette), 700);; /* rgb(230, 74, 25) */
$md-warn-a700: mat-color(map-get($base-theme, warn-palette), A700); /* rgb(221, 44, 0) */
$md-warn-alpha-26: rgba(255, 87, 34, 0.26);
$md-warn-alpha-50: rgba(255, 87, 34, 0.5);
$md-warn-alpha-87: rgba(255, 87, 34, 0.87);
$md-warn-200-alpha-38: rgba(255, 171, 145, 0.38);

$cash2-offwhite: #f6f9fa;
23 changes: 4 additions & 19 deletions ...k-ui/assets/themes/_typography-theme.scss → ...s/stark-ui/assets/styles/_typography.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,30 +2,13 @@
@return mat-typography-level(nth($list, 1), nth($list, 2), nth($list, 3));
}

//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)
);

@if variable-exists(stark-typography-theme) {
$typography-theme: map-merge($typography-theme, $stark-typography-theme);
}

//TO DO: Document correspondance with html tags
$typography-config: mat-typography-config(
$font-family: 'Roboto, "Helvetica Neue", sans-serif',
$font-family: map-get($typography-theme, font-family),
$display-4: mat-typography-level-create(map-get($typography-theme, display-4)),
$display-3: mat-typography-level-create(map-get($typography-theme, display-3)),
$display-2: mat-typography-level-create(map-get($typography-theme, display-2)),
Expand All @@ -40,3 +23,5 @@ $typography-config: mat-typography-config(
$button: mat-typography-level-create(map-get($typography-theme, button)),
/* Line-height must be unit-less fraction of the font-size.*/ $input: mat-typography-level-create(map-get($typography-theme, input))
);

@include mat-core($typography-config);
87 changes: 0 additions & 87 deletions packages/stark-ui/assets/styles/_variables.pcss
View file

This file was deleted.

Loading

0 comments on commit 9ac8dde

Please sign in to comment.