@pallamart/pm-design-system 1.0.0

package/dist/styles/components/loaders/dot-loader-dark.css

@@ -0,0 +1,103 @@
+.dot-elastic-dark {
+	position: relative;
+	width: 10px;
+	height: 10px;
+	border-radius: 5px;
+	background-color: #9346f2;
+	color: #9346f2;
+	animation: dot-elastic 1s infinite linear;
+}
+
+.dot-elastic-dark::before,
+.dot-elastic-dark::after {
+	content: '';
+	display: inline-block;
+	position: absolute;
+	top: 0;
+}
+
+.dot-elastic-dark::before {
+	left: -15px;
+	width: 10px;
+	height: 10px;
+	border-radius: 5px;
+	background-color: #9346f2;
+	color: #9346f2;
+	animation: dot-elastic-before 1s infinite linear;
+}
+
+.dot-elastic-dark::after {
+	left: 15px;
+	width: 10px;
+	height: 10px;
+	border-radius: 5px;
+	background-color: #9346f2;
+	color: #9346f2;
+	animation: dot-elastic-after 1s infinite linear;
+}
+
+@keyframes dot-elastic-before {
+	0% {
+		transform: scale(1, 1);
+	}
+
+	25% {
+		transform: scale(1, 1.5);
+	}
+
+	50% {
+		transform: scale(1, 0.67);
+	}
+
+	75% {
+		transform: scale(1, 1);
+	}
+
+	100% {
+		transform: scale(1, 1);
+	}
+}
+
+@keyframes dot-elastic {
+	0% {
+		transform: scale(1, 1);
+	}
+
+	25% {
+		transform: scale(1, 1);
+	}
+
+	50% {
+		transform: scale(1, 1.5);
+	}
+
+	75% {
+		transform: scale(1, 1);
+	}
+
+	100% {
+		transform: scale(1, 1);
+	}
+}
+
+@keyframes dot-elastic-after {
+	0% {
+		transform: scale(1, 1);
+	}
+
+	25% {
+		transform: scale(1, 1);
+	}
+
+	50% {
+		transform: scale(1, 0.67);
+	}
+
+	75% {
+		transform: scale(1, 1.5);
+	}
+
+	100% {
+		transform: scale(1, 1);
+	}
+}

package/dist/styles/components/loaders/dot-loader.css

@@ -0,0 +1,103 @@
+.dot-elastic {
+	position: relative;
+	width: 10px;
+	height: 10px;
+	border-radius: 5px;
+	background-color: #fff;
+	color: #fff;
+	animation: dot-elastic 1s infinite linear;
+}
+
+.dot-elastic::before,
+.dot-elastic::after {
+	content: '';
+	display: inline-block;
+	position: absolute;
+	top: 0;
+}
+
+.dot-elastic::before {
+	left: -15px;
+	width: 10px;
+	height: 10px;
+	border-radius: 5px;
+	background-color: #fff;
+	color: #fff;
+	animation: dot-elastic-before 1s infinite linear;
+}
+
+.dot-elastic::after {
+	left: 15px;
+	width: 10px;
+	height: 10px;
+	border-radius: 5px;
+	background-color: #fff;
+	color: #fff;
+	animation: dot-elastic-after 1s infinite linear;
+}
+
+@keyframes dot-elastic-before {
+	0% {
+		transform: scale(1, 1);
+	}
+
+	25% {
+		transform: scale(1, 1.5);
+	}
+
+	50% {
+		transform: scale(1, 0.67);
+	}
+
+	75% {
+		transform: scale(1, 1);
+	}
+
+	100% {
+		transform: scale(1, 1);
+	}
+}
+
+@keyframes dot-elastic {
+	0% {
+		transform: scale(1, 1);
+	}
+
+	25% {
+		transform: scale(1, 1);
+	}
+
+	50% {
+		transform: scale(1, 1.5);
+	}
+
+	75% {
+		transform: scale(1, 1);
+	}
+
+	100% {
+		transform: scale(1, 1);
+	}
+}
+
+@keyframes dot-elastic-after {
+	0% {
+		transform: scale(1, 1);
+	}
+
+	25% {
+		transform: scale(1, 1);
+	}
+
+	50% {
+		transform: scale(1, 0.67);
+	}
+
+	75% {
+		transform: scale(1, 1.5);
+	}
+
+	100% {
+		transform: scale(1, 1);
+	}
+}

package/dist/styles/components/loaders/index.css

