osi-cards-lib 1.5.32 → 1.5.34

package/styles/core/_bootstrap-reset.scss

@@ -0,0 +1,445 @@
+/* ===================================================================
+   BOOTSTRAP & BOOSTED STYLE ISOLATION
+   Reset Bootstrap/Boosted Variables and Styles for Complete Isolation
+   =================================================================== */
+/* 
+ * This file resets all Bootstrap/Boosted CSS variables and common styles
+ * within OSI Cards containers to prevent style conflicts when cards are
+ * imported into applications that use Bootstrap or Orange Boosted.
+ * 
+ * Supported Frameworks:
+ *   - Bootstrap 5.x
+ *   - Orange Boosted 5.x
+ *   - DataTables
+ * 
+ * Usage:
+ *   This file is automatically imported in scoped stylesheets.
+ *   All framework variables are reset to 'unset' within .osi-cards-container
+ *   and .ai-card-surface to ensure complete isolation.
+ * 
+ * NOTE: This file is imported INSIDE .osi-cards-container { } in _styles-scoped.scss
+ */
+
+/* Reset all Bootstrap/Boosted CSS variables - applied to parent container via & */
+&,
+.ai-card-surface,
+article.ai-card-surface {
+  /* Reset Bootstrap color variables */
+  --bs-blue: unset;
+  --bs-indigo: unset;
+  --bs-purple: unset;
+  --bs-pink: unset;
+  --bs-red: unset;
+  --bs-orange: unset;
+  --bs-yellow: unset;
+  --bs-green: unset;
+  --bs-teal: unset;
+  --bs-cyan: unset;
+  --bs-black: unset;
+  --bs-white: unset;
+  --bs-gray: unset;
+  --bs-gray-dark: unset;
+  --bs-gray-100: unset;
+  --bs-gray-200: unset;
+  --bs-gray-300: unset;
+  --bs-gray-400: unset;
+  --bs-gray-500: unset;
+  --bs-gray-600: unset;
+  --bs-gray-700: unset;
+  --bs-gray-800: unset;
+  --bs-gray-900: unset;
+  --bs-gray-950: unset;
+
+  /* Reset Bootstrap semantic color variables */
+  --bs-primary: unset;
+  --bs-secondary: unset;
+  --bs-success: unset;
+  --bs-info: unset;
+  --bs-warning: unset;
+  --bs-danger: unset;
+  --bs-light: unset;
+  --bs-dark: unset;
+
+  /* Reset Bootstrap RGB color variables */
+  --bs-primary-rgb: unset;
+  --bs-secondary-rgb: unset;
+  --bs-success-rgb: unset;
+  --bs-info-rgb: unset;
+  --bs-warning-rgb: unset;
+  --bs-danger-rgb: unset;
+  --bs-light-rgb: unset;
+  --bs-dark-rgb: unset;
+  --bs-white-rgb: unset;
+  --bs-black-rgb: unset;
+
+  /* Reset Bootstrap text emphasis variables */
+  --bs-primary-text-emphasis: unset;
+  --bs-secondary-text-emphasis: unset;
+  --bs-success-text-emphasis: unset;
+  --bs-info-text-emphasis: unset;
+  --bs-warning-text-emphasis: unset;
+  --bs-danger-text-emphasis: unset;
+  --bs-light-text-emphasis: unset;
+  --bs-dark-text-emphasis: unset;
+
+  /* Reset Bootstrap background subtle variables */
+  --bs-primary-bg-subtle: unset;
+  --bs-secondary-bg-subtle: unset;
+  --bs-success-bg-subtle: unset;
+  --bs-info-bg-subtle: unset;
+  --bs-warning-bg-subtle: unset;
+  --bs-danger-bg-subtle: unset;
+  --bs-light-bg-subtle: unset;
+  --bs-dark-bg-subtle: unset;
+
+  /* Reset Bootstrap border subtle variables */
+  --bs-primary-border-subtle: unset;
+  --bs-secondary-border-subtle: unset;
+  --bs-success-border-subtle: unset;
+  --bs-info-border-subtle: unset;
+  --bs-warning-border-subtle: unset;
+  --bs-danger-border-subtle: unset;
+  --bs-light-border-subtle: unset;
+  --bs-dark-border-subtle: unset;
+
+  /* Reset Bootstrap typography variables */
+  --bs-font-sans-serif: unset;
+  --bs-font-monospace: unset;
+  --bs-body-font-family: unset;
+  --bs-body-font-size: unset;
+  --bs-body-font-weight: unset;
+  --bs-body-line-height: unset;
+  --bs-body-color: unset;
+  --bs-body-color-rgb: unset;
+  --bs-body-bg: unset;
+  --bs-body-bg-rgb: unset;
+
+  /* Reset Bootstrap emphasis and secondary colors */
+  --bs-emphasis-color: unset;
+  --bs-emphasis-color-rgb: unset;
+  --bs-secondary-color: unset;
+  --bs-secondary-color-rgb: unset;
+  --bs-secondary-bg: unset;
+  --bs-secondary-bg-rgb: unset;
+  --bs-tertiary-color: unset;
+  --bs-tertiary-color-rgb: unset;
+  --bs-tertiary-bg: unset;
+  --bs-tertiary-bg-rgb: unset;
+  --bs-heading-color: unset;
+
+  /* Reset Bootstrap link variables */
+  --bs-link-color: unset;
+  --bs-link-color-rgb: unset;
+  --bs-link-decoration: unset;
+  --bs-link-hover-color: unset;
+  --bs-link-hover-color-rgb: unset;
+
+  /* Reset Bootstrap code and highlight variables */
+  --bs-code-color: unset;
+  --bs-highlight-color: unset;
+  --bs-highlight-bg: unset;
+  --bs-disabled-color: unset;
+  --bs-tertiary-active-bg: unset;
+
+  /* Reset Bootstrap border variables */
+  --bs-border-width: unset;
+  --bs-border-style: unset;
+  --bs-border-color: unset;
+  --bs-border-color-subtle: unset;
+  --bs-border-color-translucent: unset;
+  --bs-border-radius: unset;
+  --bs-border-radius-sm: unset;
+  --bs-border-radius-lg: unset;
+  --bs-border-radius-xl: unset;
+  --bs-border-radius-xxl: unset;
+  --bs-border-radius-2xl: unset;
+  --bs-border-radius-pill: unset;
+
+  /* Reset Bootstrap box shadow variables */
+  --bs-box-shadow: unset;
+  --bs-box-shadow-sm: unset;
+  --bs-box-shadow-lg: unset;
+  --bs-box-shadow-inset: unset;
+
+  /* Reset Bootstrap focus variables */
+  --bs-focus-visible-inner-color: unset;
+  --bs-focus-visible-outer-color: unset;
+  --bs-focus-ring-width: unset;
+  --bs-focus-ring-opacity: unset;
+  --bs-focus-ring-color: unset;
+
+  /* Reset Bootstrap form variables */
+  --bs-form-valid-color: unset;
+  --bs-form-valid-border-color: unset;
+  --bs-form-invalid-color: unset;
+  --bs-form-invalid-border-color: unset;
+  --bs-form-check-filter: unset;
+  --bs-form-check-input-disabled-color: unset;
+  --bs-form-color-disabled-filter: unset;
+  --bs-form-select-indicator: unset;
+  --bs-form-select-disabled-indicator: unset;
+  --bs-form-switch-square-bg: unset;
+  --bs-form-switch-unchecked-invalid-border-color: unset;
+
+  /* Reset Bootstrap table variables */
+  --bs-table-active-bg-factor: unset;
+  --bs-table-hover-bg-factor: unset;
+  --bs-table-striped-bg-factor: unset;
+
+  /* Reset Bootstrap DataTables variables */
+  --dt-row-selected: unset;
+  --dt-row-selected-text: unset;
+  --dt-row-selected-link: unset;
+  --dt-row-stripe: unset;
+  --dt-row-hover: unset;
+  --dt-column-ordering: unset;
+  --dt-header-align-items: unset;
+  --dt-header-vertical-align: unset;
+  --dt-html-background: unset;
+  --dt-row-hover-alpha: unset;
+  --dt-row-stripe-alpha: unset;
+  --dt-column-ordering-alpha: unset;
+  --dt-row-selected-stripe-alpha: unset;
+  --dt-row-selected-column-ordering-alpha: unset;
+
+  /* Reset Bootstrap gradient */
+  --bs-gradient: unset;
+
+  /* Reset Bootstrap gutter variables */
+  --bs-gutter-y: unset;
+  --bs-gutter-x: unset;
+
+  /* Reset Bootstrap breakpoint variables */
+  --bs-breakpoint-xs: unset;
+  --bs-breakpoint-sm: unset;
+  --bs-breakpoint-md: unset;
+  --bs-breakpoint-lg: unset;
+  --bs-breakpoint-xl: unset;
+  --bs-breakpoint-xxl: unset;
+
+  /* Reset Bootstrap icon variables */
+  --bs-chevron-icon: unset;
+  --bs-close-icon: unset;
+  --bs-check-icon: unset;
+  --bs-success-icon: unset;
+  --bs-error-icon: unset;
+
+  /* Reset Bootstrap breadcrumb variables */
+  --bs-breadcrumb-divider-filter: unset;
+
+  /* ===================================================================
+     ORANGE BOOSTED SPECIFIC RESETS
+     =================================================================== */
+
+  /* Reset Boosted color variables */
+  --boosted-orange: unset;
+  --boosted-primary: unset;
+  --boosted-secondary: unset;
+  --boosted-black: unset;
+  --boosted-white: unset;
+
+  /* Reset Boosted functional colors */
+  --o-accessible-orange: unset;
+  --o-accessible-yellow: unset;
+  --o-accessible-green: unset;
+  --o-accessible-blue: unset;
+  --o-accessible-purple: unset;
+  --o-accessible-pink: unset;
+
+  /* Reset Boosted supporting colors */
+  --o-supporting-green: unset;
+  --o-supporting-blue: unset;
+  --o-supporting-purple: unset;
+  --o-supporting-pink: unset;
+  --o-supporting-yellow: unset;
+
+  /* Reset Boosted typography variables */
+  --o-icon-font-family: unset;
+  --o-letter-icon-font-family: unset;
+  --o-stepped-component-size: unset;
+
+  /* Reset Boosted component variables */
+  --o-navbar-item-min-height: unset;
+  --o-navbar-item-padding-y: unset;
+  --o-navbar-bg: unset;
+  --o-nav-link-color: unset;
+  --o-nav-link-hover-color: unset;
+
+  /* Reset Boosted card variables */
+  --o-card-cap-bg: unset;
+  --o-card-cap-color: unset;
+  --o-card-img-overlay-padding: unset;
+
+  /* Reset Boosted accordion variables */
+  --o-accordion-btn-focus-box-shadow: unset;
+  --o-accordion-color: unset;
+  --o-accordion-bg: unset;
+
+  /* Reset Boosted alert variables */
+  --o-alert-bg: unset;
+  --o-alert-color: unset;
+  --o-alert-border-color: unset;
+
+  /* Reset Boosted button variables */
+  --o-btn-social-network-icon-size: unset;
+  --o-btn-social-network-bg: unset;
+
+  /* Reset Boosted badge variables */
+  --o-badge-font-size: unset;
+  --o-badge-font-weight: unset;
+  --o-badge-border-radius: unset;
+
+  /* Reset Boosted footer variables */
+  --o-footer-bg: unset;
+  --o-footer-color: unset;
+  --o-footer-link-color: unset;
+
+  /* Reset Boosted header variables */
+  --o-header-minimized-logo-height: unset;
+  --o-header-height: unset;
+
+  /* ===================================================================
+     CSS ISOLATION
+     =================================================================== */
+
+  /* CSS Isolation - Create new stacking context */
+  isolation: isolate;
+
+  /* Ensure proper box-sizing for card layout */
+  box-sizing: border-box;
+
+  /* Reset inherited font from parent */
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+/* Additional isolation for nested elements - scoped to card surfaces only */
+.ai-card-surface,
+.ai-card-surface *,
+article.ai-card-surface,
+article.ai-card-surface * {
+  /* Reset Bootstrap-specific properties that might leak through */
+  --bs-body-font-family: unset;
+  --bs-body-font-size: unset;
+  --bs-body-font-weight: unset;
+  --bs-body-line-height: unset;
+  --bs-body-color: unset;
+  --bs-body-bg: unset;
+}
+
+/* Prevent Bootstrap utility classes from affecting card elements */
+&,
+.ai-card-surface,
+article.ai-card-surface {
+  /* Ensure Bootstrap's container classes don't affect layout */
+  &[class*="container"],
+  &[class*="row"],
+  &[class*="col"] {
+    /* Reset Bootstrap grid system properties */
+    --bs-gutter-x: unset;
+    --bs-gutter-y: unset;
+  }
+}
+
+/* ===================================================================
+   ELEMENT-LEVEL BOOTSTRAP OVERRIDES
+   Reset all common HTML element styling from Bootstrap/Boosted
+   =================================================================== */
+
+/* Reset article elements */
+article {
+  text-align: left !important;
+  font-size: inherit !important;
+  line-height: inherit !important;
+  border: none !important;
+  margin: 0 !important;
+  padding: 0 !important;
+}
+
+/* Reset div elements */
+div {
+  box-sizing: border-box !important;
+  text-align: left !important;
+}
+
+/* Reset button elements within cards */
+button,
+[role="button"] {
+  font-family: inherit !important;
+  font-size: inherit !important;
+  line-height: inherit !important;
+  text-align: left !important;
+}
+
+/* Reset heading elements */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0 !important;
+  padding: 0 !important;
+  font-family: inherit !important;
+  text-align: left !important;
+}
+
+/* Reset paragraph and span elements */
+p,
+span {
+  margin: 0 !important;
+  padding: 0 !important;
+  text-align: left !important;
+}
+
+/* Reset list elements */
+ul,
+ol,
+li {
+  margin: 0 !important;
+  padding: 0 !important;
+  list-style: none !important;
+  text-align: left !important;
+}
+
+/* Reset anchor elements */
+a {
+  text-decoration: none !important;
+  color: inherit !important;
+}
+
+/* Reset image elements */
+img {
+  max-width: 100% !important;
+  height: auto !important;
+}
+
+/* Reset table elements */
+table,
+thead,
+tbody,
+tr,
+th,
+td {
+  border: none !important;
+  padding: 0 !important;
+  margin: 0 !important;
+  text-align: left !important;
+  vertical-align: top !important;
+}
+
+/* Force all child elements to use border-box */
+*,
+*::before,
+*::after {
+  box-sizing: border-box !important;
+}
+
+/* Reset flex and grid containers */
+[class*="grid"],
+[class*="flex"],
+[class*="-grid"],
+[class*="-flex"] {
+  box-sizing: border-box !important;
+}

