@solidexpert/csv-importer-angular - npm Package Compare versions

Comparing version 19.0.12 to 19.0.13

styles/_colors.scss

+// Base colors
+$base-white: #ffffff;
+$base-black: #000000;
+
+// Gray scale
+$gray-25: #fcfcfd;
+$gray-50: #f9fafb;
+$gray-100: #f2f4f7;
+$gray-200: #eaecf0;
+$gray-300: #d0d5dd;
+$gray-400: #98a2b3;
+$gray-500: #667085;
+$gray-600: #475467;
+$gray-700: #344054;
+$gray-800: #1d2939;
+$gray-900: #101828;
+
+// Gray cool
+$gray-cool-25: #fcfcfd;
+$gray-cool-50: #f9f9fb;
+$gray-cool-100: #eff1f5;
+$gray-cool-200: #dcdfea;
+$gray-cool-300: #b9c0d4;
+$gray-cool-400: #7d89b0;
+$gray-cool-500: #5d6b98;
+$gray-cool-600: #4a5578;
+$gray-cool-700: #404968;
+$gray-cool-800: #30374f;
+$gray-cool-900: #111322;
+
+// Primary (purple)
+$primary-25: #fcfaff;
+$primary-50: #f9f5ff;
+$primary-100: #f4ebff;
+$primary-200: #e9d7fe;
+$primary-300: #d6bbfb;
+$primary-400: #b692f6;
+$primary-500: #9e77ed;
+$primary-600: #7a5ef8;
+$primary-700: #6941c6;
+$primary-800: #53389e;
+$primary-900: #42307d;
+
+// Error (red)
+$error-25: #fffbfa;
+$error-50: #fef3f2;
+$error-100: #fee4e2;
+$error-200: #fecdca;
+$error-300: #fda29b;
+$error-400: #f97066;
+$error-500: #f04438;
+$error-600: #d92d20;
+$error-700: #b42318;
+$error-800: #912018;
+$error-900: #7a271a;
+
+// Warning (yellow)
+$warning-25: #fffcf5;
+$warning-50: #fffaeb;
+$warning-100: #fef0c7;
+$warning-200: #fedf89;
+$warning-300: #fec84b;
+$warning-400: #fdb022;
+$warning-500: #f79009;
+$warning-600: #dc6803;
+$warning-700: #b54708;
+$warning-800: #93370d;
+$warning-900: #7a2e0e;
+
+// Success (green)
+$success-25: #f6fef9;
+$success-50: #ecfdf3;
+$success-100: #d1fadf;
+$success-200: #a6f4c5;
+$success-300: #6ce9a6;
+$success-400: #32d583;
+$success-500: #12b76a;
+$success-600: #039855;
+$success-700: #027a48;
+$success-800: #05603a;
+$success-900: #054f31;
+
+// Blue light
+$blue-light-25: #f5fbff;
+$blue-light-50: #f0f9ff;
+$blue-light-100: #e0f2fe;
+$blue-light-200: #b9e6fe;
+$blue-light-300: #7cd4fd;
+$blue-light-400: #36bffa;
+$blue-light-500: #0ba5ec;
+$blue-light-600: #0086c9;
+$blue-light-700: #026aa2;
+$blue-light-800: #065986;
+$blue-light-900: #0b4a6f;
+
+// Green
+$green-600: #039855;
+

styles/_vars.scss

