@agorapulse/ui-theme 0.0.3 → 1.0.0-SNAPSHOT

package/src/tokens/system/text.json

@@ -0,0 +1,173 @@
+{
+    "sys": {
+        "text": {
+            "color": {
+                "default": {
+                    "value": "{ref.color.grey.100}"
+                },
+                "light": {
+                    "value": "{ref.color.grey.80}"
+                },
+                "error": {
+                    "value": "{ref.color.red.100}"
+                }
+            },
+            "style": {
+                "h0": {
+                    "font-family": {
+                        "value": "{ref.font.family}"
+                    },
+                    "size": {
+                        "value": "{ref.font.size.xl}"
+                    },
+                    "weight": {
+                        "value": "{ref.font.weight.black}"
+                    },
+                    "line-height": {
+                        "value": "{ref.font.lineHeight.xxl}"
+                    }
+                },
+                "marketing": {
+                    "font-family": {
+                        "value": "{ref.font.family}"
+                    },
+                    "size": {
+                        "value": "{ref.font.size.xxl}"
+                    },
+                    "weight": {
+                        "value": "{ref.font.weight.extraBold}"
+                    },
+                    "line-height": {
+                        "value": "{ref.font.lineHeight.xxl}"
+                    }
+                },
+                "h1": {
+                    "font-family": {
+                        "value": "{ref.font.family}"
+                    },
+                    "size": {
+                        "value": "{ref.font.size.xxl}"
+                    },
+                    "weight": {
+                        "value": "{ref.font.weight.bold}"
+                    },
+                    "line-height": {
+                        "value": "{ref.font.lineHeight.xl}"
+                    }
+                },
+                "h2": {
+                    "font-family": {
+                        "value": "{ref.font.family}"
+                    },
+                    "size": {
+                        "value": "{ref.font.size.lg}"
+                    },
+                    "weight": {
+                        "value": "{ref.font.weight.bold}"
+                    },
+                    "line-height": {
+                        "value": "{ref.font.lineHeight.lg}"
+                    }
+                },
+                "subtitle": {
+                    "font-family": {
+                        "value": "{ref.font.family}"
+                    },
+                    "size": {
+                        "value": "{ref.font.size.md}"
+                    },
+                    "weight": {
+                        "value": "{ref.font.weight.regular}"
+                    },
+                    "line-height": {
+                        "value": "{ref.font.lineHeight.md}"
+                    }
+                },
+                "h3": {
+                    "font-family": {
+                        "value": "{ref.font.family}"
+                    },
+                    "size": {
+                        "value": "{ref.font.size.md}"
+                    },
+                    "weight": {
+                        "value": "{ref.font.weight.bold}"
+                    },
+                    "line-height": {
+                        "value": "{ref.font.lineHeight.lg}"
+                    }
+                },
+                "h4": {
+                    "font-family": {
+                        "value": "{ref.font.family}"
+                    },
+                    "size": {
+                        "value": "{ref.font.size.sm}"
+                    },
+                    "weight": {
+                        "value": "{ref.font.weight.bold}"
+                    },
+                    "line-height": {
+                        "value": "{ref.font.lineHeight.md}"
+                    }
+                },
+                "body": {
+                    "font-family": {
+                        "value": "{ref.font.family}"
+                    },
+                    "size": {
+                        "value": "{ref.font.size.sm}"
+                    },
+                    "weight": {
+                        "value": "{ref.font.weight.regular}"
+                    },
+                    "line-height": {
+                        "value": "{ref.font.lineHeight.sm}"
+                    }
+                },
+                "bodyBold": {
+                    "font-family": {
+                        "value": "{ref.font.family}"
+                    },
+                    "size": {
+                        "value": "{ref.font.size.sm}"
+                    },
+                    "weight": {
+                        "value": "{ref.font.weight.bold}"
+                    },
+                    "line-height": {
+                        "value": "{ref.font.lineHeight.sm}"
+                    }
+                },
+                "caption": {
+                    "font-family": {
+                        "value": "{ref.font.family}"
+                    },
+                    "size": {
+                        "value": "{ref.font.size.xs}"
+                    },
+                    "weight": {
+                        "value": "{ref.font.weight.regular}"
+                    },
+                    "line-height": {
+                        "value": "{ref.font.lineHeight.xs}"
+                    }
+                },
+                "captionBold": {
+                    "font-family": {
+                        "value": "{ref.font.family}"
+                    },
+                    "size": {
+                        "value": "{ref.font.size.xs}"
+                    },
+                    "weight": {
+                        "value": "{ref.font.weight.bold}"
+                    },
+                    "line-height": {
+                        "value": "{ref.font.lineHeight.xs}"
+                    }
+                }
+            }
+        }
+    }
+}

package/assets/style/_grid.scss