@@ -0,0 +1,2 @@
+@import url('dot-loader-dark.css');
+@import url('dot-loader.css');

package/dist/styles/external/components/auth/auth.css

@@ -0,0 +1,25 @@
+/* Base */
+.pallamart-btn-auth-microsoft,
+a.pallamart-btn-auth-microsoft {
+	@apply flex w-full items-center justify-center gap-4 rounded-xl border border-grey/20 bg-white px-5 py-4 text-body-2 text-black transition-colors;
+}
+
+.pallamart-btn-auth-microsoft:enabled,
+a.pallamart-btn-auth-microsoft:not([aria-disabled='true']) {
+	@apply text-black bg-white border-grey/20;
+}
+
+.pallamart-btn-auth-microsoft:enabled:hover,
+a.pallamart-btn-auth-microsoft:not([aria-disabled='true']):hover {
+	@apply bg-white border-grey/20;
+}
+
+.pallamart-btn-auth-microsoft:enabled:active,
+a.pallamart-btn-auth-microsoft:not([aria-disabled='true']):active {
+	@apply bg-grey-light border-grey/20;
+}
+
+.pallamart-btn-auth-microsoft:disabled,
+a.pallamart-btn-auth-microsoft[aria-disabled='true'] {
+	@apply text-grey-dark bg-grey-light border-grey/20;
+}

package/dist/styles/external/components/auth/index.css

@@ -0,0 +1 @@
+@import url('auth.css');

package/dist/styles/external/components/buttons/accent-link.css

@@ -0,0 +1,15 @@
+/* Base */
+.pallamart-link-accent,
+a.pallamart-link-accent {
+	@apply px-3 py-2 rounded-full bg-primary tracking-wide shadow-lg transition-all;
+}
+
+.pallamart-link-accent:hover:not(:disabled),
+a.pallamart-link-accent:not([aria-disabled='true']):hover {
+	@apply hover:bg-opacity-90;
+}
+
+.pallamart-link-accent:disabled,
+a.pallamart-link-accent[aria-disabled='true'] {
+	@apply bg-grey text-black border-grey;
+}

package/dist/styles/external/components/buttons/index.css

@@ -0,0 +1,4 @@
+@import url('accent-link.css');
+@import url('primary-button.css');
+@import url('secondary-button.css');
+@import url('link.css');

package/dist/styles/external/components/buttons/link.css

@@ -0,0 +1,31 @@
+/* Base */
+.pallamart-link,
+a.pallamart-link {
+	@apply text-primary;
+}
+
+.pallamart-link:disabled,
+a.pallamart-link[aria-disabled='true'] {
+	@apply text-grey;
+}
+
+.pallamart-link:hover:not(:disabled),
+a.pallamart-link:not([aria-disabled='true']):hover {
+	@apply underline;
+}
+
+/* Danger */
+.pallamart-link-danger,
+a.pallamart-link-danger {
+	@apply text-error-contrast;
+}
+
+.pallamart-link-danger:disabled,
+a.pallamart-link-danger[aria-disabled='true'] {
+	@apply text-grey;
+}
+
+.pallamart-link-danger:hover:not(:disabled),
+a.pallamart-link-danger:not([aria-disabled='true']):hover {
+	@apply underline;
+}

package/dist/styles/external/components/buttons/primary-button.css

@@ -0,0 +1,25 @@
+/* Base */
+.pallamart-btn-primary,
+a.pallamart-btn-primary {
+	@apply inline-flex min-h-12 w-full items-center justify-center rounded-full border px-6 py-3 text-body-2 tracking-normal shadow-sm transition-all duration-200 sm:w-auto;
+}
+
+.pallamart-btn-primary:enabled,
+a.pallamart-btn-primary:not([aria-disabled='true']) {
+	@apply border-primary bg-primary text-white;
+}
+
+.pallamart-btn-primary:enabled:hover,
+a.pallamart-btn-primary:not([aria-disabled='true']):hover {
+	@apply border-primary-hover bg-primary-hover;
+}
+
+.pallamart-btn-primary:enabled:active,
+a.pallamart-btn-primary:not([aria-disabled='true']):active {
+	@apply border-primary-hover bg-primary-hover text-white;
+}
+
+.pallamart-btn-primary:disabled,
+a.pallamart-btn-primary[aria-disabled='true'] {
+	@apply border-grey bg-grey text-black shadow-none;
+}

package/dist/styles/external/components/buttons/secondary-button.css

