@ibis-design/svelte 0.6.0 → 0.7.0

package/dist/components/inputs/radio.css

@@ -1,108 +0,0 @@
-.ibis-radio {
-	display: flex;
-	flex-direction: column;
-	gap: var(--spacing-1);
-}
-
-.ibis-radio__label-wrapper {
-	display: flex;
-	flex-direction: column;
-	gap: 2px;
-}
-
-.ibis-radio__label {
-	font-size: var(--font-size-normal-text-default);
-	color: var(--color-neutral-700);
-}
-
-.ibis-radio__description {
-	font-size: var(--font-size-normal-text-sm);
-	color: var(--color-neutral-500);
-}
-
-.ibis-radio__control {
-	display: inline-flex;
-	align-items: center;
-	gap: var(--spacing-2);
-	cursor: pointer;
-}
-
-.ibis-radio__input {
-	display: none;
-}
-
-.ibis-radio__circle {
-	width: 20px;
-	height: 20px;
-	border-radius: 999px;
-	border: var(--border-width-default) solid var(--color-neutral-300);
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	transition:
-		box-shadow var(--transition-duration-normal) var(--transition-timing-default),
-		border-color var(--transition-duration-normal) var(--transition-timing-default),
-		background var(--transition-duration-normal) var(--transition-timing-default);
-}
-
-.ibis-radio__dot {
-	width: 8px;
-	height: 8px;
-	border-radius: 999px;
-	background: transparent;
-}
-
-.ibis-radio__dot--active {
-	background: var(--color-primary-900);
-}
-
-.ibis-radio__text {
-	font-size: var(--font-size-normal-text-default);
-	color: var(--color-text-default);
-}
-
-.ibis-radio__help {
-	font-size: var(--font-size-normal-text-sm);
-	color: var(--color-neutral-500);
-}
-
-.ibis-radio__error {
-	font-size: var(--font-size-normal-text-sm);
-	color: var(--color-status-error);
-}
-
-.ibis-radio--disabled {
-	opacity: var(--opacity-9);
-	cursor: not-allowed;
-}
-.ibis-radio--disabled .ibis-radio__circle {
-	border-color: var(--color-neutral-200);
-	background-color: var(--color-neutral-160);
-}
-
-.ibis-radio__input:checked + .ibis-radio__circle {
-	border-color: var(--color-primary-900);
-}
-
-.ibis-radio:not(.ibis-radio--disabled) .ibis-radio__control:hover .ibis-radio__circle {
-	box-shadow: 0 0 0 4px var(--color-neutral-200);
-	border-color: var(--color-neutral-700);
-	transform: scale(1.05);
-}
-
-.ibis-radio:not(.ibis-radio--disabled)
-	.ibis-radio__control:hover
-	.ibis-radio__input:checked
-	+ .ibis-radio__circle {
-	box-shadow: 0 0 0 4px var(--color-primary-200);
-	border-color: var(--color-primary-900);
-}
-
-.ibis-radio--invalid .ibis-radio__circle {
-	border-color: var(--color-status-error);
-}
-
-.ibis-radio--invalid .ibis-radio__control:hover .ibis-radio__circle {
-	box-shadow: 0 0 0 4px #ffb3ad;
-	border-color: var(--color-status-error);
-}

package/dist/components/inputs/switch.css