package/styles/core/_color-helpers.scss

@@ -0,0 +1,46 @@
+// ===================================================================
+// COLOR HELPERS - Re-exports from Master Tokens
+// ===================================================================
+//
+// This file re-exports color variables and functions from the master
+// tokens file for backward compatibility with @import.
+//
+// All color definitions are now in: ../tokens/_master.scss
+//
+// USAGE: Import this file in section SCSS files to access color helpers.
+// ===================================================================
+
+@forward "../tokens/master";
+@use "../tokens/master" as *;
+
+// All color variables, functions, and opacity variants are now
+// exported from the master tokens file:
+//
+// Brand colors:
+//   $brand-color, $brand-color-90...$brand-color-03
+//
+// Foreground colors:
+//   $foreground-color, $foreground-90...$foreground-03
+//
+// Secondary text:
+//   $text-secondary, $text-secondary-50...$text-secondary-05
+//
+// Muted foreground:
+//   $muted-foreground, $muted-foreground-50...$muted-foreground-10
+//
+// White variants:
+//   $white-90...$white-05
+//
+// Status colors:
+//   $success-color, $warning-color, $error-color, $info-color
+//
+// Border/shadow colors:
+//   $border-light, $border-medium, $border-dark
+//   $shadow-light, $shadow-medium, $shadow-dark
+//
+// Background colors:
+//   $card-bg, $section-bg, etc.
+//
+// Functions:
+//   brand-alpha($opacity), foreground-alpha($opacity),
+//   white-alpha($opacity), black-alpha($opacity)

