@inspark/inspark-components 19.0.49 → 19.0.51

package/src/scss/patchPrimeng/treetable/_primeng.components.treetable.theme-contrast.scss

@@ -0,0 +1,41 @@
+.p-treetable {
+
+  .p-treetable-thead {
+    background: $pm-treetable-head-background;
+  }
+
+  .p-treetable-thead > tr > th {
+    border: 1px solid $pm-treetable-head-border;
+  }
+
+  .p-treetable-thead > tr > th.p-state-highlight {
+    background: transparent;
+    color: var(--ids-theme-text-color, $text-color);
+
+    .p-sortable-column-icon {
+      color: var(--ids-theme-primary, $ids-theme-primary);
+    }
+  }
+
+  .p-table-tbody > tr:nth-child(even) > td::before {
+    background: rgba($text-color, 0.1);
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    content: " ";
+    left: 0;
+    top: 0;
+  }
+
+  .p-treetable-toggler {
+    color: $text-color;
+  }
+
+  .p-treetable-tbody > tr:nth-child(even) > td {
+    background: rgba($text-color, 0.1);
+  }
+
+  .p-highlight .p-treetable-toggler {
+    color: $text-color-on-dark;
+  }
+}

package/src/scss/patchPrimeng/treetable/_primeng.components.treetable.theme-dark.scss

@@ -0,0 +1,26 @@
+.p-treetable {
+  .p-treetable-thead > tr > th.p-highlight {
+    background: transparent;
+    color: var(--ids-theme-text-color, $text-color);
+
+    .p-sortable-column-icon {
+      color: var(--ids-theme-primary, $ids-theme-primary);
+    }
+  }
+
+  .p-treetable-t > tr {
+    background-color: transparent;
+  }
+
+  .p-treetable-t > tr > td {
+    border: none;
+  }
+
+  .p-treetable-thead > tr > th {
+    border-color: transparent;
+  }
+
+  .p-highlight .p-treetable-toggler {
+    color: $text-color-on-light;
+  }
+}

package/src/scss/patchPrimeng/treetable/_primeng.components.treetable.theme-light.scss

@@ -0,0 +1,31 @@
+.p-treetable {
+
+  .p-treetable-thead {
+    background: $pm-treetable-head-background;
+  }
+
+  .p-treetable-thead > tr > th {
+    border: 1px solid $pm-treetable-head-border;
+  }
+
+  .p-treetable-thead > tr > th.p-state-highlight {
+    background: transparent;
+    color: var(--ids-theme-text-color, $text-color);
+
+    .p-sortable-column-icon {
+      color: var(--ids-theme-primary, $ids-theme-primary);
+    }
+  }
+
+  .p-treetable-toggler {
+    color: $text-color;
+  }
+
+  .p-treetable-tbody > tr:nth-child(even) > td {
+    background: rgba($text-color, 0.1);
+  }
+
+  .p-highlight .p-treetable-toggler {
+    color: $text-color-on-dark;
+  }
+}

package/src/scss/settings/_loader.settings.scss

@@ -0,0 +1,15 @@
+/*
+Settings
+
+Global variables, site-wide settings, config switches, etc.
+* SETTINGS
+ * Config...............Project-level configuration and feature switches.
+ * Core.................inuitcss’ core and setup settings.
+ * Global...............Project-wide variables and settings.
+ * Colors...............Color variables.
+ * Colors-light.........Color variables for Light Theme.
+
+Styleguide 2.0
+ */
+
+@import "./settings.global";

package/src/scss/settings/_settings.box-shadows.scss

@@ -0,0 +1,32 @@
+///* ========================================================================
+//   #Box-shadows
+//   ======================================================================== */
+
+/*
+Box-shadows
+
+This section describes box-shadows variables
+
+Styleguide 2.6
+*/
+/*
+Box-shadows variants
+
+$box-shadow-tiny - 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+$box-shadow-small - 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
+$box-shadow-default - 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
+$box-shadow-large - 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
+$box-shadow-huge - 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
+
+markup:
+<div class="o-box" style="background-color: #fff;">
+  <div style="box-shadow: {$modifiers};" class="styleguide-color">{$modifiers}</div>
+</div>
+
+Styleguide 2.6.1
+*/
+$box-shadow-tiny: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+$box-shadow-small: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
+$box-shadow-default: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
+$box-shadow-large: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
+$box-shadow-huge: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);