@@ -1,68 +0,0 @@
-.ibis-switch {
-	display: inline-flex;
-	align-items: center;
-}
-
-.ibis-switch__control {
-	display: inline-flex;
-	align-items: center;
-	cursor: pointer;
-	gap: var(--spacing-1);
-	user-select: none;
-}
-
-.ibis-switch__input {
-	display: none;
-}
-
-/* Track */
-.ibis-switch__track {
-	width: 32px;
-	height: 20px;
-	background: var(--color-neutral-200);
-	border-radius: 999px;
-	position: relative;
-	transition:
-		background var(--transition-duration-normal) var(--transition-timing-default),
-		box-shadow var(--transition-duration-normal) var(--transition-timing-default);
-}
-
-/* Thumb */
-.ibis-switch__thumb {
-	width: 16px;
-	height: 16px;
-	background: var(--color-white);
-	border-radius: 999px;
-	position: absolute;
-	top: 2px;
-	left: 2px;
-	transition:
-		transform var(--transition-duration-normal) var(--transition-timing-default),
-		background var(--transition-duration-normal) var(--transition-timing-default);
-}
-
-.ibis-switch__input:checked + .ibis-switch__track {
-	background: var(--color-primary-700);
-}
-
-.ibis-switch__input:checked + .ibis-switch__track .ibis-switch__thumb {
-	transform: translateX(12px);
-}
-
-/* Disabled state */
-.ibis-switch--disabled {
-	opacity: var(--opacity-7);
-	cursor: not-allowed;
-}
-
-.ibis-switch--disabled .ibis-switch__track {
-	background: var(--color-neutral-200);
-}
-
-.ibis-switch--disabled .ibis-switch__thumb {
-	background: var(--color-neutral-100);
-}
-
-.ibis-switch--disabled .ibis-switch__control {
-	cursor: not-allowed;
-}

package/dist/components/inputs/textInput.css

@@ -1,152 +0,0 @@
-.ibis-input {
-	display: flex;
-	flex-direction: column;
-	gap: var(--spacing-1);
-	width: 100%;
-	max-width: 300px;
-	max-height: 4rem;
-}
-
-.ibis-input__label {
-	font-size: var(--font-size-normal-text-default);
-	color: var(--color-neutral-700);
-}
-
-.ibis-input__label-wrapper {
-	display: flex;
-	flex-direction: column;
-	gap: 2px;
-}
-
-.ibis-input__description {
-	font-size: var(--font-size-normal-text-sm);
-	color: var(--color-neutral-500);
-}
-
-.ibis-input__wrapper {
-	display: flex;
-	align-items: stretch;
-	border-radius: var(--border-radius-lg);
-	overflow: hidden;
-	background-color: var(--color-neutral-100);
-}
-
-.ibis-input__prepend {
-	display: flex;
-	align-items: center;
-	padding: 0 var(--spacing-3);
-	border: var(--border-width-default) solid var(--color-neutral-200);
-	border-right: none;
-	border-radius: var(--border-radius-lg) 0 0 var(--border-radius-lg);
-	position: relative;
-	white-space: nowrap;
-}
-
-.ibis-input__field-wrapper {
-	display: flex;
-	align-items: center;
-	flex: 1;
-	border: var(--border-width-default) solid var(--color-neutral-200);
-	/* border-left: none; */
-	border-radius: 0 var(--border-radius-lg) var(--border-radius-lg) 0;
-}
-
-.ibis-input__wrapper--with-prepend .ibis-input__field-wrapper {
-	border-left: none;
-	border-radius: 0 var(--border-radius-lg) var(--border-radius-lg) 0;
-}
-
-.ibis-input__wrapper:not(.ibis-input__wrapper--with-prepend) .ibis-input__field-wrapper {
-	border-radius: var(--border-radius-lg);
-}
-
-.ibis-input__prepend::after {
-	content: '';
-	position: absolute;
-	right: 0;
-	top: 0;
-	bottom: 0;
-	width: 2px;
-	background-color: var(--color-neutral-200);
-}
-
-.ibis-input__field {
-	flex: 1;
-	width: 100%;
-	min-width: 0;
-	border: none;
-	outline: none;
-	background: transparent;
-}
-
-.ibis-input__prefix,
-.ibis-input__suffix {
-	display: inline-flex;
-	align-items: center;
-	padding: 0 var(--spacing-2);
-}
-
-.ibis-input__help {
-	font-size: var(--font-size-normal-text-sm);
-	color: var(--color-neutral-500);
-}
-
-.ibis-input__error {
-	font-size: var(--font-size-normal-text-sm);
-	color: var(--color-status-error);
-}
-
-/* sizes */
-.ibis-input--sm .ibis-input__field-wrapper {
-	padding: var(--spacing-1) var(--spacing-2);
-}
-
-.ibis-input--md .ibis-input__field-wrapper {
-	padding: var(--spacing-2);
-}
-
-.ibis-input--lg .ibis-input__field-wrapper {
-	padding: var(--spacing-3) var(--spacing-4);
-}
-
-.ibis-input:not(.ibis-input--disabled):not(.ibis-input--invalid)
-	.ibis-input__field-wrapper:not(:focus-within):hover {
-	border-color: var(--color-neutral-300);
-}
-
-.ibis-input__field-wrapper:focus-within {
-	border-color: var(--color-primary-400);
-}
-
-.ibis-input--invalid .ibis-input__field-wrapper {
-	border-color: var(--color-status-error);
-	border-width: var(--border-width-thin);
-}
-
-.ibis-input--invalid:not(.ibis-input--disabled):not(:focus-within)
-	.ibis-input__field-wrapper:hover {
-	border-width: var(--border-width-default);
-}
-
-.ibis-input--invalid:not(.ibis-input--disabled) .ibis-input__field-wrapper:focus-within {
-	border-width: var(--border-width-default);
-}
-
-.ibis-input__wrapper:not(:focus-within):hover .ibis-input__prepend::after {
-	background-color: var(--color-neutral-300);
-}
-
-.ibis-input__wrapper:focus-within .ibis-input__prepend::after {
-	background-color: var(--color-primary-400);
-}
-
-.ibis-input--invalid .ibis-input__prepend::after {
-	background-color: var(--color-status-error);
-}
-
-/* disabled */
-.ibis-input--disabled .ibis-input__prepend,
-.ibis-input--disabled .ibis-input__field-wrapper {
-	background-color: var(--color-neutral-400);
-	opacity: 0.5;
-}

