@reliability-design/web 1.3.0 → 1.4.0

package/dist/vars-WY2XCF5G.css

@@ -0,0 +1,653 @@
+/* AUTO-GENERATED by figma-pipeline/scripts/build-vars.ts — DO NOT EDIT */
+/* Source: figma-pipeline/tokens/{primitives, color tokens}/*.tokens.json (RelDS_A1 V2) */
+/* Contains: color + foundation primitives, semantic color tokens (light/dark). */
+
+:root {
+  /* ==================== PRIMITIVES — COLOR (mode-agnostic) ==================== */
+  --rel-colors-gray-0: #FFFFFF;
+  --rel-colors-gray-50: #F7F7F7;
+  --rel-colors-gray-100: #E5E5E5;
+  --rel-colors-gray-200: #C2C2C2;
+  --rel-colors-gray-300: #A3A3A3;
+  --rel-colors-gray-350: #8C8C8C;
+  --rel-colors-gray-400: #7D7D7D;
+  --rel-colors-gray-500: #525252;
+  --rel-colors-gray-600: #404040;
+  --rel-colors-gray-700: #2B2B2B;
+  --rel-colors-gray-800: #1B1B1B;
+  --rel-colors-gray-900: #111111;
+  --rel-colors-gray-950: #0B0B0B;
+  --rel-colors-brand-400: #28F6AB;
+  --rel-colors-brand-500: #00F49C;
+  --rel-colors-brand-600: #00DB8B;
+  --rel-colors-green-50: #EDF8F4;
+  --rel-colors-green-100: #D5F1E7;
+  --rel-colors-green-200: #91D9BF;
+  --rel-colors-green-300: #5FC9A3;
+  --rel-colors-green-400: #30B887;
+  --rel-colors-green-500: #00A86B;
+  --rel-colors-green-600: #008655;
+  --rel-colors-green-700: #006440;
+  --rel-colors-green-800: #003823;
+  --rel-colors-green-900: #002115;
+  --rel-colors-blue-50: #EFF7FF;
+  --rel-colors-blue-100: #DEEFFF;
+  --rel-colors-blue-200: #B6E1FF;
+  --rel-colors-blue-300: #75C9FF;
+  --rel-colors-blue-400: #2CAFFF;
+  --rel-colors-blue-500: #0091EA;
+  --rel-colors-blue-600: #007DD4;
+  --rel-colors-blue-700: #00528D;
+  --rel-colors-blue-800: #053C66;
+  --rel-colors-blue-900: #042B4D;
+  --rel-colors-red-50: #FFEBEB;
+  --rel-colors-red-100: #FFDBDB;
+  --rel-colors-red-200: #FFB2B2;
+  --rel-colors-red-300: #FF9393;
+  --rel-colors-red-400: #FF7272;
+  --rel-colors-red-500: #FF5252;
+  --rel-colors-red-600: #CE3131;
+  --rel-colors-red-700: #942323;
+  --rel-colors-red-800: #3E0E0E;
+  --rel-colors-red-900: #2C0B0E;
+  --rel-colors-yellow-50: #FFFBF5;
+  --rel-colors-yellow-100: #FFEFD1;
+  --rel-colors-yellow-200: #FFE3AE;
+  --rel-colors-yellow-300: #FFD78A;
+  --rel-colors-yellow-400: #FFCB66;
+  --rel-colors-yellow-500: #FFB82E;
+  --rel-colors-yellow-600: #CC9324;
+  --rel-colors-yellow-700: #997228;
+  --rel-colors-yellow-800: #4E380E;
+  --rel-colors-yellow-900: #32260D;
+  --rel-colors-orange-50: #FFF7F2;
+  --rel-colors-orange-100: #FFDBC1;
+  --rel-colors-orange-200: #FFC091;
+  --rel-colors-orange-300: #FFA460;
+  --rel-colors-orange-400: #FF8830;
+  --rel-colors-orange-500: #FF6D00;
+  --rel-colors-orange-600: #CC5700;
+  --rel-colors-orange-700: #994100;
+  --rel-colors-orange-800: #662B00;
+  --rel-colors-orange-900: #321500;
+  --rel-colors-dark-alpha-1: rgba(11, 11, 11, 0.05);
+  --rel-colors-dark-alpha-2: rgba(11, 11, 11, 0.08);
+  --rel-colors-dark-alpha-3: rgba(11, 11, 11, 0.1);
+  --rel-colors-dark-alpha-4: rgba(11, 11, 11, 0.2);
+  --rel-colors-dark-alpha-5: rgba(11, 11, 11, 0.25);
+  --rel-colors-dark-alpha-6: rgba(11, 11, 11, 0.3);
+  --rel-colors-dark-alpha-7: rgba(11, 11, 11, 0.35);
+  --rel-colors-dark-alpha-8: rgba(11, 11, 11, 0.4);
+  --rel-colors-dark-alpha-9: rgba(11, 11, 11, 0.45);
+  --rel-colors-dark-alpha-10: rgba(11, 11, 11, 0.5);
+  --rel-colors-light-alpha-1: rgba(255, 255, 255, 0.05);
+  --rel-colors-light-alpha-2: rgba(255, 255, 255, 0.08);
+  --rel-colors-light-alpha-3: rgba(255, 255, 255, 0.1);
+  --rel-colors-light-alpha-4: rgba(255, 255, 255, 0.2);
+  --rel-colors-light-alpha-5: rgba(255, 255, 255, 0.25);
+  --rel-colors-light-alpha-6: rgba(255, 255, 255, 0.3);
+  --rel-colors-light-alpha-7: rgba(255, 255, 255, 0.35);
+  --rel-colors-light-alpha-8: rgba(255, 255, 255, 0.4);
+  --rel-colors-light-alpha-9: rgba(255, 255, 255, 0.45);
+  --rel-colors-light-alpha-10: rgba(255, 255, 255, 0.5);
+
+  /* ==================== PRIMITIVES — FOUNDATIONS ==================== */
+
+  /* --- fonts --- */
+  --rel-fonts-font-family: Poppins, sans-serif;
+  --rel-fonts-weight-headings-semibold: 600;
+  --rel-fonts-weight-body-regular: 400;
+  --rel-fonts-weight-body-medium: 500;
+  --rel-fonts-weight-body-semibold: 600;
+  --rel-fonts-size-headings-3xl: 36px;
+  --rel-fonts-size-headings-2xl: 32px;
+  --rel-fonts-size-headings-xl: 28px;
+  --rel-fonts-size-headings-lg: 24px;
+  --rel-fonts-size-headings-md: 20px;
+  --rel-fonts-size-headings-sm: 16px;
+  --rel-fonts-size-headings-xs: 14px;
+  --rel-fonts-size-body-xl: 20px;
+  --rel-fonts-size-body-lg: 16px;
+  --rel-fonts-size-body-md: 14px;
+  --rel-fonts-size-body-sm: 12px;
+  --rel-fonts-size-body-xs: 10px;
+  --rel-fonts-size-paragraph-xl: 20px;
+  --rel-fonts-size-paragraph-lg: 16px;
+  --rel-fonts-size-paragraph-md: 14px;
+  --rel-fonts-size-paragraph-sm: 12px;
+  --rel-fonts-size-paragraph-xs: 10px;
+  --rel-fonts-size-label-xl: 20px;
+  --rel-fonts-size-label-lg: 16px;
+  --rel-fonts-size-label-md: 14px;
+  --rel-fonts-size-label-sm: 12px;
+  --rel-fonts-size-label-xs: 10px;
+  --rel-fonts-size-action-xl: 16px;
+  --rel-fonts-size-action-lg: 14px;
+  --rel-fonts-size-action-md: 12px;
+  --rel-fonts-line-height-headings-3xl: 44px;
+  --rel-fonts-line-height-headings-2xl: 40px;
+  --rel-fonts-line-height-headings-xl: 36px;
+  --rel-fonts-line-height-headings-lg: 32px;
+  --rel-fonts-line-height-headings-md: 28px;
+  --rel-fonts-line-height-headings-sm: 24px;
+  --rel-fonts-line-height-headings-xs: 22px;
+  --rel-fonts-line-height-body-xl: 28px;
+  --rel-fonts-line-height-body-lg: 24px;
+  --rel-fonts-line-height-body-md: 22px;
+  --rel-fonts-line-height-body-sm: 20px;
+  --rel-fonts-line-height-body-xs: 18px;
+  --rel-fonts-line-height-paragraph-xl: 30px;
+  --rel-fonts-line-height-paragraph-lg: 26px;
+  --rel-fonts-line-height-paragraph-md: 24px;
+  --rel-fonts-line-height-paragraph-sm: 22px;
+  --rel-fonts-line-height-paragraph-xs: 20px;
+  --rel-fonts-line-height-label-xl: 24px;
+  --rel-fonts-line-height-label-lg: 20px;
+  --rel-fonts-line-height-label-md: 18px;
+  --rel-fonts-line-height-label-sm: 16px;
+  --rel-fonts-line-height-label-xs: 14px;
+  --rel-fonts-line-height-action-xl: 24px;
+  --rel-fonts-line-height-action-lg: 24px;
+  --rel-fonts-line-height-action-md: 24px;
+  --rel-fonts-letter-spacing-md: -1.2px;
+  --rel-fonts-letter-spacing-sm: -0.6px;
+  --rel-fonts-letter-spacing-xs: -0.2px;
+  --rel-fonts-letter-spacing-none: 0px;
+
+  /* --- spacing --- */
+  --rel-spacing-3xs: 2px;
+  --rel-spacing-2xs: 4px;
+  --rel-spacing-xs: 8px;
+  --rel-spacing-sm: 12px;
+  --rel-spacing-md: 16px;
+  --rel-spacing-lg: 20px;
+  --rel-spacing-xl: 24px;
+  --rel-spacing-2xl: 32px;
+  --rel-spacing-3xl: 48px;
+
+  /* --- border-radius --- */
+  --rel-border-radius-square: 0px;
+  --rel-border-radius-xs: 4px;
+  --rel-border-radius-sm: 8px;
+  --rel-border-radius-md: 16px;
+  --rel-border-radius-lg: 24px;
+  --rel-border-radius-xl: 32px;
+  --rel-border-radius-full-rounded: 1000px;
+
+  /* --- stroke --- */
+  --rel-stroke-xs: 0.5px;
+  --rel-stroke-sm: 1px;
+  --rel-stroke-md: 1.5px;
+  --rel-stroke-lg: 2px;
+
+  /* ==================== TYPOGRAPHY — COMPOSITE ROLES ==================== */
+  --rel-headings-3xl-font-family: var(--rel-fonts-font-family);
+  --rel-headings-3xl-font-weight: var(--rel-fonts-weight-headings-semibold);
+  --rel-headings-3xl-font-size: var(--rel-fonts-size-headings-3xl);
+  --rel-headings-3xl-line-height: var(--rel-fonts-line-height-headings-3xl);
+  --rel-headings-3xl-letter-spacing: var(--rel-fonts-letter-spacing-md);
+  --rel-headings-2xl-font-family: var(--rel-fonts-font-family);
+  --rel-headings-2xl-font-weight: var(--rel-fonts-weight-headings-semibold);
+  --rel-headings-2xl-font-size: var(--rel-fonts-size-headings-2xl);
+  --rel-headings-2xl-line-height: var(--rel-fonts-line-height-headings-2xl);
+  --rel-headings-2xl-letter-spacing: var(--rel-fonts-letter-spacing-md);
+  --rel-headings-xl-font-family: var(--rel-fonts-font-family);
+  --rel-headings-xl-font-weight: var(--rel-fonts-weight-headings-semibold);
+  --rel-headings-xl-font-size: var(--rel-fonts-size-headings-xl);
+  --rel-headings-xl-line-height: var(--rel-fonts-line-height-headings-xl);
+  --rel-headings-xl-letter-spacing: var(--rel-fonts-letter-spacing-sm);
+  --rel-headings-lg-font-family: var(--rel-fonts-font-family);
+  --rel-headings-lg-font-weight: var(--rel-fonts-weight-headings-semibold);
+  --rel-headings-lg-font-size: var(--rel-fonts-size-headings-lg);
+  --rel-headings-lg-line-height: var(--rel-fonts-line-height-headings-lg);
+  --rel-headings-lg-letter-spacing: var(--rel-fonts-letter-spacing-sm);
+  --rel-headings-md-font-family: var(--rel-fonts-font-family);
+  --rel-headings-md-font-weight: var(--rel-fonts-weight-headings-semibold);
+  --rel-headings-md-font-size: var(--rel-fonts-size-headings-md);
+  --rel-headings-md-line-height: var(--rel-fonts-line-height-headings-md);
+  --rel-headings-md-letter-spacing: var(--rel-fonts-letter-spacing-sm);
+  --rel-headings-sm-font-family: var(--rel-fonts-font-family);
+  --rel-headings-sm-font-weight: var(--rel-fonts-weight-headings-semibold);
+  --rel-headings-sm-font-size: var(--rel-fonts-size-headings-sm);
+  --rel-headings-sm-line-height: var(--rel-fonts-line-height-headings-sm);
+  --rel-headings-sm-letter-spacing: var(--rel-fonts-letter-spacing-xs);
+  --rel-headings-xs-font-family: var(--rel-fonts-font-family);
+  --rel-headings-xs-font-weight: var(--rel-fonts-weight-headings-semibold);
+  --rel-headings-xs-font-size: var(--rel-fonts-size-headings-xs);
+  --rel-headings-xs-line-height: var(--rel-fonts-line-height-headings-xs);
+  --rel-headings-xs-letter-spacing: var(--rel-fonts-letter-spacing-xs);
+  --rel-body-xl-regular-font-family: var(--rel-fonts-font-family);
+  --rel-body-xl-regular-font-weight: var(--rel-fonts-weight-body-regular);
+  --rel-body-xl-regular-font-size: var(--rel-fonts-size-body-xl);
+  --rel-body-xl-regular-line-height: var(--rel-fonts-line-height-body-xl);
+  --rel-body-xl-regular-letter-spacing: var(--rel-fonts-letter-spacing-sm);
+  --rel-body-xl-medium-font-family: var(--rel-fonts-font-family);
+  --rel-body-xl-medium-font-weight: var(--rel-fonts-weight-body-medium);
+  --rel-body-xl-medium-font-size: var(--rel-fonts-size-body-xl);
+  --rel-body-xl-medium-line-height: var(--rel-fonts-line-height-body-xl);
+  --rel-body-xl-medium-letter-spacing: var(--rel-fonts-letter-spacing-sm);
+  --rel-body-xl-semibold-font-family: var(--rel-fonts-font-family);
+  --rel-body-xl-semibold-font-weight: var(--rel-fonts-weight-body-semibold);
+  --rel-body-xl-semibold-font-size: var(--rel-fonts-size-body-xl);
+  --rel-body-xl-semibold-line-height: var(--rel-fonts-line-height-body-xl);
+  --rel-body-xl-semibold-letter-spacing: var(--rel-fonts-letter-spacing-sm);
+  --rel-body-lg-regular-font-family: var(--rel-fonts-font-family);
+  --rel-body-lg-regular-font-weight: var(--rel-fonts-weight-body-regular);
+  --rel-body-lg-regular-font-size: var(--rel-fonts-size-body-lg);
+  --rel-body-lg-regular-line-height: var(--rel-fonts-line-height-body-lg);
+  --rel-body-lg-regular-letter-spacing: var(--rel-fonts-letter-spacing-sm);
+  --rel-body-lg-medium-font-family: var(--rel-fonts-font-family);
+  --rel-body-lg-medium-font-weight: var(--rel-fonts-weight-body-medium);
+  --rel-body-lg-medium-font-size: var(--rel-fonts-size-body-lg);
+  --rel-body-lg-medium-line-height: var(--rel-fonts-line-height-body-lg);
+  --rel-body-lg-medium-letter-spacing: var(--rel-fonts-letter-spacing-sm);
+  --rel-body-lg-semibold-font-family: var(--rel-fonts-font-family);
+  --rel-body-lg-semibold-font-weight: var(--rel-fonts-weight-body-semibold);
+  --rel-body-lg-semibold-font-size: var(--rel-fonts-size-body-lg);
+  --rel-body-lg-semibold-line-height: var(--rel-fonts-line-height-body-lg);
+  --rel-body-lg-semibold-letter-spacing: var(--rel-fonts-letter-spacing-sm);
+  --rel-body-md-regular-font-family: var(--rel-fonts-font-family);
+  --rel-body-md-regular-font-weight: var(--rel-fonts-weight-body-regular);
+  --rel-body-md-regular-font-size: var(--rel-fonts-size-body-md);
+  --rel-body-md-regular-line-height: var(--rel-fonts-line-height-body-md);
+  --rel-body-md-regular-letter-spacing: var(--rel-fonts-letter-spacing-xs);
+  --rel-body-md-medium-font-family: var(--rel-fonts-font-family);
+  --rel-body-md-medium-font-weight: var(--rel-fonts-weight-body-medium);
+  --rel-body-md-medium-font-size: var(--rel-fonts-size-body-md);
+  --rel-body-md-medium-line-height: var(--rel-fonts-line-height-body-md);
+  --rel-body-md-medium-letter-spacing: var(--rel-fonts-letter-spacing-xs);
+  --rel-body-md-semibold-font-family: var(--rel-fonts-font-family);
+  --rel-body-md-semibold-font-weight: var(--rel-fonts-weight-body-semibold);
+  --rel-body-md-semibold-font-size: var(--rel-fonts-size-body-md);
+  --rel-body-md-semibold-line-height: var(--rel-fonts-line-height-body-md);
+  --rel-body-md-semibold-letter-spacing: var(--rel-fonts-letter-spacing-xs);
+  --rel-body-sm-regular-font-family: var(--rel-fonts-font-family);
+  --rel-body-sm-regular-font-weight: var(--rel-fonts-weight-body-regular);
+  --rel-body-sm-regular-font-size: var(--rel-fonts-size-body-sm);
+  --rel-body-sm-regular-line-height: var(--rel-fonts-line-height-body-sm);
+  --rel-body-sm-regular-letter-spacing: var(--rel-fonts-letter-spacing-xs);
+  --rel-body-sm-medium-font-family: var(--rel-fonts-font-family);
+  --rel-body-sm-medium-font-weight: var(--rel-fonts-weight-body-medium);
+  --rel-body-sm-medium-font-size: var(--rel-fonts-size-body-sm);
+  --rel-body-sm-medium-line-height: var(--rel-fonts-line-height-body-sm);
+  --rel-body-sm-medium-letter-spacing: var(--rel-fonts-letter-spacing-xs);
+  --rel-body-sm-semibold-font-family: var(--rel-fonts-font-family);
+  --rel-body-sm-semibold-font-weight: var(--rel-fonts-weight-body-semibold);
+  --rel-body-sm-semibold-font-size: var(--rel-fonts-size-body-sm);
+  --rel-body-sm-semibold-line-height: var(--rel-fonts-line-height-body-sm);
+  --rel-body-sm-semibold-letter-spacing: var(--rel-fonts-letter-spacing-xs);
+  --rel-body-xs-regular-font-family: var(--rel-fonts-font-family);
+  --rel-body-xs-regular-font-weight: var(--rel-fonts-weight-body-regular);
+  --rel-body-xs-regular-font-size: var(--rel-fonts-size-body-xs);
+  --rel-body-xs-regular-line-height: var(--rel-fonts-line-height-body-xs);
+  --rel-body-xs-regular-letter-spacing: var(--rel-fonts-letter-spacing-xs);
+  --rel-body-xs-medium-font-family: var(--rel-fonts-font-family);
+  --rel-body-xs-medium-font-weight: var(--rel-fonts-weight-body-medium);
+  --rel-body-xs-medium-font-size: var(--rel-fonts-size-body-xs);
+  --rel-body-xs-medium-line-height: var(--rel-fonts-line-height-body-xs);
+  --rel-body-xs-medium-letter-spacing: var(--rel-fonts-letter-spacing-xs);
+  --rel-body-xs-semibold-font-family: var(--rel-fonts-font-family);
+  --rel-body-xs-semibold-font-weight: var(--rel-fonts-weight-body-semibold);
+  --rel-body-xs-semibold-font-size: var(--rel-fonts-size-body-xs);
+  --rel-body-xs-semibold-line-height: var(--rel-fonts-line-height-body-xs);
+  --rel-body-xs-semibold-letter-spacing: var(--rel-fonts-letter-spacing-xs);
+  --rel-paragraph-xl-font-family: var(--rel-fonts-font-family);
+  --rel-paragraph-xl-font-weight: var(--rel-fonts-weight-body-regular);
+  --rel-paragraph-xl-font-size: var(--rel-fonts-size-paragraph-xl);
+  --rel-paragraph-xl-line-height: var(--rel-fonts-line-height-paragraph-xl);
+  --rel-paragraph-xl-letter-spacing: var(--rel-fonts-letter-spacing-xs);
+  --rel-paragraph-lg-font-family: var(--rel-fonts-font-family);
+  --rel-paragraph-lg-font-weight: var(--rel-fonts-weight-body-regular);
+  --rel-paragraph-lg-font-size: var(--rel-fonts-size-paragraph-lg);
+  --rel-paragraph-lg-line-height: var(--rel-fonts-line-height-paragraph-lg);
+  --rel-paragraph-lg-letter-spacing: var(--rel-fonts-letter-spacing-xs);
+  --rel-paragraph-md-font-family: var(--rel-fonts-font-family);
+  --rel-paragraph-md-font-weight: var(--rel-fonts-weight-body-regular);
+  --rel-paragraph-md-font-size: var(--rel-fonts-size-paragraph-md);
+  --rel-paragraph-md-line-height: var(--rel-fonts-line-height-paragraph-md);
+  --rel-paragraph-md-letter-spacing: var(--rel-fonts-letter-spacing-xs);
+  --rel-paragraph-sm-font-family: var(--rel-fonts-font-family);
+  --rel-paragraph-sm-font-weight: var(--rel-fonts-weight-body-regular);
+  --rel-paragraph-sm-font-size: var(--rel-fonts-size-paragraph-sm);
+  --rel-paragraph-sm-line-height: var(--rel-fonts-line-height-paragraph-sm);
+  --rel-paragraph-sm-letter-spacing: var(--rel-fonts-letter-spacing-xs);
+  --rel-paragraph-xs-font-family: var(--rel-fonts-font-family);
+  --rel-paragraph-xs-font-weight: var(--rel-fonts-weight-body-regular);
+  --rel-paragraph-xs-font-size: var(--rel-fonts-size-paragraph-xs);
+  --rel-paragraph-xs-line-height: var(--rel-fonts-line-height-paragraph-xs);
+  --rel-paragraph-xs-letter-spacing: var(--rel-fonts-letter-spacing-xs);
+  --rel-label-xl-font-family: var(--rel-fonts-font-family);
+  --rel-label-xl-font-weight: var(--rel-fonts-weight-body-medium);
+  --rel-label-xl-font-size: var(--rel-fonts-size-label-xl);
+  --rel-label-xl-line-height: var(--rel-fonts-line-height-label-xl);
+  --rel-label-xl-letter-spacing: var(--rel-fonts-letter-spacing-sm);
+  --rel-label-lg-font-family: var(--rel-fonts-font-family);
+  --rel-label-lg-font-weight: var(--rel-fonts-weight-body-medium);
+  --rel-label-lg-font-size: var(--rel-fonts-size-label-lg);
+  --rel-label-lg-line-height: var(--rel-fonts-line-height-label-lg);
+  --rel-label-lg-letter-spacing: var(--rel-fonts-letter-spacing-sm);
+  --rel-label-md-font-family: var(--rel-fonts-font-family);
+  --rel-label-md-font-weight: var(--rel-fonts-weight-body-medium);
+  --rel-label-md-font-size: var(--rel-fonts-size-label-md);
+  --rel-label-md-line-height: var(--rel-fonts-line-height-label-md);
+  --rel-label-md-letter-spacing: var(--rel-fonts-letter-spacing-sm);
+  --rel-label-sm-font-family: var(--rel-fonts-font-family);
+  --rel-label-sm-font-weight: var(--rel-fonts-weight-body-medium);
+  --rel-label-sm-font-size: var(--rel-fonts-size-label-sm);
+  --rel-label-sm-line-height: var(--rel-fonts-line-height-label-sm);
+  --rel-label-sm-letter-spacing: var(--rel-fonts-letter-spacing-sm);
+  --rel-label-xs-font-family: var(--rel-fonts-font-family);
+  --rel-label-xs-font-weight: var(--rel-fonts-weight-body-medium);
+  --rel-label-xs-font-size: var(--rel-fonts-size-label-xs);
+  --rel-label-xs-line-height: var(--rel-fonts-line-height-label-xs);
+  --rel-label-xs-letter-spacing: var(--rel-fonts-letter-spacing-sm);
+  --rel-action-xl-font-family: var(--rel-fonts-font-family);
+  --rel-action-xl-font-weight: var(--rel-fonts-weight-body-semibold);
+  --rel-action-xl-font-size: var(--rel-fonts-size-action-xl);
+  --rel-action-xl-line-height: var(--rel-fonts-line-height-action-xl);
+  --rel-action-xl-letter-spacing: var(--rel-fonts-letter-spacing-xs);
+  --rel-action-lg-font-family: var(--rel-fonts-font-family);
+  --rel-action-lg-font-weight: var(--rel-fonts-weight-body-semibold);
+  --rel-action-lg-font-size: var(--rel-fonts-size-action-lg);
+  --rel-action-lg-line-height: var(--rel-fonts-line-height-action-lg);
+  --rel-action-lg-letter-spacing: var(--rel-fonts-letter-spacing-xs);
+  --rel-action-md-font-family: var(--rel-fonts-font-family);
+  --rel-action-md-font-weight: var(--rel-fonts-weight-body-semibold);
+  --rel-action-md-font-size: var(--rel-fonts-size-action-md);
+  --rel-action-md-line-height: var(--rel-fonts-line-height-action-md);
+  --rel-action-md-letter-spacing: var(--rel-fonts-letter-spacing-xs);
+
+  /* ==================== CARRY-FORWARD (not in Figma export) ==================== */
+  /* --- shadows (carry-forward) --- */
+  --rel-shadows-shadow-100: 0px 1px 2px 0px rgba(0,0,0,0.3), 0px 1px 3px 1px rgba(0,0,0,0.15);
+  --rel-shadows-shadow-200: 0px 1px 2px 0px rgba(0,0,0,0.3), 0px 2px 6px 2px rgba(0,0,0,0.15);
+  --rel-shadows-shadow-300: 0px 1px 2px 0px rgba(0,0,0,0.3), 0px 4px 8px 3px rgba(0,0,0,0.15);
+  --rel-shadows-shadow-400: 0px 2px 3px 0px rgba(0,0,0,0.3), 0px 6px 10px 4px rgba(0,0,0,0.15);
+  --rel-shadows-shadow-500: 0px 4px 4px 0px rgba(0,0,0,0.3), 0px 8px 12px 6px rgba(0,0,0,0.15);
+  /* --- overlay (carry-forward) --- */
+  --rel-overlay-scrim: rgba(0,0,0,0.5);
+
+  /* ==================== SEMANTIC — LIGHT ==================== */
+  /* --- bg --- */
+  --rel-bg-static-light: var(--rel-colors-gray-0);
+  --rel-bg-static-dark: var(--rel-colors-gray-900);
+  --rel-bg-page: var(--rel-colors-gray-50);
+  --rel-bg-page-inverse: var(--rel-colors-gray-950);
+  --rel-bg-surface: var(--rel-colors-gray-0);
+  --rel-bg-surface-elevated: var(--rel-colors-gray-50);
+  --rel-bg-surface-inverse: var(--rel-colors-gray-950);
+  --rel-bg-surface-brand: var(--rel-colors-brand-500);
+  --rel-bg-neutral: var(--rel-colors-gray-0);
+  --rel-bg-neutral-elevated-1: var(--rel-colors-gray-50);
+  --rel-bg-neutral-elevated-2: var(--rel-colors-gray-100);
+  --rel-bg-neutral-elevated-3: var(--rel-colors-gray-300);
+  --rel-bg-neutral-inverse-1: var(--rel-colors-gray-800);
+  --rel-bg-neutral-inverse-2: var(--rel-colors-gray-950);
+  --rel-bg-brand: var(--rel-colors-brand-500);
+  --rel-bg-danger-light: var(--rel-colors-red-50);
+  --rel-bg-danger: var(--rel-colors-red-500);
+  --rel-bg-danger-strong: var(--rel-colors-red-800);
+  --rel-bg-warning-light: var(--rel-colors-yellow-100);
+  --rel-bg-warning: var(--rel-colors-yellow-400);
+  --rel-bg-warning-strong: var(--rel-colors-yellow-800);
+  --rel-bg-info-light: var(--rel-colors-blue-50);
+  --rel-bg-info: var(--rel-colors-blue-500);
+  --rel-bg-info-strong: var(--rel-colors-blue-800);
+  --rel-bg-success-light: var(--rel-colors-green-50);
+  --rel-bg-success: var(--rel-colors-green-500);
+  --rel-bg-success-strong: var(--rel-colors-green-800);
+
+  /* --- text --- */
+  --rel-text-static-light: var(--rel-colors-gray-0);
+  --rel-text-static-dark: var(--rel-colors-gray-950);
+  --rel-text-default: var(--rel-colors-gray-950);
+  --rel-text-label: var(--rel-colors-gray-700);
+  --rel-text-body: var(--rel-colors-gray-500);
+  --rel-text-caption: var(--rel-colors-gray-500);
+  --rel-text-placeholder: var(--rel-colors-gray-500);
+  --rel-text-disabled: var(--rel-colors-gray-200);
+  --rel-text-inverse: var(--rel-colors-gray-0);
+  --rel-text-danger: var(--rel-colors-red-600);
+  --rel-text-warning: var(--rel-colors-yellow-800);
+  --rel-text-info: var(--rel-colors-blue-700);
+  --rel-text-success: var(--rel-colors-green-700);
+
+  /* --- border --- */
+  --rel-border-default: var(--rel-colors-gray-100);
+  --rel-border-subtle: var(--rel-colors-gray-50);
+  --rel-border-accent: var(--rel-colors-gray-350);
+  --rel-border-strong: var(--rel-colors-gray-950);
+  --rel-border-inverse: var(--rel-colors-gray-0);
+  --rel-border-brand: var(--rel-colors-brand-500);
+  --rel-border-success-subtle: var(--rel-colors-green-100);
+  --rel-border-success: var(--rel-colors-green-600);
+  --rel-border-success-strong: var(--rel-colors-green-800);
+  --rel-border-danger-subtle: var(--rel-colors-red-100);
+  --rel-border-danger: var(--rel-colors-red-600);
+  --rel-border-danger-strong: var(--rel-colors-red-800);
+  --rel-border-warning-subtle: var(--rel-colors-yellow-100);
+  --rel-border-warning: var(--rel-colors-yellow-700);
+  --rel-border-warning-strong: var(--rel-colors-yellow-800);
+  --rel-border-focus: var(--rel-colors-gray-950);
+  --rel-border-focus-subtle: var(--rel-colors-gray-100);
+  --rel-border-focus-inner: var(--rel-colors-gray-0);
+
+  /* --- action --- */
+  --rel-action-overlay-hover: var(--rel-colors-dark-alpha-1);
+  --rel-action-overlay-pressed: var(--rel-colors-dark-alpha-2);
+  --rel-action-overlay-hover-strong: var(--rel-colors-dark-alpha-3);
+  --rel-action-overlay-dragged: var(--rel-colors-dark-alpha-6);
+  --rel-action-overlay-hover-inverse: var(--rel-colors-light-alpha-4);
+  --rel-action-neutral-static-hover: var(--rel-colors-light-alpha-1);
+  --rel-action-neutral-fill: var(--rel-colors-gray-950);
+  --rel-action-neutral-fill-hover: var(--rel-colors-gray-700);
+  --rel-action-neutral-fill-dragged: var(--rel-colors-gray-600);
+  --rel-action-neutral-subtle: var(--rel-colors-gray-50);
+  --rel-action-neutral-subtle-hover: var(--rel-colors-gray-100);
+  --rel-action-neutral-subtle-dragged: var(--rel-colors-gray-200);
+  --rel-action-neutral-ghost-hover: var(--rel-colors-dark-alpha-1);
+  --rel-action-neutral-label-icons-fill-inverse: var(--rel-colors-gray-0);
+  --rel-action-neutral-label-icons-subtle: var(--rel-colors-gray-950);
+  --rel-action-neutral-label-icons-outline: var(--rel-colors-gray-950);
+  --rel-action-neutral-label-icons-ghost: var(--rel-colors-gray-950);
+  --rel-action-neutral-label-icons-link: var(--rel-colors-gray-950);
+  --rel-action-neutral-label-icons-link-hover: var(--rel-colors-gray-600);
+  --rel-action-neutral-border-subtle-hover: var(--rel-colors-gray-100);
+  --rel-action-neutral-border-subtle-dragged: var(--rel-colors-gray-200);
+  --rel-action-neutral-border-outline: var(--rel-colors-gray-350);
+  --rel-action-neutral-border-outline-hover: var(--rel-colors-gray-950);
+  --rel-action-brand-fill: var(--rel-colors-brand-500);
+  --rel-action-brand-fill-hover: var(--rel-colors-brand-600);
+  --rel-action-brand-fill-disabled: var(--rel-colors-gray-200);
+  --rel-action-brand-label-icons-primary: var(--rel-colors-gray-950);
+  --rel-action-brand-label-icons-primary-disabled: var(--rel-colors-gray-950);
+  --rel-action-danger-fill: var(--rel-colors-red-600);
+  --rel-action-danger-fill-hover: var(--rel-colors-red-700);
+  --rel-action-danger-fill-dragged: var(--rel-colors-red-500);
+  --rel-action-danger-subtle: var(--rel-colors-red-50);
+  --rel-action-danger-subtle-hover: var(--rel-colors-red-100);
+  --rel-action-danger-subtle-dragged: var(--rel-colors-red-200);
+  --rel-action-danger-outline-hover: var(--rel-colors-red-50);
+  --rel-action-danger-ghost-hover: var(--rel-colors-red-50);
+  --rel-action-danger-label-icons-fill: var(--rel-colors-gray-0);
+  --rel-action-danger-label-icons-subtle: var(--rel-colors-red-600);
+  --rel-action-danger-label-icons-subtle-hover: var(--rel-colors-red-700);
+  --rel-action-danger-label-icons-subtle-dragged: var(--rel-colors-red-700);
+  --rel-action-danger-label-icons-outline: var(--rel-colors-red-600);
+  --rel-action-danger-label-icons-ghost: var(--rel-colors-red-600);
+  --rel-action-danger-label-icons-link: var(--rel-colors-red-600);
+  --rel-action-danger-label-icons-link-hover: var(--rel-colors-red-600);
+  --rel-action-danger-border-subtle-hover: var(--rel-colors-red-100);
+  --rel-action-danger-border-subtle-dragged: var(--rel-colors-red-200);
+  --rel-action-danger-border-outline: var(--rel-colors-red-100);
+  --rel-action-danger-border-outline-hover: var(--rel-colors-red-600);
+  --rel-action-warning-fill: var(--rel-colors-yellow-400);
+  --rel-action-warning-fill-hover: var(--rel-colors-yellow-500);
+  --rel-action-warning-fill-dragged: var(--rel-colors-yellow-300);
+  --rel-action-warning-subtle: var(--rel-colors-yellow-100);
+  --rel-action-warning-subtle-hover: var(--rel-colors-yellow-200);
+  --rel-action-warning-subtle-dragged: var(--rel-colors-yellow-300);
+  --rel-action-warning-label-icons-fill: var(--rel-colors-gray-950);
+  --rel-action-warning-label-icons-subtle: var(--rel-colors-yellow-800);
+  --rel-action-warning-label-icons-subtle-hover: var(--rel-colors-yellow-800);
+  --rel-action-warning-label-icons-subtle-dragged: var(--rel-colors-yellow-900);
+  --rel-action-warning-border-subtle-hover: var(--rel-colors-yellow-300);
+  --rel-action-warning-border-subtle-dragged: var(--rel-colors-yellow-300);
+  --rel-action-success-fill: var(--rel-colors-green-600);
+  --rel-action-success-fill-hover: var(--rel-colors-green-700);
+  --rel-action-success-fill-dragged: var(--rel-colors-green-500);
+  --rel-action-success-subtle: var(--rel-colors-green-50);
+  --rel-action-success-subtle-hover: var(--rel-colors-green-100);
+  --rel-action-success-subtle-dragged: var(--rel-colors-green-200);
+  --rel-action-success-outline-hover: var(--rel-colors-green-300);
+  --rel-action-success-ghost-hover: var(--rel-colors-green-50);
+  --rel-action-success-label-icons-fill: var(--rel-colors-gray-0);
+  --rel-action-success-label-icons-subtle: var(--rel-colors-green-700);
+  --rel-action-success-label-icons-subtle-hover: var(--rel-colors-green-700);
+  --rel-action-success-label-icons-subtle-dragged: var(--rel-colors-green-800);
+  --rel-action-success-border-subtle-hover: var(--rel-colors-green-200);
+  --rel-action-success-border-subtle-dragged: var(--rel-colors-green-200);
+  --rel-action-info-fill: var(--rel-colors-blue-700);
+  --rel-action-info-fill-hover: var(--rel-colors-blue-800);
+  --rel-action-info-fill-dragged: var(--rel-colors-blue-600);
+  --rel-action-info-subtle: var(--rel-colors-blue-50);
+  --rel-action-info-subtle-hover: var(--rel-colors-blue-100);
+  --rel-action-info-subtle-dragged: var(--rel-colors-blue-200);
+  --rel-action-info-label-icons-fill: var(--rel-colors-gray-0);
+  --rel-action-info-label-icons-subtle: var(--rel-colors-blue-700);
+  --rel-action-info-label-icons-subtle-hover: var(--rel-colors-blue-700);
+  --rel-action-info-label-icons-subtle-dragged: var(--rel-colors-blue-800);
+  --rel-action-info-border-subtle-hover: var(--rel-colors-blue-200);
+  --rel-action-info-border-subtle-dragged: var(--rel-colors-blue-300);
+
+  /* --- additions --- */
+  --rel-border-info: var(--rel-colors-blue-500); /* ADDED: no V2 borders/info — aligned to info fill */
+}
+
+:root[data-theme="dark"], .dark {
+  /* ==================== CARRY-FORWARD (dark) ==================== */
+  --rel-shadows-shadow-100: 0px 1px 2px rgba(0,0,0,0.6);
+  --rel-shadows-shadow-200: 0px 2px 6px rgba(0,0,0,0.6);
+  --rel-shadows-shadow-300: 0px 4px 10px rgba(0,0,0,0.65);
+  --rel-shadows-shadow-400: 0px 6px 16px rgba(0,0,0,0.7);
+  --rel-shadows-shadow-500: 0px 10px 24px rgba(0,0,0,0.75);
+  --rel-overlay-scrim: rgba(0,0,0,0.6);
+
+  /* ==================== SEMANTIC — DARK (overrides) ==================== */
+  --rel-bg-static-dark: var(--rel-colors-gray-800);
+  --rel-bg-page: var(--rel-colors-gray-900);
+  --rel-bg-page-inverse: var(--rel-colors-gray-0);
+  --rel-bg-surface: var(--rel-colors-gray-800);
+  --rel-bg-surface-elevated: var(--rel-colors-gray-900);
+  --rel-bg-surface-inverse: var(--rel-colors-gray-0);
+  --rel-bg-neutral: var(--rel-colors-gray-800);
+  --rel-bg-neutral-elevated-1: var(--rel-colors-gray-700);
+  --rel-bg-neutral-elevated-2: var(--rel-colors-gray-600);
+  --rel-bg-neutral-elevated-3: var(--rel-colors-gray-400);
+  --rel-bg-neutral-inverse-1: var(--rel-colors-gray-100);
+  --rel-bg-neutral-inverse-2: var(--rel-colors-gray-0);
+  --rel-bg-danger-light: var(--rel-colors-red-900);
+  --rel-bg-danger-strong: var(--rel-colors-red-100);
+  --rel-bg-warning-light: var(--rel-colors-yellow-900);
+  --rel-bg-warning-strong: var(--rel-colors-yellow-100);
+  --rel-bg-info-light: var(--rel-colors-blue-900);
+  --rel-bg-info: var(--rel-colors-blue-400);
+  --rel-bg-info-strong: var(--rel-colors-blue-100);
+  --rel-bg-success-light: var(--rel-colors-green-900);
+  --rel-bg-success-strong: var(--rel-colors-green-100);
+  --rel-text-default: var(--rel-colors-gray-0);
+  --rel-text-label: var(--rel-colors-gray-200);
+  --rel-text-body: var(--rel-colors-gray-300);
+  --rel-text-caption: var(--rel-colors-gray-300);
+  --rel-text-placeholder: var(--rel-colors-gray-300);
+  --rel-text-disabled: var(--rel-colors-gray-400);
+  --rel-text-inverse: var(--rel-colors-gray-950);
+  --rel-text-danger: var(--rel-colors-red-300);
+  --rel-text-warning: var(--rel-colors-yellow-400);
+  --rel-text-info: var(--rel-colors-blue-400);
+  --rel-text-success: var(--rel-colors-green-300);
+  --rel-border-default: var(--rel-colors-gray-700);
+  --rel-border-subtle: var(--rel-colors-gray-800);
+  --rel-border-accent: var(--rel-colors-gray-400);
+  --rel-border-strong: var(--rel-colors-gray-0);
+  --rel-border-inverse: var(--rel-colors-gray-950);
+  --rel-border-success-subtle: var(--rel-colors-green-800);
+  --rel-border-success: var(--rel-colors-green-400);
+  --rel-border-success-strong: var(--rel-colors-green-100);
+  --rel-border-danger-subtle: var(--rel-colors-red-800);
+  --rel-border-danger: var(--rel-colors-red-400);
+  --rel-border-danger-strong: var(--rel-colors-red-100);
+  --rel-border-warning-subtle: var(--rel-colors-yellow-800);
+  --rel-border-warning: var(--rel-colors-yellow-400);
+  --rel-border-warning-strong: var(--rel-colors-yellow-100);
+  --rel-border-focus: var(--rel-colors-gray-0);
+  --rel-border-focus-subtle: var(--rel-colors-gray-700);
+  --rel-border-focus-inner: var(--rel-colors-gray-900);
+  --rel-action-overlay-hover: var(--rel-colors-light-alpha-1);
+  --rel-action-overlay-pressed: var(--rel-colors-light-alpha-2);
+  --rel-action-neutral-fill: var(--rel-colors-gray-0);
+  --rel-action-neutral-fill-hover: var(--rel-colors-gray-50);
+  --rel-action-neutral-fill-dragged: var(--rel-colors-gray-100);
+  --rel-action-neutral-subtle: var(--rel-colors-gray-700);
+  --rel-action-neutral-subtle-hover: var(--rel-colors-gray-600);
+  --rel-action-neutral-subtle-dragged: var(--rel-colors-gray-500);
+  --rel-action-neutral-ghost-hover: var(--rel-colors-light-alpha-1);
+  --rel-action-neutral-label-icons-fill-inverse: var(--rel-colors-gray-950);
+  --rel-action-neutral-label-icons-subtle: var(--rel-colors-gray-0);
+  --rel-action-neutral-label-icons-outline: var(--rel-colors-gray-0);
+  --rel-action-neutral-label-icons-ghost: var(--rel-colors-gray-0);
+  --rel-action-neutral-label-icons-link: var(--rel-colors-gray-0);
+  --rel-action-neutral-label-icons-link-hover: var(--rel-colors-gray-300);
+  --rel-action-neutral-border-subtle-hover: var(--rel-colors-gray-600);
+  --rel-action-neutral-border-subtle-dragged: var(--rel-colors-gray-500);
+  --rel-action-neutral-border-outline: var(--rel-colors-gray-400);
+  --rel-action-neutral-border-outline-hover: var(--rel-colors-gray-0);
+  --rel-action-brand-fill-disabled: var(--rel-colors-gray-600);
+  --rel-action-brand-label-icons-primary-disabled: var(--rel-colors-gray-0);
+  --rel-action-danger-subtle: var(--rel-colors-red-900);
+  --rel-action-danger-subtle-hover: var(--rel-colors-red-800);
+  --rel-action-danger-subtle-dragged: var(--rel-colors-red-700);
+  --rel-action-danger-outline-hover: var(--rel-colors-red-900);
+  --rel-action-danger-ghost-hover: var(--rel-colors-red-900);
+  --rel-action-danger-label-icons-subtle: var(--rel-colors-red-100);
+  --rel-action-danger-label-icons-subtle-hover: var(--rel-colors-red-100);
+  --rel-action-danger-label-icons-subtle-dragged: var(--rel-colors-red-50);
+  --rel-action-danger-label-icons-outline: var(--rel-colors-red-300);
+  --rel-action-danger-label-icons-ghost: var(--rel-colors-red-300);
+  --rel-action-danger-label-icons-link: var(--rel-colors-red-300);
+  --rel-action-danger-label-icons-link-hover: var(--rel-colors-red-400);
+  --rel-action-danger-border-subtle-hover: var(--rel-colors-red-800);
+  --rel-action-danger-border-subtle-dragged: var(--rel-colors-red-700);
+  --rel-action-danger-border-outline: var(--rel-colors-red-700);
+  --rel-action-danger-border-outline-hover: var(--rel-colors-red-400);
+  --rel-action-warning-fill: var(--rel-colors-yellow-500);
+  --rel-action-warning-fill-dragged: var(--rel-colors-yellow-400);
+  --rel-action-warning-subtle: var(--rel-colors-yellow-900);
+  --rel-action-warning-subtle-hover: var(--rel-colors-yellow-800);
+  --rel-action-warning-subtle-dragged: var(--rel-colors-yellow-700);
+  --rel-action-warning-label-icons-subtle: var(--rel-colors-yellow-100);
+  --rel-action-warning-label-icons-subtle-hover: var(--rel-colors-yellow-100);
+  --rel-action-warning-label-icons-subtle-dragged: var(--rel-colors-yellow-50);
+  --rel-action-warning-border-subtle-hover: var(--rel-colors-yellow-800);
+  --rel-action-warning-border-subtle-dragged: var(--rel-colors-yellow-700);
+  --rel-action-success-subtle: var(--rel-colors-green-900);
+  --rel-action-success-subtle-hover: var(--rel-colors-green-800);
+  --rel-action-success-subtle-dragged: var(--rel-colors-green-700);
+  --rel-action-success-outline-hover: var(--rel-colors-green-700);
+  --rel-action-success-ghost-hover: var(--rel-colors-green-900);
+  --rel-action-success-label-icons-subtle: var(--rel-colors-green-100);
+  --rel-action-success-label-icons-subtle-hover: var(--rel-colors-green-100);
+  --rel-action-success-label-icons-subtle-dragged: var(--rel-colors-green-50);
+  --rel-action-success-border-subtle-hover: var(--rel-colors-green-800);
+  --rel-action-success-border-subtle-dragged: var(--rel-colors-green-700);
+  --rel-action-info-subtle: var(--rel-colors-blue-900);
+  --rel-action-info-subtle-hover: var(--rel-colors-blue-800);
+  --rel-action-info-subtle-dragged: var(--rel-colors-blue-700);
+  --rel-action-info-label-icons-subtle: var(--rel-colors-blue-100);
+  --rel-action-info-label-icons-subtle-hover: var(--rel-colors-blue-100);
+  --rel-action-info-label-icons-subtle-dragged: var(--rel-colors-blue-50);
+  --rel-action-info-border-subtle-hover: var(--rel-colors-blue-800);
+  --rel-action-info-border-subtle-dragged: var(--rel-colors-blue-700);
+
+  --rel-border-info: var(--rel-colors-blue-400); /* ADDED */
+}

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@reliability-design/web",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
   "sideEffects": true,
   "scripts": {
-    "build": "tsup"
+    "build": "tsup",
+    "test": "tsx --test src/components/rel-date-picker/date-format.test.ts"
   },
   "exports": {
     ".": {