@gipisistemas/ngx-core 1.0.1

package/theming/_palettes.scss

@@ -0,0 +1,112 @@
+@use 'sass:map';
+
+$palette-shadows: (
+    1: (
+        0px 1px 2px 0px #1018280d,
+    ),
+    2: (
+        0px 1px 2px 0px #1018280f,
+        0px 1px 3px 0px #1018281a,
+    ),
+    3: (
+        0px 2px 4px -2px #1018280f,
+        0px 4px 8px -2px #1018281a,
+    ),
+    4: (
+        0px 4px 6px -2px #10182808,
+        0px 12px 16px -4px #10182814,
+    ),
+    5: (
+        0px 8px 8px -4px #10182808,
+        0px 20px 24px -4px #10182814,
+    ),
+);
+
+$palette-primary: (
+    50: #fceaec,
+    100: #f5bfc3,
+    200: #f1a0a6,
+    300: #ea757e,
+    400: #e65a65,
+    500: #e0313e,
+    600: #cc2d38,
+    700: #9f232c,
+    800: #7b1b22,
+    900: #5e151a,
+) !default;
+
+$palette-secondary: (
+    50: #f5f5f6,
+    100: #e0e1e2,
+    200: #d1d2d4,
+    300: #bbbdc1,
+    400: #aeb1b5,
+    500: #9a9da2,
+    600: #8c8f93,
+    700: #6d6f73,
+    800: #555659,
+    900: #414244,
+);
+
+$palette-success: (
+    100: #c0eecc,
+    300: #77d990,
+    400: #5dd27a,
+    500: #34c759,
+    600: #2fb551,
+    700: #258d3f,
+    900: #165425,
+);
+
+$palette-information: (
+    100: #b0d8ef,
+    300: #54aadb,
+    400: #3399d5,
+    500: #0080ca,
+    600: #0074b8,
+    700: #005b8f,
+    900: #003655,
+);
+
+$palette-warning: (
+    100: #f2e2b0,
+    300: #e4bf54,
+    400: #deb333,
+    500: #d6a000,
+    600: #c39200,
+    700: #987200,
+    900: #5a4300,
+);
+
+$palette-danger: (
+    100: #f1c4b6,
+    300: #e07f62,
+    400: #da6643,
+    500: #d14014,
+    600: #be3a12,
+    700: #942d0e,
+    900: #581b08,
+);
+
+$palette-white: (
+    100: #ffffff,
+    200: #fcfcfc,
+    300: #f5f5f5,
+    400: #f0f0f0,
+);
+
+$palette-black: (
+    100: #131313,
+    200: #262626,
+    300: #595959,
+    400: #bfbfbf,
+);
+
+$palette-pastels: (
+    primary: #f3e7e7,
+    secondary: #e7ebee,
+    success: #e9f4e8,
+    info: #e6f2fa,
+    warning: #fbf6e6,
+    danger: #faece8,
+);

package/theming/_theme.scss

