@webitel/styleguide 26.2.4 → 26.2.6

package/src/lib/styleguide/colors/deprecated.css

@@ -0,0 +1,209 @@
+:root {
+	/* HSL COLORS HUE VALUE */
+	--_accent-color-hue: 42;
+	--_secondary-color-hue: 202;
+	--_page-bg-color-hue: 209;
+	--_icon-color-hue: 202;
+	--_positive-color-hue: 119;
+	--_negative-color-hue: 11;
+
+	--_hold-color-hue: 54;
+	--_transfer-color-hue: 227;
+	--_job-color-hue: 209;
+
+	/* DEFAULT STATES OPACITY */
+	--_opacity--default: 0.8;
+	--_opacity--hover: 1;
+	--_opacity--active: 1;
+	--_opacity--focus: 0.8;
+	--_opacity--disabled: 0.4;
+
+	/* BASIC HSL COLORS VALUES */
+	--_accent-color: var(--_accent-color-hue), 100%, 50%;
+	--_main-color: var(--_accent-color-hue), 20%, 99%;
+	--_contrast-color: var(--_accent-color-hue), 20%, 1%;
+	--_secondary-color: var(--_secondary-color-hue), 20%, 90%;
+	--_secondary-color-50: var(--_secondary-color-hue), 22%, 96%;
+	--_page-bg-color: var(--_page-bg-color-hue), 20%, 95%;
+	--_header-color: var(--_page-bg-color-hue), 20%, 90%;
+	--_positive-color: var(--_positive-color-hue), 60%, 40%;
+	--_negative-color: var(--_negative-color-hue), 80%, 50%;
+	--_icon-color: var(--_icon-color-hue), 100%, 15%;
+
+	--_hold-color: var(--_hold-color-hue), 80%, 50%;
+	--_transfer-color: var(--_transfer-color-hue), 80%, 50%;
+	--_job-color: var(--_job-color-hue), 96%, 57%;
+
+	/* MAIN COLORS */
+	--accent-color: hsla(var(--_accent-color), 1);
+
+	--main-color: hsla(var(--_main-color), 1);
+
+	--contrast-color: hsla(var(--_contrast-color), 1);
+
+	--secondary-color: hsla(var(--_secondary-color), 1);
+	--secondary-color-50: hsla(var(--_secondary-color-50), 1);
+
+	/* ICON COLORS */
+	--icon-color-secondary: hsla(var(--_icon-color), 0.25);
+
+	--icon-color--hover: hsla(var(--_icon-color), var(--_opacity--hover));
+
+	--icon-color-accent: var(--accent-color);
+	--icon-color-contrast: hsla(var(--_main-color), var(--_opacity--default));
+	--icon-color-active: var(--icon-color--hover);
+	--icon-color-disabled: hsla(var(--_icon-color), var(--_opacity--disabled));
+	--icon-color-success: var(--true-color);
+	--icon-color-danger: var(--false-color);
+	--icon-color-transfer: var(--transfer-color);
+	--icon-color-hold: var(--hold-color);
+	--icon-color-secondary-50: var(--secondary-color-50);
+
+	--page-bg-color: hsla(var(--_page-bg-color), 1);
+	--header-color: hsla(var(--_header-color), 1);
+
+	--accent-secondary-color: hsla(var(--_accent-color), 0.3);
+
+	/* SEMANTIC COLORS */
+	--disabled-color: hsl(var(--_contrast-color), var(--_opacity--disabled));
+
+	--true-color: hsla(var(--_positive-color), var(--_opacity--default));
+	--true--hover-color: hsla(var(--_positive-color), var(--_opacity--hover));
+
+	--false-color: hsla(var(--_negative-color), var(--_opacity--default));
+	--false--hover-color: hsla(var(--_negative-color), var(--_opacity--hover));
+
+	--hold-color: hsla(var(--_hold-color), var(--_opacity--default));
+	--hold--hover-color: hsla(var(--_hold-color), var(--_opacity--hover));
+
+	--transfer-color: hsla(var(--_transfer-color), var(--_opacity--default));
+	--transfer--hover-color: hsla(var(--_transfer-color), var(--_opacity--hover));
+
+	--job-color: hsla(var(--_job-color), var(--_opacity--default));
+	--job--hover-color: hsla(var(--_job-color), var(--_opacity--hover));
+
+	--link-color: hsla(205, 90%, 45%, 1);
+	--link--hover-color: hsla(205, 90%, 60%, 1);
+
+	/* SUBORDINATE COLORS */
+	--tag-bg-color: var(--accent-secondary-color);
+
+	/* FORM STATES OPACITY */
+	--form-opacity--default: var(--_opacity--default);
+	--form-opacity--hover: var(--_opacity--hover);
+	--form-opacity--active: var(--_opacity--active);
+	--form-opacity--focus: var(--_opacity--focus);
+	--form-opacity--disabled: var(--_opacity--disabled);
+
+	--form-placeholder-opacity: 0.6;
+	--form-placeholder-opacity--focus: 0.4;
+	--form-border-opacity--disabled: 0.05;
+
+	--form-opacity--ouline--default: 0.4;
+	--form-opacity--ouline--hover: 0.7;
+
+	/* FORM COLORS */
+	--form-input-color: var(--contrast-color);
+	/* user input color */
+
+	--form-label-color: hsla(
+		var(--_contrast-color),
+		var(--form-opacity--default)
+	);
+	--form-label--hover-color: hsla(
+		var(--_contrast-color),
+		var(--form-opacity--hover)
+	);
+	--form-label--active-color: hsla(
+		var(--_contrast-color),
+		var(--form-opacity--active)
+	);
+	--form-label--disabled-color: hsla(
+		var(--_contrast-color),
+		var(--form-opacity--disabled)
+	);
+
+	--form-border-color: hsla(
+		var(--_contrast-color),
+		var(--form-opacity--default)
+	);
+	--form-border--hover-color: hsla(
+		var(--_contrast-color),
+		var(--form-opacity--hover)
+	);
+	--form-border--disabled-color: hsla(
+		var(--_contrast-color),
+		var(--form-border-opacity--disabled)
+	);
+
+	--form-placeholder-color: hsla(
+		var(--_contrast-color),
+		var(--form-placeholder-opacity)
+	);
+	--form-placeholder-color--focus: hsla(
+		var(--_contrast-color),
+		var(--form-placeholder-opacity--focus)
+	);
+	--form-placeholder-color--disabled: hsla(
+		var(--_contrast-color),
+		var(--form-opacity--disabled)
+	);
+
+	/* outline */
+	--form-outline-label-color: hsla(
+		var(--_contrast-color),
+		var(--form-opacity--default)
+	);
+
+	--form-outline-border-color: hsla(
+		var(--_contrast-color),
+		var(--form-opacity--ouline--default)
+	);
+	--form-outline-border--hover-color: hsla(
+		var(--_contrast-color),
+		var(--form-opacity--ouline--hover)
+	);
+
+	/* TEXT OPACITY */
+	--text-opacity--default: var(--_opacity--default);
+	--text-opacity----outline--default: 0.7;
+	--text-opacity--disabled: 0.5;
+
+	/* TEXT COLORS */
+	--text-primary-color: hsla(
+		var(--_contrast-color),
+		var(--text-opacity--default)
+	);
+	--text-outline-color: hsla(
+		var(--_contrast-color),
+		var(--text-opacity----outline--default)
+	);
+	--text-contrast-color: hsla(var(--_main-color), var(--text-opacity--default));
+	--text--disabled-color: hsla(
+		var(--_contrast-color),
+		var(--text-opacity--disabled)
+	);
+
+	/* CHAT COLORS */
+	--_chat-client-color: var(--_accent-color);
+	--_chat-client-opacity: 0.2;
+	--_chat-agent-color: var(--_secondary-color-50);
+	--_chat-agent-opacity: 1;
+
+	--chat-client-message-bg-color: hsla(
+		var(--_chat-client-color),
+		var(--_chat-client-opacity)
+	);
+	--chat-agent-message-bg-color: hsla(
+		var(--_chat-agent-color),
+		var(--_chat-agent-opacity)
+	);
+	--chat-client-attachment-bg-color: hsla(
+		var(--_chat-client-color),
+		var(--_chat-client-opacity)
+	);
+	--chat-agent-attachment-bg-color: hsla(
+		var(--_chat-agent-color),
+		var(--_chat-agent-opacity)
+	);
+}