+:root {
+  // DIMENSIONS
+
+  // margins and paddings
+  --base-spacing: 24px;
+  --m-xxxxs: calc(var(--base-spacing) / 5);
+  --m-xxxs: calc(var(--base-spacing) / 4);
+  --m-xxs: calc(var(--base-spacing) / 3);
+  --m-xs: calc(var(--base-spacing) / 2);
+  --m-s: calc(var(--base-spacing) * 2 / 3);
+  --m: var(--base-spacing);
+  --m-mm: calc(var(--base-spacing) * 3 / 2);
+  --m-l: calc(var(--base-spacing) * 5 / 3);
+  --m-xl: calc(var(--base-spacing) * 2);
+  --m-xxl: calc(var(--base-spacing) * 5 / 2);
+  --m-xxxl: calc(var(--base-spacing) * 3);
+
+  // FONTS
+
+  --font-size-xs: calc(var(--font-size) * 16 / 17);
+  --font-size-s: calc(var(--font-size) * 13 / 14);
+  --font-size: 0.875rem;
+  --font-size-l: calc(var(--font-size) * 8 / 7);
+  --font-size-xl: calc(var(--font-size) * 9 / 7);
+  --font-size-xxl: calc(var(--font-size) * 12 / 7);
+  --font-size-xxxl: calc(var(--font-size) * 18 / 7);
+  --font-size-h: calc(var(--font-size) * 24 / 7);
+
+  --font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  --font-family-1: var(--font-family);
+  --font-family-2: "Laxan", sans-serif;
+
+  // BORDERS
+
+  --border-radius: 4px;
+  --border-radius-1: var(--border-radius);
+  --border-radius-2: calc(var(--border-radius) * 2);
+  --border-radius-3: calc(var(--border-radius) * 3);
+  --border-radius-4: calc(var(--border-radius) * 4);
+  --border-radius-5: calc(var(--border-radius) * 5);
+  --border-radius-r: 50%;
+
+  // TRANSITIONS
+
+  --fast: 0.3s;
+  --speed: 0.4s;
+  --slow: 0.9s;
+  --ease: ease-out;
+  --transition-ui: background-color var(--fast) var(--ease), border-color var(--fast) var(--ease), opacity var(--fast) var(--ease),
+    transform var(--fast) var(--ease), color var(--fast) var(--ease);
+
+  // BLURRED
+
+  --blurred: 5px;
+}
+

styles/global.scss

+@import './lib/styles/vars';
+@import './lib/styles/colors';
+@import './lib/styles/themes/common';
+@import './lib/styles/themes/light';
+@import './lib/styles/themes/dark';
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
+  min-height: 100vh;
+  color: #e8e8e8;
+}
+
+// Apply dark theme variables by default
+:root {
+  color-scheme: dark;
+
+  // BACKGROUND
+  --color-background: #0e1116;
+  --color-background-main: var(--color-background);
+  --color-background-modal: #171a20;
+  --color-background-modal-hover: #2e323c;
+  --color-background-modal-veil: #0e1116;
+  --color-background-modal-shadow: #0e1116;
+  --color-background-modal-shade: #171a20;
+
+  --color-tertiary: #{$gray-900};
+  --color-tertiary-hover: #{$gray-800};
+  --color-tertiary-focus: #{$gray-800};
+  --color-tertiary-disabled: #{$gray-200};
+
+  --color-background-menu: #{$gray-900};
+  --color-background-menu-hover: #{$gray-800};
+
+  // TEXT
+  --color-text-strong: #{$gray-100};
+  --color-text: #{$gray-300};
+  --color-text-soft: #{$gray-500};
+
+  --color-text-on-tertiary: #{$base-white};
+  --color-text-on-tertiary-disabled: #{$gray-500};
+
+  --color-error: #{$error-800};
+  --color-text-error: #{$error-500};
+  --color-background-error: #{$error-500};
+  --color-background-error-hover: #{$error-600};
+  --color-background-error-soft: #{$error-200};
+
+  // INPUT
+  --color-input-background: #{$gray-900};
+  --color-input-background-soft: #{$gray-800};
+  --color-input-border: #{$gray-700};
+  --color-input-placeholder: #{$gray-700};
+  --color-input-text-disabled: #{$gray-700};
+  --color-input-disabled: #171a20;
+
+  --color-border: #{$gray-800};
+
+  --color-background-small-button-selected: #{$gray-700};
+  --color-background-small-button-hover: #{$gray-900};
+  --color-text-small-button: $base-white;
+
+  // BUTTON
+  --color-button: #{$primary-50};
+  --color-button-hover: #{$primary-100};
+  --color-button-disabled: #{$primary-100};
+
+  --color-button-text: #171a20;
+  --color-button-text-disabled: #171a20;
+
+  --color-button-border: transparent;
+
+  // BORDER
+  --color-border: #{$gray-700};
+  --color-border-soft: #{$gray-800};
+
+  // ICONS
+  --color-icon: #{$gray-300};
+
+  // SHADOW
+  --color-bisel: rgba(255, 255, 255, 0.05);
+
+  // BRAND
+  --color-csv-import-text: var(--color-text);
+
+  // STEPPER
+  --color-stepper: #{$gray-cool-800};
+  --color-stepper-active: #{$success-300};
+}

