@drivenets/design-system 0.0.1

package/src/styles/shared/_input.scss

@@ -0,0 +1,365 @@
+@use '../typography' as typography;
+
+// Variables
+$input-text-height-small: 28px;
+$input-text-height-default: 36px;
+$textarea-height-default: 120px;
+
+// Mixins
+@mixin base-input-container {
+	position: relative;
+	display: inline-flex;
+	align-items: center;
+	border-radius: 4px;
+	transition: all 0.2s ease;
+	width: 100%;
+	background: var(--color-background);
+	border: 1px solid var(--form-control-border-color, var(--color-border));
+	padding: var(--spacing-xs) var(--spacing-sm);
+}
+
+@mixin base-input {
+	@include typography.body-sm;
+	border: none;
+	background: transparent;
+	outline: none;
+	font-family: inherit;
+	transition: all 0.2s ease;
+	color: var(--color-font-main);
+	flex: 1;
+
+	&::placeholder {
+		color: var(--color-background-deselected);
+		transition: color 0.2s ease;
+	}
+
+	&:disabled {
+		cursor: not-allowed;
+	}
+
+	&::selection {
+		background: var(--form-control-selection-color, var(--color-background-selected-weak));
+	}
+
+	&::-moz-selection {
+		background: var(--form-control-selection-color, var(--color-background-selected-weak));
+	}
+}
+
+@mixin input-container-states {
+	&:hover:not(:has(.input:disabled)) {
+		border: 1px solid var(--form-control-border-color, var(--color-background-action-hover));
+	}
+
+	&:has(:focus-within) {
+		border: 1px solid var(--form-control-border-color, var(--color-border-action-primary));
+	}
+
+	&:has(.input:disabled) {
+		color: var(--color-background-deselected);
+		background: var(--color-background-secondary);
+		border-color: var(--color-border-disabled);
+		cursor: not-allowed;
+
+		.input {
+			color: var(--color-font-disabled);
+		}
+
+		.iconButton {
+			color: var(--color-background-disable);
+		}
+	}
+}
+
+@mixin input-states {
+	&:hover:not(:disabled):not(:focus) {
+		border-color: var(--form-control-border-color, var(--color-background-action-hover));
+	}
+
+	&:focus {
+		border-color: var(--form-control-border-color, var(--color-border-action-primary));
+	}
+
+	&:disabled {
+		color: var(--color-background-deselected);
+		background: var(--color-background-secondary);
+		border-color: var(--color-border-disabled);
+		cursor: not-allowed;
+	}
+}
+
+@mixin form-control-states {
+	&:hover:not(:disabled) {
+		border-color: var(--form-control-border-color, var(--color-background-action-hover));
+	}
+
+	&:focus {
+		border-color: var(--form-control-border-color, var(--color-border-action-primary));
+		outline: none;
+	}
+
+	&:disabled {
+		color: var(--color-background-deselected);
+		background: var(--color-background-secondary);
+		border-color: var(--color-border-disabled);
+		cursor: not-allowed;
+	}
+}
+
+@mixin select-trigger-states {
+	&:hover:not([data-disabled]) {
+		border-color: var(--form-control-border-color, var(--color-background-action-hover));
+
+		.triggerIcon {
+			color: var(--color-background-deselected-hover);
+			background: var(--color-background-action-hover-weak);
+		}
+	}
+
+	&:has(:focus-visible),
+	&[data-state='open'] {
+		border-color: var(--form-control-border-color, var(--color-border-action-primary));
+		outline: none;
+
+		.triggerIcon {
+			color: var(--color-background-deselected-hover);
+			background: var(--color-background-action-hover-weak);
+		}
+	}
+
+	&[data-disabled] {
+		color: var(--color-background-deselected);
+		background: var(--color-background-secondary);
+		border-color: var(--color-border-disabled);
+
+		&,
+		& * {
+			cursor: not-allowed;
+		}
+
+		.triggerIcon {
+			color: var(--color-background-disable);
+		}
+
+		.clearIcon {
+			color: var(--color-background-disable);
+			cursor: not-allowed;
+		}
+
+		.itemValue {
+			color: var(--color-font-disabled);
+		}
+	}
+}
+
+@mixin icon-button {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border: none;
+	background: transparent;
+	color: var(--color-background-action);
+	//width: var(--icon-width-large);
+	//height: var(--icon-width-large);
+
+	&:disabled {
+		color: var(--color-background-disable);
+		cursor: not-allowed;
+	}
+}
+
+@mixin number-input-styles {
+	-moz-appearance: textfield;
+
+	&::-webkit-outer-spin-button,
+	&::-webkit-inner-spin-button {
+		-webkit-appearance: none;
+		margin: 0;
+	}
+}
+
+// Common mixins
+@mixin inputContainer {
+	@include base-input-container;
+	@include input-container-states;
+	max-height: $input-text-height-default;
+
+	&.small {
+		max-height: $input-text-height-small;
+	}
+
+	&.default {
+		height: $input-text-height-default;
+	}
+
+	&:has(input[type='number']) {
+		.input {
+			text-align: center;
+		}
+	}
+
+	&:has(input[type='password']) {
+		.trigger,
+		.indicator {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+		}
+
+		.input {
+			letter-spacing: 2px;
+		}
+	}
+}
+
+@mixin input {
+	@include base-input;
+	min-width: 0;
+
+	&[type='number'] {
+		@include number-input-styles;
+	}
+}
+
+@mixin iconButton {
+	@include icon-button;
+}
+
+// Textarea specific styles
+@mixin textarea {
+	@include base-input;
+	border: 1px solid var(--form-control-border-color, var(--color-border));
+	border-radius: 4px;
+	background: var(--color-background);
+	resize: vertical;
+	min-height: $textarea-height-default;
+	padding: var(--spacing-xs) var(--spacing-sm);
+	@include input-states;
+
+	&::selection {
+		background: var(--form-control-selection-color, var(--color-background-selected-weak));
+	}
+
+	&::-moz-selection {
+		background: var(--form-control-selection-color, var(--color-background-selected-weak));
+	}
+}
+
+// Form control base styles
+@mixin formControl {
+	@include base-input-container;
+	@include form-control-states;
+	cursor: pointer;
+	justify-content: space-between;
+}
+
+@mixin formControlSmall {
+	max-height: $input-text-height-small;
+}
+
+@mixin formControlDefault {
+	max-height: $input-text-height-default;
+}
+
+// Select trigger styles
+@mixin selectControl {
+	display: grid;
+	grid-template-columns: auto min-content min-content;
+	gap: var(--spacing-3xs);
+	border: 1px solid var(--form-control-border-color, var(--color-border));
+	border-radius: 4px;
+	background-color: var(--color-background);
+	cursor: pointer;
+	height: $input-text-height-default;
+	@include select-trigger-states;
+
+	&.small {
+		height: $input-text-height-small;
+		padding: var(--spacing-4xs) var(--spacing-sm);
+	}
+
+	.clearIcon {
+		grid-column: 2;
+		grid-row: 1;
+		align-items: center;
+		color: var(--color-background-deselected-hover);
+		margin-right: 2px;
+		visibility: hidden;
+
+		&:not([hidden]) {
+			display: flex;
+		}
+	}
+
+	&:not([data-disabled]):where(:hover, :has(:focus-visible), [data-state='open']) {
+		.clearIcon {
+			visibility: visible;
+		}
+	}
+}
+
+@mixin selectTrigger {
+	padding: var(--spacing-3xs) var(--spacing-sm);
+	display: grid;
+	grid-template-columns: subgrid;
+	grid-row: 1;
+	grid-column: 1 / -1;
+	outline: none;
+	align-items: center;
+	padding: var(--spacing-3xs) var(--spacing-sm);
+
+	.triggerIcon {
+		grid-column: 3;
+		grid-row: 1;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border-radius: 4px;
+		color: var(--color-background-deselected);
+
+		& > * {
+			transition: transform 0.2s ease-in-out;
+		}
+	}
+
+	&[data-state='open'] .triggerIcon > * {
+		transform: rotate(180deg);
+	}
+}
+
+// Search input styles
+@mixin searchInput {
+	position: relative;
+	padding: var(--spacing-3xs);
+	border-bottom: 1px solid var(--color-border-secondary);
+
+	.searchInputField {
+		@include typography.body-sm;
+		width: 100%;
+		font-size: 14px;
+		border: 1px solid var(--color-border);
+		border-radius: 4px;
+		transition: border-color 0.2s;
+		padding: var(--spacing-xs) var(--spacing-sm);
+		padding-left: calc(var(--spacing-sm) + var(--icon-width-tiny) + var(--spacing-xs));
+
+		&:focus {
+			outline: none;
+			border-color: var(--color-border-action-primary);
+		}
+
+		&::placeholder {
+			@include typography.body-sm;
+			color: var(--color-background-deselected);
+		}
+	}
+
+	.searchIcon {
+		position: absolute;
+		pointer-events: none;
+		color: var(--color-background-action);
+		top: 50%;
+		transform: translateY(-50%);
+		left: calc(var(--spacing-3xs) + var(--spacing-sm));
+	}
+}

