:root { --black: rgba(8, 0, 49, 1); --themes-form-field-border-default: var(--primitives-colors-neutral-400); --text-md-medium-font-family: "IBM Plex Sans Arabic", Helvetica; --text-md-medium-font-weight: 500; --text-md-medium-font-size: 16px; --text-md-medium-letter-spacing: 0px; --text-md-medium-line-height: 24px; --text-md-medium-font-style: normal; --text-sm-regular-font-family: "IBM Plex Sans Arabic", Helvetica; --text-sm-regular-font-weight: 400; --text-sm-regular-font-size: 14px; --text-sm-regular-letter-spacing: 0px; --text-sm-regular-line-height: 20px; --text-sm-regular-font-style: normal; --text-sm-regular-underlined-font-family: "IBM Plex Sans Arabic", Helvetica; --text-sm-regular-underlined-font-weight: 400; --text-sm-regular-underlined-font-size: 14px; --text-sm-regular-underlined-letter-spacing: 0px; --text-sm-regular-underlined-line-height: 20px; --text-sm-regular-underlined-font-style: normal; --text-sm-semibold-font-family: "IBM Plex Sans Arabic", Helvetica; --text-sm-semibold-font-weight: 600; --text-sm-semibold-font-size: 14px; --text-sm-semibold-letter-spacing: 0px; --text-sm-semibold-line-height: 20px; --text-sm-semibold-font-style: normal; --text-xs-regular-font-family: "IBM Plex Sans Arabic", Helvetica; --text-xs-regular-font-weight: 400; --text-xs-regular-font-size: 12px; --text-xs-regular-letter-spacing: 0px; --text-xs-regular-line-height: normal; --text-xs-regular-font-style: normal; --text-xl-regular-font-family: "IBM Plex Sans Arabic", Helvetica; --text-xl-regular-font-weight: 400; --text-xl-regular-font-size: 20px; --text-xl-regular-letter-spacing: 0px; --text-xl-regular-line-height: 30px; --text-xl-regular-font-style: normal; --display-md-medium-font-family: "IBM Plex Sans Arabic", Helvetica; --display-md-medium-font-weight: 500; --display-md-medium-font-size: 36px; --display-md-medium-letter-spacing: -0.72px; --display-md-medium-line-height: 44px; --display-md-medium-font-style: normal; --display-lg-medium-font-family: "IBM Plex Sans Arabic", Helvetica; --display-lg-medium-font-weight: 500; --display-lg-medium-font-size: 48px; --display-lg-medium-letter-spacing: -0.96px; --display-lg-medium-line-height: 60px; --display-lg-medium-font-style: normal; --text-xl-medium-font-family: "IBM Plex Sans Arabic", Helvetica; --text-xl-medium-font-weight: 500; --text-xl-medium-font-size: 20px; --text-xl-medium-letter-spacing: 0px; --text-xl-medium-line-height: 30px; --text-xl-medium-font-style: normal; --text-lg-bold-font-family: "IBM Plex Sans Arabic", Helvetica; --text-lg-bold-font-weight: 700; --text-lg-bold-font-size: 18px; --text-lg-bold-letter-spacing: 0px; --text-lg-bold-line-height: 28px; --text-lg-bold-font-style: normal; --text-lg-regular-font-family: "IBM Plex Sans Arabic", Helvetica; --text-lg-regular-font-weight: 400; --text-lg-regular-font-size: 18px; --text-lg-regular-letter-spacing: 0px; --text-lg-regular-line-height: 28px; --text-lg-regular-font-style: normal; --text-lg-medium-font-family: "IBM Plex Sans Arabic", Helvetica; --text-lg-medium-font-weight: 500; --text-lg-medium-font-size: 18px; --text-lg-medium-letter-spacing: 0px; --text-lg-medium-line-height: 28px; --text-lg-medium-font-style: normal; --display-lg-semibold-font-family: "IBM Plex Sans Arabic", Helvetica; --display-lg-semibold-font-weight: 600; --display-lg-semibold-font-size: 48px; --display-lg-semibold-letter-spacing: -0.96px; --display-lg-semibold-line-height: 60px; --display-lg-semibold-font-style: normal; --display-md-regular-font-family: "IBM Plex Sans Arabic", Helvetica; --display-md-regular-font-weight: 400; --display-md-regular-font-size: 36px; --display-md-regular-letter-spacing: -0.72px; --display-md-regular-line-height: 44px; --display-md-regular-font-style: normal; --text-md-regular-font-family: "IBM Plex Sans Arabic", Helvetica; --text-md-regular-font-weight: 400; --text-md-regular-font-size: 16px; --text-md-regular-letter-spacing: 0px; --text-md-regular-line-height: 24px; --text-md-regular-font-style: normal; --display-xs-semibold-font-family: "IBM Plex Sans Arabic", Helvetica; --display-xs-semibold-font-weight: 600; --display-xs-semibold-font-size: 24px; --display-xs-semibold-letter-spacing: 0px; --display-xs-semibold-line-height: 32px; --display-xs-semibold-font-style: normal; --display-lg-bold-font-family: "IBM Plex Sans Arabic", Helvetica; --display-lg-bold-font-weight: 700; --display-lg-bold-font-size: 48px; --display-lg-bold-letter-spacing: -0.96px; --display-lg-bold-line-height: 60px; --display-lg-bold-font-style: normal; --text-sm-medium-font-family: "IBM Plex Sans Arabic", Helvetica; --text-sm-medium-font-weight: 500; --text-sm-medium-font-size: 14px; --text-xl-semibold-font-weight: 600; --display-sm-medium-font-size: 30px; --text-xl-semibold-font-size: 20px; --text-sm-medium-letter-spacing: 0px; --text-sm-medium-line-height: 20px; --themes-background-background-primary-200: var(--primitives-colors-primary-SA-flag-200); --text-xl-semibold-letter-spacing: 0px; --text-xl-semibold-font-family: "IBM Plex Sans Arabic", Helvetica; --text-xl-semibold-line-height: 30px; --text-xxl-semibold-font-size: 30px; --text-xxl-semibold-line-height: 38px; --text-xxl-semibold-font-weight: 600; --text-sm-medium-font-style: normal; --text-xs-medium-font-family: "IBM Plex Sans Arabic", Helvetica; --text-xs-medium-font-weight: 500; --text-xs-medium-font-size: 12px; --text-xl-semibold-font-style: normal; --text-xs-medium-letter-spacing: 0px; --text-xs-medium-line-height: 18px; --text-xs-medium-font-style: normal; --text-sm-bold-font-family: "IBM Plex Sans Arabic", Helvetica; --text-sm-bold-font-weight: 700; --text-sm-bold-font-size: 14px; --text-sm-bold-letter-spacing: 0px; --text-sm-bold-line-height: 20px; --display-sm-medium-font-weight: 500; --text-sm-bold-font-style: normal; --shadows-shadow-md: 0px 2px 4px -2px rgba(16, 24, 40, 0.06), 0px 4px 8px -2px rgba(16, 24, 40, 0.1); --themes-background-background-body: var(--primitives-colors-neutral-50); --themes-text-text-oncolor-primary: var(--primitives-colors-base-white); --themes-link-primary-visited: #14573A; --themes-text-text-secondary: var(--primitives-colors-secondary-gold-600-primary); --themes-link-link-oncolor: var(--primitives-colors-base-white); --themes-text-text-default: var(--primitives-colors-base-black); --themes-text-text-secondary-paragraph: var(--primitives-colors-neutral-500); --themes-text-text-display: var(--primitives-colors-neutral-800); --themes-text-text-tertiary: var(--primitives-colors-tertiary-lavendar-500-primary); --themes-text-text-secondary: var(--primitives-colors-secondary-gold-600-primary); --themes-text-text-primary: var(--primitives-colors-primary-SA-flag-600-primary); --themes-text-text-primary-paragraph: var(--primitives-colors-neutral-700); --themes-text-text-default-duplicate: var(--primitives-colors-base-black-duplicate); --themes-text-text-oncolor-primary-duplicate: var(--primitives-colors-base-white-duplicate); --themes-background-background-neutral-200: var(--primitives-colors-neutral-200); --themes-background-background-primary: var(--primitives-colors-primary-SA-flag-600-primary); --themes-background-background-white: var(--primitives-colors-base-white-duplicate); --themes-background-background-menu: var(--primitives-colors-base-white-duplicate); --themes-border-border-neutral-primary: var(--primitives-colors-neutral-300); --themes-border-border-primary: var(--primitives-colors-primary-SA-flag-600-primary-duplicate); --themes-background-background-tertiary-50: var(--primitives-colors-tertiary-lavendar-50); --themes-icon-background-warning-light: var(--themes-background-background-warning-50); --themes-icon-background-brand-light: var(--primitives-colors-primary-SA-flag-50); --themes-background-background-white-duplicate: var(--primitives-colors-base-white); --themes-background-background-warning-50: var(--primitives-colors-yellow-50); --themes-border-border-oncolor-transparent-30: var(--primitives-colors-alpha-alpha-white-30); --themes-background-background-neutral-100: var(--primitives-colors-neutral-100-duplicate); --themes-background-background-card: var(--primitives-colors-base-white-duplicate); --themes-alpha-alpha-warning-10: var(--primitives-colors-alpha-alpha-yellow-10); --themes-alpha-alpha-primary-10: var(--primitives-colors-alpha-alpha-600-primary-10); --themes-button-button-background-black-default: var(--primitives-colors-neutral-950-duplicate); --themes-button-button-background-primary-default: var(--primitives-colors-primary-SA-flag-600-primary-duplicate); --themes-button-button-background-oncolor-default: var(--primitives-colors-base-white); --themes-alpha-alpha-warning-20: var(--primitives-colors-alpha-alpha-yellow-20); --themes-background-background-card-duplicate: var(--primitives-colors-base-white); --themes-border-border-background-white: var(--primitives-colors-neutral-100-duplicate); --themes-background-background-menu-duplicate: var(--primitives-colors-base-white); --themes-background-background-SA-flag: var(--primitives-colors-green-900); --themes-text-text-secondary-paragraph-duplicate: var(--primitives-colors-neutral-500-duplicate); --themes-background-background-neutral-400: var(--primitives-colors-neutral-400); --themes-button-button-background-neutral-hovered: var(--primitives-colors-neutral-100); --themes-border-border-white-40: var(--themes-alpha-alpha-white-40); --themes-button-button-background-transparent-hovered: var(--themes-alpha-alpha-white-20); --themes-button-button-background-neutral-pressed: #E5E7EB; --themes-button-button-background-neutral-default: var(--primitives-colors-neutral-100); --themes-alpha-alpha-white-40: var(--primitives-colors-alpha-alpha-white-40); --themes-alpha-alpha-white-20: var(--primitives-colors-alpha-alpha-white-20); --themes-button-button-background-primary-hovered: var(--primitives-colors-primary-SA-flag-700); --themes-button-button-background-primary-pressed: #104631; --themes-button-button-background-oncolor-hovered: var(--themes-alpha-alpha-white-80); --themes-button-button-background-oncolor-pressed: #fff9; --themes-button-button-background-black-hovered: var(--primitives-colors-neutral-800); --themes-alpha-alpha-white-80: var(--primitives-colors-alpha-alpha-white-80); --themes-border-border-black: var(--primitives-colors-base-black-duplicate); --themes-icon-bg-icon-brand-light: var(--primitives-colors-primary-SA-flag-50-duplicate); --themes-alpha-alpha-primary-10-duplicate: rgba(27, 131, 84, 0.1); --themes-background-background-neutral-50: var(--primitives-colors-neutral-50-duplicate); --themes-tag-tag-text-neutral: var(--primitives-colors-neutral-800); --themes-tag-tag-background-neutral-light: var(--primitives-colors-neutral-50-duplicate); --themes-border-border-neutral-secondary: var(--primitives-colors-neutral-200-duplicate); --themes-text-text-primary-duplicate: var(--primitives-colors-primary-SA-flag-600-primary-duplicate); --themes-background-background-primary-50: var(--primitives-colors-primary-SA-flag-50-duplicate); --themes-link-link-oncolor-hovered: var(--primitives-colors-alpha-alpha-white-80); --primitives-colors-neutral-50: rgba(249, 250, 251, 1); --primitives-colors-base-white: rgba(255, 255, 255, 1); --primitives-colors-base-black: rgba(22, 22, 22, 1); --primitives-colors-neutral-500: rgba(108, 115, 127, 1); --primitives-colors-neutral-800: rgba(31, 42, 55, 1); --primitives-colors-tertiary-lavendar-500-primary: rgba(128, 81, 159, 1); --primitives-colors-secondary-gold-600-primary: rgba(219, 161, 2, 1); --primitives-colors-primary-SA-flag-600-primary: rgba(27, 131, 84, 1); --primitives-colors-neutral-700: rgba(56, 66, 80, 1); --primitives-colors-base-black-duplicate: rgba(22, 22, 22, 1); --primitives-colors-base-white-duplicate: rgba(255, 255, 255, 1); --primitives-colors-neutral-200: rgba(229, 231, 235, 1); --primitives-spacing-1-4px: 4px; --primitives-spacing-6-24px: 24px; --primitives-colors-neutral-900: rgba(17, 25, 39, 1); --primitives-spacing-4-16px: 16px; --primitives-spacing-0-0px: 0px; --primitives-spacing-3-12px: 12px; --primitives-colors-neutral-300: rgba(210, 214, 219, 1); --primitives-colors-primary-SA-flag-600-primary-duplicate: rgba(27, 131, 84, 1); --primitives-colors-tertiary-lavendar-50: rgba(249, 245, 250, 1); --primitives-colors-primary-SA-flag-50: rgba(243, 252, 246, 1); --primitives-spacing-2-8px-duplicate: 8px; --primitives-colors-neutral-50-duplicate: rgba(249, 250, 251, 1); --primitives-colors-secondary-gold-400: rgba(247, 213, 77, 1); --primitives-colors-primary-SA-flag-400: rgba(84, 192, 138, 1); --primitives-colors-neutral-100: rgba(243, 244, 246, 1); --primitives-colors-neutral-600: rgba(77, 87, 97, 1); --primitives-colors-neutral-950: rgba(13, 18, 28, 1); --primitives-colors-neutral-800-duplicate: rgba(31, 42, 55, 1); --primitives-colors-yellow-50: rgba(255, 250, 235, 1); --primitives-radius-radius-4: 4px; --primitives-colors-alpha-alpha-white-30: rgba(255, 255, 255, 0.3); --primitives-colors-neutral-100-duplicate: rgba(243, 244, 246, 1); --primitives-colors-neutral-500-duplicate: rgba(108, 115, 127, 1); --primitives-colors-neutral-950-duplicate: rgba(13, 18, 28, 1); --primitives-colors-tertiary-lavendar-400: rgba(165, 123, 186, 1); --primitives-colors-alpha-alpha-yellow-10: rgba(220, 104, 3, 0.1); --primitives-colors-alpha-alpha-600-primary-10: rgba(27, 131, 84, 0.1); --primitives-colors-alpha-alpha-yellow-20: rgba(220, 104, 3, 0.2); --primitives-colors-green-900: rgba(7, 77, 49, 1); --primitives-colors-neutral-200-duplicate: rgba(229, 231, 235, 1); --primitives-colors-neutral-400: rgba(157, 164, 174, 1); --primitives-colors-alpha-alpha-white-40: rgba(255, 255, 255, 0.4); --primitives-colors-alpha-alpha-white-20: rgba(255, 255, 255, 0.2); --primitives-colors-primary-SA-flag-700: rgba(22, 106, 69, 1); --primitives-colors-alpha-alpha-white-80: rgba(255, 255, 255, 0.8); --primitives-colors-alpha-alpha-black-40: rgba(22, 22, 22, 0.4); --primitives-colors-alpha-alpha-black-20: rgba(22, 22, 22, 0.2); --primitives-colors-alpha-alpha-black-80: rgba(22, 22, 22, 0.8); --primitives-colors-primary-SA-flag-50-duplicate: rgba(243, 252, 246, 1); --primitives-colors-neutral-900-duplicate: rgba(17, 25, 39, 1); --primitives-colors-primary-SA-flag-400-duplicate: rgba(84, 192, 138, 1); --primitives-colors-alpha-alpha-600-primary-10-duplicate: rgba(27, 131, 84, 0.1); --themes-form-field-background-hovered: #F3F4F6; --radius-radius-full: 9999px; --radius-radius-full-duplicate: 9999px; --radius-radius-lg: 16px; --radius-radius-md: 8px; --radius-radius-sm: 4px; --spacing-button-buttons-lg-gap: var(--primitives-spacing-1-4px); --spacing-button-buttons-md-gap: var(--primitives-spacing-1-4px); --spacing-card-card-lg-gap: var(--primitives-spacing-6-24px); --spacing-button-buttons-lg-padding: var(--primitives-spacing-4-16px); --spacing-global-spacing-none: var(--primitives-spacing-0-0px); --spacing-button-buttons-md-padding: var(--primitives-spacing-3-12px); --spacing-global-spacing-xl: var(--primitives-spacing-4-16px); --spacing-link-link-sm-gap: var(--primitives-spacing-1-4px); --spacing-tab-tab-button-gap: var(--primitives-spacing-1-4px); --spacing-tab-horizontal-tab-md-button-h-padding: var(--primitives-spacing-4-16px); --spacing-global-spacing-xs: var(--primitives-spacing-1-4px); --spacing-spacing-md: var(--primitives-spacing-2-8px); --spacing-spacing-xl: var(--primitives-spacing-4-16px-duplicate); --spacing-spacing-xs: var(--primitives-spacing-1-4px-duplicate); --spacing-spacing-md-duplicate: var(--primitives-spacing-2-8px-duplicate); --spacing-spacing-3xl: var(--primitives-spacing-6-24px-duplicate); --spacing-spacing-4xl: var(--primitives-spacing-8-32px); --spacing-spacing-5xl: var(--primitives-spacing-10-40px); --primitives-spacing-2-8px: 8px; --primitives-spacing-4-16px-duplicate: 16px; --primitives-spacing-1-4px-duplicate: 4px; --primitives-spacing-6-24px-duplicate: 24px; --primitives-spacing-8-32px: 32px; --primitives-spacing-10-40px: 40px; --radius-radius-radius-sm: var(--primitives-radius-radius-4); --link-oncolor-disabled: #FFFFFF4D; --tooltip-background-dark: #1F2A37; --tooltip-text-paragraph-dark: #F3F4F6; --tooltip-padding: 8px; --datecell-today-background-hovered: #E5E7EB } /* To enable a theme in your HTML, simply add one of the following data attributes to an HTML element, like so: You can apply the theme on any DOM node, not just the `body` */ [data-themes-mode="light"] { --themes-background-background-body: var(--primitives-colors-neutral-50); --themes-text-text-default: var(--primitives-colors-base-black); --themes-text-text-secondary-paragraph: var(--primitives-colors-neutral-500); --themes-text-text-display: var(--primitives-colors-neutral-800); --themes-text-text-tertiary: var(--primitives-colors-tertiary-lavendar-500-primary); --themes-text-text-secondary: var(--primitives-colors-secondary-gold-600-primary); --themes-text-text-primary: var(--primitives-colors-primary-SA-flag-600-primary); --themes-text-text-primary-paragraph: var(--primitives-colors-neutral-700); --themes-text-text-default-duplicate: var(--primitives-colors-base-black-duplicate); --themes-background-background-neutral-200: var(--primitives-colors-neutral-200); --themes-background-background-white: var(--primitives-colors-base-white-duplicate); --themes-background-background-menu: var(--primitives-colors-base-white-duplicate); --themes-border-border-neutral-primary: var(--primitives-colors-neutral-300); --themes-background-background-tertiary-50: var(--primitives-colors-tertiary-lavendar-50); --themes-icon-background-warning-light: var(--themes-background-background-warning-50); --themes-icon-background-brand-light: var(--primitives-colors-primary-SA-flag-50); --themes-background-background-white-duplicate: var(--primitives-colors-base-white); --themes-background-background-warning-50: var(--primitives-colors-yellow-50); --themes-background-background-neutral-100: var(--primitives-colors-neutral-100-duplicate); --themes-background-background-card: var(--primitives-colors-base-white-duplicate); --themes-alpha-alpha-warning-10: var(--primitives-colors-alpha-alpha-yellow-10); --themes-alpha-alpha-primary-10: var(--primitives-colors-alpha-alpha-600-primary-10); --themes-button-button-background-oncolor-default: var(--primitives-colors-base-white); --themes-alpha-alpha-warning-20: var(--primitives-colors-alpha-alpha-yellow-20); --themes-background-background-card-duplicate: var(--primitives-colors-base-white); --themes-border-border-background-white: var(--primitives-colors-neutral-100-duplicate); --themes-background-background-menu-duplicate: var(--primitives-colors-base-white); --themes-background-background-SA-flag: var(--primitives-colors-green-900); --themes-text-text-secondary-paragraph-duplicate: var(--primitives-colors-neutral-500-duplicate); --themes-button-button-background-neutral-hovered: var(--primitives-colors-neutral-100); --themes-button-button-background-neutral-default: var(--primitives-colors-neutral-100); --themes-alpha-alpha-white-40: var(--primitives-colors-alpha-alpha-white-40); --themes-alpha-alpha-white-20: var(--primitives-colors-alpha-alpha-white-20); --themes-alpha-alpha-white-80: var(--primitives-colors-alpha-alpha-white-80); --themes-border-border-black: var(--primitives-colors-base-black-duplicate); --themes-icon-bg-icon-brand-light: var(--primitives-colors-primary-SA-flag-50-duplicate); --themes-alpha-alpha-primary-10-duplicate: rgba(27, 131, 84, 0.1); --themes-background-background-neutral-50: var(--primitives-colors-neutral-50-duplicate); --themes-tag-tag-text-neutral: var(--primitives-colors-neutral-800); --themes-tag-tag-background-neutral-light: var(--primitives-colors-neutral-50-duplicate); --themes-border-border-neutral-secondary: var(--primitives-colors-neutral-200-duplicate); --themes-text-text-primary-duplicate: var(--primitives-colors-primary-SA-flag-600-primary-duplicate); --themes-background-background-primary-50: var(--primitives-colors-primary-SA-flag-50-duplicate); } [data-themes-mode="dark"] { --themes-background-background-body: var(--primitives-colors-neutral-900); --themes-text-text-default: var(--primitives-colors-base-white-duplicate); --themes-text-text-secondary-paragraph: var(--primitives-colors-neutral-200); --themes-text-text-display: var(--primitives-colors-neutral-50-duplicate); --themes-text-text-tertiary: var(--primitives-colors-tertiary-lavendar-400); --themes-text-text-secondary: var(--primitives-colors-secondary-gold-400); --themes-text-text-primary: var(--primitives-colors-primary-SA-flag-400); --themes-text-text-primary-paragraph: var(--primitives-colors-neutral-100); --themes-text-text-default-duplicate: var(--primitives-colors-base-white); --themes-background-background-neutral-200: var(--primitives-colors-neutral-600); --themes-background-background-white: var(--primitives-colors-neutral-950); --themes-background-background-menu: var(--primitives-colors-neutral-800-duplicate); --themes-border-border-neutral-primary: var(--primitives-colors-neutral-500-duplicate); --themes-background-background-tertiary-50: var(--primitives-colors-neutral-800-duplicate); --themes-icon-background-warning-light: var(--themes-alpha-alpha-warning-10); --themes-icon-background-brand-light: var(--themes-alpha-alpha-primary-10); --themes-background-background-white-duplicate: var(--primitives-colors-neutral-950-duplicate); --themes-background-background-warning-50: var(--themes-alpha-alpha-warning-20); --themes-background-background-neutral-100: var(--primitives-colors-neutral-800-duplicate); --themes-background-background-card: var(--primitives-colors-neutral-800-duplicate); --themes-alpha-alpha-warning-10: rgba(181, 71, 8, 0.1); --themes-alpha-alpha-primary-10: rgba(22, 106, 69, 0.1); --themes-button-button-background-oncolor-default: var(--primitives-colors-base-black-duplicate); --themes-alpha-alpha-warning-20: rgba(181, 71, 8, 0.2); --themes-background-background-card-duplicate: var(--primitives-colors-neutral-800); --themes-border-border-background-white: var(--primitives-colors-neutral-600); --themes-background-background-menu-duplicate: var(--primitives-colors-neutral-800); --themes-background-background-SA-flag: var(--primitives-colors-primary-SA-flag-600-primary-duplicate); --themes-text-text-secondary-paragraph-duplicate: var(--primitives-colors-neutral-200-duplicate); --themes-button-button-background-neutral-hovered: var(--primitives-colors-neutral-700); --themes-button-button-background-neutral-default: var(--primitives-colors-neutral-800); --themes-alpha-alpha-white-40: var(--primitives-colors-alpha-alpha-black-40); --themes-alpha-alpha-white-20: var(--primitives-colors-alpha-alpha-black-20); --themes-alpha-alpha-white-80: var(--primitives-colors-alpha-alpha-black-80); --themes-border-border-black: var(--primitives-colors-base-white); --themes-icon-bg-icon-brand-light: var(--themes-alpha-alpha-primary-10-duplicate); --themes-alpha-alpha-primary-10-duplicate: rgba(22, 106, 69, 0.1); --themes-background-background-neutral-50: var(--primitives-colors-neutral-900-duplicate); --themes-tag-tag-text-neutral: var(--primitives-colors-neutral-100); --themes-tag-tag-background-neutral-light: var(--primitives-colors-neutral-800); --themes-border-border-neutral-secondary: var(--primitives-colors-neutral-700); --themes-text-text-primary-duplicate: var(--primitives-colors-primary-SA-flag-400-duplicate); --themes-background-background-primary-50: var(--primitives-colors-alpha-alpha-600-primary-10-duplicate); } [data-spacing-mode="desktop"] { --spacing-card-card-lg-gap: var(--primitives-spacing-6-24px); --spacing-tab-horizontal-tab-md-button-h-padding: var(--primitives-spacing-4-16px); } [data-spacing-mode="tablet"] { --spacing-card-card-lg-gap: var(--primitives-spacing-6-24px); --spacing-tab-horizontal-tab-md-button-h-padding: var(--primitives-spacing-4-16px); } [data-spacing-mode="mobile"] { --spacing-card-card-lg-gap: var(--primitives-spacing-4-16px); --spacing-tab-horizontal-tab-md-button-h-padding: var(--primitives-spacing-3-12px); } :root { --text-md-medium-font-family: "IBM Plex Sans Arabic", Helvetica; --text-md-medium-font-weight: 500; --text-md-medium-font-size: 16px; --text-md-medium-letter-spacing: 0px; --text-md-medium-line-height: 24px; --text-md-medium-font-style: normal; --text-sm-regular-font-family: "IBM Plex Sans Arabic", Helvetica; --text-sm-regular-font-weight: 400; --text-sm-regular-font-size: 14px; --text-sm-regular-letter-spacing: 0px; --text-sm-regular-line-height: 20px; --text-sm-regular-font-style: normal; --text-sm-regular-underlined-font-family: "IBM Plex Sans Arabic", Helvetica; --text-sm-regular-underlined-font-weight: 400; --text-sm-regular-underlined-font-size: 14px; --text-sm-regular-underlined-letter-spacing: 0px; --text-sm-regular-underlined-line-height: 20px; --text-sm-regular-underlined-font-style: normal; --text-sm-semibold-font-family: "IBM Plex Sans Arabic", Helvetica; --text-sm-semibold-font-weight: 600; --text-sm-semibold-font-size: 14px; --text-sm-semibold-letter-spacing: 0px; --text-sm-semibold-line-height: 20px; --text-sm-semibold-font-style: normal; --text-xs-regular-font-family: "IBM Plex Sans Arabic", Helvetica; --text-xs-regular-font-weight: 400; --text-xs-regular-font-size: 12px; --text-xs-regular-letter-spacing: 0px; --text-xs-regular-line-height: normal; --text-xs-regular-font-style: normal; --text-md-semibold-font-family: "IBM Plex Sans Arabic", Helvetica; --text-md-semibold-font-weight: 600; --text-md-semibold-font-size: 16px; --text-md-semibold-letter-spacing: 0px; --text-md-semibold-line-height: 24px; --text-md-semibold-font-style: normal; --text-sm-medium-font-family: "IBM Plex Sans Arabic", Helvetica; --text-sm-medium-font-weight: 500; --text-sm-medium-font-size: 14px; --text-sm-medium-letter-spacing: 0px; --text-sm-medium-line-height: 20px; --text-sm-medium-font-style: normal; --text-md-regular-font-family: "IBM Plex Sans Arabic", Helvetica; --text-md-regular-font-weight: 400; --text-md-regular-font-size: 16px; --text-md-regular-letter-spacing: 0px; --text-md-regular-line-height: 24px; --text-md-regular-font-style: normal; --display-xs-semibold-font-family: "IBM Plex Sans Arabic", Helvetica; --display-xs-semibold-font-weight: 600; --display-xs-semibold-font-size: 24px; --display-xs-semibold-letter-spacing: 0px; --display-xs-semibold-line-height: 32px; --display-xs-semibold-font-style: normal; --text-lg-medium-font-family: "IBM Plex Sans Arabic", Helvetica; --text-lg-medium-font-weight: 500; --text-lg-medium-font-size: 18px; --text-lg-medium-letter-spacing: 0px; --text-lg-medium-line-height: 28px; --text-lg-medium-font-style: normal; --text-lg-regular-font-family: "IBM Plex Sans Arabic", Helvetica; --text-lg-regular-font-weight: 400; --text-lg-regular-font-size: 18px; --text-lg-regular-letter-spacing: 0px; --text-lg-regular-line-height: 28px; --text-lg-regular-font-style: normal; --text-xl-regular-font-family: "IBM Plex Sans Arabic", Helvetica; --text-xl-regular-font-weight: 400; --text-xl-regular-font-size: 20px; --text-xl-regular-letter-spacing: 0px; --text-xl-regular-line-height: 30px; --text-xl-regular-font-style: normal; --display-lg-semibold-font-family: "IBM Plex Sans Arabic", Helvetica; --display-lg-semibold-font-weight: 600; --display-lg-semibold-font-size: 48px; --display-lg-semibold-letter-spacing: -0.96px; --display-lg-semibold-line-height: 60px; --display-lg-semibold-font-style: normal; --display-md-regular-font-family: "IBM Plex Sans Arabic", Helvetica; --display-md-regular-font-weight: 400; --display-md-regular-font-size: 36px; --display-md-regular-letter-spacing: -0.72px; --display-md-regular-line-height: 44px; --display-md-regular-font-style: normal; --text-xs-medium-font-family: "IBM Plex Sans Arabic", Helvetica; --text-xs-medium-font-weight: 500; --text-xs-medium-font-size: 12px; --text-xs-medium-letter-spacing: 0px; --text-xs-medium-line-height: 18px; --text-xs-medium-font-style: normal; --text-md-regular-underlined-font-family: "IBM Plex Sans Arabic", Helvetica; --text-md-regular-underlined-font-weight: 400; --text-md-regular-underlined-font-size: 16px; --text-md-regular-underlined-letter-spacing: 0px; --text-md-regular-underlined-line-height: 24px; --text-md-regular-underlined-font-style: normal; --text-sm-bold-font-family: "IBM Plex Sans Arabic", Helvetica; --text-sm-bold-font-weight: 700; --text-sm-bold-font-size: 14px; --text-sm-bold-letter-spacing: 0px; --text-sm-bold-line-height: 20px; --text-sm-bold-font-style: normal; --text-lg-bold-font-family: "IBM Plex Sans Arabic", Helvetica; --text-lg-bold-font-weight: 700; --text-lg-bold-font-size: 18px; --text-lg-bold-letter-spacing: 0px; --text-lg-bold-line-height: 28px; --text-lg-bold-font-style: normal; --shadows-shadow-md: 0px 2px 4px -2px rgba(16, 24, 40, 0.06), 0px 4px 8px -2px rgba(16, 24, 40, 0.1); --shadows-shadow-3xl: 0px 32px 64px -12px rgba(16, 24, 40, 0.14); --themes-background-background-body: var(--primitives-colors-neutral-50); --themes-text-text-oncolor-primary: var(--primitives-colors-base-white); --themes-link-link-oncolor: var(--primitives-colors-base-white); --themes-text-text-display: var(--primitives-colors-neutral-800); --themes-text-text-default: var(--primitives-colors-base-black); --themes-text-text-default-duplicate: var(--primitives-colors-base-black-duplicate); --themes-form-field-text-label: var(--themes-text-text-default); --themes-form-field-text-placeholder: var(--themes-text-text-secondary-paragraph); --themes-text-text-primary-paragraph: var(--primitives-colors-neutral-700); --themes-text-text-primary: var(--primitives-colors-primary-SA-flag-600-primary); --themes-background-background-neutral-200: var(--primitives-colors-neutral-200); --themes-background-background-white: var(--primitives-colors-base-white-duplicate); --themes-background-background-nav-header: var(--primitives-colors-primary-SA-flag-800); --themes-background-background-menu: var(--primitives-colors-base-white-duplicate); --themes-text-text-secondary-paragraph: var(--primitives-colors-neutral-500); --themes-border-border-primary: var(--primitives-colors-primary-SA-flag-600-primary-duplicate); --themes-border-border-neutral-primary: var(--primitives-colors-neutral-300); --themes-background-background-primary-400: var(--primitives-colors-primary-SA-flag-400); --themes-icon-background-brand-light: var(--primitives-colors-primary-SA-flag-50); --themes-background-background-white-duplicate: var(--primitives-colors-base-white); --themes-background-background-neutral-200-duplicate: var(--primitives-colors-neutral-200-duplicate); --themes-border-border-oncolor-transparent-30: var(--primitives-colors-alpha-alpha-white-30); --themes-background-background-primary: var(--primitives-colors-primary-SA-flag-600-primary-duplicate); --themes-background-background-neutral-50: var(--primitives-colors-neutral-50-duplicate); --themes-alpha-alpha-primary-10: var(--primitives-colors-alpha-alpha-600-primary-10); --themes-button-button-background-primary-default: var(--primitives-colors-primary-SA-flag-600-primary-duplicate); --themes-border-border-black: var(--primitives-colors-base-black); --themes-background-background-card: var(--primitives-colors-base-white); --themes-background-background-card-duplicate: var(--primitives-colors-base-white-duplicate); --themes-border-border-black-duplicate: var(--primitives-colors-base-black-duplicate); --themes-background-background-menu-duplicate: var(--primitives-colors-base-white); --themes-form-field-background-default: var(--themes-background-background-card); --themes-background-background-SA-flag: var(--primitives-colors-green-900); --themes-form-field-border-default: var(--primitives-colors-neutral-400); --themes-form-field-border-pressed: #0D121C; --themes-background-background-notification-white: var(--primitives-colors-base-white); --themes-background-background-neutral-400: var(--primitives-colors-neutral-400); --themes-button-button-background-neutral-hovered: var(--primitives-colors-neutral-100); --themes-global-text-default-disabled: var(--primitives-colors-neutral-400); --themes-link-link-neutral: var(--primitives-colors-neutral-700); --themes-link-link-neutral-hovered: var(--primitives-colors-neutral-500); --themes-link-link-oncolor-hovered: var(--primitives-colors-alpha-alpha-white-80); --themes-form-field-border-hovered: var(--primitives-colors-neutral-700); --themes-form-field-border-error: var(--themes-border-border-error); --themes-border-border-error: var(--primitives-colors-red-700); --themes-button-button-background-neutral-default: var(--primitives-colors-neutral-100); --themes-border-border-white-40: var(--themes-alpha-alpha-white-40); --themes-button-button-background-primary-hovered: var(--primitives-colors-primary-SA-flag-700); --themes-button-button-background-transparent-hovered: var(--themes-alpha-alpha-white-20); --themes-alpha-alpha-white-40: var(--primitives-colors-alpha-alpha-white-40); --themes-alpha-alpha-white-20: var(--primitives-colors-alpha-alpha-white-20); --themes-border-border-neutral-secondary: var(--primitives-colors-neutral-200-duplicate); --themes-icon-bg-icon-brand-light: var(--primitives-colors-primary-SA-flag-50-duplicate); --themes-alpha-alpha-primary-10-duplicate: rgba(27, 131, 84, 0.1); --themes-tag-tag-text-neutral: var(--primitives-colors-neutral-800); --themes-tag-tag-background-neutral-light: var(--primitives-colors-neutral-50-duplicate); --themes-text-text-primary-duplicate: var(--primitives-colors-primary-SA-flag-600-primary-duplicate); --themes-background-background-primary-50: var(--primitives-colors-primary-SA-flag-50-duplicate); --themes-background-background-neutral-100: var(--primitives-colors-neutral-100); --primitives-colors-neutral-50: rgba(249, 250, 251, 1); --primitives-colors-base-white: rgba(255, 255, 255, 1); --button-background-transparent-hovered: rgba(255, 255, 255, .2); --primitives-colors-neutral-800: rgba(31, 42, 55, 1); --primitives-colors-base-black: rgba(22, 22, 22, 1); --primitives-colors-base-black-duplicate: rgba(22, 22, 22, 1); --primitives-colors-neutral-700: rgba(56, 66, 80, 1); --primitives-colors-primary-SA-flag-600-primary: rgba(27, 131, 84, 1); --primitives-spacing-2-8px: 8px; --primitives-colors-neutral-200: rgba(229, 231, 235, 1); --primitives-colors-base-white-duplicate: rgba(255, 255, 255, 1); --primitives-colors-primary-SA-flag-800: rgba(20, 87, 58, 1); --primitives-spacing-1-4px: 4px; --primitives-colors-neutral-900: rgba(17, 25, 39, 1); --primitives-colors-neutral-500: rgba(108, 115, 127, 1); --primitives-spacing-4-16px: 16px; --primitives-spacing-0-0px: 0px; --primitives-spacing-3-12px: 12px; --primitives-colors-primary-SA-flag-600-primary-duplicate: rgba(27, 131, 84, 1); --primitives-colors-neutral-300: rgba(210, 214, 219, 1); --primitives-colors-primary-SA-flag-400: rgba(84, 192, 138, 1); --primitives-colors-primary-SA-flag-50: rgba(243, 252, 246, 1); --primitives-spacing-2-8px-duplicate: 8px; --primitives-colors-neutral-50-duplicate: rgba(249, 250, 251, 1); --primitives-colors-neutral-100: rgba(243, 244, 246, 1); --primitives-colors-primary-SA-flag-400-duplicate: rgba(84, 192, 138, 1); --primitives-colors-neutral-800-duplicate: rgba(31, 42, 55, 1); --primitives-colors-neutral-200-duplicate: rgba(229, 231, 235, 1); --primitives-radius-radius-4: 4px; --primitives-colors-alpha-alpha-white-30: rgba(255, 255, 255, 0.3); --primitives-spacing-6-24px: 24px; --primitives-colors-neutral-950: rgba(13, 18, 28, 1); --primitives-colors-neutral-600: rgba(77, 87, 97, 1); --primitives-colors-neutral-950-duplicate: rgba(13, 18, 28, 1); --primitives-colors-alpha-alpha-600-primary-10: rgba(27, 131, 84, 0.1); --primitives-colors-neutral-900-duplicate: rgba(17, 25, 39, 1); --primitives-colors-neutral-600-duplicate: rgba(77, 87, 97, 1); --primitives-spacing-10-40px: 40px; --primitives-colors-green-900: rgba(7, 77, 49, 1); --primitives-colors-neutral-400: rgba(157, 164, 174, 1); --primitives-colors-alpha-alpha-white-80: rgba(255, 255, 255, 0.8); --primitives-colors-red-700: rgba(180, 35, 24, 1); --primitives-spacing-0-5-2px: 2px; --primitives-colors-primary-SA-flag-700: rgba(22, 106, 69, 1); --primitives-colors-alpha-alpha-white-40: rgba(255, 255, 255, 0.4); --primitives-colors-alpha-alpha-white-20: rgba(255, 255, 255, 0.2); --primitives-colors-alpha-alpha-black-40: rgba(22, 22, 22, 0.4); --primitives-colors-alpha-alpha-black-20: rgba(22, 22, 22, 0.2); --primitives-colors-primary-SA-flag-50-duplicate: rgba(243, 252, 246, 1); --primitives-colors-alpha-alpha-600-primary-10-duplicate: rgba(27, 131, 84, 0.1); --spacing-global-spacing-md: var(--primitives-spacing-2-8px); --spacing-button-buttons-lg-gap: var(--primitives-spacing-1-4px); --spacing-button-buttons-md-gap: var(--primitives-spacing-1-4px); --spacing-button-buttons-lg-padding: var(--primitives-spacing-4-16px); --spacing-global-spacing-none: var(--primitives-spacing-0-0px); --spacing-button-buttons-md-padding: var(--primitives-spacing-3-12px); --spacing-link-link-sm-gap: var(--primitives-spacing-1-4px); --spacing-link-link-md-gap: var(--primitives-spacing-2-8px); --spacing-tab-tab-button-gap: var(--primitives-spacing-1-4px); --spacing-pagination-pagination-item-lg-padding: var(--primitives-spacing-2-8px); --spacing-card-card-lg-gap: var(--primitives-spacing-6-24px); --spacing-global-spacing-xs: var(--primitives-spacing-1-4px); --spacing-form-label-gap: var(--primitives-spacing-1-4px); --spacing-form-icon-enteredtext: var(--primitives-spacing-2-8px); --spacing-global-spacing-xl: var(--primitives-spacing-4-16px); --spacing-tab-horizontal-tab-md-button-h-padding: var(--primitives-spacing-4-16px); --spacing-form-input-container-padding-left: var(--primitives-spacing-2-8px); --spacing-form-input-container-padding-right: var(--primitives-spacing-4-16px); --spacing-global-spacing-lg: var(--primitives-spacing-3-12px); --spacing-button-button-menu-gap: var(--primitives-spacing-2-8px); --spacing-form-input-gap: var(--primitives-spacing-0-0px); --spacing-global-spacing-5xl: var(--primitives-spacing-10-40px); --spacing-pagination-pagination-items-padding: var(--primitives-spacing-2-8px); --spacing-form-input-padding: var(--primitives-spacing-0-0px); --spacing-notification-notification-gap: var(--primitives-spacing-4-16px); --spacing-notification-notification-toast-desktop-h-padding: var(--primitives-spacing-6-24px); --spacing-notification-notification-toast-v-padding: var(--primitives-spacing-4-16px); --spacing-form-field-label-gap: var(--primitives-spacing-2-8px); --spacing-global-spacing-xxs: var(--primitives-spacing-0-5-2px); --radius-radius-full: 9999px; --radius-radius-full-duplicate: 9999px; --radius-radius-sm: 4px; --radius-radius-lg: 16px; --radius-radius-md: 8px; --radius-radius-none: 0px; --spacing-spacing-xl: var(--primitives-spacing-4-16px-duplicate); --spacing-spacing-xs: var(--primitives-spacing-1-4px-duplicate); --spacing-spacing-md-duplicate: var(--primitives-spacing-2-8px-duplicate); --spacing-spacing-3xl: var(--primitives-spacing-6-24px-duplicate); --spacing-spacing-4xl: var(--primitives-spacing-8-32px); --spacing-spacing-5xl: var(--primitives-spacing-10-40px-duplicate); --primitives-spacing-4-16px-duplicate: 16px; --primitives-spacing-1-4px-duplicate: 4px; --primitives-spacing-6-24px-duplicate: 24px; --primitives-spacing-8-32px: 32px; --primitives-spacing-10-40px-duplicate: 40px; --radius-radius-radius-sm: var(--primitives-radius-radius-4); --Background-background-body: #F9FAFB; } /* To enable a theme in your HTML, simply add one of the following data attributes to an HTML element, like so: You can apply the theme on any DOM node, not just the `body` */ [data-themes-mode="light"] { --themes-background-background-body: var(--primitives-colors-neutral-50); --themes-text-text-display: var(--primitives-colors-neutral-800); --themes-text-text-default: var(--primitives-colors-base-black); --themes-text-text-default-duplicate: var(--primitives-colors-base-black-duplicate); --themes-text-text-primary-paragraph: var(--primitives-colors-neutral-700); --themes-text-text-primary: var(--primitives-colors-primary-SA-flag-600-primary); --themes-background-background-neutral-200: var(--primitives-colors-neutral-200); --themes-background-background-white: var(--primitives-colors-base-white-duplicate); --themes-background-background-menu: var(--primitives-colors-base-white-duplicate); --themes-text-text-secondary-paragraph: var(--primitives-colors-neutral-500); --themes-border-border-neutral-primary: var(--primitives-colors-neutral-300); --themes-icon-background-brand-light: var(--primitives-colors-primary-SA-flag-50); --themes-background-background-white-duplicate: var(--primitives-colors-base-white); --themes-background-background-neutral-200-duplicate: var(--primitives-colors-neutral-200-duplicate); --themes-background-background-neutral-50: var(--primitives-colors-neutral-50-duplicate); --themes-alpha-alpha-primary-10: var(--primitives-colors-alpha-alpha-600-primary-10); --themes-border-border-black: var(--primitives-colors-base-black); --themes-background-background-card: var(--primitives-colors-base-white); --themes-background-background-card-duplicate: var(--primitives-colors-base-white-duplicate); --themes-border-border-black-duplicate: var(--primitives-colors-base-black-duplicate); --themes-background-background-menu-duplicate: var(--primitives-colors-base-white); --themes-form-field-background-default: var(--themes-background-background-card); --themes-background-background-SA-flag: var(--primitives-colors-green-900); --themes-form-field-border-default: var(--primitives-colors-neutral-400); --themes-background-background-notification-white: var(--primitives-colors-base-white); --themes-button-button-background-neutral-hovered: var(--primitives-colors-neutral-100); --themes-link-link-neutral: var(--primitives-colors-neutral-700); --themes-link-link-neutral-hovered: var(--primitives-colors-neutral-500); --themes-form-field-border-hovered: var(--primitives-colors-neutral-700); --themes-button-button-background-neutral-default: var(--primitives-colors-neutral-100); --themes-alpha-alpha-white-40: var(--primitives-colors-alpha-alpha-white-40); --themes-alpha-alpha-white-20: var(--primitives-colors-alpha-alpha-white-20); --themes-border-border-neutral-secondary: var(--primitives-colors-neutral-200-duplicate); --themes-icon-bg-icon-brand-light: var(--primitives-colors-primary-SA-flag-50-duplicate); --themes-alpha-alpha-primary-10-duplicate: rgba(27, 131, 84, 0.1); --themes-tag-tag-text-neutral: var(--primitives-colors-neutral-800); --themes-tag-tag-background-neutral-light: var(--primitives-colors-neutral-50-duplicate); --themes-text-text-primary-duplicate: var(--primitives-colors-primary-SA-flag-600-primary-duplicate); --themes-background-background-primary-50: var(--primitives-colors-primary-SA-flag-50-duplicate); --themes-background-background-neutral-100: var(--primitives-colors-neutral-100); } [data-themes-mode="dark"] { --themes-background-background-body: var(--primitives-colors-neutral-900); --themes-text-text-display: var(--primitives-colors-neutral-50-duplicate); --themes-text-text-default: var(--primitives-colors-base-white); --themes-text-text-default-duplicate: var(--primitives-colors-base-white-duplicate); --themes-text-text-primary-paragraph: var(--primitives-colors-neutral-100); --themes-text-text-primary: var(--primitives-colors-primary-SA-flag-400-duplicate); --themes-background-background-neutral-200: var(--primitives-colors-neutral-600); --themes-background-background-white: var(--primitives-colors-neutral-950-duplicate); --themes-background-background-menu: var(--primitives-colors-neutral-800-duplicate); --themes-text-text-secondary-paragraph: var(--primitives-colors-neutral-200-duplicate); --themes-border-border-neutral-primary: var(--primitives-colors-neutral-500); --themes-icon-background-brand-light: var(--themes-alpha-alpha-primary-10); --themes-background-background-white-duplicate: var(--primitives-colors-neutral-950); --themes-background-background-neutral-200-duplicate: var(--primitives-colors-neutral-600-duplicate); --themes-background-background-neutral-50: var(--primitives-colors-neutral-900-duplicate); --themes-alpha-alpha-primary-10: rgba(22, 106, 69, 0.1); --themes-border-border-black: var(--primitives-colors-base-white); --themes-background-background-card: var(--primitives-colors-neutral-800); --themes-background-background-card-duplicate: var(--primitives-colors-neutral-800-duplicate); --themes-border-border-black-duplicate: var(--primitives-colors-base-white-duplicate); --themes-background-background-menu-duplicate: var(--primitives-colors-neutral-800); --themes-form-field-background-default: var(--primitives-colors-neutral-800); --themes-background-background-SA-flag: var(--primitives-colors-primary-SA-flag-600-primary-duplicate); --themes-form-field-border-default: var(--primitives-colors-neutral-500); --themes-background-background-notification-white: var(--primitives-colors-neutral-900-duplicate); --themes-button-button-background-neutral-hovered: var(--primitives-colors-neutral-700); --themes-link-link-neutral: var(--primitives-colors-neutral-200-duplicate); --themes-link-link-neutral-hovered: var(--primitives-colors-neutral-400); --themes-form-field-border-hovered: var(--primitives-colors-neutral-200-duplicate); --themes-button-button-background-neutral-default: var(--primitives-colors-neutral-800); --themes-alpha-alpha-white-40: var(--primitives-colors-alpha-alpha-black-40); --themes-alpha-alpha-white-20: var(--primitives-colors-alpha-alpha-black-20); --themes-border-border-neutral-secondary: var(--primitives-colors-neutral-700); --themes-icon-bg-icon-brand-light: var(--themes-alpha-alpha-primary-10-duplicate); --themes-alpha-alpha-primary-10-duplicate: rgba(22, 106, 69, 0.1); --themes-tag-tag-text-neutral: var(--primitives-colors-neutral-100); --themes-tag-tag-background-neutral-light: var(--primitives-colors-neutral-800); --themes-text-text-primary-duplicate: var(--primitives-colors-primary-SA-flag-400); --themes-background-background-primary-50: var(--primitives-colors-alpha-alpha-600-primary-10-duplicate); --themes-background-background-neutral-100: var(--primitives-colors-neutral-800); } [data-spacing-mode="desktop"] { --spacing-link-link-md-gap: var(--primitives-spacing-2-8px); --spacing-card-card-lg-gap: var(--primitives-spacing-6-24px); --spacing-tab-horizontal-tab-md-button-h-padding: var(--primitives-spacing-4-16px); --spacing-button-button-menu-gap: var(--primitives-spacing-2-8px); --spacing-pagination-pagination-items-padding: var(--primitives-spacing-2-8px); --spacing-notification-notification-gap: var(--primitives-spacing-4-16px); --spacing-notification-notification-toast-desktop-h-padding: var(--primitives-spacing-6-24px); --spacing-notification-notification-toast-v-padding: var(--primitives-spacing-4-16px); } [data-spacing-mode="tablet"] { --spacing-link-link-md-gap: var(--primitives-spacing-2-8px); --spacing-card-card-lg-gap: var(--primitives-spacing-6-24px); --spacing-tab-horizontal-tab-md-button-h-padding: var(--primitives-spacing-4-16px); --spacing-button-button-menu-gap: var(--primitives-spacing-2-8px); --spacing-pagination-pagination-items-padding: var(--primitives-spacing-2-8px); --spacing-notification-notification-gap: var(--primitives-spacing-4-16px); --spacing-notification-notification-toast-desktop-h-padding: var(--primitives-spacing-6-24px); --spacing-notification-notification-toast-v-padding: var(--primitives-spacing-4-16px); } [data-spacing-mode="mobile"] { --spacing-link-link-md-gap: var(--primitives-spacing-1-4px); --spacing-card-card-lg-gap: var(--primitives-spacing-4-16px); --spacing-tab-horizontal-tab-md-button-h-padding: var(--primitives-spacing-3-12px); --spacing-button-button-menu-gap: var(--primitives-spacing-1-4px); --spacing-pagination-pagination-items-padding: var(--primitives-spacing-1-4px); --spacing-notification-notification-gap: var(--primitives-spacing-2-8px); --spacing-notification-notification-toast-desktop-h-padding: var(--primitives-spacing-4-16px); --spacing-notification-notification-toast-v-padding: var(--primitives-spacing-3-12px); } :root { --text-md-medium-font-family: "IBM Plex Sans Arabic", Helvetica; --text-md-medium-font-weight: 500; --text-md-medium-font-size: 16px; --text-md-medium-letter-spacing: 0px; --text-md-medium-line-height: 24px; --text-md-medium-font-style: normal; --text-sm-regular-font-family: "IBM Plex Sans Arabic", Helvetica; --text-sm-regular-font-weight: 400; --text-sm-regular-font-size: 14px; --text-sm-regular-letter-spacing: 0px; --text-sm-regular-line-height: 20px; --text-sm-regular-font-style: normal; --text-sm-regular-underlined-font-family: "IBM Plex Sans Arabic", Helvetica; --text-sm-regular-underlined-font-weight: 400; --text-sm-regular-underlined-font-size: 14px; --text-sm-regular-underlined-letter-spacing: 0px; --text-sm-regular-underlined-line-height: 20px; --text-sm-regular-underlined-font-style: normal; --text-sm-semibold-font-family: "IBM Plex Sans Arabic", Helvetica; --text-sm-semibold-font-weight: 600; --text-sm-semibold-font-size: 14px; --text-sm-semibold-letter-spacing: 0px; --text-sm-semibold-line-height: 20px; --text-sm-semibold-font-style: normal; --text-xs-regular-font-family: "IBM Plex Sans Arabic", Helvetica; --text-xs-regular-font-weight: 400; --text-xs-regular-font-size: 12px; --text-xs-regular-letter-spacing: 0px; --text-xs-regular-line-height: normal; --text-xs-regular-font-style: normal; --text-md-semibold-font-family: "IBM Plex Sans Arabic", Helvetica; --text-md-semibold-font-weight: 600; --text-md-semibold-font-size: 16px; --text-md-semibold-letter-spacing: 0px; --text-md-semibold-line-height: 24px; --text-md-semibold-font-style: normal; --text-sm-medium-font-family: "IBM Plex Sans Arabic", Helvetica; --text-sm-medium-font-weight: 500; --text-sm-medium-font-size: 14px; --text-sm-medium-letter-spacing: 0px; --text-sm-medium-line-height: 20px; --text-sm-medium-font-style: normal; --text-lg-regular-font-family: "IBM Plex Sans Arabic", Helvetica; --text-lg-regular-font-weight: 400; --text-lg-regular-font-size: 18px; --text-lg-regular-letter-spacing: 0px; --text-lg-regular-line-height: 28px; --text-lg-regular-font-style: normal; --text-lg-medium-font-family: "IBM Plex Sans Arabic", Helvetica; --text-lg-medium-font-weight: 500; --text-lg-medium-font-size: 18px; --text-lg-medium-letter-spacing: 0px; --text-lg-medium-line-height: 28px; --text-lg-medium-font-style: normal; --text-md-regular-font-family: "IBM Plex Sans Arabic", Helvetica; --text-md-regular-font-weight: 400; --text-md-regular-font-size: 16px; --text-md-regular-letter-spacing: 0px; --text-md-regular-line-height: 24px; --text-md-regular-font-style: normal; --text-xl-regular-font-family: "IBM Plex Sans Arabic", Helvetica; --text-xl-regular-font-weight: 400; --text-xl-regular-font-size: 20px; --text-xl-regular-letter-spacing: 0px; --text-xl-regular-line-height: 30px; --text-xl-regular-font-style: normal; --display-lg-semibold-font-family: "IBM Plex Sans Arabic", Helvetica; --display-lg-semibold-font-weight: 600; --display-lg-semibold-font-size: 48px; --display-lg-semibold-letter-spacing: -0.96px; --display-lg-semibold-line-height: 60px; --display-lg-semibold-font-style: normal; --display-md-regular-font-family: "IBM Plex Sans Arabic", Helvetica; --display-md-regular-font-weight: 400; --display-md-regular-font-size: 36px; --display-md-regular-letter-spacing: -0.72px; --display-md-regular-line-height: 44px; --display-md-regular-font-style: normal; --text-xs-medium-font-family: "IBM Plex Sans Arabic", Helvetica; --text-xs-medium-font-weight: 500; --text-xs-medium-font-size: 12px; --text-xs-medium-letter-spacing: 0px; --text-xs-medium-line-height: 18px; --text-xs-medium-font-style: normal; --text-md-regular-underlined-font-family: "IBM Plex Sans Arabic", Helvetica; --text-md-regular-underlined-font-weight: 400; --text-md-regular-underlined-font-size: 16px; --text-md-regular-underlined-letter-spacing: 0px; --text-md-regular-underlined-line-height: 24px; --text-md-regular-underlined-font-style: normal; --text-2xs-semibold-font-family: "IBM Plex Sans Arabic", Helvetica; --text-2xs-semibold-font-weight: 600; --text-2xs-semibold-font-size: 10px; --text-2xs-semibold-letter-spacing: 0px; --text-2xs-semibold-line-height: 14px; --text-2xs-semibold-font-style: normal; --text-2xs-regular-font-family: "IBM Plex Sans Arabic", Helvetica; --text-2xs-regular-font-weight: 400; --text-2xs-regular-font-size: 10px; --text-2xs-regular-letter-spacing: 0px; --text-2xs-regular-line-height: 14px; --text-2xs-regular-font-style: normal; --text-sm-bold-font-family: "IBM Plex Sans Arabic", Helvetica; --text-sm-bold-font-weight: 700; --text-sm-bold-font-size: 14px; --text-sm-bold-letter-spacing: 0px; --text-sm-bold-line-height: 20px; --text-sm-bold-font-style: normal; --shadows-shadow-3xl: 0px 32px 64px -12px rgba(16, 24, 40, 0.14); --themes-background-background-body: var(--primitives-colors-neutral-50); --themes-text-text-oncolor-primary: var(--primitives-colors-base-white); --themes-link-link-oncolor: var(--primitives-colors-base-white); --themes-text-text-display: var(--primitives-colors-neutral-800); --themes-text-text-default: var(--primitives-colors-base-black); --themes-text-text-primary-paragraph: var(--primitives-colors-neutral-700); --themes-text-text-default-duplicate: var(--primitives-colors-base-black-duplicate); --themes-text-text-primary: var(--primitives-colors-primary-SA-flag-600-primary); --themes-background-background-neutral-200: var(--primitives-colors-neutral-200); --themes-border-border-neutral-primary: var(--primitives-colors-neutral-300); --themes-background-background-white: var(--primitives-colors-base-white-duplicate); --themes-background-background-nav-header: var(--primitives-colors-primary-SA-flag-800); --themes-background-background-menu: var(--primitives-colors-base-white-duplicate); --themes-background-background-primary-400: var(--primitives-colors-primary-SA-flag-400); --themes-background-background-white-duplicate: var(--primitives-colors-base-white); --themes-background-background-neutral-200-duplicate: var(--primitives-colors-neutral-200-duplicate); --themes-border-border-oncolor-transparent-30: var(--primitives-colors-alpha-alpha-white-30); --themes-border-border-primary: var(--primitives-colors-primary-SA-flag-600-primary-duplicate); --themes-background-background-neutral-50: var(--primitives-colors-neutral-50-duplicate); --themes-button-button-background-black-default: var(--primitives-colors-neutral-950); --themes-button-button-background-primary-default: var(--primitives-colors-primary-SA-flag-600-primary-duplicate); --themes-background-background-menu-duplicate: var(--primitives-colors-base-white); --themes-background-background-SA-flag: var(--primitives-colors-green-900); --themes-background-background-notification-white: var(--primitives-colors-base-white); --themes-text-text-secondary-paragraph: var(--primitives-colors-neutral-500); --themes-background-background-neutral-400: var(--primitives-colors-neutral-400); --themes-button-button-background-neutral-hovered: var(--primitives-colors-neutral-100); --themes-global-text-default-disabled: var(--primitives-colors-neutral-400); --themes-link-link-neutral: var(--primitives-colors-neutral-700); --themes-link-link-neutral-hovered: var(--primitives-colors-neutral-500); --themes-link-link-oncolor-hovered: var(--primitives-colors-alpha-alpha-white-80); --themes-border-border-white-40: var(--themes-alpha-alpha-white-40); --themes-button-button-background-transparent-hovered: var(--themes-alpha-alpha-white-20); --themes-alpha-alpha-white-40: var(--primitives-colors-alpha-alpha-white-40); --themes-alpha-alpha-white-20: var(--primitives-colors-alpha-alpha-white-20); --themes-button-button-background-primary-hovered: var(--primitives-colors-primary-SA-flag-700); --themes-button-button-background-black-hovered: var(--primitives-colors-neutral-800); --themes-button-button-background-neutral-default: var(--primitives-colors-neutral-100); --themes-border-border-neutral-secondary: var(--primitives-colors-neutral-200-duplicate); --themes-tag-tag-text-neutral: var(--primitives-colors-neutral-800); --themes-tag-tag-background-neutral-light: var(--primitives-colors-neutral-50-duplicate); --themes-text-text-primary-duplicate: var(--primitives-colors-primary-SA-flag-600-primary-duplicate); --themes-background-background-primary-50: var(--primitives-colors-primary-SA-flag-50); --themes-border-border-black: var(--primitives-colors-base-black); --border-white: rgba(249, 250, 251, 1); --primitives-colors-neutral-50: rgba(249, 250, 251, 1); --primitives-colors-base-white: rgba(255, 255, 255, 1); --primitives-colors-neutral-800: rgba(31, 42, 55, 1); --primitives-colors-base-black: rgba(22, 22, 22, 1); --primitives-colors-neutral-700: rgba(56, 66, 80, 1); --primitives-colors-base-black-duplicate: rgba(22, 22, 22, 1); --primitives-colors-primary-SA-flag-600-primary: rgba(27, 131, 84, 1); --primitives-spacing-2-8px: 8px; --primitives-colors-neutral-200: rgba(229, 231, 235, 1); --primitives-colors-neutral-300: rgba(210, 214, 219, 1); --primitives-colors-base-white-duplicate: rgba(255, 255, 255, 1); --primitives-colors-primary-SA-flag-800: rgba(20, 87, 58, 1); --primitives-spacing-1-4px: 4px; --primitives-colors-neutral-900: rgba(17, 25, 39, 1); --primitives-spacing-4-16px: 16px; --primitives-spacing-0-0px: 0px; --primitives-spacing-3-12px: 12px; --text-default: #161616; --primitives-colors-primary-SA-flag-400: rgba(84, 192, 138, 1); --primitives-spacing-2-8px-duplicate: 8px; --primitives-colors-neutral-100: rgba(243, 244, 246, 1); --primitives-colors-primary-SA-flag-400-duplicate: rgba(84, 192, 138, 1); --primitives-colors-neutral-500: rgba(108, 115, 127, 1); --primitives-colors-neutral-800-duplicate: rgba(31, 42, 55, 1); --primitives-colors-neutral-200-duplicate: rgba(229, 231, 235, 1); --primitives-radius-radius-4: 4px; --primitives-colors-alpha-alpha-white-30: rgba(255, 255, 255, 0.3); --primitives-colors-primary-SA-flag-600-primary-duplicate: rgba(27, 131, 84, 1); --primitives-colors-neutral-50-duplicate: rgba(249, 250, 251, 1); --primitives-colors-neutral-950: rgba(13, 18, 28, 1); --primitives-colors-neutral-600: rgba(77, 87, 97, 1); --primitives-colors-neutral-950-duplicate: rgba(13, 18, 28, 1); --primitives-colors-neutral-600-duplicate: rgba(77, 87, 97, 1); --button-background-primary-default: #1b8354; --text-tertiary: #64748B; --border-neutral-primary: #64748B; --text-display: #1F2A37; --text-primary-paragraph: #384250; --Global-text-default-disabled: #9DA4AE; --background-neutral-100: #F3F4F6; --primitives-colors-neutral-900-duplicate: rgba(17, 25, 39, 1); --primitives-spacing-10-40px-duplicate: 40px; --primitives-spacing-6-24px-duplicate: 24px; --primitives-colors-green-900: rgba(7, 77, 49, 1); --primitives-colors-neutral-400: rgba(157, 164, 174, 1); --primitives-colors-alpha-alpha-white-80: rgba(255, 255, 255, 0.8); --primitives-colors-alpha-alpha-white-40: rgba(255, 255, 255, 0.4); --primitives-colors-alpha-alpha-white-20: rgba(255, 255, 255, 0.2); --primitives-colors-primary-SA-flag-700: rgba(22, 106, 69, 1); --primitives-colors-alpha-alpha-black-40: rgba(22, 22, 22, 0.4); --primitives-colors-alpha-alpha-black-20: rgba(22, 22, 22, 0.2); --primitives-colors-primary-SA-flag-50: rgba(243, 252, 246, 1); --primitives-colors-alpha-alpha-600-primary-10: rgba(27, 131, 84, 0.1); --spacing-global-spacing-md: var(--primitives-spacing-2-8px); --spacing-button-buttons-lg-gap: var(--primitives-spacing-1-4px); --spacing-button-buttons-md-gap: var(--primitives-spacing-1-4px); --spacing-button-buttons-lg-padding: var(--primitives-spacing-4-16px); --spacing-global-spacing-none: var(--primitives-spacing-0-0px); --spacing-button-buttons-md-padding: var(--primitives-spacing-3-12px); --spacing-link-link-sm-gap: var(--primitives-spacing-1-4px); --spacing-link-link-md-gap: var(--primitives-spacing-2-8px); --spacing-tab-tab-button-gap: var(--primitives-spacing-1-4px); --spacing-global-spacing-xs: var(--primitives-spacing-1-4px); --spacing-tab-horizontal-tab-md-button-h-padding: var(--primitives-spacing-4-16px); --spacing-global-spacing-lg: var(--primitives-spacing-3-12px); --spacing-button-button-menu-gap: var(--primitives-spacing-2-8px); --spacing-global-spacing-5xl: var(--primitives-spacing-10-40px-duplicate); --spacing-notification-notification-gap: var(--primitives-spacing-4-16px); --spacing-notification-notification-toast-desktop-h-padding: var(--primitives-spacing-6-24px-duplicate); --spacing-notification-notification-toast-v-padding: var(--primitives-spacing-4-16px); --spacing-global-spacing-xl: var(--primitives-spacing-4-16px); --radius-radius-full: 9999px; --radius-radius-full-duplicate: 9999px; --radius-radius-sm: 4px; --radius-radius-md: 8px; --spacing-spacing-xl: var(--primitives-spacing-4-16px-duplicate); --spacing-spacing-xs: var(--primitives-spacing-1-4px-duplicate); --spacing-spacing-5xl: var(--primitives-spacing-10-40px); --spacing-spacing-md-duplicate: var(--primitives-spacing-2-8px-duplicate); --spacing-spacing-3xl: var(--primitives-spacing-6-24px); --spacing-spacing-8xl: var(--primitives-spacing-20-80px); --spacing-spacing-4xl: var(--primitives-spacing-8-32px); --spacing-spacing-lg: var(--primitives-spacing-3-12px-duplicate); --spacing-spacing-sm: var(--primitives-spacing-1-5-6px); --primitives-spacing-4-16px-duplicate: 16px; --primitives-spacing-1-4px-duplicate: 4px; --primitives-spacing-10-40px: 40px; --primitives-spacing-6-24px: 24px; --primitives-spacing-20-80px: 80px; --primitives-spacing-8-32px: 32px; --primitives-spacing-3-12px-duplicate: 12px; --primitives-spacing-1-5-6px: 6px; --radius-radius-radius-sm: var(--primitives-radius-radius-4); } /* To enable a theme in your HTML, simply add one of the following data attributes to an HTML element, like so: You can apply the theme on any DOM node, not just the `body` */ [data-themes-mode="light"] { --themes-background-background-body: var(--primitives-colors-neutral-50); --themes-text-text-display: var(--primitives-colors-neutral-800); --themes-text-text-default: var(--primitives-colors-base-black); --themes-text-text-primary-paragraph: var(--primitives-colors-neutral-700); --themes-text-text-default-duplicate: var(--primitives-colors-base-black-duplicate); --themes-text-text-primary: var(--primitives-colors-primary-SA-flag-600-primary); --themes-background-background-neutral-200: var(--primitives-colors-neutral-200); --themes-border-border-neutral-primary: var(--primitives-colors-neutral-300); --themes-background-background-white: var(--primitives-colors-base-white-duplicate); --themes-background-background-menu: var(--primitives-colors-base-white-duplicate); --themes-background-background-white-duplicate: var(--primitives-colors-base-white); --themes-background-background-neutral-200-duplicate: var(--primitives-colors-neutral-200-duplicate); --themes-background-background-neutral-50: var(--primitives-colors-neutral-50-duplicate); --themes-background-background-menu-duplicate: var(--primitives-colors-base-white); --themes-background-background-SA-flag: var(--primitives-colors-green-900); --themes-background-background-notification-white: var(--primitives-colors-base-white); --themes-text-text-secondary-paragraph: var(--primitives-colors-neutral-500); --themes-button-button-background-neutral-hovered: var(--primitives-colors-neutral-100); --themes-link-link-neutral: var(--primitives-colors-neutral-700); --themes-link-link-neutral-hovered: var(--primitives-colors-neutral-500); --themes-alpha-alpha-white-40: var(--primitives-colors-alpha-alpha-white-40); --themes-alpha-alpha-white-20: var(--primitives-colors-alpha-alpha-white-20); --themes-button-button-background-neutral-default: var(--primitives-colors-neutral-100); --themes-border-border-neutral-secondary: var(--primitives-colors-neutral-200-duplicate); --themes-tag-tag-text-neutral: var(--primitives-colors-neutral-800); --themes-tag-tag-background-neutral-light: var(--primitives-colors-neutral-50-duplicate); --themes-text-text-primary-duplicate: var(--primitives-colors-primary-SA-flag-600-primary-duplicate); --themes-background-background-primary-50: var(--primitives-colors-primary-SA-flag-50); --themes-border-border-black: var(--primitives-colors-base-black); } [data-themes-mode="dark"] { --themes-background-background-body: var(--primitives-colors-neutral-900); --themes-text-text-display: var(--primitives-colors-neutral-50-duplicate); --themes-text-text-default: var(--primitives-colors-base-white); --themes-text-text-primary-paragraph: var(--primitives-colors-neutral-100); --themes-text-text-default-duplicate: var(--primitives-colors-base-white-duplicate); --themes-text-text-primary: var(--primitives-colors-primary-SA-flag-400-duplicate); --themes-background-background-neutral-200: var(--primitives-colors-neutral-600); --themes-border-border-neutral-primary: var(--primitives-colors-neutral-500); --themes-background-background-white: var(--primitives-colors-neutral-950-duplicate); --themes-background-background-menu: var(--primitives-colors-neutral-800-duplicate); --themes-background-background-white-duplicate: var(--primitives-colors-neutral-950); --themes-background-background-neutral-200-duplicate: var(--primitives-colors-neutral-600-duplicate); --themes-background-background-neutral-50: var(--primitives-colors-neutral-900-duplicate); --themes-background-background-menu-duplicate: var(--primitives-colors-neutral-800); --themes-background-background-SA-flag: var(--primitives-colors-primary-SA-flag-600-primary-duplicate); --themes-background-background-notification-white: var(--primitives-colors-neutral-900-duplicate); --themes-text-text-secondary-paragraph: var(--primitives-colors-neutral-200-duplicate); --themes-button-button-background-neutral-hovered: var(--primitives-colors-neutral-700); --themes-link-link-neutral: var(--primitives-colors-neutral-200-duplicate); --themes-link-link-neutral-hovered: var(--primitives-colors-neutral-400); --themes-alpha-alpha-white-40: var(--primitives-colors-alpha-alpha-black-40); --themes-alpha-alpha-white-20: var(--primitives-colors-alpha-alpha-black-20); --themes-button-button-background-neutral-default: var(--primitives-colors-neutral-800); --themes-border-border-neutral-secondary: var(--primitives-colors-neutral-700); --themes-tag-tag-text-neutral: var(--primitives-colors-neutral-100); --themes-tag-tag-background-neutral-light: var(--primitives-colors-neutral-800); --themes-text-text-primary-duplicate: var(--primitives-colors-primary-SA-flag-400); --themes-background-background-primary-50: var(--primitives-colors-alpha-alpha-600-primary-10); --themes-border-border-black: var(--primitives-colors-base-white); } [data-spacing-mode="desktop"] { --spacing-link-link-md-gap: var(--primitives-spacing-2-8px); --spacing-tab-horizontal-tab-md-button-h-padding: var(--primitives-spacing-4-16px); --spacing-button-button-menu-gap: var(--primitives-spacing-2-8px); --spacing-notification-notification-gap: var(--primitives-spacing-4-16px); --spacing-notification-notification-toast-desktop-h-padding: var(--primitives-spacing-6-24px-duplicate); --spacing-notification-notification-toast-v-padding: var(--primitives-spacing-4-16px); } [data-spacing-mode="tablet"] { --spacing-link-link-md-gap: var(--primitives-spacing-2-8px); --spacing-tab-horizontal-tab-md-button-h-padding: var(--primitives-spacing-4-16px); --spacing-button-button-menu-gap: var(--primitives-spacing-2-8px); --spacing-notification-notification-gap: var(--primitives-spacing-4-16px); --spacing-notification-notification-toast-desktop-h-padding: var(--primitives-spacing-6-24px-duplicate); --spacing-notification-notification-toast-v-padding: var(--primitives-spacing-4-16px); } [data-spacing-mode="mobile"] { --spacing-link-link-md-gap: var(--primitives-spacing-1-4px); --spacing-tab-horizontal-tab-md-button-h-padding: var(--primitives-spacing-3-12px); --spacing-button-button-menu-gap: var(--primitives-spacing-1-4px); --spacing-notification-notification-gap: var(--primitives-spacing-2-8px); --spacing-notification-notification-toast-desktop-h-padding: var(--primitives-spacing-4-16px); --spacing-notification-notification-toast-v-padding: var(--primitives-spacing-3-12px); } :root { --text-md-medium-font-family: "IBM Plex Sans Arabic", Helvetica; --text-md-medium-font-weight: 500; --text-md-medium-font-size: 16px; --text-md-medium-letter-spacing: 0px; --text-md-medium-line-height: 24px; --text-md-medium-font-style: normal; --text-sm-regular-font-family: "IBM Plex Sans Arabic", Helvetica; --text-sm-regular-font-weight: 400; --text-sm-regular-font-size: 14px; --text-sm-regular-letter-spacing: 0px; --text-sm-regular-line-height: 20px; --text-sm-regular-font-style: normal; --text-sm-regular-underlined-font-family: "IBM Plex Sans Arabic", Helvetica; --text-sm-regular-underlined-font-weight: 400; --text-sm-regular-underlined-font-size: 14px; --text-sm-regular-underlined-letter-spacing: 0px; --text-sm-regular-underlined-line-height: 20px; --text-sm-regular-underlined-font-style: normal; --text-sm-semibold-font-family: "IBM Plex Sans Arabic", Helvetica; --text-sm-semibold-font-weight: 600; --text-sm-semibold-font-size: 14px; --text-sm-semibold-letter-spacing: 0px; --text-sm-semibold-line-height: 20px; --text-sm-semibold-font-style: normal; --text-xs-regular-font-family: "IBM Plex Sans Arabic", Helvetica; --text-xs-regular-font-weight: 400; --text-xs-regular-font-size: 12px; --text-xs-regular-letter-spacing: 0px; --text-xs-regular-line-height: normal; --text-xs-regular-font-style: normal; --text-md-semibold-font-family: "IBM Plex Sans Arabic", Helvetica; --text-md-semibold-font-weight: 600; --text-md-semibold-font-size: 16px; --text-md-semibold-letter-spacing: 0px; --text-md-semibold-line-height: 24px; --text-md-semibold-font-style: normal; --text-sm-medium-font-family: "IBM Plex Sans Arabic", Helvetica; --text-sm-medium-font-weight: 500; --text-sm-medium-font-size: 14px; --text-sm-medium-letter-spacing: 0px; --text-sm-medium-line-height: 20px; --text-sm-medium-font-style: normal; --text-md-regular-font-family: "IBM Plex Sans Arabic", Helvetica; --text-md-regular-font-weight: 400; --text-md-regular-font-size: 16px; --text-md-regular-letter-spacing: 0px; --text-md-regular-line-height: 24px; --text-md-regular-font-style: normal; --text-md-bold-font-family: "IBM Plex Sans Arabic", Helvetica; --text-md-bold-font-weight: 700; --text-md-bold-font-size: 16px; --text-md-bold-letter-spacing: 0px; --text-md-bold-line-height: 24px; --text-md-bold-font-style: normal; --text-lg-bold-font-family: "IBM Plex Sans Arabic", Helvetica; --text-lg-bold-font-weight: 700; --text-lg-bold-font-size: 18px; --text-lg-bold-letter-spacing: 0px; --text-lg-bold-line-height: 28px; --text-lg-bold-font-style: normal; --display-md-medium-font-family: "IBM Plex Sans Arabic", Helvetica; --display-md-medium-font-weight: 500; --display-md-medium-font-size: 36px; --display-md-medium-letter-spacing: -0.72px; --display-md-medium-line-height: 44px; --display-md-medium-font-style: normal; --display-xs-medium-font-family: "IBM Plex Sans Arabic", Helvetica; --display-xs-medium-font-weight: 500; --display-xs-medium-font-size: 24px; --display-xs-medium-letter-spacing: 0px; --display-xs-medium-line-height: 32px; --display-xs-medium-font-style: normal; --text-lg-regular-font-family: "IBM Plex Sans Arabic", Helvetica; --text-lg-regular-font-weight: 400; --text-lg-regular-font-size: 18px; --text-lg-regular-letter-spacing: 0px; --text-lg-regular-line-height: 28px; --text-lg-regular-font-style: normal; --text-xl-regular-font-family: "IBM Plex Sans Arabic", Helvetica; --text-xl-regular-font-weight: 400; --text-xl-regular-font-size: 20px; --text-xl-regular-letter-spacing: 0px; --text-xl-regular-line-height: 30px; --text-xl-regular-font-style: normal; --display-lg-medium-font-family: "IBM Plex Sans Arabic", Helvetica; --display-lg-medium-font-weight: 500; --display-lg-medium-font-size: 48px; --display-lg-medium-letter-spacing: -0.96px; --display-lg-medium-line-height: 60px; --display-lg-medium-font-style: normal; --text-md-regular-underlined-font-family: "IBM Plex Sans Arabic", Helvetica; --text-md-regular-underlined-font-weight: 400; --text-md-regular-underlined-font-size: 16px; --text-md-regular-underlined-letter-spacing: 0px; --text-md-regular-underlined-line-height: 24px; --text-md-regular-underlined-font-style: normal; --text-xs-medium-font-family: "IBM Plex Sans Arabic", Helvetica; --text-xs-medium-font-weight: 500; --text-xs-medium-font-size: 12px; --text-xs-medium-letter-spacing: 0px; --text-xs-medium-line-height: 18px; --text-xs-medium-font-style: normal; --shadows-shadow-lg: 0px 4px 6px -2px rgba(16, 24, 40, 0.03), 0px 12px 16px -4px rgba(16, 24, 40, 0.08); --themes-background-background-white: var(--primitives-colors-base-white); --themes-text-text-display: var(--primitives-colors-neutral-800); --themes-text-text-default: var(--primitives-colors-base-black); --themes-link-link-neutral: var(--primitives-colors-neutral-700); --themes-text-text-primary-paragraph: var(--primitives-colors-neutral-700); --themes-text-text-primary: var(--primitives-colors-primary-SA-flag-600-primary); --themes-text-text-default-duplicate: var(--primitives-colors-base-black-duplicate); --themes-text-text-oncolor-primary-duplicate: var(--primitives-colors-base-white); --themes-link-link-oncolor-duplicate: var(--primitives-colors-base-white); --themes-background-background-black: var(--primitives-colors-base-black); --themes-background-background-primary-50: var(--primitives-colors-primary-SA-flag-50); --themes-background-background-primary-50-duplicate: var(--primitives-colors-primary-SA-flag-50-duplicate); --themes-background-background-nav-header: var(--primitives-colors-primary-SA-flag-800); --themes-background-background-neutral-50: var(--primitives-colors-neutral-50); --themes-background-background-neutral-200: var(--primitives-colors-neutral-200); --themes-border-border-oncolor-transparent-30: var(--primitives-colors-alpha-alpha-white-30); --themes-background-background-primary-400: var(--primitives-colors-primary-SA-flag-400-duplicate); --themes-border-border-neutral-primary: var(--primitives-colors-neutral-300-duplicate); --themes-button-button-background-primary-default: var(--primitives-colors-primary-SA-flag-600-primary-duplicate); --themes-background-background-SA-flag: var(--primitives-colors-green-900); --themes-background-background-neutral-400: var(--primitives-colors-neutral-400); --themes-button-button-background-neutral-hovered: var(--primitives-colors-neutral-100); --themes-global-text-default-disabled: var(--primitives-colors-neutral-400); --themes-link-link-neutral-hovered: var(--primitives-colors-neutral-500); --themes-link-link-oncolor-hovered: var(--primitives-colors-alpha-alpha-white-80); --themes-icon-bg-icon-brand-light: var(--primitives-colors-primary-SA-flag-50-duplicate); --themes-alpha-alpha-primary-10: rgba(27, 131, 84, 0.1); --themes-border-border-white-40: var(--themes-alpha-alpha-white-40); --themes-button-button-background-transparent-hovered: var(--themes-alpha-alpha-white-20); --themes-button-button-background-neutral-default: var(--primitives-colors-neutral-100); --themes-alpha-alpha-white-40: var(--primitives-colors-alpha-alpha-white-40); --themes-alpha-alpha-white-20: var(--primitives-colors-alpha-alpha-white-20); --themes-button-button-background-primary-hovered: var(--primitives-colors-primary-SA-flag-700); --themes-border-border-neutral-secondary: var(--primitives-colors-neutral-200); --themes-tag-tag-text-neutral: var(--primitives-colors-neutral-800); --themes-tag-tag-background-neutral-light: var(--primitives-colors-neutral-50); --themes-text-text-primary-duplicate: var(--primitives-colors-primary-SA-flag-600-primary-duplicate); --themes-border-border-primary: var(--primitives-colors-primary-SA-flag-600-primary-duplicate); --themes-text-text-secondary-paragraph: var(--primitives-colors-neutral-500); --primitives-colors-base-white: rgba(255, 255, 255, 1); --primitives-colors-base-white-duplicate: rgba(255, 255, 255, 1); --primitives-colors-neutral-800: rgba(31, 42, 55, 1); --primitives-colors-base-black: rgba(22, 22, 22, 1); --primitives-colors-neutral-700: rgba(56, 66, 80, 1); --primitives-colors-primary-SA-flag-600-primary: rgba(27, 131, 84, 1); --primitives-colors-base-black-duplicate: rgba(22, 22, 22, 1); --primitives-spacing-2-8px: 8px; --primitives-colors-primary-SA-flag-50: rgba(243, 252, 246, 1); --primitives-colors-primary-SA-flag-50-duplicate: rgba(243, 252, 246, 1); --primitives-colors-primary-SA-flag-800: rgba(20, 87, 58, 1); --primitives-spacing-1-4px: 4px; --primitives-colors-neutral-950: rgba(13, 18, 28, 1); --primitives-spacing-4-16px: 16px; --primitives-spacing-0-0px: 0px; --primitives-spacing-3-12px: 12px; --primitives-spacing-2-8px-duplicate: 8px; --primitives-colors-neutral-50: rgba(249, 250, 251, 1); --primitives-colors-neutral-200: rgba(229, 231, 235, 1); --primitives-colors-neutral-100: rgba(243, 244, 246, 1); --primitives-colors-primary-SA-flag-400: rgba(84, 192, 138, 1); --primitives-colors-alpha-alpha-600-primary-10: rgba(27, 131, 84, 0.1); --primitives-radius-radius-4: 4px; --primitives-colors-alpha-alpha-white-30: rgba(255, 255, 255, 0.3); --primitives-colors-primary-SA-flag-400-duplicate: rgba(84, 192, 138, 1); --primitives-colors-alpha-alpha-600-primary-10-duplicate: rgba(27, 131, 84, 0.1); --primitives-colors-neutral-300-duplicate: rgba(210, 214, 219, 1); --primitives-colors-neutral-600: rgba(77, 87, 97, 1); --primitives-colors-neutral-900: rgba(17, 25, 39, 1); --primitives-colors-primary-SA-flag-600-primary-duplicate: rgba(27, 131, 84, 1); --primitives-colors-neutral-500: rgba(108, 115, 127, 1); --primitives-spacing-6-24px-duplicate: 24px; --primitives-spacing-10-40px: 40px; --primitives-radius-radius-2: 2px; --primitives-colors-neutral-950-duplicate: rgba(13, 18, 28, 1); --primitives-colors-green-900: rgba(7, 77, 49, 1); --primitives-colors-neutral-400: rgba(157, 164, 174, 1); --primitives-colors-alpha-alpha-white-80: rgba(255, 255, 255, 0.8); --primitives-colors-alpha-alpha-white-40: rgba(255, 255, 255, 0.4); --primitives-colors-alpha-alpha-white-20: rgba(255, 255, 255, 0.2); --primitives-colors-primary-SA-flag-700: rgba(22, 106, 69, 1); --primitives-colors-alpha-alpha-black-40: rgba(22, 22, 22, 0.4); --primitives-colors-alpha-alpha-black-20: rgba(22, 22, 22, 0.2); --spacing-global-spacing-md: var(--primitives-spacing-2-8px); --spacing-button-buttons-lg-gap: var(--primitives-spacing-1-4px); --spacing-button-buttons-md-gap: var(--primitives-spacing-1-4px); --spacing-global-spacing-xs: var(--primitives-spacing-1-4px); --spacing-button-buttons-lg-padding: var(--primitives-spacing-4-16px); --spacing-global-spacing-none: var(--primitives-spacing-0-0px); --spacing-button-buttons-md-padding: var(--primitives-spacing-3-12px); --spacing-link-link-sm-gap: var(--primitives-spacing-1-4px); --spacing-link-link-md-gap: var(--primitives-spacing-2-8px); --spacing-global-spacing-lg: var(--primitives-spacing-3-12px); --spacing-global-spacing-xl: var(--primitives-spacing-4-16px); --spacing-global-spacing-3xl: var(--primitives-spacing-6-24px-duplicate); --spacing-card-card-lg-gap: var(--primitives-spacing-6-24px-duplicate); --spacing-button-button-menu-gap: var(--primitives-spacing-2-8px); --spacing-notification-notification-gap: var(--primitives-spacing-4-16px); --spacing-global-spacing-5xl: var(--primitives-spacing-10-40px); --spacing-notification-notification-alert-h-padding: var(--primitives-spacing-6-24px-duplicate); --spacing-notification-notification-alert-v-padding: var(--primitives-spacing-2-8px); --spacing-notification-notification-toast-desktop-h-padding: var(--primitives-spacing-6-24px-duplicate); --spacing-notification-notification-toast-v-padding: var(--primitives-spacing-4-16px); --radius-radius-full: 9999px; --radius-radius-full-duplicate: 9999px; --radius-radius-sm: 4px; --radius-radius-sm-duplicate: 4px; --radius-radius-lg: 16px; --radius-radius-md: 8px; --primitives-colors-neutral-300: rgba(210, 214, 219, 1); --primitives-spacing-1-4px-duplicate: 4px; --primitives-spacing-4-16px-duplicate: 16px; --primitives-spacing-6-24px: 24px; --primitives-spacing-8-32px: 32px; --primitives-spacing-10-40px-duplicate: 40px; --spacing-spacing-xs-duplicate: var(--primitives-spacing-1-4px-duplicate); --spacing-spacing-xl-duplicate: var(--primitives-spacing-4-16px-duplicate); --spacing-spacing-md-duplicate: var(--primitives-spacing-2-8px-duplicate); --spacing-spacing-3xl: var(--primitives-spacing-6-24px); --spacing-spacing-4xl: var(--primitives-spacing-8-32px); --spacing-spacing-5xl: var(--primitives-spacing-10-40px-duplicate); --radius-radius-radius-sm: var(--primitives-radius-radius-4); --radius-radius-radius-xs: var(--primitives-radius-radius-2); /* added by mmousa */ --display-lg-semibold-font-family: "IBM Plex Sans Arabic", Helvetica; --display-lg-semibold-font-weight: 600; --display-lg-semibold-font-size: 36px; --display-lg-semibold-letter-spacing: -0.72px; /* --display-lg-semibold-line-height: 44px; */ --display-lg-semibold-font-style: normal; --tag-text-success: #085D3A; --tag-border-success-light: #ABEFC6; --tag-background-success-light: #ECFDF3; --tag-border-info-light: #B2DDFF; --tag-background-info-light: #EFF8FF; --tag-text-info: #1849A9; --border-warning: #B54708; --background-warning-50: #FFFAEB; --text-warning: #B54708; --text-error: #B42318; --background-error-50: #FEF3F2; --grey-grey-500: #0F1822; } /* To enable a theme in your HTML, simply add one of the following data attributes to an HTML element, like so: You can apply the theme on any DOM node, not just the `body` */ [data-themes-mode="light"] { --themes-background-background-white: var(--primitives-colors-base-white); --themes-text-text-display: var(--primitives-colors-neutral-800); --themes-link-link-neutral: var(--primitives-colors-neutral-700); --themes-text-text-primary-paragraph: var(--primitives-colors-neutral-700); --themes-text-text-primary: var(--primitives-colors-primary-SA-flag-600-primary); --themes-text-text-default-duplicate: var(--primitives-colors-base-black-duplicate); --themes-background-background-primary-50-duplicate: var(--primitives-colors-primary-SA-flag-50-duplicate); --themes-background-background-neutral-50: var(--primitives-colors-neutral-50); --themes-background-background-neutral-200: var(--primitives-colors-neutral-200); --themes-border-border-neutral-primary: var(--primitives-colors-neutral-300-duplicate); --themes-background-background-SA-flag: var(--primitives-colors-green-900); --themes-button-button-background-neutral-hovered: var(--primitives-colors-neutral-100); --themes-link-link-neutral-hovered: var(--primitives-colors-neutral-500); --themes-icon-bg-icon-brand-light: var(--primitives-colors-primary-SA-flag-50-duplicate); --themes-alpha-alpha-primary-10: rgba(27, 131, 84, 0.1); --themes-button-button-background-neutral-default: var(--primitives-colors-neutral-100); --themes-alpha-alpha-white-40: var(--primitives-colors-alpha-alpha-white-40); --themes-alpha-alpha-white-20: var(--primitives-colors-alpha-alpha-white-20); --themes-border-border-neutral-secondary: var(--primitives-colors-neutral-200); --themes-tag-tag-text-neutral: var(--primitives-colors-neutral-800); --themes-tag-tag-background-neutral-light: var(--primitives-colors-neutral-50); --themes-text-text-primary-duplicate: var(--primitives-colors-primary-SA-flag-600-primary-duplicate); --themes-text-text-secondary-paragraph: var(--primitives-colors-neutral-500); } [data-themes-mode="dark"] { --themes-background-background-white: var(--primitives-colors-neutral-950); --themes-text-text-display: var(--primitives-colors-neutral-50); --themes-link-link-neutral: var(--primitives-colors-neutral-200); --themes-text-text-primary-paragraph: var(--primitives-colors-neutral-100); --themes-text-text-primary: var(--primitives-colors-primary-SA-flag-400); --themes-text-text-default-duplicate: var(--primitives-colors-base-white); --themes-background-background-primary-50-duplicate: var(--primitives-colors-alpha-alpha-600-primary-10-duplicate); --themes-background-background-neutral-50: var(--primitives-colors-neutral-900); --themes-background-background-neutral-200: var(--primitives-colors-neutral-600); --themes-border-border-neutral-primary: var(--primitives-colors-neutral-500); --themes-background-background-SA-flag: var(--primitives-colors-primary-SA-flag-600-primary-duplicate); --themes-button-button-background-neutral-hovered: var(--primitives-colors-neutral-700); --themes-link-link-neutral-hovered: var(--primitives-colors-neutral-400); --themes-icon-bg-icon-brand-light: var(--themes-alpha-alpha-primary-10); --themes-alpha-alpha-primary-10: rgba(22, 106, 69, 0.1); --themes-button-button-background-neutral-default: var(--primitives-colors-neutral-800); --themes-alpha-alpha-white-40: var(--primitives-colors-alpha-alpha-black-40); --themes-alpha-alpha-white-20: var(--primitives-colors-alpha-alpha-black-20); --themes-border-border-neutral-secondary: var(--primitives-colors-neutral-700); --themes-tag-tag-text-neutral: var(--primitives-colors-neutral-100); --themes-tag-tag-background-neutral-light: var(--primitives-colors-neutral-800); --themes-text-text-primary-duplicate: var(--primitives-colors-primary-SA-flag-400-duplicate); --themes-text-text-secondary-paragraph: var(--primitives-colors-neutral-200); } [data-spacing-mode="desktop"] { --spacing-link-link-md-gap: var(--primitives-spacing-2-8px); --spacing-card-card-lg-gap: var(--primitives-spacing-6-24px-duplicate); --spacing-button-button-menu-gap: var(--primitives-spacing-2-8px); --spacing-notification-notification-gap: var(--primitives-spacing-4-16px); --spacing-notification-notification-alert-h-padding: var(--primitives-spacing-6-24px-duplicate); --spacing-notification-notification-toast-desktop-h-padding: var(--primitives-spacing-6-24px-duplicate); --spacing-notification-notification-toast-v-padding: var(--primitives-spacing-4-16px); } [data-spacing-mode="tablet"] { --spacing-link-link-md-gap: var(--primitives-spacing-2-8px); --spacing-card-card-lg-gap: var(--primitives-spacing-6-24px-duplicate); --spacing-button-button-menu-gap: var(--primitives-spacing-2-8px); --spacing-notification-notification-gap: var(--primitives-spacing-4-16px); --spacing-notification-notification-alert-h-padding: var(--primitives-spacing-6-24px-duplicate); --spacing-notification-notification-toast-desktop-h-padding: var(--primitives-spacing-6-24px-duplicate); --spacing-notification-notification-toast-v-padding: var(--primitives-spacing-4-16px); } [data-spacing-mode="mobile"] { --spacing-link-link-md-gap: var(--primitives-spacing-1-4px); --spacing-card-card-lg-gap: var(--primitives-spacing-4-16px); --spacing-button-button-menu-gap: var(--primitives-spacing-1-4px); --spacing-notification-notification-gap: var(--primitives-spacing-2-8px); --spacing-notification-notification-alert-h-padding: var(--primitives-spacing-4-16px); --spacing-notification-notification-toast-desktop-h-padding: var(--primitives-spacing-4-16px); --spacing-notification-notification-toast-v-padding: var(--primitives-spacing-3-12px); }