@lgtm-hq/turbo-themes 0.12.16

package/packages/css/dist/components/cards.css

@@ -0,0 +1,157 @@
+/* ==========================================================================
+   Turbo Themes - Cards
+   ========================================================================== */
+
+.card {
+  background: var(--turbo-bg-surface);
+  border: 1px solid var(--turbo-border-default);
+  border-radius: var(--radius-xl);
+  padding: var(--space-xl);
+  transition: all var(--transition-normal);
+}
+
+.card:hover {
+  transform: translateY(-4px);
+  box-shadow: var(--shadow-xl);
+  border-color: color-mix(
+    in srgb,
+    var(--turbo-brand-primary) 30%,
+    var(--turbo-border-default)
+  );
+}
+
+.card-header {
+  margin-bottom: var(--space-md);
+  padding-bottom: var(--space-md);
+  border-bottom: 1px solid var(--turbo-border-default);
+}
+
+.card-title {
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin: 0;
+}
+
+.card-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 48px;
+  height: 48px;
+  margin-bottom: var(--space-md);
+  color: var(--turbo-brand-primary);
+  background: color-mix(in srgb, var(--turbo-brand-primary) 10%, transparent);
+  border-radius: var(--radius-lg);
+}
+
+.card-icon svg {
+  width: 24px;
+  height: 24px;
+}
+
+.card-body {
+  color: var(--turbo-text-secondary);
+}
+
+.card-footer {
+  margin-top: var(--space-md);
+  padding-top: var(--space-md);
+  border-top: 1px solid var(--turbo-border-default);
+}
+
+/* Featured card with gradient border */
+.card-featured {
+  position: relative;
+  background: var(--turbo-bg-surface);
+  border: none;
+}
+
+.card-featured::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  padding: 2px;
+  background: var(--gradient-primary);
+  border-radius: var(--radius-xl);
+  -webkit-mask:
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
+  mask:
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+  pointer-events: none;
+}
+
+/* Colored card variants with gradient borders */
+.card-primary,
+.card-info,
+.card-success,
+.card-warning,
+.card-danger {
+  position: relative;
+  background: var(--turbo-bg-surface);
+  border: none;
+}
+
+.card-primary::before,
+.card-info::before,
+.card-success::before,
+.card-warning::before,
+.card-danger::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  padding: 2px;
+  border-radius: var(--radius-xl);
+  -webkit-mask:
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
+  mask:
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+  pointer-events: none;
+}
+
+.card-primary::before {
+  background: linear-gradient(
+    135deg,
+    var(--turbo-brand-primary),
+    color-mix(in srgb, var(--turbo-brand-primary) 60%, var(--turbo-state-info))
+  );
+}
+
+.card-info::before {
+  background: linear-gradient(
+    135deg,
+    var(--turbo-state-info),
+    color-mix(in srgb, var(--turbo-state-info) 60%, var(--turbo-brand-primary))
+  );
+}
+
+.card-success::before {
+  background: linear-gradient(
+    135deg,
+    var(--turbo-state-success),
+    color-mix(in srgb, var(--turbo-state-success) 60%, var(--turbo-state-info))
+  );
+}
+
+.card-warning::before {
+  background: linear-gradient(
+    135deg,
+    var(--turbo-state-warning),
+    color-mix(in srgb, var(--turbo-state-warning) 60%, var(--turbo-state-danger))
+  );
+}
+
+.card-danger::before {
+  background: linear-gradient(
+    135deg,
+    var(--turbo-state-danger),
+    color-mix(in srgb, var(--turbo-state-danger) 60%, var(--turbo-state-warning))
+  );
+}

package/packages/css/dist/components/forms.css

@@ -0,0 +1,109 @@
+/* ==========================================================================
+   Turbo Themes - Forms
+   ========================================================================== */
+
+.form-group {
+  margin-bottom: var(--space-lg);
+}
+
+.form-label {
+  display: block;
+  margin-bottom: var(--space-sm);
+  font-weight: 500;
+  color: var(--turbo-text-primary);
+}
+
+.form-input,
+.form-textarea,
+.form-select {
+  width: 100%;
+  padding: var(--space-md) var(--space-lg);
+  font-size: 1rem;
+  font-family: inherit;
+  color: var(--turbo-text-primary);
+  background: var(--turbo-bg-surface);
+  border: 2px solid var(--turbo-border-default);
+  border-radius: var(--radius-lg);
+  transition: all var(--transition-fast);
+}
+
+.form-input:focus,
+.form-textarea:focus,
+.form-select:focus {
+  outline: none;
+  border-color: var(--turbo-brand-primary);
+  box-shadow: var(--shadow-glow-sm);
+}
+
+.form-input::placeholder,
+.form-textarea::placeholder {
+  color: var(--turbo-text-secondary);
+  opacity: 0.7;
+}
+
+.form-input:disabled,
+.form-textarea:disabled,
+.form-select:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Validation states */
+.form-input.is-success,
+.form-input.is-valid {
+  border-color: var(--turbo-state-success);
+}
+
+.form-input.is-danger,
+.form-input.is-invalid {
+  border-color: var(--turbo-state-danger);
+}
+
+.form-help {
+  font-size: 0.875rem;
+  margin-top: var(--space-sm);
+  color: var(--turbo-text-secondary);
+}
+
+.form-help.text-success {
+  color: var(--turbo-state-success);
+}
+
+.form-help.text-danger {
+  color: var(--turbo-state-danger);
+}
+
+/* Checkbox & Radio */
+.checkbox-label,
+.radio-label {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  cursor: pointer;
+  font-weight: normal;
+}
+
+.form-checkbox,
+.form-radio {
+  width: 1.25rem;
+  height: 1.25rem;
+  accent-color: var(--turbo-brand-primary);
+  cursor: pointer;
+}
+
+/* Form inline */
+.form-inline {
+  display: flex;
+  gap: var(--space-sm);
+}
+
+.form-inline .form-input {
+  flex: 1;
+}
+
+/* Form row for side-by-side fields */
+.form-row {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: var(--space-md);
+}