@@ -0,0 +1,25 @@
+/* Base */
+.pallamart-btn-secondary,
+a.pallamart-btn-secondary {
+	@apply inline-flex min-h-12 w-full items-center justify-center rounded-full border px-6 py-3 text-body-2 tracking-normal shadow-sm transition-all duration-200 sm:w-auto;
+}
+
+.pallamart-btn-secondary:enabled,
+a.pallamart-btn-secondary:not([aria-disabled='true']) {
+	@apply border-black bg-black text-white;
+}
+
+.pallamart-btn-secondary:enabled:hover,
+a.pallamart-btn-secondary:not([aria-disabled='true']):hover {
+	@apply border-grey-dark bg-grey-dark;
+}
+
+.pallamart-btn-secondary:enabled:active,
+a.pallamart-btn-secondary:not([aria-disabled='true']):active {
+	@apply border-black bg-black text-white;
+}
+
+.pallamart-btn-secondary:disabled,
+a.pallamart-btn-secondary[aria-disabled='true'] {
+	@apply border-grey bg-grey text-black shadow-none;
+}

package/dist/styles/external/components/containers/card.css

@@ -0,0 +1,12 @@
+/* Base */
+.pallamart-card {
+	@apply p-6 bg-white rounded-lg transition-all border border-grey/20;
+}
+
+.pallamart-card:hover {
+	@apply shadow-lg border-primary cursor-pointer;
+}
+
+.pallamart-static-card {
+	@apply p-6 bg-white rounded-lg transition-all border border-grey/20;
+}

package/dist/styles/external/components/containers/index.css

@@ -0,0 +1 @@
+@import url('card.css');

package/dist/styles/external/components/form/checkbox.css