package/src/scss/settings/_settings.colors.scss

@@ -0,0 +1,215 @@
+///* ========================================================================
+//   #COLORS Default
+//   ======================================================================== */
+
+/*
+Colors (Default theme)
+
+This section describes base colors
+
+Styleguide 2.4
+*/
+
+/*
+Achromatic colors
+
+$color-base-white - color-base-white
+$color-base-black - color-base-black
+$color-white-normal - $color-base-white;
+$color-white-secondary - #BFBFBF;
+$color-base-white-5 - $color-base-white with 5% opacity
+$color-white-disabled - #686868;
+$color-black-normal - $color-base-black;
+$color-black-secondary - #989A9E;
+$color-black-disabled - #CDCED0;
+$color-gray-5 - color-gray-5
+$color-gray-10 - color-gray-10
+$color-gray-20 - color-gray-20
+$color-gray-35 - color-gray-35
+$color-gray-40 - color-gray-40
+$color-gray-80 - color-gray-80
+$color-gray-90 - color-gray-90
+$color-gray-100 - color-gray-100
+
+markup:
+<div style="background: {$modifiers};" class="styleguide-color">{$modifiers}</div>
+
+Styleguide 2.4.1
+*/
+
+$color-base-white: #FFFFFF;
+$color-base-black: #202127;
+$color-base-white-5: rgba(255, 255, 255, 5);
+$color-gray-5: #EBEBEB;
+$color-gray-10: #B3B3B3;
+$color-gray-20: #7E8087;
+$color-gray-35: #53555C;
+$color-gray-40: #494C55;
+$color-gray-80: #30333C;
+$color-gray-90: #282A31;
+$color-gray-100: $color-base-black;
+
+$color-white-normal: $color-base-white;
+$color-white-secondary: #BFBFBF;
+$color-white-disabled: #686868;
+
+$color-black-normal: $color-base-black;
+$color-black-secondary: #989A9E;
+$color-black-tertiary: #343741;
+$color-black-disabled: #CDCED0;
+/*
+Chromatic colors (base)
+
+$color-blue-light - color-blue-light
+$color-blue-dark - color-blue-dark
+$color-blue - color-blue
+$color-yellow-light - color-yellow-light
+$color-yellow - color-yellow
+$color-orange - color-orange
+$color-orange-dark - color-orange-dark
+$color-green - color-green
+$color-red - color-red
+
+markup:
+<div style="background: {$modifiers};" class="styleguide-color">{$modifiers}</div>
+
+Styleguide 2.4.2
+*/
+$color-blue-light: #78f4ff;
+$color-blue-dark: #387382;
+$color-blue: #1f85ff;
+$color-yellow-light: #fbffdd;
+$color-yellow: #ffd452;
+$color-orange: #fe6a3e;
+$color-orange-dark: #c95e46;
+$color-green: #00e4c8;
+$color-green-dark: #419D59;
+$color-red: #f71800;
+$color-red-dark: #D26357;
+
+/*
+Color tints
+
+$color-blue-light-200 - color-blue-light-200
+$color-blue-light-300 - color-blue-light-300
+$color-blue-light-500 - color-blue-light-500
+$color-blue-light-600 - color-blue-light-600
+$color-blue-light-800 - color-blue-light-800
+$color-yellow-light-100 - color-yellow-light-100
+$color-yellow-light-250 - color-yellow-light-250
+$color-yellow-light-500 - color-yellow-light-500
+$color-yellow-light-800 - color-yellow-light-800
+$color-yellow-light-1000 - color-yellow-light-1000
+$color-orange-200 - color-orange-200
+$color-orange-325 - color-orange-325
+$color-orange-500 - color-orange-500
+$color-orange-650 - color-orange-650
+$color-orange-900 - color-orange-900
+
+markup:
+<div style="background: {$modifiers};" class="styleguide-color">{$modifiers}</div>
+
+Styleguide 2.4.3
+*/
+$color-blue-light-200: #C0FAFF;
+$color-blue-light-300: #A6F8FF;
+$color-blue-light-500: $color-blue-light;
+$color-blue-light-600: #60F1FF;
+$color-blue-light-800: #30EDFF;
+
+$color-blue-dark-200: #BAD7E7;
+$color-blue-dark-300: #85B3CB;
+$color-blue-dark-500: $color-blue-dark;
+$color-blue-dark-600: #397291;
+$color-blue-dark-800: #1F5F81;
+
+$color-yellow-light-100: #FEFFF8;
+$color-yellow-light-250: #FDFFEE;
+$color-yellow-light-500: $color-yellow-light;
+$color-yellow-light-800: #F8FFC8;
+$color-yellow-light-1000: #F7FFBB;
+
+$color-yellow-dark-100: #FFE7A0;
+$color-yellow-dark-250: #FFDC75;
+$color-yellow-dark-500: #FFD452;
+$color-yellow-dark-800: #ECBB2A;
+$color-yellow-dark-1000: #BE9210;
+
+$color-orange-200: #FEA963;
+$color-orange-325: #FE8E53;
+$color-orange-500: $color-orange;
+$color-orange-650: #FD492B;
+$color-orange-900: #FD150C;
+$color-orange-dark-500: #c95e46;
+
+/*
+Brand colors
+
+$ids-theme-primary - Primary Cold color
+$ids-theme-secondary - Secondary Cold color
+
+markup:
+<div style="background: {$modifiers};" class="styleguide-color">{$modifiers}</div>
+
+Styleguide 2.4.4
+*/
+/**
+ * Primary
+ */
+$ids-theme-primary: $color-blue-light;
+
+/**
+ * Secondary
+ */
+$ids-theme-secondary: $color-blue-dark;
+
+/*
+Status colors
+
+$ids-theme-status-highlight - Active state highlight
+$ids-theme-status-success - Success status color
+$ids-theme-status-warning - Warning status color
+$ids-theme-status-error - Error status color
+$ids-theme-status-pending - Pending status color
+
+markup:
+<div style="background: {$modifiers};" class="styleguide-color">{$modifiers}</div>
+
+Styleguide 2.4.5
+*/
+$ids-theme-status-active: $ids-theme-primary !default;
+$ids-theme-status-highlight: $color-blue-light !default;
+$ids-theme-status-success: #31AC51 !default;
+$ids-theme-status-success-dark: darken($color-green, 15) !default;
+$ids-theme-status-warning: #EE9946 !default; //$color-orange
+$ids-theme-status-error: #F95C5D !default;
+$ids-theme-status-pending: $color-blue !default;
+$ids-theme-status-critical: #F95C5D !default;
+$ids-theme-status-disabled: #848484 !default;
+$ids-theme-status-falsevalue: #85B3CB !default;
+
+/*
+Functional colors
+
+$component-active-color - Text color of active list items
+$component-active-bg - Background color of active list items
+
+markup:
+<div style="background: {$modifiers};" class="styleguide-color">{$modifiers}</div>
+
+Styleguide 2.4.6
+*/
+$component-active-color: $color-base-white !default;
+$component-active-bg: rgba($ids-theme-primary, 0.4) !default;
+$state-success-bg: rgba($ids-theme-status-success, 0.4) !default;
+$state-success-text: $color-base-white !default;
+$state-warning-bg: rgba($ids-theme-status-warning, 0.4) !default;
+$state-warning-text: $color-base-white !default;
+$state-error-bg: rgba($ids-theme-status-error, 0.4) !default;
+$state-error-text: $color-base-white !default;
+$state-pending-bg: rgba($ids-theme-status-pending, 0.4) !default;
+$state-pending-text: $color-base-white !default;
+$state-critical-bg: rgba($ids-theme-status-critical, 0.4) !default;
+$state-critical-text: $color-base-white !default;
+$state-falsevalue-bg: rgba($ids-theme-status-falsevalue, 0.4) !default;
+$state-falsevalue-text: $color-black-secondary !default;

