@pecb-ui/components 1.1.12 → 1.1.13

package/styles/abstracts/_variables.scss

@@ -0,0 +1,328 @@
+// ============================================
+// PECB UI Components - Design Tokens
+// ============================================
+
+// --------------------------------------------
+// COLOR PALETTE
+// --------------------------------------------
+
+// Primary Colors
+$primary-1: #a11e29;
+$primary-2: #212427;
+$primary-3: #ffffff;
+
+// Semantic aliases
+$primary-color: $primary-1;
+$primary-dark: $primary-2;
+$primary-light: $primary-3;
+
+// Neutral Colors
+$neutral-1: #313131;
+$neutral-2: #616161;
+$neutral-3: #919191;
+$neutral-4: #c2c2c2;
+$neutral-5: #ececec;
+$neutral-6: #f7f5f5;
+$neutral-7: #f4f4f4;
+$neutral-8: #fafafa;
+
+// Semantic neutral aliases
+$text-primary: $neutral-1;
+$text-secondary: $neutral-2;
+$text-muted: $neutral-3;
+$border-color: $neutral-4;
+$background-light: $neutral-5;
+$background-lighter: $neutral-6;
+$background-subtle: $neutral-7;
+$background-page: $neutral-8;
+
+// Base colors
+$white: #ffffff;
+$black: #000000;
+
+// --------------------------------------------
+// STATUS COLORS
+// --------------------------------------------
+
+// Cancelled / Error / Danger
+$cancelled-text: #dc3545;
+$cancelled-bg: #fdecea;
+$cancelled-light: #ff606f;
+
+// Pending / Warning
+$pending-text: #fd7e14;
+$pending-bg: #fff4e5;
+$pending-light: #ff9c4a;
+
+// Successful / Success
+$successful-text: #008000;
+$successful-bg: #e6f4ea;
+$successful-light: #57bc57;
+
+// New / Info
+$new-text: #007bff;
+$new-bg: #e6f0fa;
+$new-light: #5eacff;
+
+// Purple / Accent
+$purple-text: #8e6df0;
+$purple-icon: #eee8ff;
+$purple-light: #a98cff;
+
+// Semantic status aliases
+$error-color: $cancelled-text;
+$error-bg: $cancelled-bg;
+$error-light: $cancelled-light;
+
+$warning-color: $pending-text;
+$warning-bg: $pending-bg;
+$warning-light: $pending-light;
+
+$success-color: $successful-text;
+$success-bg: $successful-bg;
+$success-light: $successful-light;
+
+$info-color: $new-text;
+$info-bg: $new-bg;
+$info-light: $new-light;
+
+$accent-color: $purple-text;
+$accent-bg: $purple-icon;
+$accent-light: $purple-light;
+
+// --------------------------------------------
+// TYPOGRAPHY
+// --------------------------------------------
+
+// Font Family
+$font-family-base:
+  "Plus Jakarta Sans",
+  -apple-system,
+  BlinkMacSystemFont,
+  "Segoe UI",
+  Roboto,
+  sans-serif;
+$font-family-monospace: "Courier New", Courier, monospace;
+
+// Font Sizes
+$font-size-12: 12px;
+$font-size-13: 13px;
+$font-size-14: 14px;
+$font-size-16: 16px;
+$font-size-18: 18px;
+$font-size-20: 20px;
+$font-size-24: 24px;
+$font-size-32: 32px;
+$font-size-40: 40px;
+$font-size-48: 48px;
+
+// Semantic Font Size Aliases
+$font-size-base: $font-size-16;
+$font-size-xs: $font-size-12;
+$font-size-sm: $font-size-14;
+$font-size-md: $font-size-16;
+$font-size-lg: $font-size-18;
+$font-size-xl: $font-size-20;
+$font-size-xxl: $font-size-24;
+$font-size-xxxl: $font-size-32;
+
+// Caption
+$font-size-caption: $font-size-12;
+
+// Font Weights
+$font-weight-regular: 400;
+$font-weight-medium: 500;
+$font-weight-bold: 700;
+
+// Line Heights
+$line-height-base: 1.5;
+$line-height-tight: 1.25;
+$line-height-heading: 1.2;
+$line-height-loose: 1.75;
+
+// Letter Spacing
+$letter-spacing-tight: -0.02em;
+$letter-spacing-normal: 0;
+$letter-spacing-wide: 0.02em;
+$letter-spacing-wider: 0.04em;
+
+// --------------------------------------------
+// SPACING (Base Scale)
+// --------------------------------------------
+
+$spacing-0: 0;
+$spacing-1: 6px;
+$spacing-2: 8px;
+$spacing-3: 12px;
+$spacing-4: 16px;
+$spacing-5: 18px;
+$spacing-6: 20px;
+$spacing-7: 24px;
+$spacing-8: 32px;
+$spacing-9: 40px;
+$spacing-10: 48px;
+$spacing-11: 56px;
+$spacing-12: 64px;
+
+// Semantic Spacing Aliases
+$spacing-none: $spacing-0; // 0
+$spacing-xxs: $spacing-1; // 6px
+$spacing-xs: $spacing-3; // 12px
+$spacing-sm: $spacing-4; // 16px
+$spacing-md: $spacing-4; // 16px
+$spacing-lg: $spacing-6; // 20px
+$spacing-xl: $spacing-7; // 24px
+
+// --------------------------------------------
+// BORDER RADIUS
+// --------------------------------------------
+
+$radius-xs: $spacing-1; // 6px
+$radius-sm: $spacing-2; // 8px
+$radius-md: $spacing-3; // 12px
+$radius-lg: $spacing-4; // 16px
+
+// Legacy aliases (for backwards compatibility)
+$border-radius-none: 0;
+$border-radius-sm: $radius-sm;
+$border-radius-md: $radius-md;
+$border-radius-lg: $radius-lg;
+$border-radius-xl: $spacing-6; // 20px
+$border-radius-2xl: $spacing-7; // 24px
+$border-radius-full: 9999px;
+$border-radius-round: 50%;
+
+// --------------------------------------------
+// SIZES (Component Sizes)
+// --------------------------------------------
+
+$size-xs: $spacing-7; // 24px
+$size-sm: $spacing-8; // 32px
+$size-md: $spacing-9; // 40px
+$size-lg: $spacing-10; // 48px
+$size-xl: $spacing-11; // 56px
+$size-2xl: $spacing-12; // 64px
+
+// --------------------------------------------
+// SHADOWS
+// --------------------------------------------
+
+$shadow-none: none;
+
+// Legacy aliases (kept for backwards compatibility)
+$shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+$shadow-md:
+  0 4px 6px -1px rgba(0, 0, 0, 0.1),
+  0 2px 4px -1px rgba(0, 0, 0, 0.06);
+$shadow-lg:
+  0 10px 15px -3px rgba(0, 0, 0, 0.1),
+  0 4px 6px -2px rgba(0, 0, 0, 0.05);
+$shadow-xl:
+  0 20px 25px -5px rgba(0, 0, 0, 0.1),
+  0 10px 10px -5px rgba(0, 0, 0, 0.04);
+$shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+
+// Shadow Soft — diffused, subtle depth
+$shadow-soft-xxsmall: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
+$shadow-soft-xsmall:
+  0 1px 3px 0 rgba(0, 0, 0, 0.06),
+  0 1px 2px -1px rgba(0, 0, 0, 0.03);
+$shadow-soft-small:
+  0 2px 4px 0 rgba(0, 0, 0, 0.06),
+  0 1px 3px -1px rgba(0, 0, 0, 0.04);
+$shadow-soft-medium:
+  0 4px 8px -2px rgba(0, 0, 0, 0.06),
+  0 2px 4px -2px rgba(0, 0, 0, 0.04);
+$shadow-soft-large:
+  0 8px 16px -4px rgba(0, 0, 0, 0.08),
+  0 4px 6px -2px rgba(0, 0, 0, 0.03);
+$shadow-soft-xlarge:
+  0 16px 24px -6px rgba(0, 0, 0, 0.08),
+  0 6px 10px -2px rgba(0, 0, 0, 0.03);
+$shadow-soft-xxlarge:
+  0 24px 48px -12px rgba(0, 0, 0, 0.1),
+  0 8px 16px -4px rgba(0, 0, 0, 0.04);
+$shadow-soft-xxxlarge:
+  0 32px 64px -16px rgba(0, 0, 0, 0.12),
+  0 12px 24px -4px rgba(0, 0, 0, 0.05);
+
+// Shadow Hard — sharper, more pronounced depth
+$shadow-hard-xxsmall: 0 1px 2px 0 rgba(0, 0, 0, 0.12);
+$shadow-hard-xsmall:
+  0 1px 3px 0 rgba(0, 0, 0, 0.16),
+  0 1px 2px -1px rgba(0, 0, 0, 0.08);
+$shadow-hard-small:
+  0 2px 6px 0 rgba(0, 0, 0, 0.16),
+  0 1px 4px -1px rgba(0, 0, 0, 0.1);
+$shadow-hard-medium:
+  0 4px 12px -2px rgba(0, 0, 0, 0.18),
+  0 2px 6px -2px rgba(0, 0, 0, 0.1);
+
+// Shadow token maps (for programmatic access)
+$shadow-soft-map: (
+  "xxsmall": $shadow-soft-xxsmall,
+  "xsmall": $shadow-soft-xsmall,
+  "small": $shadow-soft-small,
+  "medium": $shadow-soft-medium,
+  "large": $shadow-soft-large,
+  "xlarge": $shadow-soft-xlarge,
+  "xxlarge": $shadow-soft-xxlarge,
+  "xxxlarge": $shadow-soft-xxxlarge,
+);
+
+$shadow-hard-map: (
+  "xxsmall": $shadow-hard-xxsmall,
+  "xsmall": $shadow-hard-xsmall,
+  "small": $shadow-hard-small,
+  "medium": $shadow-hard-medium,
+);
+
+// --------------------------------------------
+// BLURS
+// --------------------------------------------
+
+$blur-none: 0;
+$blur-xsmall: 2px;
+$blur-small: 4px;
+$blur-medium: 8px;
+$blur-large: 12px;
+$blur-xlarge: 20px;
+
+$blur-map: (
+  "none": $blur-none,
+  "xsmall": $blur-xsmall,
+  "small": $blur-small,
+  "medium": $blur-medium,
+  "large": $blur-large,
+  "xlarge": $blur-xlarge,
+);
+
+// --------------------------------------------
+// TRANSITIONS
+// --------------------------------------------
+
+$transition-fast: 150ms ease-in-out;
+$transition-base: 250ms ease-in-out;
+$transition-slow: 350ms ease-in-out;
+
+// --------------------------------------------
+// BREAKPOINTS
+// --------------------------------------------
+
+$breakpoint-xs: 480px;
+$breakpoint-sm: 768px;
+$breakpoint-md: 1024px;
+$breakpoint-lg: 1280px;
+$breakpoint-xl: 1536px;
+
+// --------------------------------------------
+// Z-INDEX LAYERS
+// --------------------------------------------
+
+$z-index-dropdown: 1000;
+$z-index-sticky: 1020;
+$z-index-fixed: 1030;
+$z-index-modal-backdrop: 1040;
+$z-index-modal: 1050;
+$z-index-popover: 1060;
+$z-index-tooltip: 1070;

