@drivenets/design-system 0.0.1

package/src/styles/_typography.scss

@@ -0,0 +1,301 @@
+// typography is defined in: https://www.figma.com/design/XJwVCvDPhD0dMTP4vr3xY3/%F0%9F%A6%95-%F0%9F%AA%86Style-%26-Design-System?node-id=4804-91960&node-type=frame&t=6LW93tAe2no6Rhgx-0
+@use 'variables' as var;
+
+@mixin base-font {
+	font-family: var.$font-family-base;
+	font-weight: var.$font-weight-regular;
+	letter-spacing: 0;
+	text-align: left;
+}
+
+@mixin line-clamp($lines: 2) {
+	display: -webkit-box;
+	overflow: hidden;
+	-webkit-line-clamp: $lines;
+	-webkit-box-orient: vertical;
+}
+
+@mixin ellipsis {
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	overflow: hidden;
+}
+
+@mixin h1 {
+	@include base-font;
+	font-size: var.$font-size-h1;
+	line-height: var.$line-height-h1;
+}
+
+@mixin h2 {
+	@include base-font;
+	font-size: var.$font-size-h2;
+	line-height: var.$line-height-h2;
+}
+
+@mixin h3 {
+	@include base-font;
+	font-size: var.$font-size-h3;
+	line-height: var.$line-height-h3;
+}
+
+@mixin h4 {
+	@include base-font;
+	font-size: var.$font-size-h4;
+	line-height: var.$line-height-h4;
+}
+
+@mixin h5 {
+	@include base-font;
+	font-size: var.$font-size-h5;
+	line-height: var.$line-height-h5;
+}
+
+@mixin h6 {
+	@include base-font;
+	font-size: var.$font-size-h6;
+	line-height: var.$line-height-h6;
+}
+
+@mixin h7 {
+	@include base-font;
+	font-size: var.$font-size-h7;
+	line-height: var.$line-height-h7;
+}
+
+@mixin p-xl {
+	@include base-font;
+	font-size: var.$font-size-p-xl;
+	line-height: var.$line-height-p-xl;
+}
+
+@mixin p-lg {
+	@include base-font;
+	font-size: var.$font-size-p-lg;
+	line-height: var.$line-height-p-lg;
+}
+
+@mixin p-base {
+	@include base-font;
+	font-size: var.$font-size-p-base;
+	line-height: var.$line-height-p-base;
+}
+
+@mixin p-special {
+	@include base-font;
+	font-size: var.$font-size-p-special;
+	line-height: var.$line-height-p-special;
+}
+
+@mixin p-s {
+	@include base-font;
+	font-size: var.$font-size-p-s;
+	line-height: var.$line-height-p-s;
+}
+
+@mixin action {
+	@include base-font;
+	font-size: var.$font-size-action;
+	line-height: var.$line-height-action;
+}
+
+@mixin action-lg {
+	@include base-font;
+	font-size: var.$font-size-action-lg;
+	line-height: var.$line-height-action-lg;
+}
+
+@mixin action-med {
+	@include base-font;
+	font-size: var.$font-size-action-med;
+	line-height: var.$line-height-action-med;
+}
+
+@mixin action-small {
+	@include base-font;
+	font-size: var.$font-size-action-small;
+	line-height: var.$line-height-action-small;
+}
+
+@mixin bold {
+	font-weight: var.$font-weight-bold;
+}
+
+@mixin medium {
+	font-weight: var.$font-weight-medium;
+}
+
+@mixin regular {
+	font-weight: var.$font-weight-regular;
+}
+
+@mixin light {
+	font-weight: var.$font-weight-light;
+}
+
+// New for DS v1.2
+
+// TODO below needs to be removed
+@mixin font-base {
+	font-family: var(--font-family-base);
+	font-style: normal;
+	letter-spacing: 0;
+}
+
+@mixin link-base {
+	text-decoration-line: underline;
+	text-decoration-style: solid;
+	text-decoration-skip-ink: none;
+	text-decoration-thickness: auto;
+	text-underline-offset: auto;
+	text-underline-position: from-font;
+}
+
+@mixin code-base {
+	font-family: var(--font-family-code);
+	font-style: normal;
+	letter-spacing: 0;
+	text-align: left;
+}
+
+@mixin heading($font-weight: var(--font-size-3xl), $line-height: var(--line-height-3xl)) {
+	@include font-base;
+	font-size: $font-weight;
+	font-weight: var(--font-weight-semi-bold);
+	line-height: $line-height;
+	letter-spacing: var(--letter-spacing--1percent);
+}
+
+@mixin heading1 {
+	@include heading;
+}
+
+@mixin heading2 {
+	@include heading(var(--font-size-2xl), var(--line-height-2xl));
+}
+
+@mixin heading3 {
+	@include heading(var(--font-size-xl), var(--line-height-xl));
+}
+
+@mixin heading4 {
+	@include heading(var(--font-size-large), var(--line-height-large));
+}
+
+@mixin body-md($font-weight: var(--font-weight-regular)) {
+	@include font-base;
+	font-size: var(--font-size-md);
+	font-weight: $font-weight;
+	line-height: var(--line-height-md);
+	letter-spacing: var(--letter-spacing--1percent);
+}
+
+@mixin body-md-reg {
+	@include body-md;
+}
+
+@mixin body-md-md {
+	@include body-md(var(--font-weight-medium));
+}
+
+@mixin body-md-semi-bold {
+	@include body-md(var(--font-weight-semi-bold));
+}
+
+@mixin body-md-bold {
+	@include body-md(var(--font-weight-bold));
+}
+
+@mixin body-md-link {
+	@include body-md;
+	@include link-base;
+}
+
+@mixin body-sm($font-weight: var(--font-weight-regular)) {
+	@include font-base;
+	font-size: var(--font-size-sm);
+	font-weight: $font-weight;
+	line-height: var(--line-height-sm);
+	letter-spacing: var(--letter-spacing--1percent);
+}
+
+@mixin body-sm-reg {
+	@include body-sm;
+}
+
+@mixin body-sm-md {
+	@include body-sm(var(--font-weight-medium));
+}
+
+@mixin body-sm-semi-bold {
+	@include body-sm(var(--font-weight-semi-bold));
+}
+
+@mixin body-sm-bold {
+	@include body-sm(var(--font-weight-bold));
+}
+
+@mixin body-sm-link {
+	@include body-sm;
+	@include link-base;
+}
+
+@mixin body-xs($font-weight: var(--font-weight-regular)) {
+	@include font-base;
+	font-size: var(--font-size-xs);
+	font-weight: $font-weight;
+	line-height: var(--line-height-xs);
+}
+
+@mixin body-xs-reg {
+	@include body-xs;
+}
+
+@mixin body-xs-md {
+	@include body-xs(var(--font-weight-medium));
+}
+
+@mixin body-xs-semi-bold {
+	@include body-xs(var(--font-weight-semi-bold));
+}
+
+@mixin body-xs-bold {
+	@include body-xs(var(--font-weight-bold));
+}
+
+@mixin body-xs-link {
+	@include body-xs;
+	@include link-base;
+}
+
+@mixin code-sm($font-weight: var(--font-weight-regular)) {
+	@include code-base;
+	font-size: var(--font-size-sm);
+	font-weight: $font-weight;
+	line-height: var(--line-height-sm);
+	letter-spacing: var(--letter-spacing--1percent);
+}
+
+@mixin code-sm-reg {
+	@include code-sm;
+}
+
+@mixin code-sm-semi-bold {
+	@include code-sm(var(--font-weight-semi-bold));
+}
+
+@mixin code-xs($font-weight: var(--font-weight-regular)) {
+	@include code-base;
+	font-size: var(--font-size-xs);
+	font-weight: $font-weight;
+	line-height: var(--line-height-xs);
+	letter-spacing: var(--letter-spacing--1percent);
+}
+
+@mixin code-xs-reg {
+	@include code-xs;
+}
+
+@mixin code-xs-semi-bold {
+	@include code-xs(var(--font-weight-semi-bold));
+}

