@svarog-ui/theme-muchandy
Version:
Muchandy theme for Svarog UI components
414 lines (413 loc) • 19.7 kB
JavaScript
// Auto-generated theme variables for muchandy
export const themeVariables = `
--font-family-primary: 'Montserrat', sans-serif;
--font-family-heading: 'Montserrat', sans-serif;
--font-family-base: 'Montserrat', sans-serif;
--color-brand-primary: #ff7f50;
--color-brand-primary-dark: #cc643f;
--color-brand-primary-light: #ffa07a;
--color-brand-secondary: #4aa2d9;
--color-brand-secondary-dark: #3881b0;
--color-brand-secondary-light: #7cc0ed;
--typography-color: var(--color-text);
--typography-muted-color: var(--color-text-light);
--typography-margin-bottom: var(--space-4);
--typography-h1-size: var(--font-size-6xl);
--typography-h2-size: var(--font-size-4xl);
--typography-h3-size: var(--font-size-3xl);
--typography-h4-size: var(--font-size-2xl);
--typography-h5-size: var(--font-size-xl);
--typography-h6-size: var(--font-size-lg);
--typography-body-size: var(--font-size-base);
--typography-small-size: var(--font-size-sm);
--link-margin-left: 0;
--link-margin-right: 0;
--link-color: var(--color-brand-secondary);
--link-transition: var(--transition-normal);
--link-hover-color: var(--color-brand-secondary-light);
--button-bg: var(--color-transparent);
--button-color: var(--color-brand-primary);
--button-border: 2px solid var(--color-brand-primary);
--button-radius: 0;
--button-padding: var(--space-2) var(--space-5);
--button-font-size: var(--font-size-xl);
--button-font-family: var(--font-family-primary);
--button-font-weight: var(--font-weight-medium);
--button-transition: var(--transition-normal);
--button-shadow: none;
--button-hover-bg: var(--color-transparent);
--button-hover-border-color: var(--color-brand-primary-light);
--button-hover-color: var(--color-brand-primary-light);
--button-hover-shadow: none;
--button-hover-transform: var(--space-1);
--button-active-bg: var(--color-brand-primary-dark);
--button-active-border-color: var(--color-brand-primary-dark);
--button-active-shadow: none;
--button-active-transform: none;
--button-disabled-bg: var(--disabled-background);
--button-disabled-border-color: var(--disabled-background);
--button-disabled-color: var(--color-text-disabled);
--button-disabled-opacity: inherit;
--button-focus-shadow: inherit;
--button-primary-bg: var(--color-brand-primary);
--button-primary-color: var(--color-text-white);
--button-primary-active-bg: var(--color-brand-primary-dark);
--button-primary-hover-bg: var(--color-brand-primary-light);
--buton-primary-hover-bg: var(--color-brand-primary-light);
--button-primary-active-border-color: none;
--button-primary-border-color: none;
--button-primary-hover-border-color: none;
--button-primary-hover-color: var(--color-text-white);
--button-secondary-bg: var(--color-brand-secondary);
--button-secondary-color: var(--color-text-white);
--button-secondary-hover-bg: var(--color-brand-secondary-light);
--button-secondary-active-bg: var(--color-brand-secondary-dark);
--button-secondary-active-border-color: none;
--button-secondary-border-color: none;
--button-secondary-hover-border-color: none;
--button-secondary-hover-color: var(--color-text-white);
--button-text-color: var(--color-brand-primary);
--button-text-hover-color: var(--color-brand-primary-light);
--button-text-padding: inherit;
--button-padding-sm: var(--space-1) var(--space-3);
--button-font-size-sm: var(--font-size-sm);
--button-radius-sm: none;
--button-padding-lg: var(--space-3) var(--space-5);
--button-font-size-lg: var(--font-size-lg);
--button-radius-lg: none;
--button-icon-margin: var(--space-1);
--button-icon-padding: var(--space-1) var(--space-2);
--button-icon-radius: 0;
--button-icon-size: var(--font-size-xl);
--button-icon-size-lg: var(--font-size-lg);
--button-icon-size-sm: var(--font-size-sm);
--button-outlined-color: var(--color-dark);
--button-outlined-hover-bg: var(--color-transparent);
--button-outlined-hover-color: var(--color-gray-600);
--button-outlined-border-color: none;
--button-outlined-hover-border-color: var(--color-gray-600);
--button-success-bg: var(--color-success);
--button-success-color: var(--color-text-white);
--button-success-hover-bg: var(--color-success-light);
--button-success-border-color: none;
--button-success-hover-border-color: none;
--button-success-hover-color: var(--color-text-white);
--button-danger-bg: var(--color-danger);
--button-danger-color: var(--color-text-white);
--button-danger-hover-bg: var(--color-danger-light);
--button-danger-border-color: none;
--button-danger-hover-border-color: none;
--button-danger-hover-color: var(--color-text-white);
--nav-bg: var(--color-bg);
--nav-border-bottom: 2px solid var(--color-brand-secondary);
--nav-dropdown-bg: var(--color-bg);
--nav-padding: var(--space-2);
--nav-margin-right: var(--space-2);
--nav-font-size: var(--font-size-xl);
--nav-line-height: 1.5;
--nav-active-font-weight: inherit;
--nav-focus-shadow: var(--focus-ring);
--nav-item-spacing: var(--space-10);
--nav-item-spacing-vertical: var(--space-2);
--nav-submenu-indent: 1;
--nav-link-color: var(--color-text);
--nav-link-hover-color: var(--color-brand-secondary);
--nav-link-active-color: var(--color-brand-secondary);
--nav-link-font-size: var(--font-size-xl);
--nav-link-padding: 0;
--nav-link-radius: 0;
--nav-link-transition: var(--transition-normal);
--nav-burger-font-size: var(--font-size-2xl);
--nav-burger-color: var(--color-text);
--nav-burger-size: var(--font-size-2xl);
--nav-burger-margin-bottom: var(--space-2);
--nav-dropdown-border: 1px solid var(--color-border-light);
--nav-dropdown-link-padding: 0;
--nav-dropdown-padding: 0;
--nav-dropdown-radius: 0;
--nav-dropdown-shadow: var(--shadow-md);
--nav-padding-mobile: var(--space-2) 0;
--nav-mobile-bg: var(--color-bg);
--nav-mobile-item-border: 1px solid var(--color-border-light);
--nav-mobile-link-padding: 0;
--nav-mobile-max-height: inherit;
--nav-mobile-padding: var(--space-4);
--nav-mobile-radius: 0;
--nav-mobile-shadow: none;
--nav-mobile-submenu-bg: var(--color-bg);
--nav-mobile-active-bg: var(--color-border-light);
--nav-mobile-hover-bg: var(--color-border-light);
--section-bg: var(--color-bg);
--section-color: var(--color-text);
--section-padding: var(--space-4);
--section-gap: var(--space-3);
--section-content-max-width: var(--container-max-width);
--section-padding-tablet: var(--space-3);
--section-gap-tablet: var(--space-2);
--section-padding-mobile: var(--space-2);
--section-bg-minor: var(--color-bg);
--section-color-minor: var(--color-text-light);
--logo-width: 120px;
--logo-height: auto;
--logo-height-tablet: var(--logo-height);
--logo-hover-opacity: var(--hover-opacity);
--logo-max-height: var(--logo-height);
--logo-max-width: var(--logo-width);
--logo-width-tablet: var(--logo-width);
--card-bg: var(--color-bg);
--card-color: var(--color-text);
--card-radius: 0;
--card-border: 1px solid var(--color-border-light);
--card-border-color: var(--color-border-medium);
--card-shadow: var(--shadow-md);
--card-padding: var(--space-6);
--card-hover-border-color: var(--color-border-medium);
--card-title-padding: 0 0 var(--space-6) 0;
--card-title-font-size: var(--font-size-4xl);
--card-title-font-weight: var(--font-weight-bold);
--card-title-border: 1px solid var(--color-border-light);
--card-title-margin-bottom: var(--space-6);
--card-content-padding: 0;
--card-footer-margin-top: var(--space-6);
--card-footer-padding: var(--space-6) 0 0 0;
--card-footer-bg: var(--color-gray-100);
--card-footer-border: 1px solid var(--color-border-light);
--card-footer-font-size: var(--font-size-sm);
--card-title-padding-mobile: var(--space-3);
--card-content-padding-mobile: var(--space-3);
--card-footer-padding-mobile: var(--space-2) var(--space-3);
--card-image-margin-bottom: var(--space-3);
--input-margin-bottom: 0;
--input-padding: var(--space-2) var(--space-3);
--input-mobile-padding: var(--space-2);
--input-font-size: var(--font-size-sm);
--input-font-family: var(--font-family-primary);
--input-mobile-font-size: var(--font-size-xs);
--input-validation-font-size: var(--font-size-xs);
--input-bg: var(--color-bg);
--input-color: var(--color-text);
--input-placeholder-color: var(--color-text-lighter);
--input-focus-border-color: var(--color-brand-secondary-light);
--input-disabled-bg: var(--disabled-background);
--input-readonly-bg: var(--disabled-background);
--input-valid-border-color: var(--color-success-light);
--input-invalid-border-color: var(--color-danger-light);
--input-validation-color: var(--color-danger-light);
--input-valid-color: var(--color-success-light);
--input-border: 1px solid var(--color-border-medium);
--input-radius: 0;
--input-shadow: var(--shadow-none);
--input-focus-shadow: var(--focus-ring);
--input-transition: var(--transition-normal);
--input-disabled-opacity: var(--disabled-opacity);
--select-margin-bottom: 0;
--select-padding: var(--space-2) var(--space-3);
--select-font-size: var(--font-size-sm);
--select-font-family: var(--font-family-base);
--select-color: var(--color-text);
--select-placeholder-color: var(--color-text-lighter);
--select-bg: var(--color-bg);
--select-border: 1px solid var(--select-border-color);
--select-border-color: var(--color-border-medium);
--select-radius: 0;
--select-shadow: var(--shadow-none);
--select-transition: var(--transition-normal);
--select-line-height: 1.5;
--select-arrow-size: var(--font-size-sm);
--select-arrow-margin: var(--space-2);
--select-arrow-border: 1px solid var(--select-arrow-color);
--select-arrow-color: var(--color-text);
--select-arrow-transition: var(--transition-normal);
--select-arrow-right: var(--space-4);
--select-dropdown-bg: var(--color-bg);
--select-dropdown-border-color: var(--color-border-medium);
--select-dropdown-radius: 0;
--select-dropdown-z-index: var(--z-index-dropdown);
--select-dropdown-transition: var(--transition-normal);
--select-dropdown-shadow: var(--shadow-none);
--select-dropdown-max-height: var(--space-40);
--select-dropdown-mobile-max-height: var(--space-40);
--select-option-padding: var(--space-2) var(--space-3);
--select-option-transition: var(--transition-normal);
--select-option-hover-bg: var(--color-gray-200);
--select-option-selected-bg: var(--color-gray-200);
--select-option-selected-color: var(--color-text);
--select-option-disabled-color: var(--color-text-disabled);
--select-option-disabled-bg: var(--color-gray-200);
--select-group-header-padding: var(--space-1) var(--space-3);
--select-group-header-font-weight: bold;
--select-group-header-color: var(--color-text);
--select-group-header-bg: var(--color-bg);
--select-group-header-font-size: var(--font-size-sm);
--select-group-header-border-bottom: 1px solid var(--color-border-light);
--select-group-header-border-top: 1px solid var(--color-border-light);
--select-checkbox-size: var(--font-size-sm);
--select-checkbox-border: var(--color-border-medium);
--select-checkbox-radius: 0;
--select-checkbox-margin: var(--space-2);
--select-checkbox-check-border: var(--color-brand-secondary-light);
--select-hover-border-color: var(--color-brand-secondary-light);
--select-focus-border-color: var(--color-brand-secondary-light);
--select-focus-shadow: var(--focus-ring);
--select-disabled-bg: var(--disabled-background);
--select-disabled-opacity: var(--disabled-opacity);
--select-valid-border-color: var(--color-success-light);
--select-invalid-border-color: var(--color-danger-light);
--select-validation-font-size: var(--font-size-xs);
--select-validation-margin-top: var(--space-2);
--select-validation-color: var(--color-danger-light);
--select-validation-min-height: var(--space-4);
--select-valid-color: var(--color-success-light);
--select-mobile-font-size: var(--font-size-xs);
--select-mobile-padding: var(--space-2);
--checkbox-bg: var(--color-bg);
--checkbox-border: 2px solid var(--color-border-medium);
--checkbox-radius: 0;
--checkbox-size: var(--font-size-sm);
--checkbox-color: var(--color-text);
--checkbox-indicator-margin: var(--space-2);
--checkbox-font-size: var(--font-size-sm);
--checkbox-font-family: var(--font-family-primary);
--checkbox-transition: var(--transition-normal);
--checkbox-padding: var(--space-1);
--checkbox-hover-border-color: var(--color-brand-secondary-light);
--checkbox-checked-bg: var(--color-brand-secondary);
--checkbox-checked-border-color: var(--color-brand-secondary);
--checkbox-focus-shadow: var(--focus-ring);
--checkbox-disabled-bg: var(--disabled-background);
--checkbox-disabled-border-color: var(--color-border-light);
--checkbox-disabled-color: var(--color-text-disabled);
--checkbox-valid-border-color: var(--color-success-light);
--checkbox-invalid-border-color: var(--color-danger-light);
--checkbox-validation-color: var(--color-danger-light);
--checkbox-validation-font-size: var(--font-size-xs);
--checkbox-margin-bottom: var(--space-3);
--checkbox-indicator-width: 4px;
--checkbox-indicator-height: 8px;
--checkbox-required-color: var(--color-danger-light);
--checkbox-indeterminate-bg: var(--color-brand-secondary-light);
--checkbox-indeterminate-border-color: var(--color-brand-secondary-light);
--checkbox-indeterminate-width: 8px;
--checkbox-indeterminate-height: 2px;
--checkbox-valid-color: var(--color-success-light);
--radio-bg: var(--color-bg);
--radio-border: 2px solid var(--color-border-medium);
--radio-size: 20px;
--radio-inner-size: 10px;
--radio-color: var(--color-text);
--radio-indicator-margin: var(--space-2);
--radio-font-size: var(--font-size-sm);
--radio-font-family: var(--font-family-primary);
--radio-transition: var(--transition-normal);
--radio-padding: var(--space-1);
--radio-hover-border-color: var(--color-brand-secondary-light);
--radio-checked-color: var(--color-brand-secondary);
--radio-checked-border-color: var(--color-brand-secondary);
--radio-focus-shadow: var(--focus-ring);
--radio-disabled-bg: var(--disabled-background);
--radio-disabled-border-color: var(--color-border-light);
--radio-disabled-color: var(--color-text-disabled);
--radio-disabled-checked-color: var(--color-text-light);
--radio-margin-bottom: var(--space-3);
--radio-required-color: var(--color-danger-light);
--radio-group-margin-bottom: var(--space-4);
--radio-group-padding: var(--space-3);
--radio-group-border: 1px solid var(--color-border-light);
--radio-group-radius: 0;
--radio-group-legend-font-size: var(--font-size-sm);
--radio-group-legend-color: var(--color-text);
--radio-group-font-family: var(--font-family-primary);
--radio-group-legend-font-weight: var(--font-weight-medium);
--radio-group-legend-padding: 0 var(--space-2);
--radio-group-legend-margin-bottom: var(--space-2);
--radio-group-required-color: var(--color-danger-light);
--radio-group-gap: var(--space-2);
--radio-group-valid-border-color: var(--color-success-light);
--radio-group-invalid-border-color: var(--color-danger-light);
--radio-group-validation-color: var(--color-danger-light);
--radio-group-validation-font-size: var(--font-size-xs);
--radio-group-disabled-opacity: var(--disabled-opacity);
--radio-group-disabled-bg: var(--color-gray-100);
--form-group-margin-bottom: 0;
--form-group-label-font-size: var(--font-size-sm);
--form-group-label-color: var(--color-text);
--form-group-font-family: var(--font-family-base);
--form-group-label-font-weight: var(--font-weight-medium);
--form-group-label-margin-bottom: 0;
--form-group-required-color: var(--color-danger-light);
--form-group-help-font-size: var(--font-size-xs);
--form-group-help-color: var(--color-text-light);
--form-group-label-margin-right: var(--space-3);
--form-group-label-margin-left: var(--space-3);
--form-group-label-width: 30%;
--form-label-width: 30%;
--form-section-margin-bottom: var(--space-6);
--form-section-title-font-size: var(--font-size-xl);
--form-section-title-color: var(--color-text);
--form-section-title-font-weight: var(--font-weight-semibold);
--form-section-title-margin-bottom: var(--space-3);
--form-section-title-border: 1px solid var(---border-color-light);
--form-section-description-font-size: var(--font-size-sm);
--form-section-description-color: var(--color-text-light);
--form-section-description-margin-bottom: var(--space-3);
--form-actions-gap: var(--space-2);
--form-actions-margin-top: 0;
--form-actions-justify: flex-end;
--price-display-bg: var(--color-bg-transparent);
--price-display-border: none;
--price-display-color: var(--color-brand-primary);
--header-bg: inherit;
--header-bg-scrolled: inherit;
--header-branding-gap: inherit;
--header-color: inherit;
--header-height: inherit;
--header-height-mobile: inherit;
--header-max-width: inherit;
--header-padding: inherit;
--header-padding-mobile: inherit;
--header-shadow: inherit;
--header-shadow-scrolled: inherit;
--header-title-size: inherit;
--header-title-size-mobile: inherit;
--header-title-weight: inherit;
--header-transition: inherit;
--header-transparent-color: inherit;
--header-z-index: inherit;
--collapsible-header-collapsed-height: inherit;
--collapsible-header-contact-bg: inherit;
--collapsible-header-contact-transition: inherit;
--collapsible-header-height: inherit;
--collapsible-header-logo-transition: inherit;
--collapsible-header-mobile-height: inherit;
--collapsible-header-shadow: inherit;
--collapsible-header-transition: inherit;
--color-bg-secondary: inherit;
--color-border: inherit;
--color-gray-50: inherit;
--contact-info-color: inherit;
--contact-info-font-size: inherit;
--contact-info-gap: inherit;
--contact-info-hover-color: inherit;
--contact-info-icon-size: inherit;
--contact-info-item-gap: inherit;
--contact-info-mobile-gap: inherit;
--font-family-mono: inherit;
--footer-bg: inherit;
--footer-link-hover: inherit;
--footer-text: inherit;
--sticky-contact-icons-bg: inherit;
--sticky-contact-icons-color: inherit;
--sticky-contact-icons-gap: inherit;
--sticky-contact-icons-hover-color: inherit;
--sticky-contact-icons-icon-size: inherit;
--sticky-contact-icons-mobile-bottom: inherit;
--sticky-contact-icons-mobile-icon-size: inherit;
--sticky-contact-icons-mobile-right: inherit;
--sticky-contact-icons-mobile-size: inherit;
--sticky-contact-icons-padding: inherit;
--sticky-contact-icons-right: inherit;
--sticky-contact-icons-shadow: inherit;
--sticky-contact-icons-size: inherit;
--transition-duration: inherit;
--transition-timing: inherit;
`;