@allsorter/ui-components 0.0.367 → 0.0.370

package/src/lib/styles/colors.scss

@@ -0,0 +1,221 @@
+// ============================================
+// PRIMARY COLOR SCALE
+// ============================================
+
+// Primary Blue - Complete Scale
+$color-blue-50: #E5E9FC;   // Tints-50
+$color-blue-100: #BBC7F6;  // Tints-100
+$color-blue-200: #98ABF1;  // Tints-200
+$color-blue-300: #768FED;  // Tints-300
+$color-blue-400: #6581EA;  // Tints-400
+$color-blue-500: #5473E8;  // Base-Blue
+$color-blue-600: #1E46DF;  // Shades-600
+$color-blue-700: #0F236F;  // Shades-700
+$color-blue-800: #071238;  // Shades-800
+$color-blue-900: #04091C;  // Shades-900
+
+// Primary Blue - Semantic Names (for backward compatibility)
+$color-blue: $color-blue-500;
+$color-blue-hover: $color-blue-400;
+$color-blue-active: $color-blue-600;
+
+// ============================================
+// SECONDARY COLOR SCALE
+// ============================================
+
+// Primary Green - Complete Scale
+$color-green-50: #D7F3F5;   // Tints-50
+$color-green-100: #AFE6EB;  // Tints-100
+$color-green-200: #87DAE2;  // Tints-200
+$color-green-300: #5FCDD8;  // Tints-300
+$color-green-400: #4BC7D3;  // Tints-400
+$color-green-500: #37C1CE;  // Base-Green
+$color-green-600: #299DA8;  // Shades-600
+$color-green-700: #1F767E;  // Shades-700
+$color-green-800: #154E54;  // Shades-800
+$color-green-900: #0A272A;  // Shades-900
+
+// Primary Green - Semantic Names (for backward compatibility)
+$color-green: $color-green-500;
+$color-green-hover: $color-green-400;
+$color-green-active: $color-green-600;
+
+// ============================================
+// NEUTRAL COLOR SCALE
+// ============================================
+
+// Primary Grey - Complete Scale
+$color-grey-50: #FAFBFB;   // Tints-50
+$color-grey-100: #ECEDF1;  // Tints-100
+$color-grey-200: #DEE0E6;  // Tints-200
+$color-grey-300: #D1D3DB;  // Tints-300
+$color-grey-400: #C3C5D1;  // Tints-400
+$color-grey-500: #A2A6B8;  // Base-Grey
+$color-grey-600: #717793;  // Shades-600
+$color-grey-700: #4B4F62;  // Shades-700
+$color-grey-800: #383B4A;  // Shades-800
+$color-grey-900: #252831;  // Shades-900
+
+// Primary Grey - Semantic Names (for backward compatibility)
+$color-grey: $color-grey-800;
+$color-grey-hover: $color-grey-700;
+$color-grey-active: $color-grey-900;
+
+// ============================================
+// SEMANTIC COLOR SCALE
+// ============================================
+
+// Primary Error - Complete Scale
+$color-error-50: #FDEEF6;   // Tints-50
+$color-error-100: #F9D4E8;  // Tints-100
+$color-error-200: #F6BBDB;  // Tints-200
+$color-error-300: #F2A1CD;  // Tints-300
+$color-error-400: #EF87BF;  // Tints-400
+$color-error-500: #E854A4;  // Base-Error
+$color-error-600: #E22A8E;  // Shades-600
+$color-error-700: #C31A75;  // Shades-700
+$color-error-800: #99155C;  // Shades-800
+$color-error-900: #6F0F43;  // Shades-900
+
+// Primary Error - Semantic Names (for backward compatibility)
+$color-error: $color-error-500;
+$color-error-hover: $color-error-400;
+$color-error-active: $color-error-600;
+
+// Primary Success - Complete Scale
+$color-success-50: #E9F9F3;   // Tints-50
+$color-success-100: #C8F1E3;  // Tints-100
+$color-success-200: #9EE7CE;  // Tints-200
+$color-success-300: #6EDDB7;  // Tints-300
+$color-success-400: #3DD3A0;  // Tints-400
+$color-success-500: #00AD83;  // Base-Success
+$color-success-600: #009873;  // Shades-600
+$color-success-700: #007F61;  // Shades-700
+$color-success-800: #00654F;  // Shades-800
+$color-success-900: #003D30;  // Shades-900
+
+// Primary Success - Semantic Names (for backward compatibility)
+$color-success: $color-success-500;
+$color-success-hover: $color-success-600;
+$color-success-active: $color-success-700;
+
+$color-white-500: #fff;
+
+// ============================================
+// GRADIENTS
+// ============================================
+
+$color-gradient: linear-gradient(275deg, #5473E8 -36.22%, #37C1CE 100.04%);
+$color-gradient-hover: linear-gradient(0deg, rgba(250, 250, 253, 0.3), rgba(250, 250, 253, 0.3)),
+                       linear-gradient(275deg, #2BBBAD 9.3%, #4A90E2 115.85%);
+$color-gradient-active: linear-gradient(0deg, rgba(56, 59, 74, 0.5), rgba(56, 59, 74, 0.5)),
+                        linear-gradient(275deg, #2BBBAD 9.3%, #4A90E2 115.85%);
+
+// ============================================
+// OUTLINE VARIANTS
+// ============================================
+
+$color-outline-blue: $color-blue-500;
+$color-outline-green: $color-green-500;
+$color-outline-grey: $color-grey-800;
+$color-outline-error: $color-error-500;
+$color-outline-success: $color-success-500;
+$color-outline-white: $color-white-500;
+
+// ============================================
+// UTILITY COLORS
+// ============================================
+
+$color-disabled-bg: $color-grey-300;
+$color-disabled-text: $color-grey-500;
+
+// ============================================
+// CSS CUSTOM PROPERTIES
+// ============================================
+
+:root {
+  // Primary Blue Scale
+  --color-blue-50: #{$color-blue-50};
+  --color-blue-100: #{$color-blue-100};
+  --color-blue-200: #{$color-blue-200};
+  --color-blue-300: #{$color-blue-300};
+  --color-blue-400: #{$color-blue-400};
+  --color-blue-500: #{$color-blue-500};
+  --color-blue-600: #{$color-blue-600};
+  --color-blue-700: #{$color-blue-700};
+  --color-blue-800: #{$color-blue-800};
+  --color-blue-900: #{$color-blue-900};
+
+  // Primary Green Scale
+  --color-green-50: #{$color-green-50};
+  --color-green-100: #{$color-green-100};
+  --color-green-200: #{$color-green-200};
+  --color-green-300: #{$color-green-300};
+  --color-green-400: #{$color-green-400};
+  --color-green-500: #{$color-green-500};
+  --color-green-600: #{$color-green-600};
+  --color-green-700: #{$color-green-700};
+  --color-green-800: #{$color-green-800};
+  --color-green-900: #{$color-green-900};
+
+  // Primary Grey Scale
+  --color-grey-50: #{$color-grey-50};
+  --color-grey-100: #{$color-grey-100};
+  --color-grey-200: #{$color-grey-200};
+  --color-grey-300: #{$color-grey-300};
+  --color-grey-400: #{$color-grey-400};
+  --color-grey-500: #{$color-grey-500};
+  --color-grey-600: #{$color-grey-600};
+  --color-grey-700: #{$color-grey-700};
+  --color-grey-800: #{$color-grey-800};
+  --color-grey-900: #{$color-grey-900};
+
+  // Primary Error Scale
+  --color-error-50: #{$color-error-50};
+  --color-error-100: #{$color-error-100};
+  --color-error-200: #{$color-error-200};
+  --color-error-300: #{$color-error-300};
+  --color-error-400: #{$color-error-400};
+  --color-error-500: #{$color-error-500};
+  --color-error-600: #{$color-error-600};
+  --color-error-700: #{$color-error-700};
+  --color-error-800: #{$color-error-800};
+  --color-error-900: #{$color-error-900};
+
+  // Primary Success Scale
+  --color-success-50: #{$color-success-50};
+  --color-success-100: #{$color-success-100};
+  --color-success-200: #{$color-success-200};
+  --color-success-300: #{$color-success-300};
+  --color-success-400: #{$color-success-400};
+  --color-success-500: #{$color-success-500};
+  --color-success-600: #{$color-success-600};
+  --color-success-700: #{$color-success-700};
+  --color-success-800: #{$color-success-800};
+  --color-success-900: #{$color-success-900};
+
+  // Semantic Names
+  --color-blue: #{$color-blue};
+  --color-blue-hover: #{$color-blue-hover};
+  --color-blue-active: #{$color-blue-active};
+
+  --color-green: #{$color-green};
+  --color-green-hover: #{$color-green-hover};
+  --color-green-active: #{$color-green-active};
+
+  --color-grey: #{$color-grey};
+  --color-grey-hover: #{$color-grey-hover};
+  --color-grey-active: #{$color-grey-active};
+
+  --color-error: #{$color-error};
+  --color-error-hover: #{$color-error-hover};
+  --color-error-active: #{$color-error-active};
+
+  --color-success: #{$color-success};
+  --color-success-hover: #{$color-success-hover};
+  --color-success-active: #{$color-success-active};
+
+  // Utility Colors
+  --color-disabled-bg: #{$color-disabled-bg};
+  --color-disabled-text: #{$color-disabled-text};
+}

package/src/lib/styles/elevation.scss

@@ -0,0 +1,46 @@
+// Elevation System
+// Drop shadows for creating depth and hierarchy in the UI
+
+:root {
+  // Elevation Level 1 - Subtle elevation for small components
+  --elevation-1: 0 1px 5px 1px rgba(113, 119, 147, 0.10);
+  
+  // Elevation Level 2 - Light elevation for cards and panels
+  --elevation-2: 0 2px 10px 2px rgba(113, 119, 147, 0.10);
+  
+  // Elevation Level 3 - Medium elevation for modals and overlays
+  --elevation-3: 0 4px 15px 3px rgba(113, 119, 147, 0.12);
+  
+  // Elevation Level 4 - High elevation for dropdowns and popups
+  --elevation-4: 0 6px 10px 4px rgba(113, 119, 147, 0.15);
+  
+  // Elevation Level 5 - Maximum elevation for tooltips and alerts
+  --elevation-5: 0 5px 15px 5px rgba(113, 119, 147, 0.20);
+  
+  // Elevation Level 6 - Special elevation for borders and dividers
+  --elevation-6: 0 2px 4px 0 rgba(24, 43, 125, 0.15);
+}
+
+// SCSS Variables for use in components
+$elevation-1: 0 1px 5px 1px rgba(113, 119, 147, 0.10);
+$elevation-2: 0 2px 10px 2px rgba(113, 119, 147, 0.10);
+$elevation-3: 0 4px 15px 3px rgba(113, 119, 147, 0.12);
+$elevation-4: 0 6px 10px 4px rgba(113, 119, 147, 0.15);
+$elevation-5: 0 5px 15px 5px rgba(113, 119, 147, 0.20);
+$elevation-6: 0 2px 4px 0 rgba(24, 43, 125, 0.15);
+
+// Utility Classes
+.elevation-1 { box-shadow: var(--elevation-1); }
+.elevation-2 { box-shadow: var(--elevation-2); }
+.elevation-3 { box-shadow: var(--elevation-3); }
+.elevation-4 { box-shadow: var(--elevation-4); }
+.elevation-5 { box-shadow: var(--elevation-5); }
+.elevation-6 { box-shadow: var(--elevation-6); }
+
+// Mixins for easy use in SCSS
+@mixin elevation-1 { box-shadow: $elevation-1; }
+@mixin elevation-2 { box-shadow: $elevation-2; }
+@mixin elevation-3 { box-shadow: $elevation-3; }
+@mixin elevation-4 { box-shadow: $elevation-4; }
+@mixin elevation-5 { box-shadow: $elevation-5; }
+@mixin elevation-6 { box-shadow: $elevation-6; }

package/src/lib/styles/new-typography.scss

@@ -0,0 +1,202 @@
+/* Google Fonts import suggestion left to consumer's index.html or global styles. */
+@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
+
+
+// SCSS Variables
+$primary-text-color: #4B4F62;
+
+// Mixins
+@mixin typography-base($size, $line-height, $letter-spacing, $weight: 400) {
+  font-size: $size;
+  line-height: $line-height;
+  letter-spacing: $letter-spacing;
+  font-weight: $weight;
+  color: $primary-text-color;
+}
+
+/* Weight utilities */
+.weight-light {
+  font-weight: 300;
+}
+
+.weight-regular {
+  font-weight: 400;
+}
+
+.weight-medium {
+  font-weight: 500;
+}
+
+.weight-semibold {
+  font-weight: 600;
+}
+
+.weight-bold {
+  font-weight: 700;
+}
+
+/* Line height utilities */
+.line-height-none {
+  line-height: 1 !important;
+}
+
+.line-height-tight {
+  line-height: 1.2 !important;
+}
+
+.line-height-normal {
+  line-height: 1.4 !important;
+}
+
+/* Letter spacing utilities */
+.letter-spacing-normal {
+  letter-spacing: 0 !important;
+}
+
+.letter-spacing-wide {
+  letter-spacing: 0.1em !important;
+}
+
+.letter-spacing-wider {
+  letter-spacing: 0.2em !important;
+}
+
+/* Text decoration utilities */
+.text-decoration-none {
+  text-decoration: none !important;
+  font-style: normal !important;
+}
+
+.text-decoration-underline {
+  text-decoration: underline !important;
+  font-style: normal !important;
+}
+
+.text-decoration-italic {
+  text-decoration: none !important;
+  font-style: italic !important;
+}
+
+.text-decoration-strike {
+  text-decoration: line-through !important;
+  font-style: normal !important;
+}
+
+/* Typography Scale - Based on the design system */
+
+/* Text 5XL */
+.font-text-5xl {
+  @include typography-base(2rem, 1.2, -0.1px, 400);
+}
+
+.font-text-5xl-medium {
+  @include typography-base(2rem, 1.2, -0.1px, 500);
+}
+
+.font-text-5xl-bold {
+  @include typography-base(2rem, 1.2, -0.1px, 700);
+}
+
+/* Text 4XL */
+.font-text-4xl {
+  @include typography-base(1.75rem, 1.2, -0.1px, 400);
+}
+
+.font-text-4xl-medium {
+  @include typography-base(1.75rem, 1.2, -0.1px, 500);
+}
+
+.font-text-4xl-bold {
+  @include typography-base(1.75rem, 1.2, -0.1px, 700);
+}
+
+/* Text 3XL */
+.font-text-3xl {
+  @include typography-base(1.5rem, 1.2, -0.1px, 400);
+}
+
+.font-text-3xl-medium {
+  @include typography-base(1.5rem, 1.2, -0.1px, 500);
+}
+
+.font-text-3xl-bold {
+  @include typography-base(1.5rem, 1.2, -0.1px, 700);
+}
+
+/* Text 2XL */
+.font-text-2xl {
+  @include typography-base(1.375rem, 1.2, -0.1px, 400);
+}
+
+.font-text-2xl-medium {
+  @include typography-base(1.375rem, 1.2, -0.1px, 500);
+}
+
+.font-text-2xl-bold {
+  @include typography-base(1.375rem, 1.2, -0.1px, 700);
+}
+
+/* Text XL */
+.font-text-xl {
+  @include typography-base(1.25rem, 1.2, -0.1px, 400);
+}
+
+.font-text-xl-medium {
+  @include typography-base(1.25rem, 1.2, -0.1px, 500);
+}
+
+.font-text-xl-bold {
+  @include typography-base(1.25rem, 1.2, -0.1px, 700);
+}
+
+/* Text LG */
+.font-text-lg {
+  @include typography-base(1rem, 1.4, 0.25px, 400);
+}
+
+.font-text-lg-medium {
+  @include typography-base(1rem, 1.4, 0.25px, 500);
+}
+
+.font-text-lg-bold {
+  @include typography-base(1rem, 1.4, 0.25px, 700);
+}
+
+/* Text Base */
+.font-text-base {
+  @include typography-base(0.875rem, 1.4, 0.25px, 400);
+}
+
+.font-text-base-medium {
+  @include typography-base(0.875rem, 1.4, 0.25px, 500);
+}
+
+.font-text-base-bold {
+  @include typography-base(0.875rem, 1.4, 0.25px, 700);
+}
+
+/* Text SM */
+.font-text-sm {
+  @include typography-base(0.75rem, 1.4, 0.5px, 400);
+}
+
+.font-text-sm-medium {
+  @include typography-base(0.75rem, 1.4, 0.5px, 500);
+}
+
+.font-text-sm-bold {
+  @include typography-base(0.75rem, 1.4, 0.5px, 700);
+}
+
+/* Text XS */
+.font-text-xs {
+  @include typography-base(0.625rem, 1.4, 0.5px, 400);
+}
+
+.font-text-xs-medium {
+  @include typography-base(0.625rem, 1.4, 0.5px, 500);
+}
+
+.font-text-xs-bold {
+  @include typography-base(0.625rem, 1.4, 0.5px, 700);
+}

package/src/lib/styles/spacing.scss

@@ -0,0 +1,39 @@
+// ============================================
+// SPACING SCALE
+// ============================================
+
+// Spacing Scale - Modular spacing system
+$space-2: 2px;    // Use for small, compact components
+$space-4: 4px;    // Use for small, compact components
+$space-6: 6px;    // Use for small, compact components
+$space-8: 8px;    // Use for small, compact components
+$space-10: 10px;  // Use for small, compact components
+$space-12: 12px;  // Use for medium, less dense components
+$space-16: 16px;  // Use for larger components or dense layouts
+$space-20: 20px;  // Use for larger pieces of UI, patterns, or dense layouts
+$space-24: 24px;  // Use for larger pieces of UI, patterns, or layouts
+$space-32: 32px;  // Use for patterns or layouts
+$space-40: 40px;  // Use for patterns or layouts
+$space-48: 48px;  // Use for patterns or layouts with increased spacing
+$space-64: 64px;  // Use for layouts with increased spacing
+$space-80: 80px;  // Use for layouts with increased spacing
+
+// ============================================
+// CSS CUSTOM PROPERTIES
+// ============================================
+
+:root {
+  // Spacing Scale
+  --space-2: #{$space-2};
+  --space-4: #{$space-4};
+  --space-8: #{$space-8};
+  --space-12: #{$space-12};
+  --space-16: #{$space-16};
+  --space-20: #{$space-20};
+  --space-24: #{$space-24};
+  --space-32: #{$space-32};
+  --space-40: #{$space-40};
+  --space-48: #{$space-48};
+  --space-64: #{$space-64};
+  --space-80: #{$space-80};
+}

package/src/lib/styles/typography-classes.scss

@@ -0,0 +1,203 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
+
+/* Import new typography classes globally so font-text-5xl etc. are available in all components */
+@import './new-typography.scss';
+@import './colors.scss';
+
+.font-display-large {
+  font-family: 'Roboto', sans-serif !important;
+  font-size: 57px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 64px;
+  /* 112.281% */
+  letter-spacing: -0.25px;
+}
+
+.font-display-medium {
+  font-family: 'Roboto', sans-serif !important;
+  font-size: 45px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 52px;
+  /* 115.556% */
+}
+
+.font-display-small {
+  font-family: 'Roboto', sans-serif !important;
+  font-size: 36px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 44px;
+  /* 122.222% */
+}
+
+.font-headline-large {
+  font-family: 'Roboto', sans-serif !important;
+  font-size: 32px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 40px;
+  /* 125% */
+}
+
+.font-headline-medium {
+  font-family: 'Roboto', sans-serif !important;
+  font-size: 28px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 36px;
+  /* 128.571% */
+}
+
+.font-headline-small {
+  font-family: 'Roboto', sans-serif !important;
+  font-size: 24px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 32px;
+  /* 133.333% */
+}
+
+.font-title-large {
+  font-family: 'Roboto', sans-serif !important;
+  font-size: 22px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 28px;
+  /* 127.273% */
+}
+
+.font-title-medium {
+  font-family: 'Roboto', sans-serif !important;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 24px;
+  /* 150% */
+  letter-spacing: 0.15px;
+}
+
+.font-title-small {
+  font-family: 'Roboto', sans-serif !important;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 20px;
+  /* 142.857% */
+  letter-spacing: 0.1px;
+}
+
+.font-label-large {
+  font-family: 'Roboto', sans-serif !important;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 20px;
+  /* 142.857% */
+  letter-spacing: 0.1px;
+}
+
+.font-label-medium {
+  font-family: 'Roboto', sans-serif !important;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 12px;
+  /* 100% */
+  letter-spacing: 0.5px;
+}
+
+.font-label-small {
+  font-family: 'Roboto', sans-serif !important;
+  font-size: 10px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 10px;
+  /* 100% */
+  letter-spacing: 0.5px;
+}
+
+.font-body-large {
+  font-family: 'Roboto', sans-serif !important;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 24px;
+  /* 150% */
+  letter-spacing: 0.5px;
+}
+
+.font-body-medium {
+  font-family: 'Roboto', sans-serif !important;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 20px;
+  /* 142.857% */
+  letter-spacing: 0.25px;
+}
+
+.font-body-small {
+  font-family: 'Roboto', sans-serif !important;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 16px;
+  /* 133.333% */
+  letter-spacing: 0.4px;
+}
+
+/*
+  Utility classes requested by Certification Section and others.
+  Placed here so they are globally available, including in the
+  New Typography pages and all components that import this file.
+*/
+.typo-medium-700 {
+  color: var(--Greys-700, #4B4F62);
+  font-family: 'Roboto', sans-serif !important;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 140%;
+  letter-spacing: 0.035px;
+}
+
+.typo-description {
+  color: var(--Greys-700, #4B4F62);
+  font-family: 'Roboto', sans-serif !important;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 140%;
+  letter-spacing: 0.035px;
+}
+
+/* Simple color utility for grey-500 */
+.text-grey-500 {
+  color: $color-grey-500 !important;
+}
+
+/* Location text style - italic grey-600 */
+.font-location-text {
+  color: $color-grey-600;
+  font-family: 'Roboto', sans-serif !important;
+  font-size: 16px;
+  font-style: italic;
+  font-weight: 400;
+  line-height: 140%;
+  /* 22.4px */
+  letter-spacing: 0.04px;
+}
+
+/* Job title / Course name style - bold grey-600 */
+.font-title-text {
+  color: $color-grey-600;
+  font-family: 'Roboto', sans-serif !important;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 140%;
+  /* 22.4px */
+  letter-spacing: 0.04px;
+}