ENH Prepare theme for adoption as a supported module

composer.json

@@ -1,5 +1,5 @@
 {
-  "name": "silverstripe-themes/startup",
+  "name": "silverstripe/startup-theme",
   "description": "Silverstripe Startup theme",
   "type": "silverstripe-theme",
   "keywords": [

css/accordion.css

@@ -0,0 +1,26 @@
+/**
+ * Accordion styles
+ * See also accordion.js
+ */
+
+.accordion__container {
+    display: grid;
+    grid-template-rows: 0fr;
+    transition: var(--transition-default);
+    visibility: hidden;
+    opacity: 0;
+}
+
+.accordion__item.is-active .accordion__container {
+    grid-template-rows: 1fr;
+    visibility: visible;
+    opacity: 100;
+}
+
+[data-accordion-flip] {
+    transition: var(--transition-default);
+}
+
+.accordion__item.is-active [data-accordion-flip] {
+    rotate: -180deg;
+}

css/base.css

@@ -4,6 +4,13 @@
  * Global styles and resets
  * Use with caution as these affect everything on the site
  */
+:root {
+    /* Set transition variables */
+    --transition-default: all 0.2s ease-in;
+    --transition-color: background-color 0.2s ease-in, border-color 0.2s ease-in, color 0.2s ease-in;
+    --transition-svg: fill 0.2s ease-in;
+}
+
 *,
 ::before,
 ::after {
@@ -54,12 +61,6 @@ button {
     text-transform: none;
 }
 
-dd,
-ol,
-ul {
-    list-style: none;
-}
-
 hr {
     height: 0;
     border: unset;
@@ -70,7 +71,6 @@ img {
     display: block;
     height: auto;
     max-width: 100%;
-    width: 100%;
 }
 
 small {

css/breadcrumbs.css

@@ -2,7 +2,15 @@
  * Breadcrumb styles
  */
 .breadcrumbs {
-    margin-bottom: 1.3rem;
+    dd,
+    ol,
+    ul {
+        list-style: none;
+    }
+
+    li {
+        margin-left: 0;
+    }
 }
 
 .breadcrumbs__list {

css/colors.css

@@ -11,4 +11,10 @@
     --color-pale-grey: #F4F4F4;
     --color-white: #FFFFFF;
     --color-white-70: #bdbdbd;
+    --color-error-dark: #CF0000;
+    --color-error-light: #f9d0d0;
+    --color-good-dark: #8fbe00;
+    --color-good-light: #ecf9d0;
+    --color-warning-dark: #e8c805;
+    --color-warning-light: #fef4ba;
 }

css/editor.css

@@ -5,7 +5,6 @@
 @import 'base.css';
 @import 'colors.css';
 @import 'typography.css';
-@import 'wysiwyg.css';
 
 /**
  * CMS TinyMCE editor field styles

css/footer.css

@@ -4,6 +4,16 @@
     color: var(--color-white);
     padding: 4.5rem 0;
     text-align: center;
+
+    dd,
+    ol,
+    ul {
+        list-style: none;
+    }
+
+    li {
+        margin-left: 0;
+    }
 }
 
 /* Logo */

css/form.css

@@ -0,0 +1,134 @@
+/** ----------------------------------------------------------
+ *
+ * This stylesheet includes both generic form styles and
+ *    additional form styles for the User Defined Form Module.
+ *
+ ** ------------------------------------------------------- */
+
+form {
+    --max-width: 100%;
+    /* important required to override userform module styling */
+    max-width: var(--max-width) !important;
+
+    @media (min-width: 750px) {
+        --max-width: 500px;
+    }
+
+    div.field {
+        margin: 0.667em 0 1em;
+    }
+
+    fieldset {
+        border: 0;
+    }
+
+    label.left {
+        font-weight: bold;
+    }
+
+    label.right {
+        font-size: 0.9em;
+    }
+
+    input.text,
+    textarea,
+    select {
+        width: 100%;
+        max-width: var(--max-width);
+        padding: 0.4em 0.333em;
+        font-size: 1.5rem;
+        background-color: var(--color-white);
+        border: 1px solid var(--color-line-grey);
+    }
+
+    input[disabled],
+    textarea[disabled],
+    select[disabled] {
+        background-color: var(--color-pale-grey);
+        border: 1px solid var(--color-line-grey);
+    }
+
+    textarea {
+        resize: vertical;
+    }
+
+    /* pseudo element adds an asterisk to a required fields label */
+    input[required] ~ label.left:after,
+    input[required] ~ legend.left:after,
+    /* user defined form uses .requiredField css class */
+    .requiredField label.left:after,
+    .requiredField legend.left:after {
+        color: var(--color-error-dark);
+        content: "*";
+        font-size: 0.8em;
+        font-weight: normal;
+        padding-left: 0.333em;
+    }
+
+    /* Radio and Checkbox */
+    .checkbox label.right,
+    .radio label.right {
+        float: left;
+    }
+
+    /* Buttons */
+    a.btn,
+    button,
+    input[type="submit"],
+    input[type="reset"],
+    .Actions .action {
+        display: inline-block;
+        border-radius: 4px;
+        padding: 0.333em 0.833em;
+        margin-top: 0.556em;
+        margin-bottom: 0.556em;
+        border: none;
+
+        &:not([disabled]) {
+            cursor: pointer;
+        }
+    }
+
+    /* Messages */
+    .message {
+        margin: 0.556em 0;
+        display: block;
+        max-width: var(--max-width);
+        clear: left;
+    }
+
+    .message,
+    .error-container {
+        padding: 0.278em 0.556em;
+        background-color: var(--color-warning-light);
+        border: 1px solid var(--color-warning-dark);
+        border-radius: 3px;
+
+        &.good {
+            background-color: var(--color-good-light);
+            border-color: var(--color-good-dark);
+        }
+
+        &.bad,
+        &.required,
+        &.error,
+        &.error-container {
+            background-color: var(--color-error-light);
+            border-color: var(--color-error-dark);
+        }
+    }
+
+    /* invalid fields */
+    input:invalid,
+    textarea:invalid {
+        border-radius: 1px;
+        box-shadow: 0px 0px 0.5px 1px var(--color-error);
+    }
+
+    /* user forms heading field */
+    .FormHeading {
+        clear: both;
+        padding-top: 0.68em;
+    }
+}
+