@inchurch/matcha-theme 20.0.3

package/tokens/_spacing-tokens.scss

@@ -0,0 +1,94 @@
+$unit-base-pixels: px;
+$unit-base-percent: .0%;
+
+// Border Radius — aligned with Figma (matcha/radius/*)
+$border-radius-none: 0px;
+$border-radius-sm: 2px;
+$border-radius-md: 4px;
+$border-radius-lg: 8px;
+$border-radius-xl: 16px;
+$border-radius-2xl: 24px;
+$border-radius-pill: 9999px;
+
+// Border Width — aligned with Figma (matcha/border/*)
+$border-width-none: 0px;
+$border-width-hairline: 1px;
+$border-width-thin: 2px;
+$border-width-medium: 4px;
+$border-width-thick: 8px;
+$border-style-none: none;
+$border-style-solid: solid;
+$border-style-dashed: dashed;
+$border-style-dotted: dotted;
+
+$size-padding-minimum: 8px;
+$size-padding-xxsmall: 16px;
+$size-padding-xsmall: 24px;
+$size-padding-small: 32px;
+$size-padding-medium: 40px;
+$size-padding-big: 48px;
+$size-padding-bigger: 56px;
+$size-padding-tall: 64px;
+$size-padding-taller: 72px;
+$size-padding-large: 80px;
+$size-padding-xlarge: 88px;
+$size-padding-xxlarge: 96px;
+$size-padding-larger: 104px;
+$size-padding-largest: 112px;
+$size-padding-wider: 120px;
+$spacing-stack-min: 8px 0; // 8px
+$spacing-stack-xxs: 16px 0; // 16px
+$spacing-stack-xs: 24px 0; // 24px
+$spacing-stack-s: 32px 0; // 32px
+$spacing-stack-m: 40px 0; // 40px
+$spacing-stack-big: 48px 0; // 48px
+$spacing-stack-bgg: 56px 0; // 56px
+$spacing-stack-tll: 64px 0; // 64px
+$spacing-stack-tlr: 72px 0; // 72px
+$spacing-stack-lg: 80px 0; // 80px
+$spacing-stack-xl: 88px 0; // 88px
+$spacing-stack-xxl: 96px 0; // 96px
+$spacing-stack-lgr: 104px 0; // 104px
+$spacing-stack-lgs: 112px 0; // 112px
+$spacing-inline-min: 0 8px; // 8px
+$spacing-inline-xxs: 0 16px; // 16px
+$spacing-inline-xs: 0 24px; // 24px
+$spacing-inline-s: 0 32px; // 32px
+$spacing-inline-m: 0 40px; // 40px
+$spacing-inline-big: 0 48px; // 48px
+$spacing-inline-bgg: 0 56px; // 56px
+$spacing-inline-tll: 0 64px; // 64px
+$spacing-inline-tlr: 0 72px; // 72px
+$spacing-inline-lg: 0 80px; // 80px
+$spacing-inline-xl: 0 88px; // 88px
+$spacing-inline-xxl: 0 96px; // 96px
+$spacing-inline-lgr: 0 104px; // 104px
+$spacing-inline-lgs: 0 112px; // 112px
+$spacing-inset-min: 8px 8px; // 8px
+$spacing-inset-xxs: 16px 16px; // 16px
+$spacing-inset-xs: 24px 24px; // 24px
+$spacing-inset-s: 32px 32px; // 32px
+$spacing-inset-m: 40px 40px; // 40px
+$spacing-inset-big: 48px 48px; // 48px
+$spacing-inset-bgg: 56px 56px; // 56px
+$spacing-inset-tll: 64px 64px; // 64px
+$spacing-inset-tlr: 72px 72px; // 72px
+$spacing-inset-lg: 80px 80px; // 80px
+$spacing-inset-xl: 88px 88px; // 88px
+$spacing-inset-xxl: 96px 96px; // 96px
+$spacing-inset-lgr: 104px 104px; // 104px
+$spacing-inset-lgs: 112px 112px; // 112px
+$spacing-squish-min: 8px 16px; // 8px
+$spacing-squish-xxs: 16px 24px; // 16px
+$spacing-squish-xs: 24px 32px; // 24px
+$spacing-squish-s: 32px 40px; // 32px
+$spacing-squish-m: 40px 48px; // 40px
+$spacing-squish-big: 48px 56px; // 48px
+$spacing-squish-bgg: 56px 64px; // 56px
+$spacing-squish-tll: 64px 72px; // 64px
+$spacing-squish-tlr: 72px 80px; // 72px
+$spacing-squish-lg: 80px 88px; // 80px
+$spacing-squish-xl: 88px 96px; // 88px
+$spacing-squish-xxl: 96px 104px; // 96px
+$spacing-squish-lgr: 104px 112px; // 104px
+$spacing-squish-lgs: 112px 120px; // 112px

