@agorapulse/ui-theme 0.0.1

package/assets/lib-ui-theme/style/_colors.scss

@@ -0,0 +1,323 @@
+@use '../../../../../node_modules/@angular/material/index' as mat;
+// Color palettes from the Material Design spec.
+// See https://www.google.com/design/spec/style/color.html
+//
+// Contrast colors are hard-coded because it is too difficult (probably impossible) to
+// calculate them. These contrast colors are pulled from the public Material Design spec swatches.
+// While the contrast colors in the spec are not prescriptive, we use them for convenience.
+
+// NOTE
+// Just the palette we created with the colors arthur gave us
+// http://mcg.mbitson.com/#!?mcgpalette0=%233f51b5
+// so we can use them like this:
+// mat-state($ap-orange, 500) = #ff4d00,
+// mat.get-contrast-color-from-palette($ap-orange, 500) = $white-87-opacity
+
+$black-87-opacity: rgba(black, 0.87);
+$white-87-opacity: rgba(white, 0.87);
+
+$colors-grey: (
+    100: #344563,
+    80: #5d6a82,
+    60: #858fa1,
+    40: #aeb5c1,
+    20: #d6dae0,
+    10: #eaecef,
+    5: #f5f5f7,
+);
+
+$colors-orange: (
+    110: #ff4d00,
+    105: #FF560D,
+    100: #ff6726,
+    85 : #ff7e46,
+    60: #ffa47d,
+    40: #ffc2a8,
+    20: #ffe1d4,
+    10: #ffefe9
+);
+
+$colors-soft-orange: (
+    100: #fbb500,
+    85: #fcc026,
+    60: #fdd366,
+    40: #fde199,
+    20: #fef0cc,
+    10: #fff8e6
+);
+
+$colors-electric-blue: (
+    100: #178dfe,
+    85: #3a9efe,
+    60: #74bbfe,
+    40: #a2d1ff,
+    20: #d1e8ff,
+    10: #e8f4ff
+);
+
+$colors-soft-blue: (
+    100: #61a4e4,
+    85 : #78b1e8,
+    60: #a0c8ef,
+    40: #c0dbf4,
+    20: #dfedfa,
+    10: #eff5fc
+);
+
+$colors-purple: (
+    100: #6554c0,
+    85 : #7c6dc9,
+    60: #a398d9,
+    40: #c1bbe6,
+    20: #e0ddf2,
+    10: #efedf8
+);
+
+$colors-green: (
+    100: #45B854,
+    85: #61c26d,
+    60: #8fd498,
+    40: #b5e3bb,
+    20: #daf1dd,
+    10: #ecf7ed
+);
+
+$colors-primary: (
+    50:  #fff7f3,
+    100: #ffeae0,
+    200: #ffcab3,
+    300: #ffa680,
+    400: #ff824d,
+    500: #ff6726,
+    600: #ff4600,
+    700: #ff3d00,
+    800: #ff3400,
+    900: #ff2500,
+    A100: #ffffff,
+    A200: #fff3f2,
+    A400: #ffc5bf,
+    A700: #ffaea6,
+    contrast: (
+        50: black,
+        100: black,
+        200: black,
+        300: black,
+        400: black,
+        500: $white-87-opacity,
+        600: $white-87-opacity,
+        700: $white-87-opacity,
+        800: $white-87-opacity,
+        900: $white-87-opacity,
+        A100: black,
+        A200: black,
+        A400: black,
+        A700: black,
+    )
+);
+
+$colors-accent: (
+    50: #e8f4ff,
+    100: #d1e8ff,
+    200: #a2d1ff,
+    300: #74bbfe,
+    400: #3a9efe,
+    500: #178dfe,
+    600: #008fe0,
+    700: #007bc2,
+    800: #0068a3,
+    900: #005485,
+    A100: #ffffff,
+    A200: #bde7ff,
+    A400: #1fadff,
+    A700: #007bc2,
+    contrast: (
+        50: black,
+        100: black,
+        200: black,
+        300: black,
+        400: black,
+        500: $white-87-opacity,
+        600: $white-87-opacity,
+        700: $white-87-opacity,
+        800: $white-87-opacity,
+        900: $white-87-opacity,
+        A100: black,
+        A200: black,
+        A400: black,
+        A700: $white-87-opacity,
+    )
+);
+
+$colors-red: (
+    100: #E81313,
+    85: #EB3636,
+    60: #F17171,
+    40: #F6A1A1,
+    20: #FAD0D0,
+    10: #FDE7E7
+);
+
+$colors-yellow: (
+    100: #FFE91F,
+    85: #FFEC41,
+    60: #FFF279,
+    40: #FFF6A5,
+    20: #FFFBD2,
+    10: #FFFDE9
+);
+
+$colors-warn: (
+    50: #ffffff,
+    100: #f6bebe,
+    200: #ef8c8c,
+    300: #e64e4e,
+    400: #e33333,
+    500: #d91e1e,
+    600: #be1a1a,
+    700: #a31717,
+    800: #881313,
+    900: #6d0f0f,
+    A100: #ffffff,
+    A200: #f6bebe,
+    A400: #e33333,
+    A700: #a31717,
+    contrast: (
+        50: black,
+        100: black,
+        200: black,
+        300: $white-87-opacity,
+        400: $white-87-opacity,
+        500: $white-87-opacity,
+        600: $white-87-opacity,
+        700: $white-87-opacity,
+        800: $white-87-opacity,
+        900: $white-87-opacity,
+        A100: black,
+        A200: black,
+        A400: $white-87-opacity,
+        A700: $white-87-opacity,
+    )
+);
+
+// Primary colors
+$color-blood-orange: #ff4d00;
+$color-pinkish-orange: #ff7b49;
+$color-charcoal-grey: #2a2f34;
+
+// Secondary colors
+$color-azure: #00aeef;
+$color-light-azure: #eaf5fd;
+$color-cool-green: #33c15d;
+$color-light-green: #ebfaef;
+$color-strawberry: #f4282d;
+$color-light-strawberry: #f8eded;
+$color-blue-grey: #8d98a9;
+$color-silver: #ced0da;
+$color-pale-grey: #dfe3e9;
+$color-grey-white: #f5f7f8;
+$color-queued: #8C50CF;
+$color-approve: #f4bd49; //mat.get-color-from-palette($ap-orange, 500);
+$color-alice-blue: #f3f9ff;
+
+// Colors of 2021 Agorapulse Website
+$color-peach: #FFF9F4;
+$color-blue-sky: #F5FDFF;
+$color-very-light-blue: #F6F8FF;
+$color-very-light-orange: #FFF7F3;
+$color-very-light-green: #F3FAFF;
+
+// Grey dark max
+$color-grey-dark-max: #212E44;
+
+$state-light-orange: #ffe2b3;
+//$state-light-transparent-orange: #fff1da;
+// Text colors
+$color-black: #344563;
+$color-cool-grey: #b4bbc6;
+$color-grey-blue: #68768c;
+$color-blue-link: #499EFF;
+
+$color-white: #ffffff;
+
+$color-grey-background: #F9F9FA;
+
+// Social networks colors
+$color-facebook: #1877f2;
+$color-google: #4e85e8;
+$color-instagram: #e1306c;
+$color-instagrammagenta: #c13584;
+$color-instagramblue: #5851db;
+$color-instagrampurple: #833ab4;
+$color-instagramorange: #f56040;
+$color-instagramyellow: #ffdc80;
+$color-linkedin: #2c67bc;
+$color-twitter: #55acee;
+$color-youtube: #ff0000;
+$color-instagramlink: #00376b;
+
+// Others
+//$state-tag: #5EA9FF;
+//$state-error: #DB1E1E;
+//$state-warning: #ff4d00;
+//$state-info: #00a2ff;
+//$state-success: #8DDE57;
+
+$ap-colors: (
+    'facebook': $color-facebook,
+    'google': $color-google,
+    'instagram': $color-instagram,
+    'instagrammagenta': $color-instagrammagenta,
+    'instagramblue': $color-instagramblue,
+    'instagrampurple': $color-instagrampurple,
+    'instagramorange': $color-instagramorange,
+    'instagramyellow': $color-instagramyellow,
+    'linkedin': $color-linkedin,
+    'twitter': $color-twitter,
+    'youtube': $color-youtube,
+    'blood-orange': $color-blood-orange,
+    'pinkish-orange': $color-pinkish-orange,
+    'charcoal-grey': $color-charcoal-grey,
+    'azure': $color-azure,
+    'light-azure':$color-light-azure,
+    'blue-grey':$color-blue-grey,
+    'silver': $color-silver,
+    //'middle-grey':$state-disabled,
+    'pale-grey':$color-pale-grey,
+    'grey-white':$color-grey-white,
+    'cool-grey':$color-cool-grey,
+    'black':$color-black,
+    'grey-blue':$color-grey-blue,
+    'strawberry':$color-strawberry,
+    'light-strawberry':$color-light-strawberry,
+    'white':$color-white,
+    'cool-green':$color-cool-green,
+    'light-green':$color-light-green,
+    'transparent': transparent,
+
+    'c0': #A566A5,
+    'c1': #C7AB82,
+    'c2': #F2713C,
+    'c3': #FFD006,
+    'c4': #94C5AA,
+    'c5': #2A9D8F,
+    'c6': #78ACD8,
+    'c7': #525A9E,
+    'c8': #6A2459,
+    'c9': #74729E,
+);
+
+// Utility class for colors
+@each $key, $value in $ap-colors {
+    [color="#{$key}"] {
+        color: $value;
+    }
+    [bgcolor="#{$key}"] {
+        background-color: $value;
+    }
+    [hcolor="#{$key}"]:hover {
+        background-color: $value;
+    }
+    [border="#{$key}"] {
+        border: 1px solid $value;
+    }
+}