@@ -1,166 +0,0 @@
-/*
- * 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/style/components-custom-style/_mat-checkbox.scss

@@ -1,103 +0,0 @@
-@import '../variables';
-
-@mixin checkbox-state-style($color) {
-    .mat-checkbox-frame {
-        border-color:$color;
-    }
-    &.mat-checkbox-checked {
-        .mat-checkbox-background {
-            background-color: $color !important;
-        }
-    }
-}
-
-.mat-checkbox {
-    margin-right: $padding-m;
-    .mat-checkbox-frame {
-        background-color: white;
-        border-color: $form-control-default-border-color;
-        border-radius: $border-radius;
-        border-width: 1px;
-    }
-    .mat-checkbox-background {
-        border-radius: $border-radius;
-        .mat-checkbox-checkmark-path {
-            stroke-width: 4px;
-        }
-    }
-    .mat-checkbox-checkmark {
-        height: 10px;
-        top: 2px;
-    }
-    .mat-checkbox-layout {
-        align-items: center;
-
-        .mat-checkbox-label {
-            display: flex;
-            color: $form-control-default-font-color;
-            line-height: $font-line-height;
-            font-size: $font-size;
-        }
-    }
-    // Hover
-    /* Does not work?
-    &:hover {
-        .mat-checkbox-frame {
-            color: $form-control-hover-border-color !important;
-        }
-    }*/
-    // Checked
-    &.mat-checkbox-checked:not(.mat-checkbox-disabled) {
-        .mat-checkbox-background {
-            background-color: $form-control-selected-background-color !important;
-        }
-        .mat-checkbox-label {
-            color: $form-control-selected-font-color;
-        }
-    }
-    // Disabled
-    &.mat-checkbox-disabled {
-        .mat-checkbox-background {
-            background-color: $form-control-disabled-background-color;
-            border: 1px solid $form-control-disabled-border-color;
-        }
-        .mat-checkbox-label {
-            color: $form-control-disabled-font-color;
-        }
-        &.mat-checkbox-checked {
-            .mat-checkbox-background {
-                background-color: $form-control-disabled-selected-background-color !important;
-            }
-        }
-    }
-    // Invalid
-    &.invalid:not(.mat-checkbox-disabled),
-    &.ng-invalid.ng-dirty.ng-touched:not([disabled]) {
-        @include checkbox-state-style($color-error);
-    }
-    // Valid
-    &.valid:not(.mat-checkbox-disabled) {
-        @include checkbox-state-style($color-success);
-    }
-    // Full width
-    &.full-width {
-        width: 100%;
-        margin: 0;
-        .mat-checkbox-layout {
-            display: flex;
-            justify-content: space-between;
-            .mat-checkbox-inner-container {
-                margin: 0;
-            }
-        }
-    }
-}
-
-form.submitted {
-    .mat-checkbox {
-        // Invalid
-        &.ng-invalid {
-            @include checkbox-state-style($color-error);
-        }
-    }
-}

package/assets/style/components-custom-style/_mat-radio-button.scss

@@ -1,86 +0,0 @@
-@import '../variables';
-
-@mixin radio-button-state-style($color) {
-    .mat-radio-button:not(.mat-radio-disabled) {
-        .mat-radio-outer-circle {
-            border-color: $color;
-        }
-        &.mat-radio-checked {
-            .mat-radio-inner-circle {
-                background-color: $color;
-            }
-        }
-    }
-}
-
-.mat-radio-button {
-    margin-right: $padding-m;
-    .mat-radio-container {
-        height: 16px;
-        width: 16px;
-        .mat-radio-inner-circle {
-            border-color: $form-control-default-border-color;
-            left: -2px;
-            top: -2px;
-        }
-        .mat-radio-outer-circle {
-            border-color: $form-control-default-border-color;
-            border-width: 1px;
-            height: 16px;
-            width: 16px;
-        }
-    }
-    .mat-radio-label-content {
-        color: $form-control-default-font-color;
-    }
-    // Checked
-    &.mat-radio-checked:not(.mat-radio-disabled) {
-        .mat-radio-container {
-            .mat-radio-outer-circle {
-                border-color: $form-control-selected-border-color;
-            }
-        }
-        .mat-radio-label-content {
-            color: $form-control-selected-font-color;
-        }
-    }
-    // Disabled
-    &.mat-radio-disabled {
-        .mat-radio-outer-circle {
-            background-color: $form-control-disabled-background-color;
-            border-color: $form-control-disabled-border-color;
-        }
-        &.mat-radio-checked {
-            .mat-radio-inner-circle {
-                background-color: $form-control-disabled-border-color;
-            }
-            .mat-radio-outer-circle {
-                border-color: $form-control-disabled-border-color;
-            }
-        }
-        .mat-radio-label-content {
-            color: $form-control-disabled-font-color;
-        }
-    }
-}
-
-.mat-radio-group {
-    // Invalid
-    &.invalid,
-    &.ng-invalid.ng-touched {
-        @include radio-button-state-style($color-error);
-    }
-    // Valid
-    &.valid {
-        @include radio-button-state-style($color-success);
-    }
-}
-
-form.submitted {
-    .mat-radio-group {
-        // Invalid
-        &.ng-invalid {
-            @include radio-button-state-style($color-error);
-        }
-    }
-}

package/assets/style/components-custom-style/_mat-slide-toggle.scss

@@ -1,45 +0,0 @@
-@import '../variables';
-
-.mat-slide-toggle {
-    .mat-slide-toggle-bar {
-        background-color: $form-control-default-background-color;
-        border-radius: 16px;
-        box-shadow: none;
-        height: 16px;
-        width: 32px;
-        .mat-slide-toggle-thumb-container {
-            top: 2px;
-            left: 2px;
-            .mat-slide-toggle-thumb {
-                background-color: $color-white;
-                box-shadow: none;
-                height: 12px;
-                width: 12px;
-            }
-        }
-    }
-    .mat-slide-toggle-ripple {
-        display: none;
-    }
-    &.mat-disabled {
-        opacity: 1 !important;
-        .mat-slide-toggle-bar {
-            background-color: $form-control-disabled-selected-background-color;
-        }
-        .mat-slide-toggle-content {
-            color: $form-control-disabled-font-color;
-        }
-    }
-    &.mat-checked {
-        .mat-slide-toggle-bar {
-            background-color: $form-control-selected-background-color;
-            .mat-slide-toggle-thumb-container {
-                top: 2px;
-                left: 2px;
-            }
-        }
-        .mat-slide-toggle-content {
-            color: $form-control-selected-font-color;
-        }
-    }
-}