package/src/styles/_utilities.scss

@@ -0,0 +1,33 @@
+// Utility classes for common styling patterns
+
+.rotate {
+	transition: transform 0.2s ease-in-out;
+
+	&-45 {
+		transform: rotate(45deg);
+	}
+
+	&-90 {
+		transform: rotate(90deg);
+	}
+
+	&-135 {
+		transform: rotate(135deg);
+	}
+
+	&-180 {
+		transform: rotate(180deg);
+	}
+
+	&-225 {
+		transform: rotate(225deg);
+	}
+
+	&-270 {
+		transform: rotate(270deg);
+	}
+
+	&-315 {
+		transform: rotate(315deg);
+	}
+}

package/src/styles/_variables.scss

@@ -0,0 +1,44 @@
+// typography
+$font-family-primary: 'Roboto', 'Helvetica Neue', sans-serif;
+$font-family-base: 'Roboto';
+$font-family-code: 'Fira Mono', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', monospace;
+$font-weight-light: 300;
+$font-weight-regular: 400;
+$font-weight-medium: 500;
+$font-weight-bold: 700;
+$font-size-h1: 42px;
+$font-size-h2: 36px;
+$font-size-h3: 32px;
+$font-size-h4: 24px;
+$font-size-h5: 20px;
+$font-size-h6: 18px;
+$font-size-h7: 16px;
+$font-size-p-xl: 18px;
+$font-size-p-lg: 16px;
+$font-size-p-base: 14px;
+$font-size-p-special: 14px;
+$font-size-p-s: 12px;
+$font-size-action: 20px;
+$font-size-action-lg: 18px;
+$font-size-action-med: 16px;
+$font-size-action-small: 14px;
+$line-height-h1: 64px;
+$line-height-h2: 54px;
+$line-height-h3: 48px;
+$line-height-h4: 36px;
+$line-height-h5: 30px;
+$line-height-h6: 28px;
+$line-height-h7: 24px;
+$line-height-p-xl: 28px;
+$line-height-p-lg: 24px;
+$line-height-p-base: 20px;
+$line-height-p-special: 24px;
+$line-height-p-s: 18px;
+$line-height-action: 30px;
+$line-height-action-lg: 28px;
+$line-height-action-med: 24px;
+$line-height-action-small: 20px;
+
+$sidebar-spacing: 10px;
+$sidebar-width: 64px;
+$sidebar-width-expanded: 256px;