package/dist/components/inputs/textarea.css

@@ -1,91 +0,0 @@
-.ibis-input {
-	display: flex;
-	flex-direction: column;
-	gap: var(--spacing-1);
-	width: 100%;
-	max-width: 400px;
-}
-
-.ibis-input__label {
-	font-size: var(--font-size-normal-text-default);
-	color: var(--color-neutral-700);
-}
-
-.ibis-input__wrapper {
-	display: flex;
-	flex-direction: column0;
-	border-radius: var(--border-radius-lg);
-	overflow: hidden;
-	background-color: var(--color-neutral-100);
-	border: var(--border-width-default) solid var(--color-neutral-200);
-}
-
-.ibis-input__field {
-	flex: 1;
-	width: 100%;
-	min-width: 0;
-	border: none;
-	outline: none;
-	background: transparent;
-	font-family: var(--font-family-sans);
-	font-size: inherit;
-	resize: vertical;
-	/* min-height: 80px; */
-	line-height: 1.4;
-	display: block;
-	box-sizing: border-box;
-}
-
-.ibis-input__help {
-	font-size: var(--font-size-normal-text-sm);
-	color: var(--color-neutral-500);
-}
-
-.ibis-input__error {
-	font-size: var(--font-size-normal-text-sm);
-	color: var(--color-status-error);
-}
-
-/* Sizes */
-.ibis-input--sm .ibis-input__field {
-	padding: var(--spacing-1) var(--spacing-2);
-}
-
-.ibis-input--md .ibis-input__field {
-	padding: var(--spacing-2);
-}
-
-.ibis-input--lg .ibis-input__field {
-	padding: var(--spacing-3) var(--spacing-4);
-}
-
-/* Hover */
-.ibis-input:not(.ibis-input--disabled):not(.ibis-input--invalid)
-	.ibis-input__wrapper:not(:focus-within):hover {
-	border-color: var(--color-neutral-300);
-}
-
-/* Focus */
-.ibis-input__wrapper:focus-within {
-	border-color: var(--color-primary-400);
-}
-
-/* Invalid */
-.ibis-input--invalid .ibis-input__wrapper {
-	border-color: var(--color-status-error);
-	border-width: var(--border-width-thin);
-}
-
-.ibis-input--invalid:not(.ibis-input--disabled):not(:focus-within) .ibis-input__wrapper:hover {
-	border-width: var(--border-width-default);
-}
-
-.ibis-input--invalid:not(.ibis-input--disabled) .ibis-input__wrapper:focus-within {
-	border-width: var(--border-width-default);
-}
-
-/* Disabled */
-.ibis-input--disabled .ibis-input__wrapper {
-	background-color: var(--color-neutral-400);
-	opacity: 0.5;
-}