package/styles/base/_container.scss

@@ -0,0 +1,26 @@
+@use "../abstracts/mixins" as *;
+
+// =============================================================================
+// CONTAINER — the one page-measure rule, applied everywhere content is shown.
+//
+// Reproduces the content wrapper from the PECB designs ("PECB Profile —
+// Layout 3": `max-width: 1180px; margin: 0 auto; padding: 14px`, widening the
+// gutter to 16px below 880px). Wrap any page in it and the side spacing is the
+// same throughout the project:
+//
+//   <div class="pecb-container"> …page content… </div>
+//
+// One knob, settable on the element or any ancestor:
+//
+//   --pecb-container-max-width   content measure cap   (1180px; `none` = full bleed)
+//
+// Purely additive and opt-in: nothing changes until the class is applied, so
+// existing layouts (including `pecb-project-layout` consumers) render exactly
+// as before. Inside a layout, put it on the page you project:
+//
+//   <div layoutContent><div class="pecb-container"> … </div></div>
+// =============================================================================
+
+.pecb-container {
+  @include content-container;
+}

package/styles/base/_reset.scss

@@ -0,0 +1,72 @@
+@use "../abstracts/variables" as *;
+
+// Modern CSS Reset
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
+
+body {
+  font-family: $font-family-base;
+  font-size: $font-size-base;
+  line-height: $line-height-base;
+  color: $text-primary;
+  background-color: $white;
+}
+
+// Remove default list styles
+ul,
+ol {
+  list-style: none;
+}
+
+// Remove default button styles
+button {
+  cursor: pointer;
+  font-family: inherit;
+}
+
+// Remove default link styles
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+// Improve media defaults
+img,
+picture,
+video,
+canvas,
+svg {
+  display: block;
+  max-width: 100%;
+  height: auto;
+}
+
+// Remove built-in form typography styles
+input,
+button,
+textarea,
+select {
+  font: inherit;
+}
+
+// Avoid text overflows
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  overflow-wrap: break-word;
+}

package/styles/main.scss

@@ -0,0 +1,12 @@
+// Main SCSS entry point for UI Components Library
+
+// Abstracts
+@use "abstracts/variables" as *;
+@use "abstracts/mixins" as *;
+
+// Base
+@use "base/reset";
+@use "base/container";
+
+// Utility classes (directive-driven)
+@use "../lib/components/shadow/shadow.directive";