@@ -0,0 +1,189 @@
+@use 'sass:map';
+@use 'sass:string';
+
+@use './palettes' as gipi-palettes;
+@use './utils' as gipi-utils;
+
+@use '../components/action-row/action-row.component.scss' as action-row;
+@use '../components/avatar/avatar.component.scss' as avatar;
+@use '../components/button/button.component.scss' as button;
+@use '../components/button-group/button-group.component.scss' as button-group;
+@use '../components/checkbox/checkbox.component.scss' as checkbox;
+@use '../components/chips/chips.component.scss' as chips;
+@use '../components/confirm-dialog/confirm-dialog.component.scss' as confirm-dialog;
+@use '../components/date-picker/date-picker.component.scss' as date-picker;
+@use '../components/date-range-picker/date-range-picker.component.scss' as date-range-picker;
+@use '../components/datetime-picker/datetime-picker.component.scss' as datetime-picker;
+@use '../components/empty/empty.component.scss' as empty;
+@use '../components/expansion-panel/expansion-panel.component.scss' as expansion-panel;
+@use '../components/field-error/field-error.component.scss' as field-error;
+@use '../components/form-wrapper/form-wrapper.component.scss' as form-wrapper;
+@use '../components/helpful-tip/helpful-tip.component.scss' as helpful-tip;
+@use '../components/icon/icon.component.scss' as icon;
+@use '../components/input/input.component.scss' as input;
+@use '../components/input-currency/input-currency.component.scss' as input-currency;
+@use '../components/input-group/input-group.component.scss' as input-group;
+@use '../components/input-phone/input-phone.component.scss' as input-phone;
+@use '../components/loading/loading.component.scss' as loading;
+@use '../components/lozenge/lozenge.component.scss' as lozenge;
+@use '../components/password-requeriments/password-requeriments.component.scss' as
+    password-requeriments;
+@use '../components/popover/popover.component.scss' as popover;
+@use '../components/radio-group/radio-group.component.scss' as radio-group;
+@use '../components/select/select.component.scss' as select;
+@use '../components/select-enum/select-enum.component.scss' as select-enum;
+@use '../components/sidenav/sidenav.component.scss' as sidenav;
+@use '../components/skeleton/skeleton.component.scss' as skeleton;
+@use '../components/stepper/stepper.component.scss' as stepper;
+@use '../components/table/table.component.scss' as table;
+@use '../components/tabs/tabs.component.scss' as tabs;
+@use '../components/tag/tag.component.scss' as tag;
+@use '../components/textarea/textarea.component.scss' as textarea;
+@use '../components/toast/toast.component.scss' as toast;
+@use '../components/toggle-switch/toggle-switch.component.scss' as toggle-switch;
+@use '../components/toolbar/toolbar.component.scss' as toolbar;
+@use '../components/tree-table/tree-table.component.scss' as tree-table;
+@use '../components/top-nav/top-nav.component.scss' as top-nav;
+@use '../components/user-profile/user-profile.component.scss' as user-profile;
+
+$default-theme: (
+    palettes: (
+        primary: gipi-palettes.$palette-primary,
+        secondary: gipi-palettes.$palette-secondary,
+        success: gipi-palettes.$palette-success,
+        information: gipi-palettes.$palette-information,
+        warning: gipi-palettes.$palette-warning,
+        danger: gipi-palettes.$palette-danger,
+        white: gipi-palettes.$palette-white,
+        black: gipi-palettes.$palette-black,
+        pastels: gipi-palettes.$palette-pastels,
+    ),
+    typography: (
+        font-family: 'Roboto, sans-serif',
+        font-size: 1.4rem,
+        font-base: 62.5%,
+        color: map.get(gipi-palettes.$palette-black, 200),
+    ),
+    shadows: (
+        1: gipi-palettes.$palette-shadows.1,
+        2: gipi-palettes.$palette-shadows.2,
+        3: gipi-palettes.$palette-shadows.3,
+        4: gipi-palettes.$palette-shadows.4,
+        5: gipi-palettes.$palette-shadows.5,
+    ),
+    density: (
+        scale: 0,
+    ),
+) !default;
+
+@function define-theme($theme) {
+    // Verifica se o tema tem a chave 'palettes', caso contrário, usa o tema padrão
+    $custom-palettes: if(
+        map.has-key($theme, palettes),
+        map.merge(map.get($default-theme, palettes), map.get($theme, palettes)),
+        map.get($default-theme, palettes)
+    );
+
+    // Obtém as propriedades da tipografia e mescla individualmente
+    $typography-default: map.get($default-theme, typography);
+    $typography-custom: if(map.has-key($theme, typography), map.get($theme, typography), ());
+
+    // Verifica se o tema tem a chave 'typography', caso contrário, usa o tema padrão
+    $custom-typography: (
+        font-family: if(
+                map.has-key($typography-custom, font-family),
+                map.get($typography-custom, font-family),
+                map.get($typography-default, font-family)
+            ),
+        font-size: if(
+                map.has-key($typography-custom, font-size),
+                map.get($typography-custom, font-size),
+                map.get($typography-default, font-size)
+            ),
+        font-base: if(
+                map.has-key($typography-custom, font-base),
+                map.get($typography-custom, font-base),
+                map.get($typography-default, font-base)
+            ),
+        color: if(
+                map.has-key($typography-custom, color),
+                map.get($typography-custom, color),
+                map.get($typography-default, color)
+            ),
+    );
+
+    // Verifica se o tema tem a chave 'shadows', caso contrário, usa o tema padrão
+    $custom-shadows: if(
+        map.has-key($theme, shadows),
+        map.merge(map.get($default-theme, shadows), map.get($theme, shadows)),
+        map.get($default-theme, shadows)
+    );
+
+    // Verifica se o tema tem a chave 'density', caso contrário, usa o tema padrão
+    $custom-density: if(
+        map.has-key($theme, density),
+        map.merge(map.get($default-theme, density), map.get($theme, density)),
+        map.get($default-theme, density)
+    );
+
+    // Define o tema final, fazendo o merge das propriedades
+    $merged-theme: (
+        palettes: $custom-palettes,
+        typography: $custom-typography,
+        shadows: $custom-shadows,
+        density: $custom-density,
+    );
+
+    // Retorna o tema mesclado com as propriedades adicionais, caso fornecidas
+    @return $merged-theme;
+}
+
+@mixin all-component-themes($theme: $default-theme) {
+    @include gipi-utils.tooltip($theme);
+    @include gipi-utils.divider($theme);
+    @include gipi-utils.select-panel($theme);
+    @include gipi-utils.mat-paginator($theme);
+    @include gipi-utils.dialog($theme);
+    @include gipi-utils.mat-date-picker-reset($theme);
+
+    @include action-row.action-row-theme($theme);
+    @include avatar.avatar-theme($theme);
+    @include button.button-theme($theme);
+    @include button-group.button-group-theme($theme);
+    @include checkbox.checkbox-theme($theme);
+    @include chips.chips-theme($theme);
+    @include confirm-dialog.confirm-dialog-theme($theme);
+    @include date-picker.date-picker-theme($theme);
+    @include date-range-picker.date-range-picker-theme($theme);
+    @include datetime-picker.datetime-picker-theme($theme);
+    @include empty.empty-theme($theme);
+    @include expansion-panel.expansion-panel-theme($theme);
+    @include field-error.field-error-theme($theme);
+    @include form-wrapper.form-wrapper-theme($theme);
+    @include helpful-tip.helpful-tip-theme($theme);
+    @include icon.icon-theme($theme);
+    @include input.input-theme($theme);
+    @include input-currency.input-currency-theme($theme);
+    @include input-group.input-group-theme($theme);
+    @include input-phone.input-phone-theme($theme);
+    @include loading.loading-theme($theme);
+    @include lozenge.lozenge-theme($theme);
+    @include password-requeriments.password-requeriments-theme($theme);
+    @include popover.popover-theme($theme);
+    @include radio-group.radio-group-theme($theme);
+    @include select.select-theme($theme);
+    @include select-enum.select-enum-theme($theme);
+    @include sidenav.sidenav-theme($theme);
+    @include skeleton.skeleton-theme($theme);
+    @include stepper.stepper-theme($theme);
+    @include table.table-theme($theme);
+    @include tabs.tabs-theme($theme);
+    @include tag.tag-theme($theme);
+    @include textarea.textarea-theme($theme);
+    @include toast.toast-theme($theme);
+    @include toggle-switch.toggle-switch-theme($theme);
+    @include toolbar.toolbar-theme($theme);
+    @include top-nav.top-nav-theme($theme);
+    @include tree-table.tree-table-theme($theme);
+    @include user-profile.user-profile-theme($theme);
+}