styles/themes/_common.scss

+@import '../colors';
+
+:root {
+  // BACKGROUND
+  --color-primary: #{$primary-600};
+  --color-primary-hover: #{$primary-700};
+  --color-primary-focus: #{$primary-600};
+  --color-primary-disabled: #{$primary-200};
+  --color-primary-button-disabled: #3f3b55;
+
+  --color-secondary: #{$gray-800};
+  --color-secondary-hover: #{$gray-600};
+  --color-secondary-focus: #{$gray-800};
+  --color-secondary-disabled: #{$gray-700};
+
+  // TEXT
+
+  --color-text-on-primary: #{$base-white};
+  --color-text-on-primary-disabled: #{$gray-500};
+  --color-text-on-primary-button-disabled: #{$base-white};
+
+  --color-text-on-secondary: #{$gray-100};
+  --color-text-on-secondary-disabled: #{$gray-600};
+
+  --color-progress-bar: #{$green-600};
+
+  --color-success: rgba(18, 183, 106, 0.88);
+  --color-emphasis: #{$blue-light-500};
+  --color-error: rgba(252, 93, 93, 0.88);
+  --color-attention: rgba(248, 203, 44, 0.88);
+
+  --color-importer-link: #2275d7;
+
+  --blue-light-500: #{$blue-light-500};
+  --color-green-ui: var(--color-progress-bar);
+  --color-green: var(--color-success);
+  --color-blue: #{$blue-light-500};
+  --color-red: rgba(252, 93, 93, 0.88);
+  --color-yellow: rgba(248, 203, 44, 0.88);
+  --importer-link: var(--color-importer-link);
+}
+

styles/themes/_dark.scss

+@import '../colors';
+
+.CSVImporter-dark {
+  color-scheme: dark;
+
+  // BACKGROUND
+
+  --color-background: #0e1116;
+  --color-background-main: var(--color-background);
+  --color-background-modal: #171a20;
+  --color-background-modal-hover: #2e323c;
+  --color-background-modal-veil: #0e1116;
+  --color-background-modal-shadow: #0e1116;
+  --color-background-modal-shade: #171a20;
+
+  --color-tertiary: #{$gray-900};
+  --color-tertiary-hover: #{$gray-800};
+  --color-tertiary-focus: #{$gray-800};
+  --color-tertiary-disabled: #{$gray-200};
+
+  --color-background-menu: #{$gray-900};
+  --color-background-menu-hover: #{$gray-800};
+
+  // TEXT
+
+  --color-text-strong: #{$gray-100};
+  --color-text: #{$gray-300};
+  --color-text-soft: #{$gray-500};
+
+  --color-text-on-tertiary: #{$base-white};
+  --color-text-on-tertiary-disabled: #{$gray-500};
+
+  --color-error: #{$error-800};
+  --color-text-error: #{$error-500};
+  --color-background-error: #{$error-500};
+  --color-background-error-hover: #{$error-600};
+  --color-background-error-soft: #{$error-200};
+
+  // INPUT
+
+  --color-input-background: #{$gray-900};
+  --color-input-background-soft: #{$gray-800};
+  --color-input-border: #{$gray-700};
+  --color-input-placeholder: #{$gray-700};
+  --color-input-text-disabled: #{$gray-700};
+  --color-input-disabled: #171a20;
+
+  --color-border: #{$gray-800};
+
+  --color-background-small-button-selected: #{$gray-700};
+  --color-background-small-button-hover: #{$gray-900};
+  --color-text-small-button: $base-white;
+
+  // BUTTON
+
+  --color-button: #{$primary-50};
+  --color-button-hover: #{$primary-100};
+  --color-button-disabled: #{$primary-100};
+
+  --color-button-text: #171a20;
+  --color-button-text-disabled: #171a20;
+
+  --color-button-border: transparent;
+
+  // BORDER
+
+  --color-border: #{$gray-700};
+  --color-border-soft: #{$gray-800};
+
+  // ICONS
+
+  --color-icon: #{$gray-300};
+
+  // SHADOW
+
+  --color-bisel: rgba(255, 255, 255, 0.05);
+
+  // BRAND
+
+  --color-csv-import-text: var(--color-text);
+
+  // STEPPER
+
+  --color-stepper: #{$gray-cool-800};
+  --color-stepper-active: #{$success-300};
+}
+

