@agorapulse/ui-theme 0.0.3 → 1.0.0-SNAPSHOT

package/assets/style/_colors.scss

@@ -1,17 +1,3 @@
-@use '~@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);
@@ -28,62 +14,73 @@ $colors-grey: (
 
 $colors-orange: (
     110: #ff4d00,
-    105: #FF560D,
+    105: #ff560d,
     100: #ff6726,
-    85 : #ff7e46,
+    85: #ff7e46,
     60: #ffa47d,
     40: #ffc2a8,
     20: #ffe1d4,
-    10: #ffefe9
+    10: #ffefe9,
 );
 
 $colors-soft-orange: (
+    150: #a66200,
     100: #fbb500,
     85: #fcc026,
     60: #fdd366,
     40: #fde199,
     20: #fef0cc,
-    10: #fff8e6
+    10: #fff8e6,
+    5: #fffef2,
 );
 
 $colors-electric-blue: (
+    150: #0e72d6,
     100: #178dfe,
     85: #3a9efe,
     60: #74bbfe,
     40: #a2d1ff,
     20: #d1e8ff,
-    10: #e8f4ff
+    10: #e8f4ff,
+    5: #f3f9ff,
 );
 
 $colors-soft-blue: (
     100: #61a4e4,
-    85 : #78b1e8,
+    85: #78b1e8,
     60: #a0c8ef,
     40: #c0dbf4,
     20: #dfedfa,
-    10: #eff5fc
+    10: #eff5fc,
+);
+
+$colors-menthol: (
+    150: #057e7a,
+    40: #9fd9d6,
+    10: #f1f9f8,
 );
 
 $colors-purple: (
     100: #6554c0,
-    85 : #7c6dc9,
+    85: #7c6dc9,
     60: #a398d9,
     40: #c1bbe6,
     20: #e0ddf2,
-    10: #efedf8
+    10: #efedf8,
 );
 
 $colors-green: (
-    100: #45B854,
+    100: #45b854,
     85: #61c26d,
     60: #8fd498,
     40: #b5e3bb,
     20: #daf1dd,
-    10: #ecf7ed
+    10: #ecf7ed,
+    5: #f2f7f3,
 );
 
 $colors-primary: (
-    50:  #fff7f3,
+    50: #fff7f3,
     100: #ffeae0,
     200: #ffcab3,
     300: #ffa680,
@@ -112,7 +109,7 @@ $colors-primary: (
         A200: black,
         A400: black,
         A700: black,
-    )
+    ),
 );
 
 $colors-accent: (
@@ -145,25 +142,33 @@ $colors-accent: (
         A200: black,
         A400: black,
         A700: $white-87-opacity,
-    )
+    ),
 );
 
 $colors-red: (
-    100: #E81313,
-    85: #EB3636,
-    60: #F17171,
-    40: #F6A1A1,
-    20: #FAD0D0,
-    10: #FDE7E7
+    100: #e81313,
+    85: #eb3636,
+    60: #f17171,
+    40: #f6a1a1,
+    20: #fad0d0,
+    10: #fde7e7,
+    5: #fdf5f5,
+);
+
+$colors-soft-red: (
+    100: #ff5353,
+    85: #ff6d6d,
+    60: #ff9898,
+    10: #fff9f9,
 );
 
 $colors-yellow: (
-    100: #FFE91F,
-    85: #FFEC41,
-    60: #FFF279,
-    40: #FFF6A5,
-    20: #FFFBD2,
-    10: #FFFDE9
+    100: #ffe91f,
+    85: #ffec41,
+    60: #fff279,
+    40: #fff6a5,
+    20: #fffbd2,
+    10: #fffde9,
 );
 
 $colors-warn: (
@@ -196,7 +201,7 @@ $colors-warn: (
         A200: black,
         A400: $white-87-opacity,
         A700: $white-87-opacity,
-    )
+    ),
 );
 
 // Primary colors
@@ -215,19 +220,19 @@ $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-queued: #8c50cf;
+$color-approve: #f4bd49;
 $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;
+$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;
+$color-grey-dark-max: #212e44;
 
 $state-light-orange: #ffe2b3;
 //$state-light-transparent-orange: #fff1da;
@@ -235,14 +240,14 @@ $state-light-orange: #ffe2b3;
 $color-black: #344563;
 $color-cool-grey: #b4bbc6;
 $color-grey-blue: #68768c;
-$color-blue-link: #499EFF;
+$color-blue-link: #499eff;
 
 $color-white: #ffffff;
 
-$color-grey-background: #F9F9FA;
+$color-grey-background: #f9f9fa;
 
 // Social networks colors
-$color-facebook: #1877f2;
+$color-facebook: #0866ff;
 $color-google: #4e85e8;
 $color-instagram: #e1306c;
 $color-instagrammagenta: #c13584;
