feat: update core-styles from v2.11 to v2.22

package.json

@@ -11,7 +11,7 @@
   "dependencies": {
     "@frctl/fractal": "^1.5.14",
     "@frctl/mandelbrot": "^1.10.1",
-    "@tacc/core-styles": "^2.11.0",
+    "@tacc/core-styles": "^2.22.2",
     "minimist": "^1.2.6"
   },
   "repository": "[email protected]:TACC/Core-CMS.git",

taccsite_cms/static/site_cms/css/src/_imports/components/c-button.css

@@ -1,16 +1,20 @@
 @import url("@tacc/core-styles/src/lib/_imports/components/c-button.selectors.css");
+@import url("@tacc/core-styles/src/lib/_imports/tools/selectors.form.css");
 
-:--c-button--primary,
-:--c-button--secondary,
-:--c-button--tertiary,
-:--c-button--is-active {
-  padding: 10px 20px;
 
-  font-size: var(--global-font-size--small);
-  text-transform: uppercase;
+:--main-content {
+  & :--c-button,
+  & :--form__button {
+    padding: 10px 20px;
+
+    font-size: var(--global-font-size--small);
+
+    font-weight: var(--bold);
+    letter-spacing: 0.05em;
+  }
 }
 
-:--c-button {
-  font-weight: var(--bold);
-  letter-spacing: 0.05em;
+:--c-button,
+:--form__button {
+  text-transform: uppercase;
 }

taccsite_cms/static/site_cms/css/src/_imports/components/django-cms-forms.css

@@ -1,174 +1 @@
-@import url("@tacc/core-styles/src/lib/_imports/components/c-button.css");
-
-@import url("./django-cms-forms.hacks.css");
-@import url("./django-cms-forms--errors-via-c-message.css");
-
-
-
-/* Title & Description */
-
-.description {
-  margin-block: 25px;
-}
-
-
-
-/* Help Text */
-
-.help-text {
-  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 */
-) + .help-text {
-    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 */
-.help-text > :not(details, a, samp) {
-  font-style: initial;
-}
-
-
-
-/* Fields */
-
-.field-wrapper {
-  margin-bottom: 2rem; /* mimic <p> `margin-bottom` */
-}
-
-.field-wrapper:not(.checkboxinput) {
-  display: flex;
-  flex-direction: column;
-}
-.field-wrapper:not(.checkboxinput) > .field-errors {
-  order: 1; /* i.e. move to end */
-}
-
-.field-wrapper.checkboxinput {
-  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'
-    'notes notes';
-}
-.field-wrapper.checkboxinput .field-errors { grid-area: error; }
-.field-wrapper.checkboxinput input         { grid-area: input; }
-.field-wrapper.checkboxinput label         { grid-area: label; }
-.field-wrapper.checkboxinput .help-text    { grid-area: notes; }
-.field-wrapper.checkboxinput label {
-  margin-bottom: 0; /* overwrite forms.css label */
-}
-
-ul.radioselect label,
-ul.checkboxselectmultiple label {
-  display: flex;
-  gap: 0.5em;
-  align-items: center;
-  font-weight: revert; /* undo html-elements.cms.css */
-}
-ul.radioselect li:last-child label,
-ul.checkboxselectmultiple li:last-child label {
-  margin-bottom: 0; /* overwrite forms.css label */
-}
-
-/* Field: Required, Asterisk, Important */
-
-.field-wrapper .asterisk {
-  margin-left: 0.5em;
-}
-.field-wrapper.required .asterisk {
-  color: var(--global-color-danger--dark);
-}
-.field-wrapper:not(.required) .asterisk
-/* NOTE: Manual markup ONLY; form plugin can't render non-required asterisk */ {
-  color: var(--global-color-warning--dark);
-}
-/* To replace asterisk character with text */
-.field-wrapper .asterisk {
-  width: 0;
-  display: inline-block;
-  visibility: hidden;
-  line-height: 0;
-}
-.field-wrapper .asterisk::after {
-  visibility: visible;
-  line-height: initial;
-}
-.field-wrapper.required .asterisk::after {
-  content: '(required)';
-}
-.field-wrapper:not(.required) .asterisk::after
-/* NOTE: Manual markup ONLY; form plugin can't render non-required asterisk */ {
-  content: '(important)';
-}
-
-
-
-/* Errors */
-
-.field-errors ul {
-  margin-top: 1rem; /* mimic ul margin-bottom */
-}
-.form-errors ul,
-.field-errors ul {
-  margin-bottom: 0; /* overwrite ul margin-bottom */
-}
-.form-errors {
-  margin-bottom: 1rem; /* mimic ul margin-bottom */
-}
-
-.form-errors ul,
-.field-errors ul {
-  list-style: none;
-  padding-inline: 0;
-}
-
-
-
-/* Lists */
-
-ul.radioselect,
-ul.checkboxselectmultiple {
-  list-style: none;
-
-  padding-left: 0;
-}
-
-
-
-/* Layout */
-
-.button-wrapper {
-  margin-top: 35px;
-}
-
-
-
-/* Button */
-
-/* To style obvious buttons that neglect class */
-.button-wrapper button[type="submit"] {
-  @extend :--c-button;
-  @extend :--c-button--primary;
-}
-
-.form-button {
-  @extend :--c-button;
-}
-.form-button[type="submit"] {
-  @extend :--c-button--primary;
-}
-.form-button:where(:not([type="submit"], [type="reset"])) {
-  @extend :--c-button--secondary;
-}
-.form-button[type="reset"] {
-  @extend :--c-button--tertiary;
-}
+@import url("@tacc/core-styles/dist/components/django-cms-forms.css");