scope360-core 1.1.5 → 1.1.8

package/dist/styles/_variables.scss

@@ -1,299 +1,299 @@
-@import url('https://fonts.cdnfonts.com/css/sf-pro-display');
-@import url('https://fonts.googleapis.com/css2?family=Geist:wght@100..900&family=Red+Hat+Display:ital,wght@0,300..900;1,300..900&display=swap');
-
-:root {
-    --white: #ffffff;
-    --black: #141414;
-
-    // Neutrals
-    --neutral-800: #1c2026;
-    --neutral-700: #6e6e72;
-    --neutral-600: #7f7f83;
-    --neutral-500: #8e8e93;
-    --neutral-400: #ababae;
-    --neutral-300: #c3c3c5;
-    --neutral-200: #d9d9da;
-    --neutral-100: #ededed;
-    --neutral-50: #f6f6f6;
-    --neutral-25: #fafafa;
-
-    // Blue
-    --blue-900: #003772;
-    --blue-800: #004da1;
-    --blue-700: #005fc6;
-    --blue-600: #006de4;
-    --blue-500: #007aff;
-    --blue-400: #729eff;
-    --blue-300: #a1bbff;
-    --blue-200: #c6d4ff;
-    --blue-100: #e4ebff;
-    --blue-0: #f2f5ff;
-
-    // Green
-    --green-900: #26513b;
-    --green-800: #367353;
-    --green-700: #438d65;
-    --green-600: #4da375;
-    --green-500: #56b683;
-    --green-400: #8ac7a4;
-    --green-300: #aed6bf;
-    --green-200: #cde5d6;
-    --green-100: #e7f2eb;
-    --green-0: #f3f9f5;
-
-    // Red
-    --red-900: #6c3a2f;
-    --red-800: #985242;
-    --red-700: #bb6451;
-    --red-600: #d8735e;
-    --red-500: #f18169;
-    --red-400: #f4a294;
-    --red-300: #f7beb5;
-    --red-200: #f9d6d0;
-    --red-100: #fcebe9;
-    --red-0: #fef5f4;
-
-    // Yellow
-    --yellow-900: #442304;
-    --yellow-800: #89530a;
-    --yellow-700: #a66a02;
-    --yellow-600: #d19500;
-    --yellow-500: #ffcc00;
-    --yellow-400: #ffdb0d;
-    --yellow-300: #ffec41;
-    --yellow-200: #fff886;
-    --yellow-100: #fffec1;
-    --yellow-0: #fffee7;
-
-    // Orange
-    --orange-900: #461804;
-    --orange-800: #82350c;
-    --orange-700: #a13e0b;
-    --orange-600: #cc5002;
-    --orange-500: #ff6f00;
-    --orange-400: #ffa432;
-    --orange-300: #ffc86d;
-    --orange-200: #ffdfa5;
-    --orange-100: #fff1d3;
-    --orange-0: #fff9ec;
-
-    // Overlay
-    --overlay: rgba(28, 32, 38, 0.75);
-}
-
-body,
-body[theme='light'] {
-    --primary-accent: var(--blue-500);
-    --primary-deep: var(--blue-800);
-    --primary-soft: var(--blue-300);
-
-    --text-high-emphasis: var(--neutral-800);
-    --text-mid-emphasis: var(--neutral-500);
-    --text-low-emphasis: var(--neutral-300);
-    --text-light: var(--white);
-    --text-invert: var(--white);
-    --text-success-accent: var(--green-500);
-    --text-error-accent: var(--red-500);
-    --text-warning-accent: var(--orange-500);
-    --text-attention-accent: var(--yellow-500);
-
-    --icons-high-emphasis: var(--neutral-800);
-    --icons-mid-emphasis: var(--neutral-500);
-    --icons-low-emphasis: var(--neutral-300);
-    --icons-success-accent: var(--green-500);
-    --icons-error-accent: var(--red-500);
-    --icons-warning-accent: var(--orange-500);
-    --icons-attention-accent: var(--yellow-500);
-    --icons-light: var(--white);
-
-    --navbar-background: var(--white);
-    --card-background: var(--white);
-    --dark-background: var(--neutral-800);
-    --app-background: var(--neutral-25);
-
-    --card-primary-background-light: var(--blue-100);
-    --card-neutral-background: var(--neutral-100);
-    --card-success-background-light: var(--green-100);
-    --card-error-background-light: var(--red-100);
-    --card-attention-background-light: var(--yellow-100);
-    --card-warning-background-light: var(--orange-100);
-
-    --border: var(--neutral-100);
-    --border-error: var(--red-500);
-
-    --success-deep: var(--green-800);
-    --success-soft: var(--green-300);
-    --error-soft: var(--red-300);
-    --warning-soft: var(--orange-300);
-    --attention-soft: var(--yellow-300);
-    --error-deep: var(--red-800);
-    --orange-deep: var(--orange-800);
-    --attention-deep: var(--yellow-800);
-
-    --border-secondary: transparent;
-    --background-secondary: transparent;
-    --background-tertiary: transparent;
-}
-
-body[theme='dark'] {
-    --primary-accent: var(--blue-500);
-    --primary-deep: var(--blue-300);
-    --primary-soft: var(--blue-300);
-
-    --text-high-emphasis: var(--neutral-50);
-    --text-mid-emphasis: var(--neutral-500);
-    --text-low-emphasis: #515151;
-    --text-light: var(--white);
-    --text-invert: var(--black);
-    --text-success-accent: var(--green-500);
-    --text-error-accent: var(--red-500);
-    --text-warning-accent: var(--orange-500);
-    --text-attention-accent: var(--yellow-500);
-
-    --icons-high-emphasis: var(--neutral-50);
-    --icons-mid-emphasis: var(--neutral-500);
-    --icons-low-emphasis: #515151;
-    --icons-success-accent: var(--green-500);
-    --icons-error-accent: var(--red-500);
-    --icons-warning-accent: var(--orange-500);
-    --icons-attention-accent: var(--yellow-500);
-    --icons-light: var(--white);
-
-    --navbar-background: var(--black);
-    --card-background: #101011;
-    --dark-background: var(--neutral-800);
-    --app-background: #090909;
-
-    --card-primary-background-light: #007aff26;
-    --card-neutral-background: #1c1c1e;
-    --card-success-background-light: #56b68326;
-    --card-error-background-light: #f1816926;
-    --card-attention-background-light: #ffcc0026;
-    --card-warning-background-light: #ff6f0026;
-
-    --border: #292929;
-    --border-error: var(--red-500);
-
-    --success-deep: var(--green-500);
-    --success-soft: var(--green-700);
-    --error-soft: var(--red-700);
-    --warning-soft: var(--orange-600);
-    --attention-soft: var(--yellow-600);
-    --error-deep: var(--red-500);
-    --orange-deep: var(--orange-500);
-    --attention-deep: var(--yellow-500);
-
-    --border-secondary: #3e3e3e;
-    --background-secondary: #292929;
-    --background-tertiary: #3e3e3e;
-}
-
-$primary-accent: var(--primary-accent);
-$primary-deep: var(--primary-deep);
-$primary-soft: var(--primary-soft);
-
-$text-high-emphasis: var(--text-high-emphasis);
-$text-mid-emphasis: var(--text-mid-emphasis);
-$text-low-emphasis: var(--text-low-emphasis);
-$text-light: var(--text-light);
-$text-invert: var(--text-invert);
-$text-success-accent: var(--text-success-accent);
-$text-error-accent: var(--text-error-accent);
-$text-warning-accent: var(--text-warning-accent);
-$text-attention-accent: var(--text-attention-accent);
-
-$icons-high-emphasis: var(--icons-high-emphasis);
-$icons-mid-emphasis: var(--icons-mid-emphasis);
-$icons-low-emphasis: var(--icons-low-emphasis);
-$icons-success-accent: var(--icons-success-accent);
-$icons-error-accent: var(--icons-error-accent);
-$icons-warning-accent: var(--icons-warning-accent);
-$icons-attention-accent: var(--icons-attention-accent);
-$icons-light: var(--icons-light);
-
-$navbar-background: var(--navbar-background);
-$card-background: var(--card-background);
-$dark-background: var(--dark-background);
-$app-background: var(--app-background);
-
-$card-primary-background-light: var(--card-primary-background-light);
-$card-neutral-background: var(--card-neutral-background);
-$card-success-background-light: var(--card-success-background-light);
-$card-error-background-light: var(--card-error-background-light);
-$card-attention-background-light: var(--card-attention-background-light);
-$card-warning-background-light: var(--card-warning-background-light);
-
-$border: var(--border);
-$border-error: var(--border-error);
-
-$success-deep: var(--success-deep);
-$success-soft: var(--success-soft);
-$error-soft: var(--error-soft);
-$warning-soft: var(--warning-soft);
-$attention-soft: var(--attention-soft);
-$error-deep: var(--error-deep);
-$orange-deep: var(--orange-deep);
-$attention-deep: var(--attention-deep);
-
-$border-secondary: var(--border-secondary);
-$background-secondary: var(--background-secondary);
-$background-tertiary: var(--background-tertiary);
-
-/* ------------------- Old colors ------------------- */
-
-$color-white: #ffffff;
-$color-black: #000;
-$color-dark-theme-bg: #101213;
-
-$color-yellow: #fc0;
-
-$color-grey-0: #f6f6f6;
-$color-grey-2: #f2f2f2;
-$color-grey-15: #ececec;
-$color-grey-100: #ededed;
-$color-grey-200: #d9d9da;
-$color-grey-300: #c3c3c5;
-$color-grey-400: #ababae;
-$color-grey-500: #8e8e93;
-$color-grey-600: #7f7f83;
-$color-grey-700: #6e6e72;
-$color-grey-800: #1c2026;
-
-$color-blue-0: #f2f5ff;
-$color-blue-100: #e4ebff;
-$color-blue-200: #c6d4ff;
-$color-blue-250: #cce5ff;
-$color-blue-300: #a1bbff;
-$color-blue-350: #99caff;
-$color-blue-400: #729eff;
-$color-blue-500: #489ffa;
-$color-blue-600: #006de4;
-$color-blue-700: #006de4;
-$color-blue-800: #004da1;
-$color-blue-900: #003772;
-
-$color-red: #ff3b30;
-$color-red-0: #fef5f4;
-$color-red-50: #ffe7e5;
-$color-red-100: #fcebe9;
-$color-red-200: #f9d6d0;
-$color-red-250: #ffcfcc;
-$color-red-500: #d84f68;
-$color-red-800: #985242;
-$color-red-900: #c9496129;
-
-$color-green-0: #f3f9f5;
-$color-green-50: #ebfaef;
-$color-green-100: #e7f2eb;
-$color-green-200: #d7f4de;
-$color-green-400: #8ac7a4;
-$color-green-500: #439f7f;
-$color-green-600: #2aa248;
-$color-green-800: #367353;
-$color-green-900: #439f7f29;
-
-$dark-theme-gray-60: #303030;
-$dark-theme-gray-80: #1d1f20;
-$dark-theme-gray-100: #171717;
-$dark-theme-blue: #3579e9;
-$dark-theme-line: #2d2d2d;
+@import url('https://fonts.cdnfonts.com/css/sf-pro-display');
+@import url('https://fonts.googleapis.com/css2?family=Geist:wght@100..900&family=Red+Hat+Display:ital,wght@0,300..900;1,300..900&display=swap');
+
+:root {
+    --white: #ffffff;
+    --black: #141414;
+
+    // Neutrals
+    --neutral-800: #1c2026;
+    --neutral-700: #6e6e72;
+    --neutral-600: #7f7f83;
+    --neutral-500: #8e8e93;
+    --neutral-400: #ababae;
+    --neutral-300: #c3c3c5;
+    --neutral-200: #d9d9da;
+    --neutral-100: #ededed;
+    --neutral-50: #f6f6f6;
+    --neutral-25: #fafafa;
+
+    // Blue
+    --blue-900: #003772;
+    --blue-800: #004da1;
+    --blue-700: #005fc6;
+    --blue-600: #006de4;
+    --blue-500: #007aff;
+    --blue-400: #729eff;
+    --blue-300: #a1bbff;
+    --blue-200: #c6d4ff;
+    --blue-100: #e4ebff;
+    --blue-0: #f2f5ff;
+
+    // Green
+    --green-900: #26513b;
+    --green-800: #367353;
+    --green-700: #438d65;
+    --green-600: #4da375;
+    --green-500: #56b683;
+    --green-400: #8ac7a4;
+    --green-300: #aed6bf;
+    --green-200: #cde5d6;
+    --green-100: #e7f2eb;
+    --green-0: #f3f9f5;
+
+    // Red
+    --red-900: #6c3a2f;
+    --red-800: #985242;
+    --red-700: #bb6451;
+    --red-600: #d8735e;
+    --red-500: #f18169;
+    --red-400: #f4a294;
+    --red-300: #f7beb5;
+    --red-200: #f9d6d0;
+    --red-100: #fcebe9;
+    --red-0: #fef5f4;
+
+    // Yellow
+    --yellow-900: #442304;
+    --yellow-800: #89530a;
+    --yellow-700: #a66a02;
+    --yellow-600: #d19500;
+    --yellow-500: #ffcc00;
+    --yellow-400: #ffdb0d;
+    --yellow-300: #ffec41;
+    --yellow-200: #fff886;
+    --yellow-100: #fffec1;
+    --yellow-0: #fffee7;
+
+    // Orange
+    --orange-900: #461804;
+    --orange-800: #82350c;
+    --orange-700: #a13e0b;
+    --orange-600: #cc5002;
+    --orange-500: #ff6f00;
+    --orange-400: #ffa432;
+    --orange-300: #ffc86d;
+    --orange-200: #ffdfa5;
+    --orange-100: #fff1d3;
+    --orange-0: #fff9ec;
+
+    // Overlay
+    --overlay: rgba(28, 32, 38, 0.75);
+}
+
+body,
+body[theme='light'] {
+    --primary-accent: var(--blue-500);
+    --primary-deep: var(--blue-800);
+    --primary-soft: var(--blue-300);
+
+    --text-high-emphasis: var(--neutral-800);
+    --text-mid-emphasis: var(--neutral-500);
+    --text-low-emphasis: var(--neutral-300);
+    --text-light: var(--white);
+    --text-invert: var(--white);
+    --text-success-accent: var(--green-500);
+    --text-error-accent: var(--red-500);
+    --text-warning-accent: var(--orange-500);
+    --text-attention-accent: var(--yellow-500);
+
+    --icons-high-emphasis: var(--neutral-800);
+    --icons-mid-emphasis: var(--neutral-500);
+    --icons-low-emphasis: var(--neutral-300);
+    --icons-success-accent: var(--green-500);
+    --icons-error-accent: var(--red-500);
+    --icons-warning-accent: var(--orange-500);
+    --icons-attention-accent: var(--yellow-500);
+    --icons-light: var(--white);
+
+    --navbar-background: var(--white);
+    --card-background: var(--white);
+    --dark-background: var(--neutral-800);
+    --app-background: var(--neutral-25);
+
+    --card-primary-background-light: var(--blue-100);
+    --card-neutral-background: var(--neutral-100);
+    --card-success-background-light: var(--green-100);
+    --card-error-background-light: var(--red-100);
+    --card-attention-background-light: var(--yellow-100);
+    --card-warning-background-light: var(--orange-100);
+
+    --border: var(--neutral-100);
+    --border-error: var(--red-500);
+
+    --success-deep: var(--green-800);
+    --success-soft: var(--green-300);
+    --error-soft: var(--red-300);
+    --warning-soft: var(--orange-300);
+    --attention-soft: var(--yellow-300);
+    --error-deep: var(--red-800);
+    --orange-deep: var(--orange-800);
+    --attention-deep: var(--yellow-800);
+
+    --border-secondary: transparent;
+    --background-secondary: transparent;
+    --background-tertiary: transparent;
+}
+
+body[theme='dark'] {
+    --primary-accent: var(--blue-500);
+    --primary-deep: var(--blue-300);
+    --primary-soft: var(--blue-300);
+
+    --text-high-emphasis: var(--neutral-50);
+    --text-mid-emphasis: var(--neutral-500);
+    --text-low-emphasis: #515151;
+    --text-light: var(--white);
+    --text-invert: var(--black);
+    --text-success-accent: var(--green-500);
+    --text-error-accent: var(--red-500);
+    --text-warning-accent: var(--orange-500);
+    --text-attention-accent: var(--yellow-500);
+
+    --icons-high-emphasis: var(--neutral-50);
+    --icons-mid-emphasis: var(--neutral-500);
+    --icons-low-emphasis: #515151;
+    --icons-success-accent: var(--green-500);
+    --icons-error-accent: var(--red-500);
+    --icons-warning-accent: var(--orange-500);
+    --icons-attention-accent: var(--yellow-500);
+    --icons-light: var(--white);
+
+    --navbar-background: var(--black);
+    --card-background: #101011;
+    --dark-background: var(--neutral-800);
+    --app-background: #090909;
+
+    --card-primary-background-light: #007aff26;
+    --card-neutral-background: #1c1c1e;
+    --card-success-background-light: #56b68326;
+    --card-error-background-light: #f1816926;
+    --card-attention-background-light: #ffcc0026;
+    --card-warning-background-light: #ff6f0026;
+
+    --border: #292929;
+    --border-error: var(--red-500);
+
+    --success-deep: var(--green-500);
+    --success-soft: var(--green-700);
+    --error-soft: var(--red-700);
+    --warning-soft: var(--orange-600);
+    --attention-soft: var(--yellow-600);
+    --error-deep: var(--red-500);
+    --orange-deep: var(--orange-500);
+    --attention-deep: var(--yellow-500);
+
+    --border-secondary: #3e3e3e;
+    --background-secondary: #292929;
+    --background-tertiary: #3e3e3e;
+}
+
+$primary-accent: var(--primary-accent);
+$primary-deep: var(--primary-deep);
+$primary-soft: var(--primary-soft);
+
+$text-high-emphasis: var(--text-high-emphasis);
+$text-mid-emphasis: var(--text-mid-emphasis);
+$text-low-emphasis: var(--text-low-emphasis);
+$text-light: var(--text-light);
+$text-invert: var(--text-invert);
+$text-success-accent: var(--text-success-accent);
+$text-error-accent: var(--text-error-accent);
+$text-warning-accent: var(--text-warning-accent);
+$text-attention-accent: var(--text-attention-accent);
+
+$icons-high-emphasis: var(--icons-high-emphasis);
+$icons-mid-emphasis: var(--icons-mid-emphasis);
+$icons-low-emphasis: var(--icons-low-emphasis);
+$icons-success-accent: var(--icons-success-accent);
+$icons-error-accent: var(--icons-error-accent);
+$icons-warning-accent: var(--icons-warning-accent);
+$icons-attention-accent: var(--icons-attention-accent);
+$icons-light: var(--icons-light);
+
+$navbar-background: var(--navbar-background);
+$card-background: var(--card-background);
+$dark-background: var(--dark-background);
+$app-background: var(--app-background);
+
+$card-primary-background-light: var(--card-primary-background-light);
+$card-neutral-background: var(--card-neutral-background);
+$card-success-background-light: var(--card-success-background-light);
+$card-error-background-light: var(--card-error-background-light);
+$card-attention-background-light: var(--card-attention-background-light);
+$card-warning-background-light: var(--card-warning-background-light);
+
+$border: var(--border);
+$border-error: var(--border-error);
+
+$success-deep: var(--success-deep);
+$success-soft: var(--success-soft);
+$error-soft: var(--error-soft);
+$warning-soft: var(--warning-soft);
+$attention-soft: var(--attention-soft);
+$error-deep: var(--error-deep);
+$orange-deep: var(--orange-deep);
+$attention-deep: var(--attention-deep);
+
+$border-secondary: var(--border-secondary);
+$background-secondary: var(--background-secondary);
+$background-tertiary: var(--background-tertiary);
+
+/* ------------------- Old colors ------------------- */
+
+$color-white: #ffffff;
+$color-black: #000;
+$color-dark-theme-bg: #101213;
+
+$color-yellow: #fc0;
+
+$color-grey-0: #f6f6f6;
+$color-grey-2: #f2f2f2;
+$color-grey-15: #ececec;
+$color-grey-100: #ededed;
+$color-grey-200: #d9d9da;
+$color-grey-300: #c3c3c5;
+$color-grey-400: #ababae;
+$color-grey-500: #8e8e93;
+$color-grey-600: #7f7f83;
+$color-grey-700: #6e6e72;
+$color-grey-800: #1c2026;
+
+$color-blue-0: #f2f5ff;
+$color-blue-100: #e4ebff;
+$color-blue-200: #c6d4ff;
+$color-blue-250: #cce5ff;
+$color-blue-300: #a1bbff;
+$color-blue-350: #99caff;
+$color-blue-400: #729eff;
+$color-blue-500: #489ffa;
+$color-blue-600: #006de4;
+$color-blue-700: #006de4;
+$color-blue-800: #004da1;
+$color-blue-900: #003772;
+
+$color-red: #ff3b30;
+$color-red-0: #fef5f4;
+$color-red-50: #ffe7e5;
+$color-red-100: #fcebe9;
+$color-red-200: #f9d6d0;
+$color-red-250: #ffcfcc;
+$color-red-500: #d84f68;
+$color-red-800: #985242;
+$color-red-900: #c9496129;
+
+$color-green-0: #f3f9f5;
+$color-green-50: #ebfaef;
+$color-green-100: #e7f2eb;
+$color-green-200: #d7f4de;
+$color-green-400: #8ac7a4;
+$color-green-500: #439f7f;
+$color-green-600: #2aa248;
+$color-green-800: #367353;
+$color-green-900: #439f7f29;
+
+$dark-theme-gray-60: #303030;
+$dark-theme-gray-80: #1d1f20;
+$dark-theme-gray-100: #171717;
+$dark-theme-blue: #3579e9;
+$dark-theme-line: #2d2d2d;