package/assets/lib-ui-theme/style/_font-face.scss

@@ -0,0 +1,35 @@
+// Import Averta Regular
+@font-face {
+    font-family: "Averta";
+    font-weight: normal;
+    font-style: normal;
+    src: url("/assets/lib-ui-theme/fonts/averta/AvertaStd-Regular.otf") format("opentype");
+}
+
+// Import Averta Bold
+@font-face {
+    font-family: "Averta";
+    src: url("/assets/lib-ui-theme/fonts/averta/AvertaStd-Bold.otf") format("opentype");
+    font-weight: bold;
+}
+
+// Import Averta Semibold
+@font-face {
+    font-family: "Averta";
+    src: url("/assets/lib-ui-theme/fonts/averta/AvertaStd-Semibold.otf") format("opentype");
+    font-weight: 600;
+}
+
+/* Import Averta extra bold */
+@font-face {
+    font-family: "Averta";
+    src: url("/assets/lib-ui-theme/fonts/averta/AvertaStd-Extrabold.otf") format("opentype");
+    font-weight: 800;
+}
+
+// Import Averta Black
+@font-face {
+    font-family: "Averta";
+    src: url("/assets/lib-ui-theme/fonts/averta/AvertaStd-Black.otf") format("opentype");
+    font-weight: 900;
+}