@@ -254,6 +259,7 @@ $color-linkedin: #2c67bc;
 $color-twitter: #55acee;
 $color-youtube: #ff0000;
 $color-instagramlink: #00376b;
+$color-web: #178dfe;
 
 // Others
 //$state-tag: #5EA9FF;
@@ -278,46 +284,46 @@ $ap-colors: (
     'pinkish-orange': $color-pinkish-orange,
     'charcoal-grey': $color-charcoal-grey,
     'azure': $color-azure,
-    'light-azure':$color-light-azure,
-    'blue-grey':$color-blue-grey,
+    '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,
+    '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,
+    '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='#{$key}'] {
         color: $value;
     }
-    [bgcolor="#{$key}"] {
+    [bgcolor='#{$key}'] {
         background-color: $value;
     }
-    [hcolor="#{$key}"]:hover {
+    [hcolor='#{$key}']:hover {
         background-color: $value;
     }
-    [border="#{$key}"] {
+    [border='#{$key}'] {
         border: 1px solid $value;
     }
 }

package/assets/style/_font-face.scss

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

package/assets/style/_helpers.scss

@@ -16,7 +16,6 @@ blockquote {
     background-color: $color-silver;
 }
 
-
 .left-align {
     text-align: left;
 }
@@ -61,7 +60,8 @@ video.responsive-video {
     height: 0;
     overflow: hidden;
 }
-object, embed {
+object,
+embed {
     position: absolute;
     top: 0;
     left: 0;
@@ -70,7 +70,9 @@ object, embed {
 }
 
 /* Other (used?) */
-.square, .rounded, .round {
+.square,
+.rounded,
+.round {
     overflow: hidden;
 }
 .rounded {

package/assets/style/_input.scss

@@ -0,0 +1,52 @@
+.ap-input {
+    border: 1px solid var(--comp-input-border-default-color);
+    border-radius: var(--comp-input-border-radius);
+    color: var(--comp-input-text-default-color);
+    font-family: var(--comp-input-text-font-family);
+    font-size: var(--comp-input-text-size);
+    font-weight: var(--comp-input-text-font-weight);
+    padding: var(--ref-spacing-xxs) var(--ref-spacing-xs);
+    &::placeholder {
+        color: var(--comp-input-text-placeholder-color);
+    }
+    &:disabled {
+        background-color: var(--comp-input-fill-disabled-color);
+        color: var(--comp-input-text-disabled-color);
+    }
+    &:focus {
+        border-color: var(--comp-input-border-focused-color);
+    }
+    // Invalid
+    &.invalid:not([disabled]):not(:focus):not(:hover),
+    &.ng-invalid.ng-dirty.ng-touched:not([disabled]):not(:focus):not(:hover) {
+        border: 1px solid var(--comp-input-border-error-color);
+    }
+    // Valid
+    &.valid:not([disabled]):not(:focus):not(:hover) {
+        border: 1px solid var(--comp-input-border-success-color);
+    }
+
+    // Hover
+    &:not(:focus):not([disabled]):hover {
+        border-color: var(--comp-input-border-hover-color);
+    }
+    &.ap-textarea.resizable {
+        resize: auto;
+    }
+    &.ap-textarea {
+        min-width: 256px;
+    }
+    &[type='search']::-webkit-search-decoration,
+    &[type='search']::-webkit-search-cancel-button,
+    &[type='search']::-webkit-search-results-button,
+    &[type='search']::-webkit-search-results-decoration {
+        display: none;
+    }
+    &.full-width {
+        width: 100%;
+    }
+}
+
+input:placeholder-shown {
+    text-overflow: ellipsis;
+}

package/assets/style/_link.scss

@@ -0,0 +1,70 @@
+a {
+    display: inline-flex;
+    gap: var(--comp-link-spacing);
+    font-family: var(--comp-link-text-font-family);
+    font-weight: var(--comp-link-text-font-weight);
+    line-height: var(--comp-link-text-line-height);
+    font-size: var(--comp-link-text-size);
+    align-items: center;
+    text-decoration: underline;
+    -webkit-tap-highlight-color: transparent;
+    cursor: pointer;
+
+    &.small {
+        font-family: var(--comp-link-small-text-style-font-family);
+        font-weight: var(--comp-link-small-text-style-font-weight);
+        line-height: var(--comp-link-small-text-style-line-height);
+        font-size: var(--comp-link-small-text-style-size);
+    }
+
+    &.big {
+        font-family: var(--comp-link-big-text-style-font-family);
+        font-weight: var(--comp-link-big-text-style-font-weight);
+        line-height: var(--comp-link-big-text-style-line-height);
+        font-size: var(--comp-link-big-text-style-size);
+    }
+
+    &.standalone {
+        text-decoration: none;
+        font-family: var(--comp-link-standalone-default-text-style-font-family);
+        font-weight: var(--comp-link-standalone-default-text-style-font-weight);
+        line-height: var(--comp-link-standalone-default-text-style-line-height);
+        font-size: var(--comp-link-standalone-default-text-style-size);
+        color: var(--comp-link-default-color);
+
+        &.small {
+            font-family: var(--comp-link-standalone-small-text-style-font-family);
+            font-weight: var(--comp-link-standalone-small-text-style-font-weight);
+            line-height: var(--comp-link-standalone-small-text-style-line-height);
+            font-size: var(--comp-link-standalone-small-text-style-size);
+        }
+    }
+
+    &:not(:visited) {
+        color: var(--comp-link-default-color);
+    }
+
+    &:hover {
+        color: var(--comp-link-hover-color);
+    }
+
+    &:active:not(:visited) {
+        color: var(--comp-link-clicked-color);
+    }
+
+    &:visited:not(.standalone) {
+        color: var(--comp-link-visited-color);
+    }
+
+    &[disabled='true'] {
+        color: var(--comp-link-disabled-color);
+        pointer-events: none;
+    }
+
+    ap-symbol {
+        min-width: var(--comp-link-icon-size);
+        min-height: var(--comp-link-icon-size);
+        max-width: var(--comp-link-icon-size);
+        max-height: var(--comp-link-icon-size);
+    }
+}

package/assets/style/_mat-typography.scss

@@ -1,54 +1,51 @@
-@use '../../../../node_modules/@angular/material/index' as mat;
+@use '@angular/material' as mat;
 @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,
+h2,
+h3,
+h4 {
+    color: var(--sys-text-color-default);
+    font-family: var(--sys-text-style-body-font-family);
 }
 h1 {
-    font-size: mat.font-size($custom-typography, headline);
-    line-height: mat.line-height($custom-typography, headline);
-    margin-bottom: $padding-s;
+    font-size: var(--sys-text-style-h1-size);
+    line-height: var(--sys-text-style-h1-line-height);
+    font-weight: var(--sys-text-style-h1-weight);
+    margin-bottom: var(--ref-spacing-xxs);
 }
 h2 {
-    font-size: mat.font-size($custom-typography, title);
-    line-height: mat.line-height($custom-typography, title);
-    margin-bottom: $padding-sl;
+    font-size: var(--sys-text-style-h2-size);
+    line-height: var(--sys-text-style-h2-line-height);
+    font-weight: var(--sys-text-style-h2-weight);
+    margin-bottom: var(--ref-spacing-xxs);
 }
 h3 {
-    font-size: mat.font-size($custom-typography, subheading-2);
-    line-height: mat.line-height($custom-typography, subheading-2);
-    margin-bottom: $padding-sm;
+    font-size: var(--sys-text-style-h3-size);
+    line-height: var(--sys-text-style-h3-line-height);
+    font-weight: var(--sys-text-style-h3-weight);
+    margin-bottom: var(--ref-spacing-xxxs);
 }
 h4 {
-    font-size: $font-size-h4;
-    font-weight: bold;
-    line-height: $font-line-height-h4;
-    margin-bottom: $padding-sm;
+    font-size: var(--sys-text-style-h4-size);
+    line-height: var(--sys-text-style-h4-line-height);
+    font-weight: var(--sys-text-style-h4-weight);
+    margin-bottom: var(--ref-spacing-xxxs);
 }
 p {
     margin: 0 0 $padding-ml;
 }
+.h0 {
+    font-size: var(--sys-text-style-h0-size);
+    line-height: var(--sys-text-style-h0-line-height);
+    font-weight: var(--sys-text-style-h0-weight);
+}
+.ap-subtitle {
+    font-size: var(--sys-text-style-subtitle-size);
+    line-height: var(--sys-text-style-subtitle-line-height);
+    font-weight: var(--sys-text-style-subtitle-weight);
+}
 p.large,
 span.large {
     font-size: 16px;
@@ -56,10 +53,10 @@ span.large {
 }
 p.caption,
 span.caption,
-.mat-caption,
+.ap-caption .mat-caption,
 .mat-caption {
-    font-size: 12px;
-    line-height: 15px;
+    font-size: var(--sys-text-style-caption-size);
+    line-height: var(--sys-text-style-caption-line-height);
 }
 p.small,
 span.small,
@@ -68,17 +65,17 @@ small {
     line-height: 14px;
 }
 
+.bold {
+    font-weight: var(--sys-text-style-body-bold-weight);
+}
+
+.itaclic {
+    font-style: italic;
+}
+
 // Override default text state
 body {
-    .mat-drawer-container{
+    .mat-drawer-container {
         color: $font-color;
     }
 }
-
-a {
-    color: $link-color;
-    text-decoration: none;
-
-    // Gets rid of tap active state
-    -webkit-tap-highlight-color: transparent;
-}