package/dist/components/inputs/textlink.css

@@ -1,163 +0,0 @@
-.ibis-link {
-	position: relative;
-	display: inline-flex;
-	align-items: center;
-	gap: var(--spacing-1);
-
-	color: #522398; /*hardcoded*/
-	text-decoration: none;
-	cursor: pointer;
-
-	transition:
-		color var(--transition-duration-fast) var(--transition-timing-default),
-		opacity var(--transition-duration-fast) var(--transition-timing-default);
-}
-
-/* content */
-.ibis-link__content {
-	display: inline-flex;
-	align-items: center;
-	gap: var(--spacing-1);
-}
-
-.ibis-link__content--hidden {
-	visibility: hidden;
-}
-
-/* sizes */
-.ibis-link--sm {
-	font-size: var(--font-size-normal-text-sm);
-}
-
-.ibis-link--md {
-	font-size: var(--font-size-normal-text-default);
-}
-
-.ibis-link--lg {
-	font-size: var(--font-size-normal-text-lg);
-}
-
-/* underline */
-.ibis-link--underline-always {
-	text-decoration: underline;
-}
-
-.ibis-link--underline-hover:hover {
-	text-decoration: underline;
-}
-
-.ibis-link--underline-none {
-	text-decoration: none;
-}
-
-/* states */
-.ibis-link:hover {
-	color: #522398; /*hardcoded*/
-}
-
-.ibis-link:active {
-	color: var(--color-primary-600);
-}
-
-.ibis-link:focus-visible {
-	outline: 2px solid #522398; /*hardcoded*/
-	outline-offset: 2px;
-}
-
-/* disabled */
-.ibis-link--disabled {
-	color: #8d8d8e; /*hardcoded*/
-	cursor: not-allowed;
-	pointer-events: none;
-	text-decoration: none;
-}
-
-/* loading */
-.ibis-link--loading {
-	cursor: not-allowed;
-	pointer-events: none;
-}
-
-.ibis-link__loader {
-	position: absolute;
-	width: 1em;
-	height: 1em;
-	border: var(--border-width-default) solid currentColor;
-	border-top-color: transparent;
-	border-radius: 50%;
-	animation: ibis-spin 0.8s linear infinite;
-	top: 50%;
-	left: 50%;
-	transform: translate(-50%, -50%);
-}
-
-@keyframes ibis-spin {
-	from {
-		transform: translate(-50%, -50%) rotate(0deg);
-	}
-	to {
-		transform: translate(-50%, -50%) rotate(360deg);
-	}
-}
-
-/* skeleton */
-.ibis-link--skeleton {
-	position: relative;
-	overflow: hidden;
-	color: transparent;
-	cursor: default;
-	pointer-events: none;
-}
-
-.ibis-link__content--skeleton {
-	position: relative;
-	color: transparent;
-	overflow: hidden;
-}
-
-.ibis-link__content--skeleton::after {
-	content: '';
-	position: absolute;
-	inset: 0;
-	background-color: var(--color-neutral-400);
-	z-index: 1;
-}
-
-.ibis-link__content--skeleton::before {
-	content: '';
-	position: absolute;
-	inset: 0;
-	background: linear-gradient(
-		90deg,
-		rgba(255, 255, 255, 0.25) 0%,
-		rgba(255, 255, 255, 0.6) 50%,
-		rgba(255, 255, 255, 0.25) 100%
-	);
-	transform: translateX(-100%);
-	animation: ibis-shimmer 2s infinite;
-	z-index: 2;
-}
-
-@keyframes ibis-shimmer {
-	0% {
-		transform: translateX(-100%);
-	}
-	100% {
-		transform: translateX(100%);
-	}
-}
-
-/* Icons */
-.ibis-link__icon {
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-
-	width: 0.75em;
-	height: 0.75em;
-}
-
-.ibis-link__icon :global(svg) {
-	width: 100%;
-	height: 100%;
-}