@sorocraft/ui 1.2.69 → 1.2.75

package/dist/styles/scss/variables.scss

@@ -0,0 +1,330 @@
+@use "./colors.scss" as *;
+
+$base-font-size: 16px;
+
+/* Border radius */
+$border-radius: 0.475rem;
+$oval-border-radius: 3.75rem;
+$less-oval-border-radius: 1.5rem;
+$btn-border-radius: 3.75rem;
+$card-border-radius: 0.85rem;
+$badge-border-radius: 0.425rem;
+$input-border-radius: 3.75rem;
+$toolbar-border-radius: 0.85rem;
+$message-border-radius: 1.75rem;
+
+/* Fonts */
+$font-family: var(--sorocraft-font-family, Helvetica);
+
+$gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
+$body-font-size: 1rem;
+$body-font-weight: 400;
+$body-line-height: 1.5;
+
+/* WIDTH */
+$sidebar-full-width: 320px;
+$sidebar-collapsed-width: 80px;
+$sidebar-submenu-width: 300px;
+$right-drawer-width: 420px;
+
+$tooltip-size: 0.75rem;
+$container-padding: 2rem;
+$container-mobile-padding: 1.25rem;
+$mobile-padding: 15px;
+
+/* HEIGHT */
+$header-height: 4rem;
+$secondary-header-height: 2.75rem;
+
+/* CARD */
+$card-header-padding: 1.75rem;
+$card-body-padding: 1.75rem;
+$card-footer-gap: 0.5rem;
+
+/* TABLE */
+
+/* MODAL */
+$modal-width-sm: 500px;
+$modal-width-md: 700px;
+$modal-width-lg: 900px;
+$modal-margin: 1.75rem;
+$modal-header-padding: 1.75rem;
+$modal-padding: 1.75rem;
+$modal-footer-gap: 0.5rem;
+
+/* BADGE */
+
+$badge-padding-x: 0.5rem;
+$badge-padding-y: 0.325rem;
+$badge-font-size: 0.85rem;
+$badge-font-weight: 600;
+
+/* Menu */
+
+/* Input */
+
+/* EDITOR */
+
+/* HEADER */
+$header-padding: 1rem;
+
+/* Z-INDEX */
+$z-layer-0: 0;
+$z-layer-1: 1;
+$z-layer-2: 10;
+
+/* SIZES */
+$size-xs: 0;
+$size-sm: 576px;
+$size-md: 768px;
+$size-lg: 992px;
+$size-xl: 1200px;
+$size-xxl: 1440px;
+$avatar-sizes: (
+	xxs: 24px,
+	xs: 32px,
+	sm: 48px,
+	md: 64px,
+	lg: 96px,
+	xl: 128px,
+	xxl: 512px,
+);
+
+/* SHADOW */
+$task-card-shadow: 0px 0px 10px 0px rgba(56, 71, 109, 0.075);
+$task-card-hover-shadow: 0px 0px 25px 0px rgba(56, 71, 109, 0.075);
+$task-drawer-shadow: 0px 10px 10px 0px rgba(56, 71, 109, 0.25);
+$table-loading-message-box-shadow: 0px 0px 50px 0px rgba(82, 63, 105, 0.15);
+$menu-dropdown-box-shadow: 0px 0px 50px 0px rgba(82, 63, 105, 0.15);
+$tooltip-box-shadow: 0px 0px 50px 0px rgba(82, 63, 105, 0.15);
+$card-box-shadow: 0px 10px 35px 0px rgba(56, 71, 109, 0.075);
+$card-hover-box-shadow: 0px 50px 20px -40px rgba(0, 0, 0, 0.1),
+	0px 30px 50px 0px rgba(50, 50, 93, 0.25);
+$shadow-around: 0px 0px 10px 0px rgba(0, 0, 0, 0.25);
+$highlighted-message-shadow: 0px 0px 20px 0px
+	rgba(
+		$color: $color-secondary,
+		$alpha: 0.5,
+	);
+$box-right-shadow: 2px 0px 5px -3px rgba(0, 0, 0, 0.15);
+$image-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.15);
+$feature-card-shadow: 0px 8px 16px -8px rgba(0, 0, 0, 0.1),
+	0px 13px 27px -12px rgba(50, 50, 93, 0.25);
+$feature-card-hover-shadow: 0px 100px 50px -40px rgba(0, 0, 0, 0.1),
+	0px 60px 100px 0px rgba(50, 50, 93, 0.25);
+$input-shadow-around: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);
+
+/**/
+$uiTypeStyles: (
+	light: (
+		$color-light,
+		$color-text-muted,
+		$color-light-active,
+		$color-light-inverse,
+	),
+	lightDark: (
+		$color-dark-light,
+		$color-dark,
+		$color-dark,
+		$color-dark-inverse,
+	),
+	lightDanger: (
+		$color-danger-light,
+		$color-danger,
+		$color-danger,
+		$color-danger-inverse,
+	),
+	lightInfo: (
+		$color-info-light,
+		$color-info,
+		$color-info,
+		$color-info-inverse,
+	),
+	lightPrimary: (
+		$color-primary-light,
+		$color-primary,
+		$color-primary,
+		$color-primary-inverse,
+	),
+	lightSecondary: (
+		$color-secondary-light,
+		$color-secondary,
+		$color-secondary,
+		$color-secondary-inverse,
+	),
+	lightWarning: (
+		$color-warning-light,
+		$color-warning,
+		$color-warning,
+		$color-warning-inverse,
+	),
+	lightSuccess: (
+		$color-success-light,
+		$color-success,
+		$color-success,
+		$color-success-inverse,
+	),
+	primary: (
+		$color-primary,
+		$color-primary-inverse,
+		$color-primary-active,
+		$color-primary-inverse,
+	),
+	secondary: (
+		$color-secondary,
+		$color-secondary-inverse,
+		$color-secondary-active,
+		$color-secondary-inverse,
+	),
+	danger: (
+		$color-danger,
+		$color-danger-inverse,
+		$color-danger-active,
+		$color-danger-inverse,
+	),
+	dark: (
+		$color-dark,
+		$color-dark-inverse,
+		$color-dark-active,
+		$color-dark-inverse,
+	),
+	info: (
+		$color-info,
+		$color-info-inverse,
+		$color-info-active,
+		$color-info-inverse,
+	),
+	success: (
+		$color-success,
+		$color-success-inverse,
+		$color-success-active,
+		$color-success-inverse,
+	),
+	warning: (
+		$color-warning,
+		$color-warning-inverse,
+		$color-warning-active,
+		$color-warning-inverse,
+	),
+	whiteText: (
+		transparent,
+		$color-white,
+		transparent,
+		$color-gray-300,
+	),
+	default: (
+		$color-white,
+		$color-gray-700,
+		$color-primary,
+		$color-primary-inverse,
+	),
+	borderedPrimary: (
+		$color-white,
+		$color-primary,
+		$color-primary,
+		$color-primary-inverse,
+	),
+	borderedSecondary: (
+		$color-white,
+		$color-secondary,
+		$color-secondary,
+		$color-secondary-inverse,
+	),
+);
+
+/* BUTTON */
+$btn-font-weight: 500;
+$btn-line-height: 1;
+$btn-disabled-opacity: 0.65;
+$btn-font-size: 0.925rem;
+//
+$button-sizes: (
+	xs: (
+		32px,
+		6px,
+		16px,
+		4px,
+	),
+	sm: (
+		36px,
+		8px,
+		16px,
+		4px,
+	),
+	md: (
+		40px,
+		8px,
+		16px,
+		8px,
+	),
+	lg: (
+		48px,
+		12px,
+		16px,
+		8px,
+	),
+	xl: (
+		52px,
+		14px,
+		24px,
+		8px,
+	),
+	xxl: (
+		56px,
+		16px,
+		24px,
+		8px,
+	),
+	xxxl: (
+		64px,
+		12px,
+		24px,
+		8px,
+	),
+);
+
+/* TEXT */
+
+// Font sizes and line heights
+$text-sizes: (
+	"xxxl": (
+		2.5rem,
+		56px,
+	),
+	"xxl": (
+		2rem,
+		40px,
+	),
+	"xl": (
+		1.5rem,
+		32px,
+	),
+	"lg": (
+		1.25rem,
+		28px,
+	),
+	"md": (
+		1rem,
+		24px,
+	),
+	"sm": (
+		0.875rem,
+		20px,
+	),
+	"xs": (
+		0.75rem,
+		16px,
+	),
+	"xxs": (
+		0.625rem,
+		14px,
+	),
+);
+
+// Font weights
+$text-weights: (
+	"light": 300,
+	"regular": 400,
+	"medium": 500,
+	"bold": 600,
+);