@drivenets/design-system 0.0.1

package/src/styles/_reset.scss

@@ -0,0 +1,38 @@
+@use 'variables' as var;
+
+*,
+*::before,
+*::after {
+	box-sizing: border-box;
+}
+
+* {
+	margin: 0;
+	padding: 0;
+}
+
+html,
+body {
+	height: 100%;
+}
+
+img {
+	max-width: 100%;
+	height: auto;
+}
+
+a {
+	text-decoration: none;
+	color: inherit;
+}
+
+button {
+	background: none;
+	border: none;
+	cursor: pointer;
+	color: inherit;
+}
+
+body {
+	font-family: var.$font-family-primary;
+}

package/src/styles/_root.scss

@@ -0,0 +1,390 @@
+// New for DS v1.2
+
+:root {
+	/* Brand */
+	--color-brand-50: #e5e8ed;
+	--color-brand-100: #bfc6d1;
+	--color-brand-200: #99a3b6;
+	--color-brand-300: #667691;
+	--color-brand-400: #405375;
+	--color-brand-500: #001a47;
+	--color-brand-600: #001436;
+	--color-brand-700: #000d24;
+
+	/* Blue */
+	--color-blue-50: #edf7ff;
+	--color-blue-100: #d6eaff;
+	--color-blue-200: #b5ddff;
+	--color-blue-300: #83c8ff;
+	--color-blue-400: #48aaff;
+	--color-blue-500: #1e83ff;
+	--color-blue-600: #0661ff;
+	--color-blue-700: #004cff;
+	--color-blue-800: #083bc5;
+	--color-blue-900: #0d379b;
+	--color-blue-950: #0e235d;
+
+	/* Gray */
+	--color-gray-50: #ffffff;
+	--color-gray-100: #f3f5fa;
+	--color-gray-200: #e5e8ed;
+	--color-gray-300: #c7c9cc;
+	--color-gray-400: #a5afba;
+	--color-gray-500: #8b98a6;
+	--color-gray-600: #4c5f76;
+	--color-gray-700: #2c3a4b;
+	--color-gray-800: #26303b;
+	--color-gray-900: #000000;
+
+	/* Green */
+	--color-green-50: #ecfdf6;
+	--color-green-100: #d2f9e7;
+	--color-green-200: #a9f1d4;
+	--color-green-300: #71e4bc;
+	--color-green-400: #39cea0;
+	--color-green-500: #13a47c;
+	--color-green-600: #028764;
+	--color-green-700: #07654c;
+	--color-green-800: #085242;
+	--color-green-900: #074236;
+
+	/* Red */
+	--color-red-50: #ffedf0;
+	--color-red-100: #f5c2bf;
+	--color-red-200: #eb8580;
+	--color-red-300: #e14840;
+	--color-red-400: #d70a00;
+	--color-red-500: #a10800;
+	--color-red-600: #6b0500;
+	--color-red-700: #360300;
+
+	/* Orange */
+	--color-orange-50: #fff7ed;
+	--color-orange-100: #ffedd5;
+	--color-orange-200: #fed7aa;
+	--color-orange-300: #fdba74;
+	--color-orange-400: #fc9947;
+	--color-orange-500: #fc8514;
+	--color-orange-600: #c9510c;
+	--color-orange-700: #9a3412;
+	--color-orange-800: #7c2d12;
+	--color-orange-900: #581f07;
+
+	/* Purple */
+	--color-purple-50: #f1f3fd;
+	--color-purple-100: #dee3fb;
+	--color-purple-200: #c5d0f8;
+	--color-purple-300: #9db2f3;
+	--color-purple-400: #6f8beb;
+	--color-purple-500: #4a61e3;
+	--color-purple-600: #3946d7;
+	--color-purple-700: #2f34c6;
+	--color-purple-800: #2c2da1;
+	--color-purple-900: #292b7f;
+	--color-purple-950: #1d1d4e;
+
+	/* Data */
+	--color-data-pink: #eb3693;
+	--color-data-fuchsia: #d602ee;
+	--color-data-deep-fuchsia: #9c27b0;
+	--color-data-light-purple: #e6d4ff;
+	--color-data-purple: #6200ee;
+	--color-data-deep-purple: #3b00ed;
+	--color-data-blue: #3946d7;
+	--color-data-teal: #26a69a;
+	--color-data-green: #43a047;
+	--color-data-lime: #c0ca33;
+	--color-data-yellow: #ffc107;
+	--color-data-amber: #ff9800;
+	--color-data-orange: #ee6002;
+	--color-data-rose: #d81b60;
+	--color-data-error: #b00020;
+
+	/* Dark Blue */
+	--color-dark-blue-50: #b3ccff;
+	--color-dark-blue-100: #85b5ff;
+	--color-dark-blue-200: #1a5eff;
+	--color-dark-blue-300: #3d75ff;
+	--color-dark-blue-400: #12357e;
+	--color-dark-blue-500: #31466b;
+
+	/* Dark Gray */
+	--color-dark-gray-50: #e0e6f6;
+	--color-dark-gray-100: #7c8291;
+	--color-dark-gray-200: #2a3450;
+
+	/* Aliases */
+
+	/* Brand */
+	--color-brand-050: var(--color-brand-50);
+	--color-brand-500-default: var(--color-brand-500);
+
+	/* Primary */
+	--color-primary-050: var(--color-blue-50);
+	--color-primary-100: var(--color-blue-100);
+	--color-primary-200: var(--color-blue-200);
+	--color-primary-300: var(--color-blue-300);
+	--color-primary-400: var(--color-blue-400);
+	--color-primary-500: var(--color-blue-500);
+	--color-primary-600: var(--color-blue-600);
+	--color-primary-700-default: var(--color-blue-700);
+	--color-primary-800: var(--color-blue-800);
+	--color-primary-900: var(--color-blue-900);
+	--color-primary-950: var(--color-blue-950);
+
+	/* Secondary */
+	--color-secondary-white: var(--color-gray-50);
+	--color-secondary-100: var(--color-gray-100);
+	--color-secondary-200: var(--color-gray-200);
+	--color-secondary-300: var(--color-gray-300);
+	--color-secondary-400: var(--color-gray-400);
+	--color-secondary-500-net-4: var(--color-gray-500);
+	--color-secondary-600-net-2: var(--color-gray-600);
+	--color-secondary-700-net-1: var(--color-gray-700);
+	--color-secondary-800: var(--color-gray-800);
+	--color-secondary-black: var(--color-gray-900);
+
+	/* Positive */
+	--color-positive-050: var(--color-green-50);
+	--color-positive-100: var(--color-green-100);
+	--color-positive-200: var(--color-green-200);
+	--color-positive-300: var(--color-green-300);
+	--color-positive-400: var(--color-green-400);
+	--color-positive-500: var(--color-green-500);
+	--color-positive-600: var(--color-green-600);
+	--color-positive-700-default: var(--color-green-700);
+	--color-positive-800: var(--color-green-800);
+	--color-positive-900: var(--color-green-900);
+
+	/* Negative */
+	--color-negative-050: var(--color-red-50);
+	--color-negative-100: var(--color-red-100);
+	--color-negative-200: var(--color-red-200);
+	--color-negative-300: var(--color-red-300);
+	--color-negative-400-default: var(--color-red-400);
+	--color-negative-500: var(--color-red-500);
+	--color-negative-600: var(--color-red-600);
+	--color-negative-700: var(--color-red-700);
+
+	/* Warning */
+	--color-warning-050: var(--color-orange-50);
+	--color-warning-100: var(--color-orange-100);
+	--color-warning-200: var(--color-orange-200);
+	--color-warning-300: var(--color-orange-300);
+	--color-warning-400: var(--color-orange-400);
+	--color-warning-500: var(--color-orange-500);
+	--color-warning-600-default: var(--color-orange-600);
+	--color-warning-700: var(--color-orange-700);
+	--color-warning-800: var(--color-orange-800);
+	--color-warning-900: var(--color-orange-900);
+
+	/* Info */
+	--color-info-050: var(--color-blue-50);
+	--color-info-100: var(--color-blue-100);
+	--color-info-200: var(--color-blue-200);
+	--color-info-300: var(--color-blue-300);
+	--color-info-400: var(--color-blue-400);
+	--color-info-500: var(--color-blue-500);
+	--color-info-600-default: var(--color-blue-600);
+	--color-info-700: var(--color-blue-700);
+	--color-info-800-progress: var(--color-blue-800);
+	--color-info-900: var(--color-blue-900);
+	--color-info-950: var(--color-blue-950);
+
+	/* Darks */
+	--color-darks-050: var(--color-dark-gray-50);
+	--color-darks-100: var(--color-dark-blue-50);
+	--color-darks-200: var(--color-dark-blue-100);
+	--color-darks-300: var(--color-dark-blue-300);
+	--color-darks-400: var(--color-dark-blue-200);
+	--color-darks-500: var(--color-dark-blue-400);
+	--color-darks-600: var(--color-dark-blue-500);
+	--color-darks-700: var(--color-dark-gray-200);
+
+	/* Dap-Map (Semantic Tokens) */
+
+	/* Background */
+	--color-background: var(--color-secondary-white);
+	--color-background-secondary: var(--color-secondary-100);
+	--color-background-tertiary: var(--color-secondary-200);
+	--color-background-disable: var(--color-secondary-300);
+	--color-background-brand: var(--color-brand-500-default);
+	--color-background-selected: var(--color-primary-700-default);
+	--color-background-selected-hover: var(--color-primary-800);
+	--color-background-selected-weak: var(--color-primary-050);
+	--color-background-secondary-selected-weak: var(--color-secondary-100);
+	--color-background-tertiary-selected-weak: var(--color-secondary-200);
+	--color-background-deselected: var(--color-secondary-500-net-4);
+	--color-background-deselected-hover: var(--color-secondary-600-net-2);
+	--color-background-action: var(--color-brand-500-default);
+	--color-background-action-hover: var(--color-brand-600);
+	--color-background-action-hover-weak: var(--color-secondary-100);
+	--color-background-action-secondary: var(--color-secondary-white);
+	--color-background-action-secondary-hover: var(--color-primary-100);
+	--color-background-action-tertiary: var(--color-primary-050);
+	--color-background-action-inverse: var(--color-secondary-700-net-1);
+	--color-background-active-moderate: var(--color-primary-400);
+	--color-background-success: var(--color-positive-050);
+	--color-background-success-strong: var(--color-positive-600);
+	--color-background-success-stronger: var(--color-positive-700-default);
+	--color-background-info: var(--color-info-050);
+	--color-background-info-strong: var(--color-info-800-progress);
+	--color-background-warning: var(--color-warning-100);
+	--color-background-warning-strong: var(--color-warning-600-default);
+	--color-background-warning-weak: var(--color-negative-050);
+	--color-background-danger-strong: var(--color-negative-400-default);
+	--color-background-danger-strong-hover: var(--color-negative-500);
+	--color-background-danger-weak: var(--color-negative-050);
+
+	/* Border */
+	--color-border-secondary: var(--color-secondary-200);
+	--color-border-tertiary: var(--color-secondary-100);
+	--color-border: var(--color-secondary-300);
+	--color-border-contrast: var(--color-secondary-400);
+	--color-border-disabled: var(--color-brand-050);
+	--color-border-action-primary: var(--color-primary-700-default);
+	--color-border-action-primary-hover: var(--color-primary-800);
+	--color-border-action-secondary: var(--color-brand-500-default);
+	--color-border-action-secondary-hover: var(--color-brand-400);
+	--color-border-danger-weak: var(--color-negative-100);
+	--color-border-danger-strong: var(--color-negative-400-default);
+	--color-border-success: var(--color-positive-600);
+	--color-border-inverse: var(--color-secondary-white);
+
+	/* Font */
+	--color-font-main: var(--color-secondary-800);
+	--color-font-secondary: var(--color-secondary-600-net-2);
+	--color-font-action: var(--color-primary-700-default);
+	--color-font-action-hover: var(--color-primary-800);
+	--color-font-action-secondary: var(--color-brand-500-default);
+	--color-font-action-secondary-hover: var(--color-primary-800);
+	--color-font-disabled: var(--color-secondary-500-net-4);
+	--color-font-highlight: var(--color-data-deep-fuchsia);
+	--color-font-success: var(--color-positive-700-default);
+	--color-font-warning: var(--color-warning-700);
+	--color-font-danger: var(--color-negative-500);
+	--color-font-on-action: var(--color-secondary-white);
+	--color-font-on-disabled: var(--color-secondary-800);
+	--color-font-code: var(--color-info-900);
+
+	/* Icon */
+	--color-icon-primary: var(--color-primary-700-default);
+	--color-icon-secondary: var(--color-brand-500-default);
+	--color-icon-success: var(--color-positive-700-default);
+	--color-icon-warning: var(--color-warning-600-default);
+	--color-icon-danger: var(--color-negative-400-default);
+	--color-icon-information-main: var(--color-secondary-500-net-4);
+	--color-icon-information-secondary: var(--color-info-600-default);
+	--color-icon-inverse: var(--color-secondary-white);
+
+	/* Outline */
+	--color-outline-weak: var(--color-primary-300);
+	--color-outline-moderate: var(--color-primary-500);
+	--color-outline-strong: var(--color-brand-500-default);
+	--color-outline-extreme: var(--color-secondary-black);
+	--color-outline-inverse: var(--color-secondary-white);
+
+	/* Shadow */
+	--color-shadow-weak: rgba(0, 0, 0, 0.1);
+	--color-shadow-moderate: rgba(0, 0, 0, 0.15);
+	--color-shadow-strong: rgba(0, 0, 0, 0.4);
+
+	/* Status BG */
+	--color-status-bg-success: var(--color-background-success);
+	--color-status-bg-progress: var(--color-background-info);
+	--color-status-bg-pending: var(--color-warning-100);
+	--color-status-bg-neutral: var(--color-background-secondary);
+	--color-status-bg-inactive: var(--color-background-tertiary-selected-weak);
+	--color-status-bg-warning: var(--color-warning-200);
+	--color-status-bg-failed: var(--color-background-danger-weak);
+
+	/* Dark Buttons */
+	--color-dark-buttons-primary: var(--color-darks-400);
+	--color-dark-buttons-primary-hover: var(--color-darks-300);
+	--color-dark-buttons-secondary-hover: var(--color-darks-200);
+	--color-dark-buttons-secondary-background: var(--color-darks-500);
+	--color-dark-buttons-secondary-light: var(--color-dark-gray-50);
+	--color-dark-buttons-secondary-light-hover-background: var(--color-darks-600);
+	--color-dark-buttons-tertiary: var(--color-darks-050);
+	--color-dark-buttons-tertiary-hover-background: var(--color-dark-gray-100);
+
+	/* Gradient */
+	--color-gradient-violet-background: linear-gradient(90deg, #001b48 -0.12%, #312e81 99.86%);
+	--color-gradient-violet-transparent: linear-gradient(
+		180deg,
+		rgba(30, 89, 215, 0.4) 0%,
+		rgba(0, 27, 72, 0.16) 100%
+	);
+	--color-gradient-blue-light: linear-gradient(116deg, #e9eefc 22.81%, #d6e2ff 99.14%);
+	--color-gradient-linear-1: linear-gradient(90deg, #014afb 0%, #152a7e 100%);
+
+	/* Markers */
+	--color-marker-magenta-12: rgba(255, 0, 183, 0.12);
+	--color-marker-magenta-60: rgba(255, 0, 183, 0.6);
+	--color-marker-magenta-100: rgba(255, 0, 183);
+	--color-marker-yellow-100: #fff500;
+}
+
+:root {
+	/* Family */
+	--font-family-base: 'Roboto', sans-serif;
+	--font-family-code: 'Fira Mono', monospace;
+
+	/* Font weight */
+	--font-weight-regular: 400;
+	--font-weight-medium: 500;
+	--font-weight-semi-bold: 600;
+	--font-weight-bold: 700;
+	--font-weight-extra-bold: 800;
+
+	/* Font size / heading */
+	--font-size-3xl: 32px;
+	--font-size-2xl: 24px;
+	--font-size-xl: 20px;
+	--font-size-large: 18px;
+
+	/* Font size / body */
+	--font-size-md: 16px;
+	--font-size-sm: 14px;
+	--font-size-xs: 12px;
+
+	/* Line height / heading */
+	--line-height-3xl: 40px;
+	--line-height-2xl: 32px;
+	--line-height-xl: 26px;
+	--line-height-large: 24px;
+
+	/* Line height / body */
+	--line-height-md: 24px;
+	--line-height-sm: 20px;
+	--line-height-xs: 16px;
+
+	/* Paragraph spacing / heading */
+	--paragraph-spacing-3xl: 40;
+	--paragraph-spacing-2xl: 24;
+	--paragraph-spacing-xl: 20;
+	--paragraph-spacing-large: 20;
+
+	/* Paragraph spacing / body */
+	--paragraph-spacing-md: 20;
+	--paragraph-spacing-sm: 16;
+	--paragraph-spacing-xs: 8;
+
+	/* Letter spacing */
+	--letter-spacing--1percent: -0.01em; // -1% letter spacing for headings
+}
+
+:root {
+	--icon-width-extra-large: 32px;
+	--icon-width-large: 28px;
+	--icon-width-medium: 24px;
+	--icon-width-small: 20px;
+	--icon-width-tiny: 16px;
+}
+
+:root {
+	--ds-table-row-small: 36px;
+	--ds-table-row-medium: 48px;
+	--ds-table-row-large: 64px;
+	--ds-table-header-height: 45px;
+}

package/src/styles/_scrollbars.scss

@@ -0,0 +1,41 @@
+$scrollbar-border-radius: 100px;
+$scrollbar-default-size: 12px;
+$scrollbar-thin-size: 4px;
+
+@mixin scrollbar-base($size) {
+	&::-webkit-scrollbar {
+		width: $size;
+		height: $size;
+		background: var(--color-background-secondary);
+	}
+
+	&::-webkit-scrollbar-track {
+		background: var(--color-background-secondary);
+	}
+
+	&::-webkit-scrollbar-thumb {
+		background: var(--color-background-deselected-hover);
+		border-radius: $scrollbar-border-radius;
+	}
+
+	&::-webkit-scrollbar-corner {
+		background: var(--color-background-secondary);
+	}
+}
+
+@mixin firefox-scrollbar($size) {
+	@-moz-document url-prefix() {
+		scrollbar-width: if($size == $scrollbar-thin-size, thin, auto);
+		scrollbar-color: var(--color-background-deselected-hover) var(--color-background-secondary);
+	}
+}
+
+* {
+	@include scrollbar-base($scrollbar-default-size);
+	@include firefox-scrollbar($scrollbar-default-size);
+}
+
+.scrollbar-thin {
+	@include scrollbar-base($scrollbar-thin-size);
+	@include firefox-scrollbar($scrollbar-thin-size);
+}

package/src/styles/_spacing.scss

@@ -0,0 +1,47 @@
+/* Base Unit */
+$base-unit: 4px;
+
+/* Spacing Scale */
+:root {
+	--base-unit: #{$base-unit};
+
+	/* Primary Scale */
+	--spacing-1: var(--base-unit); /* 4px */
+	--spacing-2: calc(var(--base-unit) * 2); /* 8px */
+	--spacing-3: calc(var(--base-unit) * 3); /* 12px */
+	--spacing-4: calc(var(--base-unit) * 4); /* 16px */
+	--spacing-5: calc(var(--base-unit) * 5); /* 20px */
+	--spacing-6: calc(var(--base-unit) * 6); /* 24px */
+	--spacing-8: calc(var(--base-unit) * 8); /* 32px */
+	--spacing-10: calc(var(--base-unit) * 10); /* 40px */
+	--spacing-12: calc(var(--base-unit) * 12); /* 48px */
+	--spacing-16: calc(var(--base-unit) * 16); /* 64px */
+	--spacing-20: calc(var(--base-unit) * 20); /* 80px */
+	--spacing-24: calc(var(--base-unit) * 24); /* 96px */
+
+	/* Legacy Aliases */
+	--spacing-base: var(--spacing-4); /* 16px */
+
+	// New for DS v1.2
+
+	--spacing-none: 0;
+	--spacing-4xs: 2px;
+	--spacing-3xs: 4px;
+	--spacing-2xs: 6px;
+	--spacing-xs: 8px;
+	--spacing-sm: 12px;
+	--spacing-standard: 16px;
+	--spacing-md: 20px;
+	--spacing-lg: 24px;
+	--spacing-xl: 32px;
+	--spacing-2xl: 48px;
+	--spacing-3xl: 64px;
+	--spacing-4xl: 72px;
+	--spacing-5xl: 96px;
+
+	--exo-spacing-standard: 16px;
+	--exo-spacing-small: 12px;
+	--exo-spacing-x-small: 8px;
+	--exo-spacing-2x-small: 4px;
+	--exo-spacing-4x-small: 1px;
+}