package/packages/css/dist/components/navigation.css

@@ -0,0 +1,175 @@
+/* ==========================================================================
+   Turbo Themes - Breadcrumb
+   ========================================================================== */
+
+.breadcrumb {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--space-sm);
+  font-size: 0.875rem;
+  color: var(--turbo-text-secondary);
+}
+
+.breadcrumb-item {
+  display: inline-flex;
+  align-items: center;
+}
+
+.breadcrumb-item a {
+  color: var(--turbo-text-secondary);
+  text-decoration: none;
+  transition: color var(--transition-fast);
+}
+
+.breadcrumb-item a:hover {
+  color: var(--turbo-brand-primary);
+}
+
+.breadcrumb-item:not(:last-child)::after {
+  content: '/';
+  margin-left: var(--space-sm);
+  color: var(--turbo-text-secondary);
+  opacity: 0.5;
+}
+
+.breadcrumb-item.active {
+  color: var(--turbo-text-primary);
+}
+
+/* ==========================================================================
+   Panel (sidebar navigation)
+   ========================================================================== */
+
+.panel {
+  background: var(--turbo-bg-surface);
+  border: 1px solid var(--turbo-border-default);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+}
+
+.panel-heading {
+  padding: var(--space-md) var(--space-lg);
+  font-weight: 600;
+  background: var(--turbo-bg-overlay);
+  border-bottom: 1px solid var(--turbo-border-default);
+  margin: 0;
+}
+
+.panel-item {
+  display: block;
+  padding: var(--space-md) var(--space-lg);
+  color: var(--turbo-text-secondary);
+  text-decoration: none;
+  border-bottom: 1px solid var(--turbo-border-default);
+  transition: all var(--transition-fast);
+}
+
+.panel-item:last-child {
+  border-bottom: none;
+}
+
+.panel-item:hover {
+  background: color-mix(in srgb, var(--turbo-brand-primary) 10%, transparent);
+  color: var(--turbo-text-primary);
+}
+
+.panel-item.active {
+  background: color-mix(in srgb, var(--turbo-brand-primary) 15%, transparent);
+  color: var(--turbo-brand-primary);
+}
+
+/* ==========================================================================
+   Navbar
+   ========================================================================== */
+
+.navbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--space-md) var(--space-lg);
+  background: var(--turbo-bg-surface);
+  border-bottom: 1px solid var(--turbo-border-default);
+}
+
+.navbar-brand {
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: var(--turbo-text-primary);
+  text-decoration: none;
+}
+
+.navbar-menu {
+  display: flex;
+  align-items: center;
+  gap: var(--space-lg);
+}
+
+.navbar-item {
+  color: var(--turbo-text-secondary);
+  text-decoration: none;
+  font-weight: 500;
+  transition: color var(--transition-fast);
+}
+
+.navbar-item:hover {
+  color: var(--turbo-text-primary);
+}
+
+.navbar-item.active {
+  color: var(--turbo-brand-primary);
+}
+
+/* ==========================================================================
+   Pagination
+   ========================================================================== */
+
+.pagination {
+  display: flex;
+  align-items: center;
+  gap: var(--space-xs);
+}
+
+.pagination-item {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 2.5rem;
+  height: 2.5rem;
+  padding: 0 var(--space-sm);
+  color: var(--turbo-text-secondary);
+  background: var(--turbo-bg-surface);
+  border: 1px solid var(--turbo-border-default);
+  border-radius: var(--radius-md);
+  text-decoration: none;
+  font-weight: 500;
+  transition: all var(--transition-fast);
+}
+
+.pagination-item:hover:not(:disabled):not(.disabled) {
+  background: var(--turbo-bg-overlay);
+  border-color: var(--turbo-brand-primary);
+  color: var(--turbo-text-primary);
+}
+
+.pagination-item:focus-visible {
+  outline: 2px solid var(--turbo-brand-primary);
+  outline-offset: 2px;
+}
+
+.pagination-item.active {
+  background: var(--turbo-brand-primary);
+  border-color: var(--turbo-brand-primary);
+  color: var(--turbo-text-inverse);
+}
+
+.pagination-item:disabled,
+.pagination-item.disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.pagination-prev,
+.pagination-next {
+  font-size: 1.25rem;
+}

