@muziehdesign/components 18.2.0-next.2053 → 18.2.0-next.2087

package/design/_form.scss

@@ -1,3 +1,45 @@
+@use "mixins" as *;
+
+
+.form-input, .form-textarea, .form-select {
+    @include field-control();
+
+    &:focus {
+        @include field-control-focused();
+    }
+}
+
+.input-group {
+    @apply flex gap-2 items-center;
+    @include field-control();
+
+    &:focus-within {
+        @include field-control-focused();
+    }
+
+    .form-input {
+        @apply grow;
+    }
+
+    .form-input, .form-input:focus, .form-select, .form-select:focus, .button, .button:focus {
+        border-color: transparent;
+        --tw-ring-color: transparent;
+        --tw-ring-offset-width: 0px;
+    }
+
+    & > *:first-child {
+        @apply pl-3;
+    }
+
+    & > *:last-child {
+        @apply pr-3;
+    }
+}
+
+.checkbox-label {
+    @apply ml-2 text-base;
+}
+
 .form {
     @apply max-w-md;
 
@@ -16,7 +58,7 @@
     }
 
     .description {
-        @apply text-gray-600 text-sm;
+        @apply text-subtler text-sm;
     }
 
     .footer {
@@ -25,45 +67,36 @@
 }
 
 .field {
-    @apply block py-1 text-sm;
+    @apply block py-3 text-sm;
 
     .help-text {
-        @apply text-gray-500 block mt-1;
+        @apply text-subtler block mt-1;
     }
 }
 
-.field-label {
-    @apply text-gray-600 font-medium;
+.option-list .field {
+    @apply py-1;
 }
 
-.field-checkbox {
-    @apply flex items-center;
-
-    .field-label {
-        @apply text-current font-normal pl-2 text-base;
-    }
+.field-label {
+    @apply text-subtle font-medium block mb-1;
 }
 
-.field-control:not([type='checkbox']) {
-    @apply mt-1 block w-full;
+.form-input,
+.form-select,
+.form-textarea {
+    @apply w-full;
 }
 
 .fieldset {
     @apply mt-6;
 
     legend {
-        @apply text-gray-700 tracking-wide uppercase font-medium text-sm;
-    }
-}
-
-.option-list {
-    @apply block py-1;
-
-    legend {
-        @apply text-gray-600 text-sm font-medium;
+        @apply text-subtle tracking-wide uppercase font-medium text-sm;
     }
 }
 
+// code below needs to be validated again
 .form-message {
     @apply p-1 block;
 
@@ -89,91 +122,3 @@
         @apply border-danger;
     }
 }
-
-/*
-.field-control-addon {
-    @apply px-3 inline-flex flex-col flex-shrink-0 items-center justify-center text-secondary;
-
-    &.field-control {
-        @apply w-full;
-    }
-
-    .button {
-        @apply py-1 h-full -ml-2.5 -mr-3;
-    }
-}
-
-.field-control-group {
-    @apply flex items-stretch h-full border border-gray-500 shadow;
-
-    .field-control {
-        @apply grow m-0 border-transparent outline-0;
-    }
-
-    /*
-    .field-control:focus {
-        @apply border border-primary;
-    }
-
-    &:focus-within {
-        @apply border-primary outline-2 outline outline-offset-2;
-    }
-
-    &.invalid {
-        @apply border-danger;
-    }
-
-    .ng-submitted .field-control.ng-invalid, .field-control.ng-touched.ng-invalid {
-        @apply border-0;
-    }
-}*/
-
-
-.field-control-addon {
-    @apply inline-flex flex-col flex-shrink-0 items-center justify-center text-secondary px-3;
-
-    &.field-control {
-        @apply w-full;
-    }
-
-    .button {
-        @apply py-1 h-full -mr-3;
-    }
-}
-
-.field-control-group {
-    @apply flex items-stretch h-full border border-gray-500 shadow;
-
-    .field-control {
-        box-shadow: none;
-        @apply grow m-0 border-0 outline-0;
-    }
-
-    &:focus-within {
-        @apply outline outline-1 outline-primary;
-    }
-
-    &.invalid:not(:focus-within) {
-        @apply border-danger;
-    }
-
-    > *:not(:first-child).field-control-addon {
-        @apply pl-0;
-    }
-
-    > *:not(:last-child).field-control-addon {
-        @apply pr-0;
-    }
-}
-
-.field-control-combo {
-    @apply flex items-stretch;
-
-    .field-control {
-        @apply grow border;
-    }
-
-    .button {
-        @apply -mx-2 mt-1;
-    }
-}

package/design/_mixins.scss

@@ -0,0 +1,17 @@
+@mixin field-control() {
+    border-radius: var(--input-border-radius, 0px);
+    border: 1px solid var(--input-border-color, --color-neutral-500);
+}
+
+@mixin field-control-focused() {
+    outline: 2px solid transparent;
+    outline-offset: 2px;
+    --tw-ring-inset: var(--tw-empty, /*!*/ /*!*/);
+    --tw-ring-offset-width: 0px;
+    --tw-ring-offset-color: #fff;
+    --tw-ring-color: var(--color-primary);
+    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    border-color: var(--color-primary);
+}

package/design/_utilities.scss

@@ -0,0 +1,13 @@
+@layer utilities {
+    .text-block {
+        max-width: var(--text-block-width, 90ch);
+    }
+
+    .text-subtle {
+        @apply text-gray-700;
+    }
+
+    .text-subtler {
+        @apply text-gray-600;
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@muziehdesign/components",
-  "version": "18.2.0-next.2053",
+  "version": "18.2.0-next.2087",
   "peerDependencies": {
     "@angular/common": "^18.1.1",
     "@angular/core": "^18.1.1",

package/design/_typography.scss

@@ -1,5 +0,0 @@
-@layer utilities {
-    .text-block {
-        max-width: var(--text-block-width, 90ch);
-    }
-}