@windstream/react-shared-components 0.0.10 → 0.0.11

package/src/styles/globals.css

@@ -1,319 +1,275 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-/* Material Symbols Font */
-@font-face {
-  font-family: "Material Symbols Rounded";
-  src: url("/material_symbols/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].woff2")
-    format("woff2");
-  font-weight: 100 700;
-  font-style: normal;
-  font-display: swap;
-}
-
-/* Custom CSS variables for fonts */
-/* default theme Residential */
-:root {
-  --win-site-font:
-    -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu",
-    "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-
-  /* Color tokens - Border */
-  --color-border: #E6E6E6;
-  --color-border-brand: #24A76A;
-  --color-border-critical: #7E0000;
-  --color-border-critical-secondary: #F0A7A7;
-  --color-border-disabled: #F2F2F4;
-  --color-border-focus: #24A76A;
-  --color-border-focus-inverse: #00002D;
-  --color-border-focus-secondary: #00002D;
-  --color-border-hover: #CECECE;
-  --color-border-info: #CECECE;
-  --color-border-inverse: #FFFFFF;
-  --color-border-secondary: #F2F2F4;
-  --color-border-secondary-on-bg-fill: #949494;
-  --color-border-success: #24A76A;
-  --color-border-tertiary: #CECECE;
-
-  /* Color tokens - Icon */
-  --color-icon-brand: #24A76A;
-  --color-icon-brand-accent: #F5FF1E;
-  --color-icon-critical: #D40000;
-  --color-icon-default: #00002D;
-  --color-icon-info: #757575;
-  --color-icon-inverse: #FFFFFF;
-  --color-icon-inverse-secondary: #E6E6E6;
-  --color-icon-secondary: #757575;
-  --color-icon-success: #24A76A;
-
-  /* Color tokens - Checkbox */
-  --color-checkbox-bg-surface-disabled: #F7F7F8;
-  --color-checkbox-bg-surface-selected-disabled: #E6E6E6;
-  --color-checkbox-icon-disabled: #FFFFFF;
-
-  /* Color tokens - Input */
-  --color-input-bg-surface: #FFFFFF;
-  --color-input-bg-surface-active: #F2F2F4;
-  --color-input-bg-surface-disabled: #F7F7F8;
-  --color-input-bg-surface-hover: #F7F7F8;
-  --color-input-border: #CECECE;
-  --color-input-border-critical: #D40000;
-  --color-input-border-hover: #00002D;
-  --color-input-border-selected: #24A76A;
-  --color-input-icon-placeholder: #757575;
-  --color-input-text-placeholder: #5E5E5E;
-
-  /* Color tokens - Nav */
-  --color-nav-bg: #FFFFFF;
-  --color-nav-bg-surface: #FBFBFC;
-  --color-nav-bg-surface-active: #F2F2F4;
-  --color-nav-bg-surface-hover: #F7F7F8;
-  --color-nav-bg-surface-selected: #F2F2F4;
-
-  /* Color tokens - Radio */
-  --color-radio-button-bg-surface-disabled: #F7F7F8;
-  --color-radio-button-bg-surface-selected-disabled: #E6E6E6;
-  --color-radio-button-icon-disabled: #F7F7F8;
-
-  /* Color tokens - Scrim */
-  --color-scrim-bg-modal: rgba(0, 0, 0, 0.5);
-  --color-scrim-bg-video-lightbox: rgba(0, 0, 0, 0.8);
-
-  /* Color tokens - Skeleton */
-  --color-skeleton-bg-start: #CECECE;
-  --color-skeleton-bg-end: #E6E6E6;
-
-  /* Color tokens - Toggle */
-  --color-toggle-bg-fill: #FFFFFF;
-  --color-toggle-bg-surface-active: #24A76A;
-  --color-toggle-bg-surface-disabled: #949494;
-
-  /* Color tokens - Tooltip */
-  --color-tooltip-bg: #464646;
-
-  /* Color tokens - Background */
-  --color-bg: #FFFFFF;
-  --color-bg-fill-brand: #24A76A;
-  --color-bg-fill-brand-accent: #F5FF1E;
-  --color-bg-fill-brand-active: #209A61;
-  --color-bg-fill-brand-disabled: #CECECE;
-  --color-bg-fill-brand-hover: #45C187;
-  --color-bg-fill-brand-selected: #24A76A;
-  --color-bg-fill-brand-supporting: #07B2E2;
-  --color-bg-fill-brand-tertiary: #931D69;
-  --color-bg-fill-critical: #D40000;
-  --color-bg-fill-critical-secondary: #FDF5F5;
-  --color-bg-fill-info: #F2F2F4;
-  --color-bg-fill-inverse: #00002D;
-  --color-bg-fill-inverse-active: #00002D;
-  --color-bg-fill-inverse-disabled: #CECECE;
-  --color-bg-fill-inverse-hover: #191A54;
-  --color-bg-fill-inverse-selected: #00002D;
-  --color-bg-fill-secondary: #FFFFFF;
-  --color-bg-fill-secondary-active: #F2F2F4;
-  --color-bg-fill-secondary-hover: #FBFBFC;
-  --color-bg-fill-success: #24A76A;
-  --color-bg-fill-success-secondary: #F4FBF8;
-  --color-bg-fill-surface-brand: #F4FBF8;
-  --color-bg-fill-surface-inverse: #00002D;
-  --color-bg-fill-surface-success: #D3F2E3;
-  --color-bg-inverse: #00002D;
-  --color-bg-surface: #FFFFFF;
-  --color-bg-surface-active: #F2F2F4;
-  --color-bg-surface-brand: #F4FBF8;
-  --color-bg-surface-disabled: #F2F2F4;
-  --color-bg-surface-hover: #F7F7F8;
-  --color-bg-surface-info: #F7F7F8;
-  --color-bg-surface-inverse: #191A54;
-  --color-bg-surface-secondary: #FBFBFC;
-  --color-bg-surface-secondary-active: #E6E6E6;
-  --color-bg-surface-secondary-hover: #F2F2F4;
-  --color-bg-surface-secondary-selected: #E6E6E6;
-  --color-bg-surface-selected: #F7F7F8;
-  --color-bg-surface-success: #D3F2E3;
-  --color-bg-surface-tertiary: #F7F7F8;
-  --color-bg-surface-tertiary-active: #E6E6E6;
-  --color-bg-surface-tertiary-hover: #F2F2F4;
-  --color-bg-surface-transparent: rgba(0, 0, 0, 0);
-
-  /* Color tokens - Text */
-  --color-text: #00002D;
-  --color-text-brand: #24A76A;
-  --color-text-brand-accent-on-bg-fill: #00002D;
-  --color-text-brand-hover: #1B8352;
-  --color-text-brand-on-bg-fill: #FFFFFF;
-  --color-text-brand-supporting-on-bg-fill: #00002D;
-  --color-text-brand-tertiary-on-bg-fill: #FFFFFF;
-  --color-text-critical: #D40000;
-  --color-text-critical-on-bg-inverse: #FDF5F5;
-  --color-text-disabled: #757575;
-  --color-text-info: #464646;
-  --color-text-inverse: #FFFFFF;
-  --color-text-link: #00002D;
-  --color-text-link-active: #00002D;
-  --color-text-link-hover: #00002D;
-  --color-text-link-inverse: #FFFFFF;
-  --color-text-secondary: #464646;
-  --color-text-success: #1B8352;
-
-  /* Border radius tokens - Default (Residential) */
-  --border-radius-2-5: 10px;
-  --border-radius-3-5: 14px;
-  --border-radius-lg: 0.5rem;
-  --border-radius-xl: 0.75rem;
-  --border-radius-2xl: 1rem;
-  --border-radius-2-5xl: 1.25rem;
-  --border-radius-4xl: 2rem;
-  --border-radius-5xl: 2.5rem;
-}
-
-/* smb theme */
-
-[data-theme="business"] {
-    /* Border colors */
-    --color-border-brand: #007C93;
-    --color-border-critical: #D40000;
-    --color-border-focus: #007C93;
-    --color-border-focus-inverse: #231F20;
-    --color-border-focus-secondary: #231F20;
-    --color-border-success: #24A76A;
-
-    /* Icon colors */
-    --color-icon-brand: #009BB8;
-    --color-icon-brand-accent: #22A881;
-    --color-icon-default: #231F20;
-    --color-icon-secondary: #A33895;
-    --color-icon-success: #22A881;
-
-    /* Input colors */
-    --color-input-border-hover: #231F20;
-    --color-input-border-selected: #009BB8;
-    --color-input-icon-placeholder: #949494;
-    --color-input-text-placeholder: #949494;
-
-    /* Toggle colors */
-    --color-toggle-bg-surface-active: #009BB8;
-
-    /* Background fill colors */
-    --color-bg-fill-brand: #007C93;
-    --color-bg-fill-brand-accent: #22A881;
-    --color-bg-fill-brand-active: #005D6E;
-    --color-bg-fill-brand-hover: #30AEC5;
-    --color-bg-fill-brand-selected: #007C93;
-    --color-bg-fill-brand-supporting: #40AFC9;
-    --color-bg-fill-brand-tertiary: #A33895;
-    --color-bg-fill-inverse: #231F20;
-    --color-bg-fill-inverse-active: #231F20;
-    --color-bg-fill-inverse-hover: #4D4A4A;
-    --color-bg-fill-inverse-selected: #231F20;
-    --color-bg-fill-success: #1B8667;
-    --color-bg-fill-success-secondary: #C8E9E0;
-    --color-bg-fill-surface-brand: #BFE6ED;
-    --color-bg-fill-surface-inverse: #231F20;
-    --color-bg-fill-surface-success: #A0DAC9;
-
-    /* Text colors */
-    --color-text: #231F20;
-    --color-text-brand: #009BB8;
-    --color-text-brand-accent-on-bg-fill: #22A881;
-    --color-text-brand-hover: #003E4A;
-    --color-text-brand-supporting-on-bg-fill: #40AFC9;
-    --color-text-brand-tertiary-on-bg-fill: #A33895;
-    --color-text-info: #5A5A5A;
-    --color-text-link: #009BB8;
-    --color-text-link-active: #009BB8;
-    --color-text-link-hover: #003E4A;
-    --color-text-secondary: #5A5A5A;
-    --color-text-success: #1B8667;
-
-    /* Border radius tokens - Business theme */
-    --border-radius-2-5: 0px;
-    --border-radius-3-5: 3px;
-    --border-radius-lg: 2px;
-    --border-radius-xl: 2px;
-    --border-radius-2xl: 0rem;
-    --border-radius-2-5xl: 0rem;
-    --border-radius-4xl: 0rem;
-    --border-radius-5xl: 2.5rem;
-}
-
-/* Base styles for components */
-@layer base {
-  * {
-    box-sizing: border-box;
-  }
-
-  html {
-    font-family: var(--win-site-font);
-  }
-}
-
-/* Component-specific styles */
-@layer components {
-  /* Blinking dot animation */
-  @keyframes blink {
-    0%,
-    50% {
-      opacity: 1;
-    }
-    51%,
-    100% {
-      opacity: 0.3;
-    }
-  }
-
-  .animate-blink {
-    animation: blink 1.5s ease-in-out infinite;
-  }
-}
-
-
-.shape-bg {
-    position: relative;
-    overflow: hidden;
-}
-
-.shape-bg-content {
-    position: relative;
-    z-index: 1;
-}
-
-/* path1 on the SVG */
-.shape-bg-svg {
-    position: absolute;
-    pointer-events: none;
-    z-index: 0;
-}
-
-.path2 {
-    left: 50%;
-    top: 45.8px;
-    transform: translateX(-101%);
-}
-
-.path1 {
-    left: 50%;
-    top: -2371px;
-    transform: translateX(-55%);
-}
-
-.path3 {
-    top: -2600px;
-    left: 50%;
-    transform: translateX(-55%);
-}
-
-.path4 {
-    left: 50%;
-    top: -1966.1px;
-    transform: translateX(-48%);
-}
-
-.shape-bg-content .shape-bg svg {
-    display: none;
-}
-
-.shape-bg-content #custom-layout {
-    background-color: transparent !important;
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Material Symbols Font */
+@font-face {
+  font-family: "Material Symbols Rounded";
+  src: url("/material_symbols/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].woff2")
+    format("woff2");
+  font-weight: 100 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+/* Custom CSS variables for fonts */
+/* default theme Residential */
+:root {
+  --win-site-font:
+    -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu",
+    "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+
+  /* Color tokens - Border */
+  --color-border: #E6E6E6;
+  --color-border-brand: #24A76A;
+  --color-border-critical: #7E0000;
+  --color-border-critical-secondary: #F0A7A7;
+  --color-border-disabled: #F2F2F4;
+  --color-border-focus: #24A76A;
+  --color-border-focus-inverse: #00002D;
+  --color-border-focus-secondary: #00002D;
+  --color-border-hover: #CECECE;
+  --color-border-info: #CECECE;
+  --color-border-inverse: #FFFFFF;
+  --color-border-secondary: #F2F2F4;
+  --color-border-secondary-on-bg-fill: #949494;
+  --color-border-success: #24A76A;
+  --color-border-tertiary: #CECECE;
+
+  /* Color tokens - Icon */
+  --color-icon-brand: #24A76A;
+  --color-icon-brand-accent: #F5FF1E;
+  --color-icon-critical: #D40000;
+  --color-icon-default: #00002D;
+  --color-icon-info: #757575;
+  --color-icon-inverse: #FFFFFF;
+  --color-icon-inverse-secondary: #E6E6E6;
+  --color-icon-secondary: #757575;
+  --color-icon-success: #24A76A;
+
+  /* Color tokens - Checkbox */
+  --color-checkbox-bg-surface-disabled: #F7F7F8;
+  --color-checkbox-bg-surface-selected-disabled: #E6E6E6;
+  --color-checkbox-icon-disabled: #FFFFFF;
+
+  /* Color tokens - Input */
+  --color-input-bg-surface: #FFFFFF;
+  --color-input-bg-surface-active: #F2F2F4;
+  --color-input-bg-surface-disabled: #F7F7F8;
+  --color-input-bg-surface-hover: #F7F7F8;
+  --color-input-border: #CECECE;
+  --color-input-border-critical: #D40000;
+  --color-input-border-hover: #00002D;
+  --color-input-border-selected: #24A76A;
+  --color-input-icon-placeholder: #757575;
+  --color-input-text-placeholder: #5E5E5E;
+
+  /* Color tokens - Nav */
+  --color-nav-bg: #FFFFFF;
+  --color-nav-bg-surface: #FBFBFC;
+  --color-nav-bg-surface-active: #F2F2F4;
+  --color-nav-bg-surface-hover: #F7F7F8;
+  --color-nav-bg-surface-selected: #F2F2F4;
+
+  /* Color tokens - Radio */
+  --color-radio-button-bg-surface-disabled: #F7F7F8;
+  --color-radio-button-bg-surface-selected-disabled: #E6E6E6;
+  --color-radio-button-icon-disabled: #F7F7F8;
+
+  /* Color tokens - Scrim */
+  --color-scrim-bg-modal: rgba(0, 0, 0, 0.5);
+  --color-scrim-bg-video-lightbox: rgba(0, 0, 0, 0.8);
+
+  /* Color tokens - Skeleton */
+  --color-skeleton-bg-start: #CECECE;
+  --color-skeleton-bg-end: #E6E6E6;
+
+  /* Color tokens - Toggle */
+  --color-toggle-bg-fill: #FFFFFF;
+  --color-toggle-bg-surface-active: #24A76A;
+  --color-toggle-bg-surface-disabled: #949494;
+
+  /* Color tokens - Tooltip */
+  --color-tooltip-bg: #464646;
+
+  /* Color tokens - Background */
+  --color-bg: #FFFFFF;
+  --color-bg-fill-brand: #24A76A;
+  --color-bg-fill-brand-accent: #F5FF1E;
+  --color-bg-fill-brand-active: #209A61;
+  --color-bg-fill-brand-disabled: #CECECE;
+  --color-bg-fill-brand-hover: #45C187;
+  --color-bg-fill-brand-selected: #24A76A;
+  --color-bg-fill-brand-supporting: #07B2E2;
+  --color-bg-fill-brand-tertiary: #931D69;
+  --color-bg-fill-critical: #D40000;
+  --color-bg-fill-critical-secondary: #FDF5F5;
+  --color-bg-fill-info: #F2F2F4;
+  --color-bg-fill-inverse: #00002D;
+  --color-bg-fill-inverse-active: #00002D;
+  --color-bg-fill-inverse-disabled: #CECECE;
+  --color-bg-fill-inverse-hover: #191A54;
+  --color-bg-fill-inverse-selected: #00002D;
+  --color-bg-fill-secondary: #FFFFFF;
+  --color-bg-fill-secondary-active: #F2F2F4;
+  --color-bg-fill-secondary-hover: #FBFBFC;
+  --color-bg-fill-success: #24A76A;
+  --color-bg-fill-success-secondary: #F4FBF8;
+  --color-bg-fill-surface-brand: #F4FBF8;
+  --color-bg-fill-surface-inverse: #00002D;
+  --color-bg-fill-surface-success: #D3F2E3;
+  --color-bg-inverse: #00002D;
+  --color-bg-surface: #FFFFFF;
+  --color-bg-surface-active: #F2F2F4;
+  --color-bg-surface-brand: #F4FBF8;
+  --color-bg-surface-disabled: #F2F2F4;
+  --color-bg-surface-hover: #F7F7F8;
+  --color-bg-surface-info: #F7F7F8;
+  --color-bg-surface-inverse: #191A54;
+  --color-bg-surface-secondary: #FBFBFC;
+  --color-bg-surface-secondary-active: #E6E6E6;
+  --color-bg-surface-secondary-hover: #F2F2F4;
+  --color-bg-surface-secondary-selected: #E6E6E6;
+  --color-bg-surface-selected: #F7F7F8;
+  --color-bg-surface-success: #D3F2E3;
+  --color-bg-surface-tertiary: #F7F7F8;
+  --color-bg-surface-tertiary-active: #E6E6E6;
+  --color-bg-surface-tertiary-hover: #F2F2F4;
+  --color-bg-surface-transparent: rgba(0, 0, 0, 0);
+
+  /* Color tokens - Text */
+  --color-text: #00002D;
+  --color-text-brand: #24A76A;
+  --color-text-brand-accent-on-bg-fill: #00002D;
+  --color-text-brand-hover: #1B8352;
+  --color-text-brand-on-bg-fill: #FFFFFF;
+  --color-text-brand-supporting-on-bg-fill: #00002D;
+  --color-text-brand-tertiary-on-bg-fill: #FFFFFF;
+  --color-text-critical: #D40000;
+  --color-text-critical-on-bg-inverse: #FDF5F5;
+  --color-text-disabled: #757575;
+  --color-text-info: #464646;
+  --color-text-inverse: #FFFFFF;
+  --color-text-link: #00002D;
+  --color-text-link-active: #00002D;
+  --color-text-link-hover: #00002D;
+  --color-text-link-inverse: #FFFFFF;
+  --color-text-secondary: #464646;
+  --color-text-success: #1B8352;
+
+  /* Border radius tokens - Default (Residential) */
+  --border-radius-2-5: 10px;
+  --border-radius-3-5: 14px;
+  --border-radius-lg: 0.5rem;
+  --border-radius-xl: 0.75rem;
+  --border-radius-2xl: 1rem;
+  --border-radius-2-5xl: 1.25rem;
+  --border-radius-4xl: 2rem;
+  --border-radius-5xl: 2.5rem;
+}
+
+/* smb theme */
+
+[data-theme="business"] {
+    /* Border colors */
+    --color-border-brand: #007C93;
+    --color-border-critical: #D40000;
+    --color-border-focus: #007C93;
+    --color-border-focus-inverse: #231F20;
+    --color-border-focus-secondary: #231F20;
+    --color-border-success: #24A76A;
+
+    /* Icon colors */
+    --color-icon-brand: #009BB8;
+    --color-icon-brand-accent: #22A881;
+    --color-icon-default: #231F20;
+    --color-icon-secondary: #A33895;
+    --color-icon-success: #22A881;
+
+    /* Input colors */
+    --color-input-border-hover: #231F20;
+    --color-input-border-selected: #009BB8;
+    --color-input-icon-placeholder: #949494;
+    --color-input-text-placeholder: #949494;
+
+    /* Toggle colors */
+    --color-toggle-bg-surface-active: #009BB8;
+
+    /* Background fill colors */
+    --color-bg-fill-brand: #007C93;
+    --color-bg-fill-brand-accent: #22A881;
+    --color-bg-fill-brand-active: #005D6E;
+    --color-bg-fill-brand-hover: #30AEC5;
+    --color-bg-fill-brand-selected: #007C93;
+    --color-bg-fill-brand-supporting: #40AFC9;
+    --color-bg-fill-brand-tertiary: #A33895;
+    --color-bg-fill-inverse: #231F20;
+    --color-bg-fill-inverse-active: #231F20;
+    --color-bg-fill-inverse-hover: #4D4A4A;
+    --color-bg-fill-inverse-selected: #231F20;
+    --color-bg-fill-success: #1B8667;
+    --color-bg-fill-success-secondary: #C8E9E0;
+    --color-bg-fill-surface-brand: #BFE6ED;
+    --color-bg-fill-surface-inverse: #231F20;
+    --color-bg-fill-surface-success: #A0DAC9;
+
+    /* Text colors */
+    --color-text: #231F20;
+    --color-text-brand: #009BB8;
+    --color-text-brand-accent-on-bg-fill: #22A881;
+    --color-text-brand-hover: #003E4A;
+    --color-text-brand-supporting-on-bg-fill: #40AFC9;
+    --color-text-brand-tertiary-on-bg-fill: #A33895;
+    --color-text-info: #5A5A5A;
+    --color-text-link: #009BB8;
+    --color-text-link-active: #009BB8;
+    --color-text-link-hover: #003E4A;
+    --color-text-secondary: #5A5A5A;
+    --color-text-success: #1B8667;
+
+    /* Border radius tokens - Business theme */
+    --border-radius-2-5: 0px;
+    --border-radius-3-5: 3px;
+    --border-radius-lg: 2px;
+    --border-radius-xl: 2px;
+    --border-radius-2xl: 0rem;
+    --border-radius-2-5xl: 0rem;
+    --border-radius-4xl: 0rem;
+    --border-radius-5xl: 2.5rem;
+}
+
+/* Base styles for components */
+@layer base {
+  * {
+    box-sizing: border-box;
+  }
+
+  html {
+    font-family: var(--win-site-font);
+  }
+}
+
+/* Component-specific styles */
+@layer components {
+  /* Blinking dot animation */
+  @keyframes blink {
+    0%,
+    50% {
+      opacity: 1;
+    }
+    51%,
+    100% {
+      opacity: 0.3;
+    }
+  }
+
+  .animate-blink {
+    animation: blink 1.5s ease-in-out infinite;
+  }
+}
+
+/* Hide shape background SVGs inside content */
+
+.shape-bg-content .shape-bg svg {
+    display: none;
+}

package/src/types/global.d.ts

@@ -1,9 +1,9 @@
-declare module "*.module.css" {
-  const classes: { [key: string]: string };
-  export default classes;
-}
-
-declare module "*.css" {
-  const content: string;
-  export default content;
-}
+declare module "*.module.css" {
+  const classes: { [key: string]: string };
+  export default classes;
+}
+
+declare module "*.css" {
+  const content: string;
+  export default content;
+}