package/src/styles/mixins/_bounding-box.scss

@@ -0,0 +1,53 @@
+/**
+ * Inject element bounding box values as variables.
+ * Uses internal variables of the element itself to calculate the box.
+ *
+ * USE WITH CAUTION:
+ *	Can break in cases where an element has blur, drop-shadow, multiple box-shadows, borders,
+ * 	transforms, shadow variables inherited from parents, etc.
+ *
+ * Usage:
+ *
+ * ```css
+ *	.element {
+ *		@include bounding-box.bounding-box-vars;
+ *
+ *		--_shadow-size: 15px;
+ *		--_shadow-x-offset: 5px;
+ *		--_shadow-y-offset: 10px;
+ *
+ *		box-shadow:
+ * 			var(--_shadow-x-offset)
+ * 			var(--_shadow-y-offset)
+ * 			var(--_shadow-size)
+ * 			10px
+ * 			rgba(0, 0, 0, 0.15);
+ *	}
+ * ```
+ *
+ * Then, you'll have these bounding box variables available:
+ * - `--_left-bound`
+ * - `--_right-bound`
+ * - `--_top-bound`
+ * - `--_bottom-bound`
+ *
+ * For convenient usage inside `polygon(...)`, the corners are also available:
+ * - `--_top-left`
+ * - `--_top-right`
+ * - `--_bottom-right`
+ * - `--_bottom-left`
+ *
+ */
+@mixin bounding-box-vars {
+	// Element bounding box including shadows.
+	--_left-bound: min(0px, calc(-1 * var(--_shadow-size, 0px) + var(--_shadow-x-offset, 0px)));
+	--_right-bound: max(100%, calc(100% + var(--_shadow-size, 0px) + var(--_shadow-x-offset, 0px)));
+	--_top-bound: min(0px, calc(-1 * var(--_shadow-size, 0px) + var(--_shadow-y-offset, 0px)));
+	--_bottom-bound: max(100%, calc(100% + var(--_shadow-size, 0px) + var(--_shadow-y-offset, 0px)));
+
+	// Element bounding box corners including shadows.
+	--_top-left: var(--_left-bound) var(--_top-bound);
+	--_top-right: var(--_right-bound) var(--_top-bound);
+	--_bottom-right: var(--_right-bound) var(--_bottom-bound);
+	--_bottom-left: var(--_left-bound) var(--_bottom-bound);
+}