package/packages/css/dist/components/notifications.css

@@ -0,0 +1,192 @@
+/* ==========================================================================
+   Turbo Themes - Notifications / Alerts
+   ========================================================================== */
+
+.notification {
+  padding: var(--space-lg);
+  border-radius: var(--radius-lg);
+  border-left: 4px solid var(--turbo-brand-primary);
+  background: color-mix(
+    in srgb,
+    var(--turbo-brand-primary) 10%,
+    var(--turbo-bg-surface)
+  );
+}
+
+.notification-success {
+  border-left-color: var(--turbo-state-success);
+  background: color-mix(
+    in srgb,
+    var(--turbo-state-success) 10%,
+    var(--turbo-bg-surface)
+  );
+}
+
+.notification-warning {
+  border-left-color: var(--turbo-state-warning);
+  background: color-mix(
+    in srgb,
+    var(--turbo-state-warning) 10%,
+    var(--turbo-bg-surface)
+  );
+}
+
+.notification-danger {
+  border-left-color: var(--turbo-state-danger);
+  background: color-mix(
+    in srgb,
+    var(--turbo-state-danger) 10%,
+    var(--turbo-bg-surface)
+  );
+}
+
+.notification-info {
+  border-left-color: var(--turbo-state-info);
+  background: color-mix(in srgb, var(--turbo-state-info) 10%, var(--turbo-bg-surface));
+}
+
+/* ==========================================================================
+   Messages (with header/body structure)
+   ========================================================================== */
+
+.message {
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  border: 1px solid var(--turbo-border-default);
+  background: var(--turbo-bg-surface);
+}
+
+.message-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--space-md) var(--space-lg);
+  font-weight: 600;
+  background: var(--turbo-bg-overlay);
+}
+
+.message-header p {
+  margin: 0;
+}
+
+.message-body {
+  padding: var(--space-lg);
+  color: var(--turbo-text-secondary);
+}
+
+/* Color variants */
+.message-primary .message-header {
+  background: color-mix(
+    in srgb,
+    var(--turbo-brand-primary) 20%,
+    var(--turbo-bg-surface)
+  );
+  color: var(--turbo-brand-primary);
+}
+
+.message-info .message-header {
+  background: color-mix(in srgb, var(--turbo-state-info) 20%, var(--turbo-bg-surface));
+  color: var(--turbo-state-info);
+}
+
+.message-success .message-header {
+  background: color-mix(
+    in srgb,
+    var(--turbo-state-success) 20%,
+    var(--turbo-bg-surface)
+  );
+  color: var(--turbo-state-success);
+}
+
+.message-warning .message-header {
+  background: color-mix(
+    in srgb,
+    var(--turbo-state-warning) 20%,
+    var(--turbo-bg-surface)
+  );
+  color: var(--turbo-state-warning);
+}
+
+.message-danger .message-header {
+  background: color-mix(
+    in srgb,
+    var(--turbo-state-danger) 20%,
+    var(--turbo-bg-surface)
+  );
+  color: var(--turbo-state-danger);
+}
+
+/* ==========================================================================
+   Alert (inline variant)
+   ========================================================================== */
+
+.alert {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-md);
+  padding: var(--space-md) var(--space-lg);
+  border-radius: var(--radius-lg);
+  background: var(--turbo-bg-overlay);
+  border: 1px solid var(--turbo-border-default);
+}
+
+.alert-icon {
+  flex-shrink: 0;
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.alert-content {
+  flex: 1;
+}
+
+.alert-title {
+  font-weight: 600;
+  margin-bottom: var(--space-xs);
+}
+
+.alert-description {
+  color: var(--turbo-text-secondary);
+  font-size: 0.875rem;
+}
+
+.alert-primary {
+  background: color-mix(
+    in srgb,
+    var(--turbo-brand-primary) 10%,
+    var(--turbo-bg-surface)
+  );
+  border-color: var(--turbo-brand-primary);
+}
+
+.alert-success {
+  background: color-mix(
+    in srgb,
+    var(--turbo-state-success) 10%,
+    var(--turbo-bg-surface)
+  );
+  border-color: var(--turbo-state-success);
+}
+
+.alert-warning {
+  background: color-mix(
+    in srgb,
+    var(--turbo-state-warning) 10%,
+    var(--turbo-bg-surface)
+  );
+  border-color: var(--turbo-state-warning);
+}
+
+.alert-danger {
+  background: color-mix(
+    in srgb,
+    var(--turbo-state-danger) 10%,
+    var(--turbo-bg-surface)
+  );
+  border-color: var(--turbo-state-danger);
+}
+
+.alert-info {
+  background: color-mix(in srgb, var(--turbo-state-info) 10%, var(--turbo-bg-surface));
+  border-color: var(--turbo-state-info);
+}