package/src/styles/shared/_modal.scss

@@ -0,0 +1,123 @@
+@use '../typography' as typography;
+
+@mixin overlay-base {
+	position: fixed;
+	inset: 0;
+	background: var(--color-background-brand);
+	opacity: 0.4;
+	z-index: 1199;
+
+	&[data-state='open'] {
+		animation: fade-in-overlay 0.2s ease-in-out both;
+	}
+
+	&[data-state='closed'] {
+		animation: fade-out-overlay 0.2s 0.1s ease-in-out both;
+	}
+}
+
+@keyframes fade-in-overlay {
+	0% {
+		opacity: 0;
+	}
+
+	100% {
+		opacity: 0.4;
+	}
+}
+
+@keyframes fade-out-overlay {
+	0% {
+		opacity: 0.4;
+	}
+
+	100% {
+		opacity: 0;
+	}
+}
+
+@mixin modal-base {
+	position: fixed;
+	inset: 50% auto auto 50%;
+	background: var(--color-background);
+	border-radius: 4px;
+	box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.15);
+	z-index: 1200;
+	overflow: hidden;
+
+	&[data-state='open'] {
+		animation: scale-in-modal 0.2s 0.1s ease-in-out both;
+	}
+
+	&[data-state='closed'] {
+		animation: scale-out-modal 0.2s ease-in-out both;
+	}
+}
+
+@keyframes scale-in-modal {
+	0% {
+		opacity: 0;
+		transform: translate(-50%, -50%) scale(0.9);
+	}
+
+	100% {
+		opacity: 1;
+		transform: translate(-50%, -50%) scale(1);
+	}
+}
+
+@keyframes scale-out-modal {
+	0% {
+		opacity: 1;
+		transform: translate(-50%, -50%) scale(1);
+	}
+
+	100% {
+		opacity: 0;
+		transform: translate(-50%, -50%) scale(0.9);
+	}
+}
+
+@mixin content-base {
+	display: flex;
+	flex-direction: column;
+}
+
+@mixin header-footer-base {
+	background: inherit;
+	flex-shrink: 0;
+}
+
+@mixin header-base {
+	@include header-footer-base;
+	display: flex;
+	align-items: center;
+	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+}
+
+@mixin footer-base($has-border: true) {
+	@include header-footer-base;
+
+	@if $has-border {
+		border-top: 1px solid rgba(0, 0, 0, 0.06);
+	}
+}
+
+@mixin title-base {
+	color: var(--color-font-main);
+	margin: 0;
+	flex: 1;
+}
+
+@mixin body-base {
+	flex: 1;
+	overflow-y: auto;
+	overflow-x: hidden;
+	min-height: 0;
+}
+
+@mixin actions-base {
+	display: flex;
+	gap: 8px;
+	justify-content: flex-end;
+}

package/src/styles/styles.scss

@@ -0,0 +1,12 @@
+@use './variables';
+@use './reset';
+@use './colors';
+@use './typography';
+@use './grid';
+@use './utilities';
+@use './spacing';
+@use './scrollbars';
+@use './root';
+
+@use './shared/dropdown';
+@use './shared/input';