package/assets/lib-ui-theme/style/_grid.scss

@@ -0,0 +1,166 @@
+/*
+ * Grid, mostly from https://materializecss.com/grid.html
+ */
+
+@use "sass:math";
+
+body {
+    margin : 0 !important;
+}
+
+.container {
+    margin: 0 auto;
+    max-width: 1280px;
+    width: 90%;
+}
+@media #{$medium-and-up} {
+    .container {
+        width: 85%;
+    }
+}
+@media #{$large-and-up} {
+    .container {
+        width: 70%;
+    }
+}
+.col .row {
+    margin-left: (-1 * $gutter-width * 0.5);
+    margin-right: (-1 * $gutter-width * 0.5);
+}
+
+.section {
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+
+    &.no-pad {
+        padding: 0;
+    }
+    &.no-pad-bot {
+        padding-bottom: 0;
+    }
+    &.no-pad-top {
+        padding-top: 0;
+    }
+}
+
+
+// Mixins to eliminate code repitition
+@mixin reset-offset {
+    margin-left: auto;
+    left: auto;
+    right: auto;
+}
+@mixin grid-classes($size, $i, $perc) {
+    &.offset-#{$size}#{$i} {
+        margin-left: $perc;
+    }
+    &.pull-#{$size}#{$i} {
+        right: $perc;
+    }
+    &.push-#{$size}#{$i} {
+        left: $perc;
+    }
+}
+
+
+.row {
+    margin-left: auto;
+    margin-right: auto;
+    margin-bottom: 20px;
+
+    // Clear floating children
+    &:after {
+        content: "";
+        display: table;
+        clear: both;
+    }
+
+    .col {
+        float: left;
+        box-sizing: border-box;
+        padding: 0 $gutter-width * 0.5;
+        min-height: 1px;
+
+        &[class*="push-"],
+        &[class*="pull-"] {
+            position: relative;
+        }
+
+        $i: 1;
+        @while $i <= $num-cols {
+            $perc: unquote(math.div(100, math.div($num-cols, $i)) + "%");
+            &.s#{$i} {
+                width: $perc;
+                @include reset-offset;
+            }
+            $i: $i + 1;
+        }
+
+        $i: 1;
+        @while $i <= $num-cols {
+            $perc: unquote(math.div(100, math.div($num-cols, $i)) + "%");
+            @include grid-classes("s", $i, $perc);
+            $i: $i + 1;
+        }
+
+        @media #{$medium-and-up} {
+
+            $i: 1;
+            @while $i <= $num-cols {
+                $perc: unquote(math.div(100, math.div($num-cols, $i)) + "%");
+                &.m#{$i} {
+                    width: $perc;
+                    @include reset-offset;
+                }
+                $i: $i + 1
+            }
+
+            $i: 1;
+            @while $i <= $num-cols {
+                $perc: unquote(math.div(100, math.div($num-cols, $i)) + "%");
+                @include grid-classes("m", $i, $perc);
+                $i: $i + 1;
+            }
+        }
+
+        @media #{$large-and-up} {
+
+            $i: 1;
+            @while $i <= $num-cols {
+                $perc: unquote(math.div(100, math.div($num-cols, $i)) + "%");
+                &.l#{$i} {
+                    width: $perc;
+                    @include reset-offset;
+                }
+                $i: $i + 1;
+            }
+
+            $i: 1;
+            @while $i <= $num-cols {
+                $perc: unquote(math.div(100, math.div($num-cols, $i)) + "%");
+                @include grid-classes("l", $i, $perc);
+                $i: $i + 1;
+            }
+        }
+
+        @media #{$extra-large-and-up} {
+
+            $i: 1;
+            @while $i <= $num-cols {
+                $perc: unquote(math.div(100, math.div($num-cols, $i)) + "%");
+                &.xl#{$i} {
+                    width: $perc;
+                    @include reset-offset;
+                }
+                $i: $i + 1;
+            }
+
+            $i: 1;
+            @while $i <= $num-cols {
+                $perc: unquote(math.div(100, math.div($num-cols, $i)) + "%");
+                @include grid-classes("xl", $i, $perc);
+                $i: $i + 1;
+            }
+        }
+    }
+}

