cards fixes

src/pages/_includes/ui/form/input-icon.html

@@ -16,7 +16,7 @@
 		{{ addon }}
 	{% endif %}
 
-	<input type="text" class="form-control{% if include.light %} form-control-light{% endif %}{% if include.rounded %} form-control-rounded{% endif %}{% if include.dark %} form-control-dark{% endif %}{% if include.input-class %} {{ include.input-class }}{% endif %}" placeholder="{{ include.placeholder | default: 'Search…' }}"{% if include['aria-label'] %} aria-label="{{ include['aria-label'] }}"{% endif %}>
+	<input type="text" value="{{ include.value }}" class="form-control{% if include.light %} form-control-light{% endif %}{% if include.rounded %} form-control-rounded{% endif %}{% if include.dark %} form-control-dark{% endif %}{% if include.input-class %} {{ include.input-class }}{% endif %}" placeholder="{{ include.placeholder | default: 'Search…' }}"{% if include['aria-label'] %} aria-label="{{ include['aria-label'] }}"{% endif %}{% if include.readonly %} readonly{% endif %}>
 
 	{% unless include.prepend %}
 		{{ addon }}

src/pages/form-elements.html

@@ -42,6 +42,40 @@ libs: nouislider, autosize, tabler-flags, tabler-payments, litepicker, tom-selec
 		</form>
 	</div>
 
+	<div class="col-md-6">
+		<div class="card">
+			<div class="card-body">
+				<h3 class="card-title">Project ID</h3>
+				<p class="card-subtitle">Used when interacting with the API.</p>
+				{% include ui/form/input-icon.html icon="files" value="prj_5ae74426fe935327a8fa178b07d84ad9" readonly=true %}
+			</div>
+			<div class="card-footer">
+				<div class="row align-items-center">
+					<div class="col">Learn more about <a href="#">Project ID</a></div>
+					<div class="col-auto">
+						{% include ui/button.html text="Save" color="primary" %}
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<div class="col-md-6">
+		<div class="card">
+			<div class="card-body">
+				<h3 class="card-title">Node.js Version</h3>
+				<p class="card-subtitle">The version of Node.js that is used in the Build Step and for Serverless Functions. A new Deployment is required for your changes to take effect.</p>
+				<select class="form-select">
+					<option>14.x</option>
+					<option>12.x</option>
+				</select>
+			</div>
+			<div class="card-footer">
+				Learn more about <a href="#">Node.js Version</a>
+			</div>
+		</div>
+	</div>
+
 	<div class="col-md-6">
 		{% include cards/form/layout.html %}
 	</div>

src/scss/_variables.scss

@@ -85,7 +85,7 @@ $border-light-opacity: .08 !default;
 $border-dark-opacity: .24 !default;
 $border-active-opacity: .48 !default;
 
-$gray-50: #f8fafc !default;
+$gray-50: #fafbfc !default;
 $gray-100: #f1f5f9 !default;
 $gray-200: #e2e8f0 !default;
 $gray-300: #cbd5e1 !default;
@@ -365,12 +365,13 @@ $card-border-width: $border-width !default;
 $card-border-color: $border-color-transparent !default;
 $card-border-radius: $border-radius !default;
 
-$card-cap-bg: $white !default;
-$card-cap-color: $text-muted !default;
-$card-cap-padding-x: 1rem !default;
-$card-cap-padding-y: .75rem !default;
+$card-spacer-x: 1.25rem !default;
+$card-spacer-y: 1rem !default;
 
-$card-spacer-x: 1rem !default;
+$card-cap-bg: $gray-50 !default;
+$card-cap-color: $text-muted !default;
+$card-cap-padding-x: $card-spacer-x !default;
+$card-cap-padding-y: $card-spacer-y !default;
 
 $card-status-size: $border-width-wide !default;
 $card-group-margin: 1.5rem !default;
@@ -563,7 +564,7 @@ $list-group-action-color: inherit !default;
 $list-group-bg: inherit !default;
 
 $input-bg: $white !default;
-$input-disabled-bg: $gray-100 !default;
+$input-disabled-bg: $gray-50 !default;
 $input-border-color: $border-color-dark !default;
 $input-border-color-transparent: $border-color-dark-transparent !default;
 $input-placeholder-color: $text-muted-light !default;
@@ -593,7 +594,7 @@ $form-check-input-checked-border-color: $input-border-color-transparent !default
 
 $form-check-label-disabled-opacity: $text-muted-opacity;
 
-$form-select-indicator-color: $border-color-dark !default;
+$form-select-indicator-color: $text-muted-light !default;
 
 $form-switch-width: 2rem !default;
 $form-switch-height: 1.125rem !default;

src/scss/ui/_cards.scss

-.border-0 {
-  .card, .nav-link {
-    border: 0 !important;
-  }
-
-  .card-stacked::after {
-    border: 1px solid rgba($text-muted, 0.07) !important;
-  }
-}
-
 .card {
   box-shadow: $card-shadow;
   border: $card-border-width solid $card-border-color;
@@ -223,7 +213,7 @@ Card footer
 }
 
 .card-subtitle {
-  margin-top: -$card-spacer-y;
+  margin-top: divide(-$card-spacer-y, 2);
   margin-bottom: $card-title-spacer-y;
   color: $text-muted;
 
@@ -511,3 +501,14 @@ Card tabs
     border-top-left-radius: 0;
   }
 }
+
+// Border-0 card
+.border-0 {
+  .card, .nav-link {
+    border: 0 !important;
+  }
+
+  .card-stacked::after {
+    border: 1px solid rgba($text-muted, 0.07) !important;
+  }
+}
\ No newline at end of file

src/scss/ui/_forms.scss

@@ -129,7 +129,7 @@ Form control
 .form-fieldset {
   padding: 1rem;
   margin-bottom: 1rem;
-  background: var(--#{$variable-prefix}border-color-light);
+  background: var(--#{$variable-prefix}body-bg);
   border: 1px solid var(--#{$variable-prefix}border-color);
   border-radius: $border-radius;
 }
@@ -150,7 +150,7 @@ Form help
   text-decoration: none;
   cursor: pointer;
   user-select: none;
-  background: $gray-100;
+  background: var(--tblr-border-color-light);
   border-radius: $border-radius-pill;
   @include transition(background-color $transition-time, color $transition-time);