@tacc/core-styles 2.14.0 → 2.16.0

package/src/lib/_imports/components/c-form.css

@@ -1,10 +1,11 @@
+@import url("../tools/selectors.form.css");
 @import url("../components/c-button.css");
 
 
 
 /* Title & Description */
 
-.c-form__desc {
+:--form__desc {
   margin-block: 25px;
 }
 
@@ -12,100 +13,90 @@
 
 /* Help Text */
 
-.c-form__help {
+:--form__help {
+  display: block; /* FAQ: An inline element tag may be used */
+  margin-top: 0.3em; /* mimic Bootstrap _reboot.css label margin-bottom */
+
   font-size: var(--global-font-size--small);
   font-style: italic;
 }
-:not(
-  ul, /* FAQ: Lists already have margin-bottom */
-  label /* FAQ: Labels already have margin-bottom */
-) + .c-form__help {
-    margin-top: 0.3em; /* mimic Bootstrap _reboot.css label margin-bottom */
-}
 /* To prevent help text font-style from affecting any tags */
 /* FAQ: Help text can contain inline elements like <samp> */
 /* FAQ: Help text can be (ab)used to add headings between form fields */
-.c-form__help > :not(details, a, samp) {
+:--form__help > :where(:not(details, a, samp)) {
   font-style: initial;
 }
 
 
 
 /* Fields */
-/* TODO: Make fieldset-child <div>s be opt-out automatic field-wrappers.
-    0. [ ] Define `fieldset > div { @extend .c-form__field; }` ruleset.
-    1. [ ] Create `.c-form--no-auto-wrappers`.
-    2. [ ] Define `.c-form:not(.c-form--no-auto-wrappers) fieldset > div` rules.
+/* IDEA: Make fieldset-child <div>s be opt-out automatic field-wrappers.
+    0. [ ] Define `fieldset > div { @extend :--form__field; }` ruleset.
+    1. [ ] Create `:--form--no-auto-wrappers`.
+    2. [ ] Define `:--form:where(:not(:--form--no-auto-wrappers)) fieldset > div` rules.
 */
 
-.c-form__field {
+:--form__field {
   margin-bottom: 2rem; /* mimic <p> `margin-bottom` */
 }
 
-.c-form__field:not(.has-type-check) {
-  display: flex;
-  flex-direction: column;
-}
-.c-form__field:not(.has-type-check) > .c-form__errors {
-  order: 1; /* i.e. move to end */
-}
-
-.c-form__field.has-type-check {
+:--form__field--has-checkbox {
   display: inline-grid;
 
   column-gap: 0.5em;
   align-items: center;
   grid-template-columns: min-content auto; /* shrink input, let label extend */
   grid-template-areas:
-    'error _____'
     'input label'
+    'error error'
     'notes notes';
 }
-.c-form__field.has-type-check .c-form__errors { grid-area: error; }
-.c-form__field.has-type-check input           { grid-area: input; }
-.c-form__field.has-type-check label           { grid-area: label; }
-.c-form__field.has-type-check .c-form__help   { grid-area: notes; }
-.c-form__field.has-type-check label {
+:--form__field--has-checkbox :--form__errors { grid-area: error; }
+:--form__field--has-checkbox input           { grid-area: input; }
+:--form__field--has-checkbox label           { grid-area: label; }
+:--form__field--has-checkbox :--form__help   { grid-area: notes; }
+:--form__field--has-checkbox label {
   margin-bottom: 0; /* overwrite forms.css label */
 }
 
-.c-form__field > ul:where(:not(.c-form__errors)) label {
+:--form__menu label {
   display: flex;
   gap: 0.5em;
   align-items: center;
   font-weight: revert; /* undo html-elements.cms.css */
 }
-.c-form__field > ul:where(:not(.c-form__errors)) li:last-child label {
+:--form__menu li:last-child label {
   margin-bottom: 0; /* overwrite forms.css label */
 }
 
 /* Field: Required, Asterisk, Important */
 
-.c-form__field .c-form__star {
+:--form__badge {
   margin-left: 0.5em;
 }
-.c-form__field.has-required .c-form__star {
+:--form__badge:where(:--form__field--has-required *) {
   color: var(--global-color-danger--dark);
 }
-.c-form__field:not(.has-required) .c-form__star
+:--form__badge:where(:not(:--form__field--has-required *))
 /* NOTE: Manual markup ONLY; form plugin can't render non-required asterisk */ {
   color: var(--global-color-warning--dark);
 }
 /* To replace asterisk character with text */
-.c-form__field .c-form__star {
-  width: 0;
+:--form__badge {
   display: inline-block;
   visibility: hidden;
   line-height: 0;
+  font-size: 0;
 }
-.c-form__field .c-form__star::after {
+:--form__badge::after {
   visibility: visible;
   line-height: initial;
+  font-size: var(--global-font-size--small); /* mimic elements/form.css label */
 }
-.c-form__field.has-required .c-form__star::after {
+:--form__badge:where(:--form__field--has-required *)::after {
   content: '(required)';
 }
-.c-form__field:not(.has-required) .c-form__star::after
+:--form__badge:where(:not(:--form__field--has-required *))::after
 /* NOTE: Manual markup ONLY; form plugin can't render non-required asterisk */ {
   content: '(important)';
 }
@@ -114,23 +105,21 @@
 
 /* Errors */
 
-.c-form__field ul.c-form__errors {
+ul:--form__errors_list {
+  list-style: none;
+  padding-left: 0;
+}
+ul:--form__errors--field {
   margin-top: 1rem; /* mimic ul margin-bottom */
   margin-bottom: 0; /* overwrite ul margin-bottom */
 }
 
-ul.c-form__errors {
-  list-style: none;
-  padding-inline: 0;
-}
-
 
 
-/* Lists */
+/* Menus (Input Lists) */
 
-.c-form__field > ul:where(:not(.c-form__errors)) {
+:--form__menu {
   list-style: none;
-
   padding-left: 0;
 }
 
@@ -138,25 +127,33 @@ ul.c-form__errors {
 
 /* Buttons */
 
-.c-form__buttons {
-  margin-top: 35px;
-}
-
-/* To style obvious buttons that neglect class */
-.c-form__buttons button[type="submit"] {
+:--form__button {
   @extend :--c-button;
+}
+:--form__button[type="submit"] {
   @extend :--c-button--primary;
 }
+:--form__button[type="button"] {
+  @extend :--c-button--secondary;
+}
+:--form__button[type="reset"] {
+  @extend :--c-button--tertiary;
+}
 
-.c-form__button {
+:--form__buttons {
+  margin-top: 35px;
+}
+/* To style obvious buttons that neglect class */
+/* FAQ: I think I saw this on APCD… */
+:--form__buttons button:not(:--form__button) {
   @extend :--c-button;
 }
-.c-form__button[type="submit"] {
+:--form__buttons button:not(:--form__button)[type="submit"] {
   @extend :--c-button--primary;
 }
-.c-form__button:where(:not([type="submit"], [type="reset"])) {
+:--form__buttons button:not(:--form__button)[type="button"] {
   @extend :--c-button--secondary;
 }
-.c-form__button[type="reset"] {
+:--form__buttons button:not(:--form__button)[type="reset"] {
   @extend :--c-button--tertiary;
 }

package/src/lib/_imports/components/c-form.selectors.css

@@ -0,0 +1,46 @@
+@custom-selector :--c-form
+    .c-form;
+
+/* Generic */
+
+@custom-selector :--c-form__title
+    .c-form__title;
+@custom-selector :--c-form__desc
+    .c-form__desc;
+
+@custom-selector :--c-form__errors
+    .c-form__errors;
+@custom-selector :--c-form__errors_list
+    :--c-form__errors;
+@custom-selector :--c-form__errors--form /* submission errors */
+    :where(.c-form > .c-form__errors);
+@custom-selector :--c-form__errors--field /* validation errors */
+    :where(.c-form__field .c-form__errors);
+
+@custom-selector :--c-form__field
+    .c-form__field;
+@custom-selector :--c-form__field--has-required
+    :--c-form__field.has-required;
+@custom-selector :--c-form__field--has-checkbox
+    :--c-form__field.has-type-check;
+
+@custom-selector :--c-form__menu
+    .c-form__field > :where(ul:not(.c-form__errors), menu);
+
+@custom-selector :--c-form__help
+    .c-form__help;
+
+@custom-selector :--c-form__badge
+    .c-form__star;
+
+@custom-selector :--c-form__buttons
+    .c-form__buttons;
+@custom-selector :--c-form__button
+    .c-form__button;
+
+/* Login */
+
+@custom-selector :--c-form--login
+    .c-form--login;
+@custom-selector :--c-form__nav
+    .c-form__nav;

package/src/lib/_imports/components/django-cms-forms/config.yml

@@ -1,6 +1,38 @@
+label: Django CMS Forms
+status: ready
 context:
   shouldLoadCMS: true
   📝 shouldLoadCMS: because this is demo but this is CMS pattern
-  shouldSkipPattern: false
-  📝 shouldSkipPattern: because core-styles.….css does not import this
-label: Django CMS Forms
+  markup:
+    wrap_start: |2
+      <div class="forms">
+        <h3 class="title">(Optional) Title of Form</h3>
+        <div class="description">(Optional) Description of the form.</div>
+        <div class="form-wrapper">
+          <form action="" method="POST" enctype="multipart/form-data">
+    wrap_end: |2
+          </form>
+        </div>
+      </div>
+  errorLoc: top
+  helpTextTag: div
+  inputListTag: ul
+  selectors:
+    errorList: .form-errors, .field-errors
+    wrap: .field-wrapper
+  classNames:
+    title: title
+    desc: description
+    errors: errorlist
+    form_errors_wrap: form-errors
+    field_errors_wrap: field-errors
+    field: field-wrapper
+    badge: asterisk
+    hint: help-text
+    has_required: required
+    has_checkbox: checkboxinput
+    has_spam_filter: recaptchav2checkbox
+    radio_menu: radioselect
+    check_menu: checkboxselectmultiple
+    buttons: button-wrapper
+    button: form-button