package/tokens/_typography-tokens.scss

@@ -0,0 +1,65 @@
+// =============================================================================
+// Typography Tokens — Aligned with Figma matcha/text/* (Manrope)
+// =============================================================================
+
+// ── Font Family ──
+$font-family-base: 'Manrope, "Helvetica Neue", Arial, sans-serif';
+$font-family-mono: '"JetBrains Mono", "Fira Code", "Consolas", monospace';
+
+// ── Font Sizes (matches Figma scale) ──
+$font-size-2xs: 10px;
+$font-size-xs: 11px;
+$font-size-sm: 12px;
+$font-size-md: 14px;
+$font-size-lg: 16px;
+$font-size-xl: 18px;
+$font-size-2xl: 20px;
+$font-size-3xl: 24px;
+$font-size-4xl: 32px;
+$font-size-5xl: 40px;
+$font-size-base: 16px;
+
+// ── Font Weights (Manrope supports 200-800) ──
+$font-weight-regular: 400;
+$font-weight-medium: 500;
+$font-weight-semibold: 600;
+$font-weight-bold: 700;
+$font-weight-extrabold: 800;
+
+// ── Line Heights (matches Figma styles) ──
+$line-height-xs: 14px;
+$line-height-sm: 16px;
+$line-height-md: 20px;
+$line-height-lg: 22px;
+$line-height-xl: 24px;
+$line-height-2xl: 28px;
+$line-height-3xl: 32px;
+$line-height-4xl: 40px;
+$line-height-5xl: 48px;
+
+// ── Legacy aliases (retrocompatibility) ──
+$size-font-xxsmall: $font-size-2xs;
+$size-font-xsmall: $font-size-sm;
+$size-font-small: $font-size-md;
+$size-font-medium: $font-size-lg;
+$size-font-big: $font-size-xl;
+$size-font-large: $font-size-2xl;
+$size-font-xlarge: $font-size-3xl;
+$size-font-xxlarge: $font-size-4xl;
+$size-font-2-xxlarge: $font-size-5xl;
+$size-font-base: $font-size-base;
+$size-font-weight-thin: 100;
+$size-font-weight-extra-light: 200;
+$size-font-weight-light: 300;
+$size-font-weight-normal: $font-weight-regular;
+$size-font-weight-medium: $font-weight-medium;
+$size-font-weight-semi-bold: $font-weight-semibold;
+$size-font-weight-bold: $font-weight-bold;
+$size-font-weight-extra-bold: $font-weight-extrabold;
+$size-font-weight-black: 900;
+$size-line-height-minimum: 32px;
+$size-line-height-small: 40px;
+$size-line-height-medium: 48px;
+$size-line-height-large: 56px;
+$size-line-height-xlarge: 64px;
+$size-line-height-xxlarge: 72px;

package/vendors/angular-editor.scss

@@ -0,0 +1,56 @@
+@mixin vendor-angular-editor($theme) {
+    $is-dark-theme: map-get($theme, is-dark);
+    $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);
+
+    .angular-editor {
+        .angular-editor-toolbar {
+            font: 100 0.8rem/15px Roboto, Arial, sans-serif !important;
+            background-color: map-get($background, disabled) !important;
+            padding: 8px !important;
+            // height: 56px;
+            border: 0px !important;
+
+            .angular-editor-toolbar-set {
+                .angular-editor-button {
+                    background-color: transparent !important;
+                    vertical-align: middle !important;
+                    border: 0 !important;
+                    padding: 8px !important;
+                    float: left !important;
+                    border-radius: 50px;
+
+                    &:hover {
+                        background: map-get($background, card-alpha) !important;
+                    }
+
+                    &.active {
+                        background: map-get($background, card) !important;
+                    }
+
+                    i {
+                        color: map-get($foreground, foreground);
+                        height: 24px !important;
+                        width: 24px !important;
+                        font-size: 16px !important;
+                        line-height: 24px !important;
+                    }
+                }
+            }
+        }
+
+        .angular-editor-textarea {
+            min-height: 100px !important;
+            height: 30vh !important;
+            padding: 16px !important;
+            border: 0px !important;
+            background-color: transparent !important;
+            overflow-x: hidden !important;
+            overflow-y: auto !important;
+            position: relative !important;
+        }
+    }
+}

