@studiocms/ui 0.0.1

package/src/components/Button.astro

@@ -0,0 +1,338 @@
+---
+import type { HTMLTag, Polymorphic } from 'astro/types';
+import type { StudioCMSColorway } from '../utils/colors';
+
+type Props<As extends HTMLTag = 'button'> = Omit<Polymorphic<{ as: As }>, 'as'> & {
+	as?: As;
+	size?: 'sm' | 'md' | 'lg';
+	fullWidth?: boolean;
+	color?: StudioCMSColorway;
+	variant?: 'solid' | 'outlined' | 'flat';
+	class?: string;
+	disabled?: boolean;
+};
+
+const {
+	size = 'md',
+	fullWidth = false,
+	color = 'default',
+	variant = 'default',
+	as: As = 'button',
+	class: className,
+	disabled = false,
+	...props
+} = Astro.props;
+---
+
+<As
+  class="button"
+  class:list={[
+    fullWidth && "full",
+    disabled && "disabled",
+    className,
+    size,
+    color,
+    variant,
+  ]}
+  disabled={disabled}
+	tabindex={0}
+  {...props}
+>
+  <slot name="start-content" />
+  <slot />
+  <slot name="end-content" />
+</As>
+<style>
+	/* Default Styles */
+	.button {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		text-align: center;
+
+		position: relative;
+
+		/* Move gaps & radii to spacings.css later on */
+		gap: 0.5rem;
+
+		outline: none;
+		border: none;
+
+		font-weight: 400;
+
+		border-radius: 0.5rem;
+
+		transition: all 0.15s ease;
+
+		cursor: pointer;
+
+		/* Default colorway */
+
+		background-color: hsl(var(--default-base));
+		border-color: hsl(var(--border));
+		color: hsl(var(--text-muted));
+
+		min-width: fit-content;
+
+		will-change: transform;
+
+		text-decoration: none;
+	}
+
+	.button.disabled {
+		pointer-events: none;
+		opacity: 0.5;
+	}
+
+	.button.outlined {
+		border-width: 1px;
+		border-style: solid;
+	}
+
+	.button:hover {
+		background-color: hsl(var(--default-hover));
+	}
+
+	.button:active {
+		background-color: hsl(var(--default-active));
+		transform: scale(0.95);
+	}
+
+	.button.flat {
+		background: hsla(var(--default-flat));
+	}
+
+	.button.flat:hover {
+		background: hsla(var(--default-flat-hover));
+	}
+
+	.button.flat:active {
+		background: hsla(var(--default-flat-active));
+	}
+
+	/* Sizes */
+	.button.sm {
+		height: 32px;
+		padding: 0.5rem 0.75rem;
+
+		font-size: 0.825em;
+	}
+
+	.button.md {
+		height: 40px;
+		padding: 0.5rem 0.75rem;
+
+		font-size: 0.875em;
+	}
+
+	.button.lg {
+		height: 48px;
+		padding: 0.75rem 1rem;
+
+		font-size: 1em;
+	}
+
+	/* Primary Colorway */
+	.button.primary {
+		background-color: hsl(var(--primary-base));
+		border-color: hsl(var(--primary-base));
+		color: hsl(var(--text-inverted));
+	}
+
+	.button.primary:hover {
+		background-color: hsl(var(--primary-hover));
+	}
+
+	.button.primary:active {
+		background-color: hsl(var(--primary-active));
+	}
+
+	.button.primary.outlined {
+		background-color: hsl(var(--default-base));
+		color: hsl(var(--text-normal));
+	}
+
+	.button.primary.outlined:hover {
+		background-color: hsl(var(--default-hover));
+	}
+
+	.button.primary.outlined:active {
+		background-color: hsl(var(--default-active));
+	}
+
+	.button.primary.flat {
+		background-color: hsla(var(--primary-flat));
+		color: hsl(259, 96%, 79%);
+	}
+
+	.button.primary.flat:hover {
+		background-color: hsla(var(--primary-flat-hover));
+	}
+
+	.button.primary.flat:active {
+		background-color: hsla(var(--primary-flat-active));
+	}
+
+	/* Success Colorway */
+	.button.success {
+		background-color: hsl(var(--success-base));
+		border-color: hsl(var(--success-base));
+		color: hsl(var(--text-dark));
+	}
+
+	.button.success:hover {
+		background-color: hsl(var(--success-hover));
+	}
+
+	.button.success:active {
+		background-color: hsl(var(--success-active));
+	}
+
+	.button.success.outlined {
+		background-color: hsl(var(--default-base));
+		color: hsl(var(--text-normal));
+	}
+
+	.button.success.outlined:hover {
+		background-color: hsl(var(--default-hover));
+	}
+
+	.button.success.outlined:active {
+		background-color: hsl(var(--default-active));
+	}
+
+	.button.success.flat {
+		background-color: hsla(var(--success-flat));
+		color: hsl(var(--success-base));
+	}
+
+	.button.success.flat:hover {
+		background-color: hsla(var(--success-flat-hover));
+	}
+
+	.button.success.flat:active {
+		background-color: hsla(var(--success-flat-active));
+	}
+
+	/* Warning Colorway */
+	.button.warning {
+		background-color: hsl(var(--warning-base));
+		border-color: hsl(var(--warning-base));
+		color: hsl(var(--text-dark));
+	}
+
+	.button.warning:hover {
+		background-color: hsl(var(--warning-hover));
+	}
+
+	.button.warning:active {
+		background-color: hsl(var(--warning-active));
+	}
+
+	.button.warning.outlined {
+		background-color: hsl(var(--default-base));
+		color: hsl(var(--text-normal));
+	}
+
+	.button.warning.outlined:hover {
+		background-color: hsl(var(--default-hover));
+	}
+
+	.button.warning.outlined:active {
+		background-color: hsl(var(--default-active));
+	}
+
+	.button.warning.flat {
+		background-color: hsla(var(--warning-flat));
+		color: hsl(var(--warning-base));
+	}
+
+	.button.warning.flat:hover {
+		background-color: hsla(var(--warning-flat-hover));
+	}
+
+	.button.warning.flat:active {
+		background-color: hsla(var(--warning-flat-active));
+	}
+
+	/* Danger Colorway */
+	.button.danger {
+		background-color: hsl(var(--danger-base));
+		border-color: hsl(var(--danger-base));
+		color: hsl(var(--text-light));
+	}
+
+	.button.danger:hover {
+		background-color: hsl(var(--danger-hover));
+	}
+
+	.button.danger:active {
+		background-color: hsl(var(--danger-active));
+	}
+
+	.button.danger.outlined {
+		background-color: hsl(var(--default-base));
+		color: hsl(var(--text-normal));
+	}
+
+	.button.danger.outlined:hover {
+		background-color: hsl(var(--default-hover));
+	}
+
+	.button.danger.outlined:active {
+		background-color: hsl(var(--default-active));
+	}
+
+	.button.danger.flat {
+		background-color: hsla(var(--danger-flat));
+		color: hsl(337, 92%, 71%);
+	}
+
+	.button.danger.flat:hover {
+		background-color: hsla(var(--danger-flat-hover));
+	}
+
+	.button.danger.flat:active {
+		background-color: hsla(var(--danger-flat-active));
+	}
+
+	.button.full {
+		width: 100%;
+	}
+
+	[data-theme="light"] {
+		.button.primary.flat {
+			color: hsl(259, 84%, 45%);
+		}
+
+		.button.success.flat {
+			background-color: hsl(var(--success-base), 0.2);
+			color: hsl(143, 59%, 20%);
+		}
+
+		.button.success.flat:hover {
+			background-color: hsla(var(--success-flat-hover));
+		}
+
+		.button.success.flat:active {
+			background-color: hsla(var(--success-flat-active));
+		}
+
+		.button.warning.flat {
+			background-color: hsla(var(--warning-base), 0.2);
+			color: hsl(48, 78%, 20%);
+		}
+
+		.button.warning.flat:hover {
+			background-color: hsla(var(--warning-base), 0.25);
+		}
+
+		.button.warning.flat:active {
+			background-color: hsla(var(--warning-base), 0.4);
+		}
+
+		.button.danger.flat {
+			color: hsl(339, 97%, 29%);
+		}
+	}
+</style>