package/assets/lib-ui-theme/style/_helpers.scss

@@ -0,0 +1,78 @@
+@import 'variables';
+
+/*
+ * Helpers, mostly from https://materializecss.com/helpers.html
+ */
+blockquote {
+    border-left: 5px solid $color-azure;
+    margin: $padding-l 0;
+    padding-left: 1.5rem;
+    font-style: italic;
+}
+
+.divider {
+    height: 1px;
+    overflow: hidden;
+    background-color: $color-silver;
+}
+
+
+.left-align {
+    text-align: left;
+}
+.center-align {
+    text-align: center;
+}
+.right-align {
+    text-align: right;
+}
+
+.valign-wrapper {
+    align-items: center;
+    display: flex;
+}
+
+.truncate {
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.circle {
+    border-radius: 50%;
+}
+
+.center-block {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+img.responsive-img,
+video.responsive-video {
+    max-width: 100%;
+    height: auto;
+}
+
+.video-container {
+    position: relative;
+    padding-bottom: 56.25%;
+    height: 0;
+    overflow: hidden;
+}
+object, embed {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+
+/* Other (used?) */
+.square, .rounded, .round {
+    overflow: hidden;
+}
+.rounded {
+    border-radius: 100%;
+}

package/assets/lib-ui-theme/style/_mat-typography.scss

@@ -0,0 +1,85 @@
+@use '../../../../../node_modules/@angular/material/index' as mat;
+@import 'colors';
+@import 'variables';
+
+/*
+ * TYPOGRAPHY
+ * See https://material.angular.io/guide/typography
+ */
+
+// Override typography for all Angular Material, including mat-base-typography and all components.
+$custom-typography: mat.define-typography-config(
+    $font-family: $font-family,
+    $headline: mat.define-typography-level($font-size-h1, $font-line-height-h1, $font-weight-semibold),
+    $title: mat.define-typography-level($font-size-h2, $font-line-height-h2, $font-weight-semibold),
+    $subheading-2: mat.define-typography-level($font-size-h3, $font-line-height-h3, $font-weight-semibold),
+    $body-1: mat.define-typography-level($font-size, $font-line-height, $font-weight),
+    $body-2: mat.define-typography-level($font-size, $font-line-height, $font-weight-semibold),
+    $caption: mat.define-typography-level($font-size-s, $font-line-height-s, $font-weight)
+    //$button: mat.define-typography-level(16px, 24px, 500),
+    //$input: mat.define-typography-level(16px, 24px, 500)
+);
+@include mat.all-component-typographies($custom-typography);
+
+// Override base header tags (so that we don't have to add Material classes, e.g: class="mat-h1")
+h1, h2, h3, h4 {
+    color: $color-black;
+    font-family: $font-family-header;
+}
+h1 {
+    font-size: mat.font-size($custom-typography, headline);
+    line-height: mat.line-height($custom-typography, headline);
+    margin-bottom: $padding-s;
+}
+h2 {
+    font-size: mat.font-size($custom-typography, title);
+    line-height: mat.line-height($custom-typography, title);
+    margin-bottom: $padding-sl;
+}
+h3 {
+    font-size: mat.font-size($custom-typography, subheading-2);
+    line-height: mat.line-height($custom-typography, subheading-2);
+    margin-bottom: $padding-sm;
+}
+h4 {
+    font-size: $font-size-h4;
+    font-weight: bold;
+    line-height: $font-line-height-h4;
+    margin-bottom: $padding-sm;
+}
+p {
+    margin: 0 0 $padding-ml;
+}
+p.large,
+span.large {
+    font-size: 16px;
+    line-height: 20px;
+}
+p.caption,
+span.caption,
+.mat-caption,
+.mat-caption {
+    font-size: 12px;
+    line-height: 15px;
+}
+p.small,
+span.small,
+small {
+    font-size: 10px;
+    line-height: 14px;
+}
+
+// Override default text state
+body {
+    .mat-drawer-container{
+        color: $font-color;
+    }
+}
+
+a {
+    color: $link-color;
+    text-decoration: none;
+
+    // Gets rid of tap active state
+    -webkit-tap-highlight-color: transparent;
+}