@studiocms/ui 0.0.1 → 0.1.0

package/src/components/Button.astro

@@ -25,7 +25,7 @@ const {
 ---
 
 <As
-  class="button"
+  class="sui-button"
   class:list={[
     fullWidth && "full",
     disabled && "disabled",
@@ -44,7 +44,7 @@ const {
 </As>
 <style>
 	/* Default Styles */
-	.button {
+	.sui-button {
 		display: flex;
 		flex-direction: row;
 		align-items: center;
@@ -79,53 +79,53 @@ const {
 		text-decoration: none;
 	}
 
-	.button.disabled {
+	.sui-button.disabled {
 		pointer-events: none;
 		opacity: 0.5;
 	}
 
-	.button.outlined {
+	.sui-button.outlined {
 		border-width: 1px;
 		border-style: solid;
 	}
 
-	.button:hover {
+	.sui-button:hover {
 		background-color: hsl(var(--default-hover));
 	}
 
-	.button:active {
+	.sui-button:active {
 		background-color: hsl(var(--default-active));
 		transform: scale(0.95);
 	}
 
-	.button.flat {
+	.sui-button.flat {
 		background: hsla(var(--default-flat));
 	}
 
-	.button.flat:hover {
+	.sui-button.flat:hover {
 		background: hsla(var(--default-flat-hover));
 	}
 
-	.button.flat:active {
+	.sui-button.flat:active {
 		background: hsla(var(--default-flat-active));
 	}
 
 	/* Sizes */
-	.button.sm {
+	.sui-button.sm {
 		height: 32px;
 		padding: 0.5rem 0.75rem;
 
 		font-size: 0.825em;
 	}
 
-	.button.md {
+	.sui-button.md {
 		height: 40px;
 		padding: 0.5rem 0.75rem;
 
 		font-size: 0.875em;
 	}
 
-	.button.lg {
+	.sui-button.lg {
 		height: 48px;
 		padding: 0.75rem 1rem;
 
@@ -133,205 +133,206 @@ const {
 	}
 
 	/* Primary Colorway */
-	.button.primary {
+	.sui-button.primary {
 		background-color: hsl(var(--primary-base));
 		border-color: hsl(var(--primary-base));
 		color: hsl(var(--text-inverted));
 	}
 
-	.button.primary:hover {
+	.sui-button.primary:hover {
 		background-color: hsl(var(--primary-hover));
 	}
 
-	.button.primary:active {
+	.sui-button.primary:active {
 		background-color: hsl(var(--primary-active));
 	}
 
-	.button.primary.outlined {
+	.sui-button.primary.outlined {
 		background-color: hsl(var(--default-base));
 		color: hsl(var(--text-normal));
 	}
 
-	.button.primary.outlined:hover {
+	.sui-button.primary.outlined:hover {
 		background-color: hsl(var(--default-hover));
 	}
 
-	.button.primary.outlined:active {
+	.sui-button.primary.outlined:active {
 		background-color: hsl(var(--default-active));
 	}
 
-	.button.primary.flat {
+	.sui-button.primary.flat {
 		background-color: hsla(var(--primary-flat));
 		color: hsl(259, 96%, 79%);
 	}
 
-	.button.primary.flat:hover {
+	.sui-button.primary.flat:hover {
 		background-color: hsla(var(--primary-flat-hover));
 	}
 
-	.button.primary.flat:active {
+	.sui-button.primary.flat:active {
 		background-color: hsla(var(--primary-flat-active));
 	}
 
 	/* Success Colorway */
-	.button.success {
+	.sui-button.success {
 		background-color: hsl(var(--success-base));
 		border-color: hsl(var(--success-base));
 		color: hsl(var(--text-dark));
 	}
 
-	.button.success:hover {
+	.sui-button.success:hover {
 		background-color: hsl(var(--success-hover));
 	}
 
-	.button.success:active {
+	.sui-button.success:active {
 		background-color: hsl(var(--success-active));
 	}
 
-	.button.success.outlined {
+	.sui-button.success.outlined {
 		background-color: hsl(var(--default-base));
 		color: hsl(var(--text-normal));
 	}
 
-	.button.success.outlined:hover {
+	.sui-button.success.outlined:hover {
 		background-color: hsl(var(--default-hover));
 	}
 
-	.button.success.outlined:active {
+	.sui-button.success.outlined:active {
 		background-color: hsl(var(--default-active));
 	}
 
-	.button.success.flat {
+	.sui-button.success.flat {
 		background-color: hsla(var(--success-flat));
 		color: hsl(var(--success-base));
 	}
 
-	.button.success.flat:hover {
+	.sui-button.success.flat:hover {
 		background-color: hsla(var(--success-flat-hover));
 	}
 
-	.button.success.flat:active {
+	.sui-button.success.flat:active {
 		background-color: hsla(var(--success-flat-active));
 	}
 
 	/* Warning Colorway */
-	.button.warning {
+	.sui-button.warning {
 		background-color: hsl(var(--warning-base));
 		border-color: hsl(var(--warning-base));
 		color: hsl(var(--text-dark));
 	}
 
-	.button.warning:hover {
+	.sui-button.warning:hover {
 		background-color: hsl(var(--warning-hover));
 	}
 
-	.button.warning:active {
+	.sui-button.warning:active {
 		background-color: hsl(var(--warning-active));
 	}
 
-	.button.warning.outlined {
+	.sui-button.warning.outlined {
 		background-color: hsl(var(--default-base));
 		color: hsl(var(--text-normal));
 	}
 
-	.button.warning.outlined:hover {
+	.sui-button.warning.outlined:hover {
 		background-color: hsl(var(--default-hover));
 	}
 
-	.button.warning.outlined:active {
+	.sui-button.warning.outlined:active {
 		background-color: hsl(var(--default-active));
 	}
 
-	.button.warning.flat {
+	.sui-button.warning.flat {
 		background-color: hsla(var(--warning-flat));
 		color: hsl(var(--warning-base));
 	}
 
-	.button.warning.flat:hover {
+	.sui-button.warning.flat:hover {
 		background-color: hsla(var(--warning-flat-hover));
 	}
 
-	.button.warning.flat:active {
+	.sui-button.warning.flat:active {
 		background-color: hsla(var(--warning-flat-active));
 	}
 
 	/* Danger Colorway */
-	.button.danger {
+	.sui-button.danger {
 		background-color: hsl(var(--danger-base));
 		border-color: hsl(var(--danger-base));
 		color: hsl(var(--text-light));
 	}
 
-	.button.danger:hover {
+	.sui-button.danger:hover {
 		background-color: hsl(var(--danger-hover));
 	}
 
-	.button.danger:active {
+	.sui-button.danger:active {
 		background-color: hsl(var(--danger-active));
 	}
 
-	.button.danger.outlined {
+	.sui-button.danger.outlined {
 		background-color: hsl(var(--default-base));
 		color: hsl(var(--text-normal));
 	}
 
-	.button.danger.outlined:hover {
+	.sui-button.danger.outlined:hover {
 		background-color: hsl(var(--default-hover));
 	}
 
-	.button.danger.outlined:active {
+	.sui-button.danger.outlined:active {
 		background-color: hsl(var(--default-active));
 	}
 
-	.button.danger.flat {
+	.sui-button.danger.flat {
 		background-color: hsla(var(--danger-flat));
 		color: hsl(337, 92%, 71%);
 	}
 
-	.button.danger.flat:hover {
+	.sui-button.danger.flat:hover {
 		background-color: hsla(var(--danger-flat-hover));
 	}
 
-	.button.danger.flat:active {
+	.sui-button.danger.flat:active {
 		background-color: hsla(var(--danger-flat-active));
 	}
 
-	.button.full {
+	.sui-button.full {
 		width: 100%;
+		justify-content: center;
 	}
 
 	[data-theme="light"] {
-		.button.primary.flat {
+		.sui-button.primary.flat {
 			color: hsl(259, 84%, 45%);
 		}
 
-		.button.success.flat {
+		.sui-button.success.flat {
 			background-color: hsl(var(--success-base), 0.2);
 			color: hsl(143, 59%, 20%);
 		}
 
-		.button.success.flat:hover {
+		.sui-button.success.flat:hover {
 			background-color: hsla(var(--success-flat-hover));
 		}
 
-		.button.success.flat:active {
+		.sui-button.success.flat:active {
 			background-color: hsla(var(--success-flat-active));
 		}
 
-		.button.warning.flat {
+		.sui-button.warning.flat {
 			background-color: hsla(var(--warning-base), 0.2);
 			color: hsl(48, 78%, 20%);
 		}
 
-		.button.warning.flat:hover {
+		.sui-button.warning.flat:hover {
 			background-color: hsla(var(--warning-base), 0.25);
 		}
 
-		.button.warning.flat:active {
+		.sui-button.warning.flat:active {
 			background-color: hsla(var(--warning-base), 0.4);
 		}
 
-		.button.danger.flat {
+		.sui-button.danger.flat {
 			color: hsl(339, 97%, 29%);
 		}
 	}

package/src/components/Card.astro

@@ -10,19 +10,19 @@ type Props<As extends HTMLTag = 'div'> = Omit<Polymorphic<{ as: As }>, 'as'> & {
 
 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">
+<As class="sui-card" class:list={[fullWidth && "full-w", fullHeight && "full-h", className]} {...props}>
+  <div class="sui-card-header">
     <slot name="header" />
   </div>
-  <div class="card-body">
+  <div class="sui-card-body">
     <slot />
   </div>
-  <div class="card-footer">
+  <div class="sui-card-footer">
     <slot name="footer" />
   </div>
 </As>
 <style>
-  .card {
+  .sui-card {
     border: 1px solid hsl(var(--border));
     background-color: hsl(var(--background-base));
     border-radius: .5rem;
@@ -30,32 +30,32 @@ const { as: As = 'div', class: className, fullWidth, fullHeight, ...props } = As
     height: fit-content;
   }
 
-  .card.full-w {
+  .sui-card.full-w {
     width: 100%;
   }
 
-  .card.full-h {
+  .sui-card.full-h {
     height: 100%;
   }
 
-  .card-header:has(*) {
+  .sui-card-header:has(*) {
     padding: 1rem 1rem 0rem 1rem;
     * {
       margin: 0;
     }
   }
 
-  .card-body {
+  .sui-card-body {
     padding: 1rem;
   }
 
-  .card-footer:has(*) {
+  .sui-card-footer:has(*) {
     border-top: 1px solid hsl(var(--border));
     padding: 1rem;
   }
 
   @media screen and (max-width: 840px) {
-    .card {
+    .sui-card {
       width: 100%;
     }
   }

package/src/components/Center.astro

@@ -1,9 +1,9 @@
 <!-- This was made for Jumper, to keep him happy <3 -->
-<div class="center">
+<div class="sui-center">
   <slot />
 </div>
 <style>
-  .center {
+  .sui-center {
     display: flex;
     align-items: center;
     justify-content: center;

package/src/components/Checkbox.astro

@@ -11,7 +11,7 @@ interface Props {
 	disabled?: boolean;
 	name?: string;
 	isRequired?: boolean;
-};
+}
 
 const {
 	size = 'md',
@@ -30,7 +30,7 @@ const iconSizes = {
 };
 ---
 <label 
-  class="checkmark-label"
+  class="sui-checkmark-label"
   for={name}
   class:list={[
     disabled && "disabled",
@@ -38,9 +38,9 @@ const iconSizes = {
     size,
   ]}
 >
-  <div class="checkmark-container">
+  <div class="sui-checkmark-container">
     <Checkmark
-      class={'checkmark'}
+      class={'sui-checkmark'}
       width={iconSizes[size]}
       height={iconSizes[size]}
     />
@@ -51,7 +51,7 @@ const iconSizes = {
       checked={defaultChecked}
       disabled={disabled}
       required={isRequired}
-      class="checkbox"
+      class="sui-checkbox"
     />
   </div>
   <span>
@@ -59,7 +59,7 @@ const iconSizes = {
   </span>
 </label>
 <style>
-  .checkmark-label {
+  .sui-checkmark-label {
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -68,13 +68,13 @@ const iconSizes = {
     margin: .25rem 0;
   }
 
-  .checkmark-label.disabled {
+  .sui-checkmark-label.disabled {
     opacity: 0.5;
     pointer-events: none;
     color: hsl(var(--text-muted));
   }
 
-  .checkmark-container {
+  .sui-checkmark-container {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -85,54 +85,55 @@ const iconSizes = {
     transition: all .15s ease;
   }
 
-  .checkmark-label:hover .checkmark-container {
+  .sui-checkmark-label:hover .sui-checkmark-container {
     background-color: hsl(var(--default-hover));
   }
 
-  .checkmark-label:active .checkmark-container {
+  .sui-checkmark-label:active .sui-checkmark-container {
     background-color: hsl(var(--default-active));
     scale: 0.9;
   }
 
-  .checkmark-label.sm {
+  .sui-checkmark-label.sm {
     font-size: .875em;
   }
 
-  .checkmark-label.sm .checkmark-container {
+  .sui-checkmark-label.sm .sui-checkmark-container {
     width: 1.25rem;
     height: 1.25rem;
   }
 
-  .checkmark-label.md .checkmark-container {
+  .sui-checkmark-label.md .sui-checkmark-container {
     width: 1.5rem;
     height: 1.5rem;
   }
 
-  .checkmark-label.lg {
+  .sui-checkmark-label.lg {
     font-size: 1.125em;
   }
 
-  .checkmark-label.lg .checkmark-container {
+  .sui-checkmark-label.lg .sui-checkmark-container {
     width: 1.75rem;
     height: 1.75rem;
+    padding: .125rem;
   }
 
-  .primary .checkmark-container:has(.checkbox:checked) {
+  .primary .sui-checkmark-container:has(.sui-checkbox:checked) {
     border-color: hsl(var(--primary-base));
     background-color: hsl(var(--primary-base));
   }
 
-  .success .checkmark-container:has(.checkbox:checked) {
+  .success .sui-checkmark-container:has(.sui-checkbox:checked) {
     border-color: hsl(var(--success-base));
     background-color: hsl(var(--success-base));
   }
 
-  .warning .checkmark-container:has(.checkbox:checked) {
+  .warning .sui-checkmark-container:has(.sui-checkbox:checked) {
     border-color: hsl(var(--warning-base));
     background-color: hsl(var(--warning-base));
   }
 
-  .danger .checkmark-container:has(.checkbox:checked) {
+  .danger .sui-checkmark-container:has(.sui-checkbox:checked) {
     border-color: hsl(var(--danger-base));
     background-color: hsl(var(--danger-base));
   }
@@ -142,7 +143,7 @@ const iconSizes = {
     font-weight: 700;
   }
 
-  .checkbox {
+  .sui-checkbox {
     width: 0;
     height: 0;
     visibility: hidden;
@@ -151,29 +152,29 @@ const iconSizes = {
   }
 </style>
 <style is:global>
-  .checkmark polyline {
+  .sui-checkmark polyline {
     transition: all .15s ease;
     color: hsl(var(--text-normal));
   }
 
-  .primary .checkmark polyline {
+  .primary .sui-checkmark polyline {
     color: hsl(var(--text-inverted));
   }
 
-  .success .checkmark polyline {
+  .success .sui-checkmark polyline {
     color: hsl(var(--text-dark));
   }
 
-  .warning .checkmark polyline {
+  .warning .sui-checkmark polyline {
     color: hsl(var(--text-dark));
   }
 
-  .danger .checkmark polyline {
+  .danger .sui-checkmark polyline {
     color: hsl(var(--text-light));
   }
 
-  .checkmark-container:has(.checkbox:checked) {
-    .checkmark polyline {
+  .sui-checkmark-container:has(.sui-checkbox:checked) {
+    .sui-checkmark polyline {
       stroke-dashoffset: 44;
     }
   }

package/src/components/Divider.astro

@@ -1,18 +1,18 @@
 ---
 interface Props {
-  background?: 'background-base' | 'background-step-1' | 'background-step-2' | 'background-step-3';
-};
+	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}));`}>
+<div class="sui-divider-container">
+  <div class="sui-divider-line" />
+  <div class="sui-divider-content" style={`background-color: hsl(var(--${background}));`}>
     <slot />
   </div>
 </div>
 <style>
-  .divide-container {
+  .sui-divider-container {
     display: flex;
     width: 100%;
     align-items: center;
@@ -20,7 +20,7 @@ const { background = 'background-base' } = Astro.props;
     position: relative;
   }
 
-  .line {
+  .sui-divider-line {
     position: absolute;
     top: 50%;
     left: 50%;
@@ -31,7 +31,7 @@ const { background = 'background-base' } = Astro.props;
     z-index: 1;
   }
 
-  .content {
+  .sui-divider-content {
     padding: .25rem .5rem;
     z-index: 2;
     color: hsl(var(--text-muted));