package/src/components/Card.astro

@@ -0,0 +1,62 @@
+---
+import type { HTMLTag, Polymorphic } from 'astro/types';
+
+type Props<As extends HTMLTag = 'div'> = Omit<Polymorphic<{ as: As }>, 'as'> & {
+	as?: As;
+	class?: string;
+	fullWidth?: boolean;
+	fullHeight?: boolean;
+};
+
+const { as: As = 'div', class: className, fullWidth, fullHeight, ...props } = Astro.props;
+---
+<As class="card" class:list={[fullWidth && "full-w", fullHeight && "full-h", className]} {...props}>
+  <div class="card-header">
+    <slot name="header" />
+  </div>
+  <div class="card-body">
+    <slot />
+  </div>
+  <div class="card-footer">
+    <slot name="footer" />
+  </div>
+</As>
+<style>
+  .card {
+    border: 1px solid hsl(var(--border));
+    background-color: hsl(var(--background-base));
+    border-radius: .5rem;
+    width: fit-content;
+    height: fit-content;
+  }
+
+  .card.full-w {
+    width: 100%;
+  }
+
+  .card.full-h {
+    height: 100%;
+  }
+
+  .card-header:has(*) {
+    padding: 1rem 1rem 0rem 1rem;
+    * {
+      margin: 0;
+    }
+  }
+
+  .card-body {
+    padding: 1rem;
+  }
+
+  .card-footer:has(*) {
+    border-top: 1px solid hsl(var(--border));
+    padding: 1rem;
+  }
+
+  @media screen and (max-width: 840px) {
+    .card {
+      width: 100%;
+    }
+  }
+</style>

package/src/components/Center.astro

@@ -0,0 +1,16 @@
+<!-- This was made for Jumper, to keep him happy <3 -->
+<div class="center">
+  <slot />
+</div>
+<style>
+  .center {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    width: 100%;
+    height: 100%;
+
+    text-align: center;
+  }
+</style>