package/styles/core/_global-unified.scss

@@ -0,0 +1,118 @@
+/* ===================================================================
+   UNIFIED GLOBAL STYLES - Scoped for .osi-cards-container
+   Based on docs app _global.scss with selectors scoped to container
+   =================================================================== */
+
+/* Box sizing reset scoped to container */
+& *,
+& *::before,
+& *::after {
+  box-sizing: border-box !important;
+  margin: 0;
+  padding: 0;
+  /* Removed border-color to prevent any border appearance */
+  outline-color: var(--ring);
+}
+
+/* Apply font and color settings to the container itself */
+& {
+  font-family:
+    Helvetica,
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    Arial,
+    sans-serif;
+  /* Container is fully transparent - host app background shows through */
+  /* Only the card surface (.ai-card-surface) should have a background */
+  background: transparent !important;
+  background-color: transparent !important;
+  color: var(--foreground);
+  line-height: 1.5;
+
+  /* Improved text rendering for sharpness */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+  font-feature-settings: "kern" 1;
+}
+
+& button {
+  cursor: pointer;
+  font-family: inherit;
+
+  // Enhanced focus indicators for accessibility
+  &:focus-visible {
+    outline: 2px solid var(--color-brand, #ff7900);
+    outline-offset: 2px;
+    border-radius: 4px;
+  }
+
+  &:focus:not(:focus-visible) {
+    outline: none;
+  }
+}
+
+// Global focus styles for all interactive elements inside container
+& a,
+& button,
+& input,
+& select,
+& textarea,
+& [tabindex]:not([tabindex="-1"]) {
+  &:focus-visible {
+    outline: 2px solid var(--color-brand, #ff7900);
+    outline-offset: 2px;
+    border-radius: 2px;
+  }
+
+  &:focus:not(:focus-visible) {
+    outline: none;
+  }
+}
+
+& h1,
+& h2,
+& h3,
+& h4,
+& h5,
+& h6 {
+  margin: 0;
+  line-height: 1.2;
+  font-family:
+    Helvetica,
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    Arial,
+    sans-serif;
+}
+
+& h1 {
+  font-size: var(--text-2xl);
+  font-weight: var(--font-weight-medium);
+}
+
+& h2 {
+  font-size: var(--text-xl);
+  font-weight: var(--font-weight-medium);
+}
+
+& h3 {
+  font-size: var(--text-lg);
+  font-weight: var(--font-weight-medium);
+}
+
+& h4 {
+  font-size: var(--text-base);
+  font-weight: var(--font-weight-medium);
+}
+
+& p {
+  font-size: var(--text-base);
+  font-weight: var(--font-weight-normal);
+  line-height: 1.5;
+  margin: 0;
+}

package/styles/core/_global.scss

@@ -0,0 +1,73 @@
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  /* Removed border-color to prevent any border appearance */
+  outline-color: var(--ring);
+}
+
+html {
+  font-size: var(--font-size);
+}
+
+body {
+  font-family:
+    Helvetica,
+    "Helvetica Neue",
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    sans-serif;
+  background-color: var(--background);
+  color: var(--foreground);
+  line-height: 1.5;
+
+  /* Improved text rendering for sharpness */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+  font-feature-settings: "kern" 1;
+}
+
+button {
+  cursor: pointer;
+  font-family: inherit;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0;
+  line-height: 1.5;
+}
+
+h1 {
+  font-size: var(--text-2xl);
+  font-weight: var(--font-weight-medium);
+}
+
+h2 {
+  font-size: var(--text-xl);
+  font-weight: var(--font-weight-medium);
+}
+
+h3 {
+  font-size: var(--text-lg);
+  font-weight: var(--font-weight-medium);
+}
+
+h4 {
+  font-size: var(--text-base);
+  font-weight: var(--font-weight-medium);
+}
+
+p {
+  font-size: var(--text-base);
+  font-weight: var(--font-weight-normal);
+  line-height: 1.5;
+  margin: 0;
+}