styles/themes/_light.scss

+@import '../colors';
+
+.CSVImporter-light {
+  color-scheme: light;
+
+  // BACKGROUND
+
+  --color-background: #{$gray-100};
+  --color-background-main: #{$base-white};
+  --color-background-modal: #{$base-white};
+  --color-background-modal-hover: #{$base-white};
+  --color-background-modal-veil: #0e1116;
+  --color-background-modal-shadow: transparent;
+  --color-background-modal-shade: #{$gray-100};
+
+  --color-tertiary: #{$base-white};
+  --color-tertiary-hover: #{$gray-100};
+  --color-tertiary-focus: #{$base-white};
+  --color-tertiary-disabled: #{$gray-200};
+
+  --color-background-menu: #{$base-white};
+  --color-background-menu-hover: #{$gray-100};
+
+  // TEXT
+
+  --color-text-strong: #{$gray-900};
+  --color-text: #{$gray-800};
+  --color-text-soft: #{$gray-500};
+
+  --color-text-on-tertiary: #{$gray-700};
+  --color-text-on-tertiary-disabled: #{$gray-500};
+
+  --color-error: #{$error-200};
+  --color-text-error: #{$error-500};
+  --color-background-error: #{$error-500};
+  --color-background-error-hover: #{$error-600};
+  --color-background-error-soft: #{$error-200};
+
+  // INPUT
+
+  --color-input-background: #{$base-white};
+  --color-input-background-soft: #{$gray-300};
+  --color-input-border: #{$gray-700};
+  --color-input-placeholder: #{$gray-700};
+  --color-input-text-disabled: #{$gray-700};
+  --color-input-disabled: #{$gray-50};
+
+  --color-border: #{$gray-800};
+
+  --color-background-small-button-selected: #{$gray-100};
+  --color-background-small-button-hover: #{$gray-50};
+  --color-text-small-button: var(--color-text);
+
+  // BUTTON (default)
+
+  --color-button: #{$base-white};
+  --color-button-hover: #{$gray-100};
+  --color-button-disabled: #{$gray-25};
+
+  --color-button-text: var(--color-text-soft);
+  --color-button-text-disabled: #{$gray-300};
+
+  --color-button-border: #{$gray-300};
+
+  // BORDER
+
+  --color-border: #{$gray-300};
+  --color-border-soft: #{$gray-200};
+
+  // ICONS
+
+  --color-icon: #{$gray-cool-900};
+
+  // SHADOW
+
+  --color-bisel: rgba(0, 0, 0, 0.05);
+
+  // BRAND
+
+  --color-csv-import-text: #130638;
+
+  // STEPPER
+
+  --color-stepper: #{$gray-cool-300};
+  --color-stepper-active: #{$success-300};
+}
+

package.json

 {
   "name": "@solidexpert/csv-importer-angular",
-  "version": "19.0.12",
+  "version": "19.0.13",
   "description": "Open-source CSV, TSV, and XLS/XLSX file importer for Angular",
@@ -5,0 +5,0 @@ "publishConfig": {

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

287949

4.23%

Number of package files

32

23.08%

Number of medium supply chain risk alerts

0

-100%

No dependency changes