@@ -0,0 +1,25 @@
+/* Base */
+.pallamart-checkbox {
+	@apply h-5 w-5 shrink-0 appearance-none rounded border-2 border-grey bg-white align-middle transition-all cursor-pointer;
+	background-position: center;
+	background-repeat: no-repeat;
+	background-size: 0.75rem 0.75rem;
+}
+
+.pallamart-checkbox:checked {
+	@apply border-primary bg-primary;
+	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.5L6.5 11.5L12.5 4.5' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+}
+
+.pallamart-checkbox:focus {
+	@apply border-primary outline-none ring-2 ring-primary/15 ring-offset-2;
+}
+
+.pallamart-checkbox:disabled,
+.pallamart-checkbox[aria-disabled='true'] {
+	@apply bg-grey-light cursor-not-allowed;
+}
+
+.pallamart-checkbox[aria-invalid='true'] {
+	@apply border-error-contrast;
+}

package/dist/styles/external/components/form/form-input.css

@@ -0,0 +1,40 @@
+/* Base */
+.pallamart-input {
+	@apply flex flex-col space-y-2 w-full;
+}
+
+.pallamart-input label {
+	@apply text-header-4 tracking-wide;
+}
+
+.pallamart-input input:not([type='checkbox'], [type='range']),
+.pallamart-input textarea,
+.pallamart-input select {
+	@apply text-body-2 px-4 py-2 border-2 border-grey rounded-lg transition-all w-full bg-white;
+}
+
+.pallamart-input select {
+	@apply appearance-none cursor-pointer;
+}
+
+.pallamart-input input:focus,
+.pallamart-input textarea:focus,
+.pallamart-input select:focus {
+	@apply border-primary outline-none;
+}
+
+.pallamart-input input:not([type='checkbox'], [type='range']):disabled,
+.pallamart-input textarea:disabled,
+.pallamart-input select:disabled {
+	@apply bg-grey-light cursor-not-allowed;
+}
+
+.pallamart-input input:not([type='checkbox'], [type='range'])[aria-invalid='true'],
+.pallamart-input textarea[aria-invalid='true'],
+.pallamart-input select[aria-invalid='true'] {
+	@apply border-error-contrast;
+}
+
+.pallamart-input p {
+	@apply text-body-3 text-error-contrast;
+}

package/dist/styles/external/components/form/index.css

@@ -0,0 +1,2 @@
+@import url('form-input.css');
+@import url('checkbox.css');

package/dist/styles/external/components/index.css

@@ -0,0 +1,6 @@
+@import url('auth');
+@import url('buttons');
+@import url('containers');
+@import url('form');
+@import url('loaders');
+@import url('products');

package/dist/styles/external/components/loaders/dot-loader-dark.css

@@ -0,0 +1,103 @@
+.dot-elastic-dark {
+	position: relative;
+	width: 10px;
+	height: 10px;
+	border-radius: 5px;
+	background-color: #9346f2;
+	color: #9346f2;
+	animation: dot-elastic 1s infinite linear;
+}
+
+.dot-elastic-dark::before,
+.dot-elastic-dark::after {
+	content: '';
+	display: inline-block;
+	position: absolute;
+	top: 0;
+}
+
+.dot-elastic-dark::before {
+	left: -15px;
+	width: 10px;
+	height: 10px;
+	border-radius: 5px;
+	background-color: #9346f2;
+	color: #9346f2;
+	animation: dot-elastic-before 1s infinite linear;
+}
+
+.dot-elastic-dark::after {
+	left: 15px;
+	width: 10px;
+	height: 10px;
+	border-radius: 5px;
+	background-color: #9346f2;
+	color: #9346f2;
+	animation: dot-elastic-after 1s infinite linear;
+}
+
+@keyframes dot-elastic-before {
+	0% {
+		transform: scale(1, 1);
+	}
+
+	25% {
+		transform: scale(1, 1.5);
+	}
+
+	50% {
+		transform: scale(1, 0.67);
+	}
+
+	75% {
+		transform: scale(1, 1);
+	}
+
+	100% {
+		transform: scale(1, 1);
+	}
+}
+
+@keyframes dot-elastic {
+	0% {
+		transform: scale(1, 1);
+	}
+
+	25% {
+		transform: scale(1, 1);
+	}
+
+	50% {
+		transform: scale(1, 1.5);
+	}
+
+	75% {
+		transform: scale(1, 1);
+	}
+
+	100% {
+		transform: scale(1, 1);
+	}
+}
+
+@keyframes dot-elastic-after {
+	0% {
+		transform: scale(1, 1);
+	}
+
+	25% {
+		transform: scale(1, 1);
+	}
+
+	50% {
+		transform: scale(1, 0.67);
+	}
+
+	75% {
+		transform: scale(1, 1.5);
+	}
+
+	100% {
+		transform: scale(1, 1);
+	}
+}

package/dist/styles/external/components/loaders/dot-loader.css

@@ -0,0 +1,103 @@
+.dot-elastic {
+	position: relative;
+	width: 10px;
+	height: 10px;
+	border-radius: 5px;
+	background-color: #fff;
+	color: #fff;
+	animation: dot-elastic 1s infinite linear;
+}
+
+.dot-elastic::before,
+.dot-elastic::after {
+	content: '';
+	display: inline-block;
+	position: absolute;
+	top: 0;
+}
+
+.dot-elastic::before {
+	left: -15px;
+	width: 10px;
+	height: 10px;
+	border-radius: 5px;
+	background-color: #fff;
+	color: #fff;
+	animation: dot-elastic-before 1s infinite linear;
+}
+
+.dot-elastic::after {
+	left: 15px;
+	width: 10px;
+	height: 10px;
+	border-radius: 5px;
+	background-color: #fff;
+	color: #fff;
+	animation: dot-elastic-after 1s infinite linear;
+}
+
+@keyframes dot-elastic-before {
+	0% {
+		transform: scale(1, 1);
+	}
+
+	25% {
+		transform: scale(1, 1.5);
+	}
+
+	50% {
+		transform: scale(1, 0.67);
+	}
+
+	75% {
+		transform: scale(1, 1);
+	}
+
+	100% {
+		transform: scale(1, 1);
+	}
+}
+
+@keyframes dot-elastic {
+	0% {
+		transform: scale(1, 1);
+	}
+
+	25% {
+		transform: scale(1, 1);
+	}
+
+	50% {
+		transform: scale(1, 1.5);
+	}
+
+	75% {
+		transform: scale(1, 1);
+	}
+
+	100% {
+		transform: scale(1, 1);
+	}
+}
+
+@keyframes dot-elastic-after {
+	0% {
+		transform: scale(1, 1);
+	}
+
+	25% {
+		transform: scale(1, 1);
+	}
+
+	50% {
+		transform: scale(1, 0.67);
+	}
+
+	75% {
+		transform: scale(1, 1.5);
+	}
+
+	100% {
+		transform: scale(1, 1);
+	}
+}

package/dist/styles/external/components/loaders/index.css

@@ -0,0 +1,2 @@
+@import url('dot-loader-dark.css');
+@import url('dot-loader.css');

package/dist/styles/external/components/products/index.css

@@ -0,0 +1 @@
+@import url('product-studio');