package/src/components/Checkbox.astro

@@ -0,0 +1,180 @@
+---
+import Checkmark from '../icons/Checkmark.astro';
+import type { StudioCMSColorway } from '../utils/colors';
+import { generateID } from '../utils/generateID';
+
+interface Props {
+	label: string;
+	size?: 'sm' | 'md' | 'lg';
+	color?: StudioCMSColorway;
+	defaultChecked?: boolean;
+	disabled?: boolean;
+	name?: string;
+	isRequired?: boolean;
+};
+
+const {
+	size = 'md',
+	color = 'default',
+	defaultChecked,
+	disabled,
+	name = generateID('checkbox'),
+	label,
+	isRequired,
+} = Astro.props;
+
+const iconSizes = {
+	sm: 14,
+	md: 16,
+	lg: 24,
+};
+---
+<label 
+  class="checkmark-label"
+  for={name}
+  class:list={[
+    disabled && "disabled",
+    color,
+    size,
+  ]}
+>
+  <div class="checkmark-container">
+    <Checkmark
+      class={'checkmark'}
+      width={iconSizes[size]}
+      height={iconSizes[size]}
+    />
+    <input
+      type="checkbox"
+      name={name}
+      id={name}
+      checked={defaultChecked}
+      disabled={disabled}
+      required={isRequired}
+      class="checkbox"
+    />
+  </div>
+  <span>
+    {label} <span class="req-star">{isRequired && "*"}</span>
+  </span>
+</label>
+<style>
+  .checkmark-label {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: .5rem;
+    position: relative;
+    margin: .25rem 0;
+  }
+
+  .checkmark-label.disabled {
+    opacity: 0.5;
+    pointer-events: none;
+    color: hsl(var(--text-muted));
+  }
+
+  .checkmark-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: hsl(var(--default-base));
+    border: 2px solid hsl(var(--default-base));
+    border-radius: .5rem;
+    cursor: pointer;
+    transition: all .15s ease;
+  }
+
+  .checkmark-label:hover .checkmark-container {
+    background-color: hsl(var(--default-hover));
+  }
+
+  .checkmark-label:active .checkmark-container {
+    background-color: hsl(var(--default-active));
+    scale: 0.9;
+  }
+
+  .checkmark-label.sm {
+    font-size: .875em;
+  }
+
+  .checkmark-label.sm .checkmark-container {
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+
+  .checkmark-label.md .checkmark-container {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+
+  .checkmark-label.lg {
+    font-size: 1.125em;
+  }
+
+  .checkmark-label.lg .checkmark-container {
+    width: 1.75rem;
+    height: 1.75rem;
+  }
+
+  .primary .checkmark-container:has(.checkbox:checked) {
+    border-color: hsl(var(--primary-base));
+    background-color: hsl(var(--primary-base));
+  }
+
+  .success .checkmark-container:has(.checkbox:checked) {
+    border-color: hsl(var(--success-base));
+    background-color: hsl(var(--success-base));
+  }
+
+  .warning .checkmark-container:has(.checkbox:checked) {
+    border-color: hsl(var(--warning-base));
+    background-color: hsl(var(--warning-base));
+  }
+
+  .danger .checkmark-container:has(.checkbox:checked) {
+    border-color: hsl(var(--danger-base));
+    background-color: hsl(var(--danger-base));
+  }
+
+  .req-star {
+    color: hsl(var(--danger-base));
+    font-weight: 700;
+  }
+
+  .checkbox {
+    width: 0;
+    height: 0;
+    visibility: hidden;
+    opacity: 0;
+    margin: 0;
+  }
+</style>
+<style is:global>
+  .checkmark polyline {
+    transition: all .15s ease;
+    color: hsl(var(--text-normal));
+  }
+
+  .primary .checkmark polyline {
+    color: hsl(var(--text-inverted));
+  }
+
+  .success .checkmark polyline {
+    color: hsl(var(--text-dark));
+  }
+
+  .warning .checkmark polyline {
+    color: hsl(var(--text-dark));
+  }
+
+  .danger .checkmark polyline {
+    color: hsl(var(--text-light));
+  }
+
+  .checkmark-container:has(.checkbox:checked) {
+    .checkmark polyline {
+      stroke-dashoffset: 44;
+    }
+  }
+</style>

package/src/components/Divider.astro

@@ -0,0 +1,39 @@
+---
+interface Props {
+  background?: 'background-base' | 'background-step-1' | 'background-step-2' | 'background-step-3';
+};
+
+const { background = 'background-base' } = Astro.props;
+---
+<div class="divide-container">
+  <div class="line" />
+  <div class="content" style={`background-color: hsl(var(--${background}));`}>
+    <slot />
+  </div>
+</div>
+<style>
+  .divide-container {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+  }
+
+  .line {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 100%;
+    height: 1px;
+    background-color: hsl(var(--border));
+    z-index: 1;
+  }
+
+  .content {
+    padding: .25rem .5rem;
+    z-index: 2;
+    color: hsl(var(--text-muted));
+  }
+</style>