package/src/scss/settings/_settings.config.scss

@@ -0,0 +1,35 @@
+///* ========================================================================
+//   #CONFIG
+//   ======================================================================== */
+
+/*
+Config
+
+ A map of global config settings. Define any project-level configuration, feature switches, etc. in here.
+
+Styleguide 2.1
+*/
+
+$inuit-config: (
+  env: dev,
+  healthcheck: false,
+  debug: true,
+);
+
+// Options
+//
+// Quickly modify global styling by enabling or disabling optional features.
+
+$enable-rounded: true !default;
+
+// You can access data in this map using the following function:
+//
+// inuit-config(<key>)
+//
+// Example usage:
+//
+// @if (inuit-config(debug) == true) { ...  }
+
+@function inuit-config($key) {
+  @return map-get($inuit-config, $key);
+}

package/src/scss/settings/_settings.core.scss

@@ -0,0 +1,93 @@
+///* ========================================================================
+//   #CORE
+//   ======================================================================== */
+
+// This core file sets up inuitcss’ most important setup variables. They
+// underpin a lot of how the framework functions and should be modified and
+// preconfigured with caution.
+
+
+// Base typographical styles and baseline grid. You need to define these values
+// in pixels: inuitcss will convert them to more appropriate units.
+
+$inuit-global-font-size:    14px !default;
+$inuit-global-line-height:  23px !default;
+
+
+
+
+
+// Spacing values are determined based on your project’s global line height (i.e
+// your baseline grid). It is not recommended that you modify these following
+// variables (it can break your vertical rhythm), but if you need to, you can.
+
+$inuit-global-spacing-unit: round($inuit-global-line-height) !default;
+
+
+// How many times larger/smaller than the default should our spacing unit
+// variants be?
+
+$inuit-global-spacing-unit-factor-tiny:   0.25 !default;
+$inuit-global-spacing-unit-factor-small:  0.5  !default;
+$inuit-global-spacing-unit-factor-large:  2    !default;
+$inuit-global-spacing-unit-factor-huge:   4    !default;
+
+
+
+
+
+////////////////////////////////////////////////////////////////////////////////
+//                                                                            //
+//                               W A R N I N G                                //
+//                                                                            //
+//                  DO NOT MODIFY ANYTHING BEYOND THIS POINT                  //
+//                                                                            //
+////////////////////////////////////////////////////////////////////////////////
+
+
+// Check that the chosen font rules are pixel numbers.
+
+@each $_inuit-font-globals in
+      $inuit-global-font-size
+      $inuit-global-line-height {
+
+  @if (type-of($_inuit-font-globals) == number) {
+
+    @if (unit($_inuit-font-globals) != "px") {
+      @error "`#{$_inuit-font-globals}` needs to be a pixel value.";
+    }
+
+  } @else {
+    @error "`#{$_inuit-font-globals}` needs to be a number.";
+  }
+
+}
+
+
+// Check that the chosen size factors are unitless numbers.
+
+@each $_inuit-spacing-unit in
+      $inuit-global-spacing-unit-factor-tiny
+      $inuit-global-spacing-unit-factor-small
+      $inuit-global-spacing-unit-factor-large
+      $inuit-global-spacing-unit-factor-huge {
+
+  @if (type-of($_inuit-spacing-unit) == number) {
+
+    @if (unitless($_inuit-spacing-unit) == false) {
+      @error "`#{$_inuit-spacing-unit}` needs to be unitless.";
+    }
+
+  } @else {
+    @error "`#{$_inuit-spacing-unit}` needs to be a number.";
+  }
+
+}
+
+
+// Private/framework-only reassignment. Do not alter anything below.
+
+$inuit-global-spacing-unit-tiny:  round($inuit-global-spacing-unit * $inuit-global-spacing-unit-factor-tiny);
+$inuit-global-spacing-unit-small: round($inuit-global-spacing-unit * $inuit-global-spacing-unit-factor-small);
+$inuit-global-spacing-unit-large: round($inuit-global-spacing-unit * $inuit-global-spacing-unit-factor-large);
+$inuit-global-spacing-unit-huge:  round($inuit-global-spacing-unit * $inuit-global-spacing-unit-factor-huge);