package/vendors/angular-material-fixes.scss

@@ -0,0 +1,297 @@
+@mixin vendor-angular-material-fixes($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);
+
+    // -------------------------------------------------------------------------------------------------------------------
+    // @ ANGULAR MATERIAL - To attempt to fix some of the issues with the Angular Material components we have to override
+    // -------------------------------------------------------------------------------------------------------------------
+    --mdc-typography-button-letter-spacing: 0;
+    .mat-mdc-unelevated-button,
+    .mat-mdc-raised-button,
+    .mat-mdc-fab,
+    .mat-mdc-mini-fab {
+        --mdc-filled-button-container-shape: 8px;
+        &:not([disabled="true"]) {
+            &.mat-primary {
+                color: map-get($primary, "default-contrast");
+            }
+            &.mat-accent {
+                color: map-get($accent, "default-contrast");
+            }
+            &.mat-warn {
+                color: map-get($warn, "default-contrast");
+            }
+        }
+    }
+    .mat-mdc-outlined-button {
+        --mdc-outlined-button-container-shape: 8px;
+        --mdc-outlined-button-outline-color: currentColor;
+        --mdc-outlined-button-outline-width: 0;
+        box-shadow: 0px 0px 0px 2px currentColor inset;
+    }
+    .mat-mdc-raised-button {
+        --mdc-protected-button-container-height: 36px;
+        --mdc-protected-button-container-shape: 8px;
+        --mdc-protected-button-container-elevation: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
+            0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+    }
+    .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline .mdc-notched-outline__leading,
+    .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline .mdc-notched-outline__notch,
+    .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline .mdc-notched-outline__trailing {
+        --mdc-outlined-text-field-outline-width: 2px;
+    }
+    .mdc-text-field--outlined.mdc-text-field--disabled .mdc-notched-outline .mdc-notched-outline__leading,
+    .mdc-text-field--outlined.mdc-text-field--disabled .mdc-notched-outline .mdc-notched-outline__notch,
+    .mdc-text-field--outlined.mdc-text-field--disabled .mdc-notched-outline .mdc-notched-outline__trailing {
+        --mdc-outlined-text-field-outline-width: 2px;
+    }
+    .mdc-notched-outline__trailing {
+        border-left: none;
+        border-right: 2px solid;
+    }
+    .mdc-notched-outline__leading {
+        border-left: 2px solid;
+        border-right: none;
+        width: 12px;
+    }
+    .mdc-notched-outline__notch {
+        border-left: 2px solid transparent;
+    }
+    .mdc-notched-outline__leading,
+    .mdc-notched-outline__notch,
+    .mdc-notched-outline__trailing {
+        border-top: 2px solid;
+        border-bottom: 2px solid;
+    }
+    .mdc-text-field--outlined {
+        --mdc-outlined-text-field-container-shape: 8px;
+    }
+    .mat-mdc-text-field-wrapper.mdc-text-field--outlined
+        .mdc-notched-outline--upgraded
+        .mdc-floating-label--float-above {
+        --mat-mdc-form-field-label-transform: translateY(-29.75px)
+            scale(var(--mat-mdc-form-field-floating-label-scale, 0.75));
+    }
+
+    /* reduce the input height fom 56px to 48px */
+    .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label {
+        top: 22px;
+    }
+    .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mat-mdc-form-field-infix {
+        padding-top: 12px;
+        padding-bottom: 12px;
+    }
+    .mat-mdc-form-field-infix {
+        min-height: 48px;
+    }
+
+    /* align icons inside of buttons */
+    .mat-mdc-icon-button.mat-mdc-button-base {
+        padding: 0;
+    }
+    .mat-mdc-icon-button.mat-mdc-button-base {
+        display: flex;
+        align-content: center;
+        justify-content: center;
+        flex-wrap: wrap;
+    }
+    .mat-stepper-vertical,
+    .mat-stepper-horizontal {
+        --mat-stepper-container-color: map-get($background, surface);
+    }
+    .mat-stepper-horizontal {
+        &.bullet-stepper-header-labeled {
+            .mat-horizontal-stepper-header-container {
+                justify-content: end;
+                margin-bottom: 0;
+                margin-top: 0;
+                margin-right: 0;
+                padding-right: 24px;
+                height: 0;
+            }
+        }
+
+        &.bullet-stepper-header-labeled,
+        &.bullet-stepper-header {
+            position: relative;
+
+            .mat-horizontal-stepper-header-container {
+                .mat-stepper-horizontal-line {
+                    display: none;
+                }
+
+                .mat-step-header-ripple {
+                    display: none;
+                }
+
+                .mat-horizontal-stepper-header {
+                    height: initial;
+                    overflow: initial;
+
+                    &.mat-step-header {
+                        padding: 0;
+                        border-radius: 0;
+                        flex-direction: column;
+                        position: inherit;
+                        width: 40px;
+
+                        &.cdk-keyboard-focused,
+                        &.cdk-program-focused,
+                        &:hover {
+                            background-color: transparent;
+                        }
+
+                        .mat-step-icon {
+                            margin: -32px 0 0 8px;
+                            border-radius: 8px;
+                            height: 8px;
+                            width: 32px;
+                            flex-shrink: 0;
+                            position: absolute;
+                        }
+                    }
+
+                    .mat-step-label {
+                        position: absolute;
+                        display: none;
+                        right: 0;
+                        margin-top: -52px;
+                        margin-right: 24px;
+                        font-family: var(--matcha-font-family, 'Manrope', sans-serif);
+                        font-weight: var(--matcha-weight-bold, 700);
+                        color: map-get($foreground, label);
+                    }
+
+                    .mat-step-label.mat-step-label-active {
+                        display: none;
+                    }
+
+                    .mat-step-label.mat-step-label-active.mat-step-label-selected {
+                        display: flex;
+                        justify-content: flex-end;
+                    }
+
+                    .mat-step-icon-state-edit {
+                        margin: 0;
+                    }
+
+                    .mat-step-icon-state-edit.mat-step-icon {
+                        background-color: map-get($accent, default);
+
+                        .mat-icon {
+                            display: none;
+                        }
+                    }
+
+                    .mat-step-icon-state-number {
+                        // background-color: blue;
+                    }
+
+                    .mat-step-icon-state-number.mat-step-icon {
+                        background-color: map-get($background, disabled);
+
+                        .mat-step-icon-content {
+                            display: none;
+                        }
+                    }
+
+                    .mat-step-icon-state-number.mat-step-icon.mat-step-icon-selected {
+                        background-color: map-get($accent, default);
+                        order: 1;
+                    }
+                }
+            }
+
+            .mat-horizontal-content-container {
+                padding: 0;
+
+                .mat-dialog-content {
+                    max-height: calc(100vh - 268px);
+                }
+            }
+        }
+
+        &.hide-stepper-header {
+            .mat-horizontal-stepper-header-container {
+                display: none !important;
+            }
+
+            .mat-horizontal-content-container {
+                overflow: hidden;
+                padding: 0;
+            }
+        }
+
+        &.page-layout-stepper {
+            .mat-horizontal-stepper-header-container {
+                padding-right: 24px;
+
+                .mat-horizontal-stepper-header {
+                    .mat-step-label {
+                        margin-top: -60px;
+                        margin-right: 24px;
+                    }
+                }
+            }
+        }
+    }
+
+    // Fixer wrappers
+    form {
+        //Form Field
+        .mat-form-field-appearance-outline,
+        .mat-form-field-appearance-fill {
+            .mat-form-field-subscript-wrapper {
+                padding: 0;
+                position: relative;
+                box-sizing: border-box;
+                width: 100%;
+                overflow: hidden;
+            }
+
+            .mat-form-field-wrapper,
+            .mat-form-field-hint-wrapper {
+                margin: 0 0 -24px 0;
+                padding-bottom: 16px;
+            }
+        }
+
+        //Expansion Panel
+        .mat-expansion-panel.mat-expansion-panel-folder-navigation {
+            .mat-expansion-panel-header {
+            }
+
+            .mat-expansion-panel-content {
+                .mat-expansion-panel-body {
+                    max-height: 256px;
+                    overflow-y: auto;
+                    padding: 0;
+                }
+            }
+        }
+    }
+
+    @media screen and (min-width: 600px) {
+        // .mat-stepper-horizontal {
+        //     &.bullet-stepper-header-labeled {
+        //         .mat-horizontal-stepper-header-container {
+        //             padding-right: 72px;
+        //             .mat-horizontal-stepper-header {
+        //                 .mat-step-label {
+        //                     margin-right: 72px;
+        //                 }
+        //             }
+        //         }
+        //     }
+        // }
+    }
+    @media screen and (min-width: 1024px) {
+    }
+    @media screen and (min-width: 1440px) {
+    }
+    @media screen and (min-width: 1920px) {
+    }
+}