package/src/styles/mixins/_list.scss

@@ -0,0 +1,74 @@
+@use '../../styles/typography';
+
+@mixin list-item {
+	cursor: pointer;
+	user-select: none;
+	color: var(--neutral-2);
+	padding: 0 20px;
+}
+
+@mixin list-item-wrapper {
+	display: flex;
+	align-items: center;
+	position: relative;
+	flex: 1;
+	height: 48px;
+	margin-bottom: 8px;
+}
+
+@mixin list-item-wrapper-hover {
+	background: var(--action-hover-light);
+	border-radius: 4px;
+}
+
+@mixin list-item-text {
+	@include typography.p-base;
+	@include ellipsis;
+	padding-left: 8px;
+	flex: 1;
+}
+
+@mixin list-item-process {
+	width: 12px;
+	height: 12px;
+	border: 1px solid #fff;
+	border-radius: 50%;
+	margin: 7px;
+}
+
+@mixin list-item-selected {
+	color: var(--action-cta1);
+	background: var(--action-active-light);
+	border-radius: 4px;
+}
+
+@mixin list-item-selection {
+	position: absolute;
+	right: 0;
+	width: 3px;
+	height: 24px;
+	background: var(--action-cta1);
+}
+
+@mixin list-scroll {
+	position: relative;
+	overflow: auto;
+	z-index: 2;
+
+	&::-webkit-scrollbar {
+		width: 6px;
+	}
+
+	&::-webkit-scrollbar-track {
+		background: var(--neutral-8);
+	}
+
+	&::-webkit-scrollbar-thumb {
+		background: var(--neutral-6);
+		border-radius: 3px;
+	}
+
+	&::-webkit-scrollbar-thumb:hover {
+		background: var(--neutral-4);
+	}
+}

package/src/styles/shared/_dropdown.scss

@@ -0,0 +1,89 @@
+@use '../../styles/typography';
+@use '../../styles/mixins/bounding-box';
+
+@mixin dropdown-content {
+	--_shadow-size: 15px;
+	--_shadow-y-offset: 5px;
+
+	@include bounding-box.bounding-box-vars;
+
+	border-radius: 4px;
+	border: 1px solid var(--color-border-secondary);
+	background: var(--color-background);
+	box-shadow: 0 var(--_shadow-y-offset) var(--_shadow-size) 0 rgba(0, 0, 0, 0.15);
+	z-index: 9999;
+	width: var(--reference-width);
+
+	&[data-state='open'] {
+		animation: expand 0.25s both;
+	}
+
+	&[data-state='closed'] {
+		animation: collapse 0.2s both;
+	}
+
+	@keyframes expand {
+		0% {
+			opacity: 0;
+			clip-path: polygon(var(--_top-left), var(--_top-right), var(--_top-right), var(--_top-left));
+		}
+
+		100% {
+			opacity: 1;
+			clip-path: polygon(var(--_top-left), var(--_top-right), var(--_bottom-right), var(--_bottom-left));
+		}
+	}
+
+	@keyframes collapse {
+		0% {
+			opacity: 1;
+			clip-path: polygon(var(--_top-left), var(--_top-right), var(--_bottom-right), var(--_bottom-left));
+		}
+
+		20% {
+			opacity: 1;
+		}
+
+		100% {
+			opacity: 0;
+			clip-path: polygon(var(--_top-left), var(--_top-right), var(--_top-right), var(--_top-left));
+		}
+	}
+}
+
+@mixin dropdown-viewport {
+	display: flex;
+	flex-direction: column;
+}
+
+@mixin dropdown-item {
+	display: flex;
+	align-items: center;
+	gap: 10px;
+	color: var(--color-font-main);
+	padding: var(--spacing-xs);
+	border-radius: 2px;
+	border-left: 2px solid transparent;
+	cursor: pointer;
+	outline: none;
+
+	&[data-highlighted] {
+		background: var(--color-background-selected-weak);
+
+		.indicator,
+		.itemIcon {
+			color: var(--color-background-selected);
+		}
+	}
+
+	&[data-disabled] {
+		color: var(--color-background-deselected);
+		background: var(--color-background-secondary-selected-weak);
+		cursor: not-allowed;
+
+		.indicator,
+		.itemIcon {
+			pointer-events: none;
+		}
+	}
+}