New packages org (#2639)

New packages org

lib/core/styles/_colors.scss

@@ -0,0 +1,239 @@
+
+// Accent color palette
+$black-87-opacity: rgba(black, 0.87);
+$white-87-opacity: rgba(white, 0.87);
+$black-12-opacity: rgba(black, 0.12);
+$white-12-opacity: rgba(white, 0.12);
+$black-6-opacity: rgba(black, 0.06);
+$white-6-opacity: rgba(white, 0.06);
+
+$alfresco-ecm-cyan: (
+    50: #e0f7fa,
+    100: #b2ebf2,
+    200: #80deea,
+    300: #4dd0e1,
+    400: #26c6da,
+    500: #00bcd4,
+    600: #00acc1,
+    700: #0097a7,
+    800: #00838f,
+    900: #006064,
+    A100: #84ffff,
+    A200: #18ffff,
+    A400: #00e5ff,
+    A700: #00b8d4,
+    contrast: (
+        50: $black-87-opacity,
+        100: $black-87-opacity,
+        200: $black-87-opacity,
+        300: $black-87-opacity,
+        400: $black-87-opacity,
+        500: white,
+        600: white,
+        700: white,
+        800: white,
+        900: $white-87-opacity,
+        A100: $black-87-opacity,
+        A200: $black-87-opacity,
+        A400: $black-87-opacity,
+        A700: $black-87-opacity,
+    )
+);
+
+$alfresco-dev-teal: (
+    50: #e0f2f1,
+    100: #b2dfdb,
+    200: #80cbc4,
+    300: #4db6ac,
+    400: #26a69a,
+    500: #009688,
+    600: #00897b,
+    700: #00796b,
+    800: #00695c,
+    900: #004d40,
+    A100: #a7ffeb,
+    A200: #64ffda,
+    A400: #1de9b6,
+    A700: #00bfa5,
+    contrast: (
+        50: $black-87-opacity,
+        100: $black-87-opacity,
+        200: $black-87-opacity,
+        300: $black-87-opacity,
+        400: $black-87-opacity,
+        500: white,
+        600: white,
+        700: white,
+        800: $white-87-opacity,
+        900: $white-87-opacity,
+        A100: $black-87-opacity,
+        A200: $black-87-opacity,
+        A400: $black-87-opacity,
+        A700: $black-87-opacity,
+    )
+);
+
+$alfresco-ecm-blue: (
+    50: #e3f2fd,
+    100: #bbdefb,
+    200: #90caf9,
+    300: #64b5f6,
+    400: #42a5f5,
+    500: #2196f3,
+    600: #1e88e5,
+    700: #1976d2,
+    800: #1565c0,
+    900: #0d47a1,
+    A100: #82b1ff,
+    A200: #448aff,
+    A400: #2979ff,
+    A700: #2962ff,
+    contrast: (
+        50: $black-87-opacity,
+        100: $black-87-opacity,
+        200: $black-87-opacity,
+        300: $black-87-opacity,
+        400: $black-87-opacity,
+        500: white,
+        600: white,
+        700: white,
+        800: $white-87-opacity,
+        900: $white-87-opacity,
+        A100: $black-87-opacity,
+        A200: white,
+        A400: white,
+        A700: white,
+    )
+);
+
+$alfresco-bpm-green: (
+    50: #f1f8e9,
+    100: #dcedc8,
+    200: #c5e1a5,
+    300: #aed581,
+    400: #9ccc65,
+    500: #8bc34a,
+    600: #7cb342,
+    700: #689f38,
+    800: #558b2f,
+    900: #33691e,
+    A100: #ccff90,
+    A200: #b2ff59,
+    A400: #76ff03,
+    A700: #64dd17,
+    contrast: (
+        50: $black-87-opacity,
+        100: $black-87-opacity,
+        200: $black-87-opacity,
+        300: $black-87-opacity,
+        400: $black-87-opacity,
+        500: $black-87-opacity,
+        600: $black-87-opacity,
+        700: $black-87-opacity,
+        800: white,
+        900: white,
+        A100: $black-87-opacity,
+        A200: $black-87-opacity,
+        A400: $black-87-opacity,
+        A700: $black-87-opacity,
+    )
+);
+
+$alfresco-warn: (
+    50: #ffebee,
+    100: #ffcdd2,
+    200: #ef9a9a,
+    300: #e57373,
+    400: #ef5350,
+    500: #f44336,
+    600: #e53935,
+    700: #d32f2f,
+    800: #c62828,
+    900: #b71c1c,
+    A100: #ff8a80,
+    A200: #ff5252,
+    A400: #ff1744,
+    A700: #d50000,
+    contrast: (
+        50: $black-87-opacity,
+        100: $black-87-opacity,
+        200: $black-87-opacity,
+        300: $black-87-opacity,
+        400: $black-87-opacity,
+        500: white,
+        600: white,
+        700: white,
+        800: $white-87-opacity,
+        900: $white-87-opacity,
+        A100: $black-87-opacity,
+        A200: white,
+        A400: white,
+        A700: white,
+    )
+);
+
+$alfresco-accent-purple: (
+    50: #e8eaf6,
+    100: #c5cae9,
+    200: #9fa8da,
+    300: #7986cb,
+    400: #5c6bc0,
+    500: #3f51b5,
+    600: #3949ab,
+    700: #303f9f,
+    800: #283593,
+    900: #1a237e,
+    A100: #8c9eff,
+    A200: #536dfe,
+    A400: #3d5afe,
+    A700: #304ffe,
+    contrast: (
+        50: $black-87-opacity,
+        100: $black-87-opacity,
+        200: $black-87-opacity,
+        300: white,
+        400: white,
+        500: $white-87-opacity,
+        600: $white-87-opacity,
+        700: $white-87-opacity,
+        800: $white-87-opacity,
+        900: $white-87-opacity,
+        A100: $black-87-opacity,
+        A200: white,
+        A400: white,
+        A700: $white-87-opacity,
+    )
+);
+
+$alfresco-accent-orange: (
+    50: #fff3e0,
+    100: #ffe0b2,
+    200: #ffcc80,
+    300: #ffb74d,
+    400: #ffa726,
+    500: #ff9800,
+    600: #fb8c00,
+    700: #f57c00,
+    800: #ef6c00,
+    900: #e65100,
+    A100: #ffd180,
+    A200: #ffab40,
+    A400: #ff9100,
+    A700: #ff6d00,
+    contrast: (
+        50: $white-87-opacity,
+        100: $white-87-opacity,
+        200: $white-87-opacity,
+        300: $white-87-opacity,
+        400: $white-87-opacity,
+        500: $white-87-opacity,
+        600: $white-87-opacity,
+        700: $white-87-opacity,
+        800: white,
+        900: white,
+        A100: $black-87-opacity,
+        A200: $black-87-opacity,
+        A400: $black-87-opacity,
+        A700: black,
+    )
+);

lib/core/styles/_default-class.scss

@@ -0,0 +1,14 @@
+@mixin adf-default-class($theme) {
+
+    .adf-hide-small {
+        @media screen and ($mat-small) {
+            display: none !important;
+        }
+    }
+
+    .adf-hide-xsmall {
+        @media screen and ($mat-xsmall) {
+            display: none !important;
+        }
+    }
+}

lib/core/styles/_index.scss

@@ -0,0 +1,35 @@
+@import './theme-colors';
+@import './default-class';
+@import './theming';
+
+@import '../collapsable/accordion-group.component';
+@import '../card-view/card-view-textitem.component';
+@import '../card-view/card-view-dateitem.component';
+@import '../card-view/card-view.component';
+@import '../toolbar/toolbar.component';
+@import '../pagination/pagination.component';
+@import '../info-drawer/info-drawer-layout.component';
+@import '../settings/host-settings.component';
+@import '../userinfo/components/user-info.component';
+@import '../login/components/login.component';
+@import '../datatable/components/datatable/datatable.component';
+@import '../form/components/widgets/form';
+
+@mixin adf-core-theme($theme) {
+    @include adf-form-theme($theme);
+    @include adf-host-settings-theme($theme);
+    @include adf-accordion-theme($theme);
+    @include adf-card-view-textitem-theme($theme);
+    @include adf-card-view-dateitem-theme($theme);
+    @include adf-card-view-theme($theme);
+    @include adf-toolbar-theme($theme);
+    @include adf-info-drawer-theme($theme);
+    @include adf-pagination-theme($theme);
+    @include adf-colors-theme($theme);
+    @include adf-default-class($theme);
+    @include adf-userinfo-theme($theme);
+    @include adf-login-theme($theme);
+    @include adf-datatable-theme($theme);
+}
+
+

lib/core/styles/_mixins.scss

@@ -0,0 +1,30 @@
+@import 'variables';
+
+@mixin no-select {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+@mixin typo-icon() {
+  font-family: 'Material Icons';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  word-wrap: normal;
+  font-feature-settings: 'liga';
+  -webkit-font-feature-settings: 'liga';
+  -webkit-font-smoothing: antialiased;
+}
+
+@mixin material-animation-default($duration:0.2s) {
+  transition-duration: $duration;
+  transition-timing-function: $animation-curve-default;
+}

lib/core/styles/_theme-colors.scss

@@ -0,0 +1,42 @@
+@mixin adf-colors-theme($theme) {
+
+    $primary: map-get($theme, primary);
+    $accent: map-get($theme, accent);
+    $warn: map-get($theme, warn);
+    $background: map-get($theme, background);
+    $foreground: map-get($theme, foreground);
+
+    .adf-primary-color {
+        color: mat-color($primary) !important;
+    }
+
+    .adf-accent-color {
+        color: mat-color($accent) !important;
+    }
+
+    .adf-warn-color {
+        color: mat-color($warn) !important;
+    }
+
+    .adf-dialog-background-color {
+        background: mat-color($background, dialog) !important;
+    }
+
+    .adf-primary-background-color {
+        color: mat-color($primary, default-contrast) !important;
+        background: mat-color($primary) !important;
+    }
+
+    .adf-accent-background-color {
+        color: mat-color($accent, default-contrast) !important;
+        background: mat-color($accent) !important;
+    }
+
+    .adf-primary-contrast-text-color {
+        color: mat-color($primary, default-contrast) !important;
+    }
+
+    .adf-accent-contrast-text-color {
+        color: mat-color($accent, default-contrast) !important;
+    }
+}

lib/core/styles/_theming.scss

@@ -0,0 +1,6 @@
+@import '~@angular/material/theming';
+@import './colors';
+@import './variables';
+@import './mixins';
+@import './typography';
+

lib/core/styles/_typography.scss

@@ -0,0 +1,19 @@
+@import '~@angular/material/theming';
+
+$alfresco-typography: mat-typography-config(
+    $font-family: 'Muli, Roboto, "Helvetica Neue", sans-serif',
+    $display-4:     mat-typography-level(112px, 112px, 300),
+    $display-3:     mat-typography-level(56px, 56px, 400),
+    $display-2:     mat-typography-level(45px, 48px, 400),
+    $display-1:     mat-typography-level(34px, 40px, 400),
+    $headline:      mat-typography-level(24px, 32px, 400),
+    $title:         mat-typography-level(20px, 32px, 500),
+    $subheading-2:  mat-typography-level(16px, 28px, 400),
+    $subheading-1:  mat-typography-level(15px, 24px, 400),
+    $body-2:        mat-typography-level(14px, 24px, 500),
+    $body-1:        mat-typography-level(14px, 20px, 400),
+    $caption:       mat-typography-level(12px, 20px, 400),
+    $button:        mat-typography-level(14px, 14px, 500),
+    // Line-height must be unit-less fraction of the font-size.
+    $input:         mat-typography-level(16px, 1.25, 400)
+);

lib/core/styles/_variables.scss

@@ -0,0 +1,8 @@
+@import './colors';
+
+/* ANIMATION */
+$animation-curve-fast-out-slow-in: cubic-bezier(0.4, 0, 0.2, 1) !default;
+$animation-curve-default: $animation-curve-fast-out-slow-in !default;
+
+$swift-ease-in-duration: 300ms !default;
+$swift-ease-in-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2) !default;

lib/core/styles/prebuilt/_all-theme.scss

@@ -0,0 +1,9 @@
+@import '../../../content-services/styles/index';
+@import '../../../process-services/styles/index';
+@import '../../../core/styles/index';
+
+@mixin alfresco-material-theme($theme) {
+    @include adf-content-services-theme($theme);
+    @include adf-process-services-theme($theme);
+    @include adf-core-theme($theme);
+}

lib/core/styles/prebuilt/adf-blue-orange.scss

@@ -0,0 +1,12 @@
+@import '../theming';
+@import './all-theme';
+
+@include mat-core($alfresco-typography);
+
+$primary: mat-palette($alfresco-ecm-blue);
+$accent:  mat-palette($alfresco-accent-orange);
+$warn:    mat-palette($alfresco-warn);
+$theme:   mat-light-theme($primary, $accent, $warn);
+
+@include angular-material-theme($theme);
+@include alfresco-material-theme($theme);

lib/core/styles/prebuilt/adf-blue-purple.scss

@@ -0,0 +1,12 @@
+@import '../theming';
+@import './all-theme';
+
+@include mat-core($alfresco-typography);
+
+$primary: mat-palette($alfresco-ecm-blue);
+$accent:  mat-palette($alfresco-accent-purple);
+$warn:    mat-palette($alfresco-warn);
+$theme:   mat-light-theme($primary, $accent, $warn);
+
+@include angular-material-theme($theme);
+@include alfresco-material-theme($theme);

lib/core/styles/prebuilt/adf-cyan-orange.scss

@@ -0,0 +1,12 @@
+@import '../theming';
+@import './all-theme';
+
+@include mat-core($alfresco-typography);
+
+$primary: mat-palette($alfresco-ecm-cyan);
+$accent:  mat-palette($alfresco-accent-orange);
+$warn:    mat-palette($alfresco-warn);
+$theme:   mat-light-theme($primary, $accent, $warn);
+
+@include angular-material-theme($theme);
+@include alfresco-material-theme($theme);

lib/core/styles/prebuilt/adf-cyan-purple.scss

@@ -0,0 +1,12 @@
+@import '../theming';
+@import './all-theme';
+
+@include mat-core($alfresco-typography);
+
+$primary: mat-palette($alfresco-ecm-cyan);
+$accent:  mat-palette($alfresco-accent-purple);
+$warn:    mat-palette($alfresco-warn);
+$theme:   mat-light-theme($primary, $accent, $warn);
+
+@include angular-material-theme($theme);
+@include alfresco-material-theme($theme);

lib/core/styles/prebuilt/adf-green-orange.scss

@@ -0,0 +1,12 @@
+@import '../theming';
+@import './all-theme';
+
+@include mat-core($alfresco-typography);
+
+$primary: mat-palette($alfresco-bpm-green);
+$accent:  mat-palette($alfresco-accent-orange);
+$warn:    mat-palette($alfresco-warn);
+$theme:   mat-light-theme($primary, $accent, $warn);
+
+@include angular-material-theme($theme);
+@include alfresco-material-theme($theme);

lib/core/styles/prebuilt/adf-green-purple.scss

@@ -0,0 +1,12 @@
+@import '../theming';
+@import './all-theme';
+
+@include mat-core($alfresco-typography);
+
+$primary: mat-palette($alfresco-bpm-green);
+$accent:  mat-palette($alfresco-accent-purple);
+$warn:    mat-palette($alfresco-warn);
+$theme:   mat-light-theme($primary, $accent, $warn);
+
+@include angular-material-theme($theme);
+@include alfresco-material-theme($theme);

lib/core/styles/prebuilt/adf-indigo-pink.scss

@@ -0,0 +1,11 @@
+@import '../theming';
+@import './all-theme';
+
+@include mat-core($alfresco-typography);
+
+$primary: mat-palette($mat-indigo);
+$accent:  mat-palette($mat-pink, A200, A100, A400);
+$theme: mat-light-theme($primary, $accent);
+
+@include angular-material-theme($theme);
+@include alfresco-material-theme($theme);

lib/core/styles/prebuilt/adf-pink-bluegrey.scss

@@ -0,0 +1,11 @@
+@import '../theming';
+@import './all-theme';
+
+@include mat-core($alfresco-typography);
+
+$primary: mat-palette($mat-pink, 700, 500, 900);
+$accent:  mat-palette($mat-blue-grey, A200, A100, A400);
+$theme: mat-dark-theme($primary, $accent);
+
+@include angular-material-theme($theme);
+@include alfresco-material-theme($theme);

lib/core/styles/prebuilt/adf-purple-green.scss

@@ -0,0 +1,11 @@
+@import '../theming';
+@import './all-theme';
+
+@include mat-core($alfresco-typography);
+
+$primary: mat-palette($mat-purple, 700, 500, 800);
+$accent:  mat-palette($mat-green, A200, A100, A400);
+$theme: mat-dark-theme($primary, $accent);
+
+@include angular-material-theme($theme);
+@include alfresco-material-theme($theme);