Updating styles to use the new Aether presets based on the TW and Skeleton presets. Prep for LCI

src/app.css

@@ -167,6 +167,249 @@ html.trusted_access #appShell {
     /* --theme-font-family-heading: 'Liberation Sans', sans-serif; */
 /* } */
 
+/* Using Skeleton Tailwind Presets */
+/* Built in colors (also with "contrast" option):
+* - primary
+* - secondary
+* - tertiary
+* - success
+* - warning
+* - error
+* - surface
+*/
+
+/* Built in presets:
+* - Filled - a filled preset of the primary brand color.
+* - Tonal - a tonal preset of the primary brand color.
+* - Outlined - an outlined preset of the primary brand color.
+*/
+
+/* Additional customized presets:
+* - Glass - a custom preset using background transparency and backdrop blur.
+* - Elevated - mixes a filled preset with a shadow.
+* - Ghost - has no style by default, but shows a tonal preset on hover.
+* - Ghost Icon - has no style by default, but shows a branded tonal preset on hover.
+* - Gradient - a custom preset generated using Tailwind gradient primitives.
+*/
+
+/* Generic button types needed:
+* - primary
+* - secondary
+* - tertiary
+* - success
+* - warning
+* - error
+* - neutral
+* - surface
+* - info
+* - danger
+* - normal
+* - outline
+* - text
+*/
+
+/* Aether specific button types needed:
+* - open or view
+* - close or hide
+* - help
+* - save
+* - delete
+* - cancel
+* - confirm
+* - reset
+* - submit
+* - next or previous
+* - back
+* - edit
+* - create
+* - add
+* - remove
+* - copy
+* - paste
+* - download
+* - upload
+* - print
+* - share
+* - search
+* - filter
+* - sort
+* - select
+* - clear
+* - toggle or switch
+* - expand or collapse
+* - configure or settings
+* - refresh or reload
+* - sync or synchronize
+* - play or pause
+* - stop
+* - like or dislike
+* - favorite or unfavorite
+* - follow or unfollow
+* - subscribe or unsubscribe
+* - vote or unvote
+* - rate or review
+* - report or flag
+* - block or unblock
+* - accept or decline
+* - agree or disagree
+* - confirm or cancel
+* - approve or reject
+
+
+*/
+
+/* Create a custom preset in your global stylesheet */
+/* .preset-gradient {
+    background-image: linear-gradient(-45deg, var(--color-primary-300), var(--color-primary-700));
+    color: var(--color-primary-contrast-500);
+} */
+/* .preset-glass-primary {
+    background: color-mix(in oklab, var(--color-primary-500) 40%, transparent);
+    box-shadow: 0 0px 30px color-mix(in oklab, var(--color-primary-500) 50%, transparent) inset;
+    backdrop-filter: blur(16px);
+} */
+
+
+/* Buttons default to the tonal presets */
+/* Buttons based on Skeleton Tailwind preset classes */
+.ae_btn_primary {
+    @apply preset-tonal-primary border border-primary-500 transition-all;
+}
+.ae_btn_secondary {
+    @apply preset-tonal-secondary border border-secondary-500 transition-all;
+    /* hover:preset-filled-secondary-500 */
+}
+.ae_btn_tertiary {
+    @apply preset-tonal-tertiary border border-tertiary-500 transition-all;
+}
+.ae_btn_success {
+    @apply preset-tonal-success border border-success-500 transition-all;
+}
+.ae_btn_warning {
+    @apply preset-tonal-warning border border-warning-500 transition-all;
+}
+.ae_btn_error {
+    @apply preset-tonal-error border border-error-500 transition-all;
+}
+.ae_btn_surface {
+    @apply preset-tonal-surface border border-surface-500 transition-all;
+}
+/* Buttons customized for Aether using Skeleton Tailwind preset classes */
+.ae_btn_info {
+    @apply border text-cyan-950 dark:text-cyan-50 bg-cyan-50 dark:bg-cyan-950 border-cyan-500 transition-all;
+}
+
+/* Buttons are for filled and outlined presets */
+.ae_btn_secondary_filled {
+    @apply preset-filled-secondary-200-800 border border-secondary-500 transition-all;
+    /* hover:preset-filled-secondary-500 */
+}
+.ae_btn_secondary_outlined {
+    @apply preset-outlined-secondary-200-800 hover:preset-filled-secondary-200-800 border border-secondary-500 transition-all;
+    /* hover:preset-outlined-secondary-500 */
+}
+
+
+
+/* Containers customized for Aether using Skeleton Tailwind preset classes */
+.ae_container_system_menu {
+    @apply container;
+}
+.ae_container_system_options {
+    @apply container;
+}
+.ae_container_system_help {
+    @apply container;
+}
+
+.ae_container_module {
+    @apply container;
+    /* @apply container mx-auto max-w-7xl px-4 sm:px-6 lg:px-8; */
+}
+/* .ae_container_module_main {
+    @apply container;
+} */
+.ae_container_module_header {
+    /* LCI request 3a5997 */
+    /* bg-gray-300 */
+    @apply h2 text-center preset-tonal-primary rounded-md flex flex-row gap-0.25 items-center justify-between w-full p-1 px-2;
+}
+.ae_container_module_content {
+    @apply container;
+}
+.ae_container_module_menu {
+    @apply container;
+}
+.ae_container_module_options {
+    @apply container;
+}
+
+.ae_container_actions {
+    @apply container preset-tonal-success border border-success-500 rounded-md flex flex-row items-center my-2 p-2;
+}
+.ae_container_results {
+    @apply container;
+}
+.ae_container_content {
+    @apply container;
+}
+.ae_container_content_header {
+    @apply container;
+}
+.ae_container_content_content {
+    @apply container;
+}
+.ae_container_content_footer {
+    @apply container;
+}
+
+.ae_container_alert {
+    @apply container;
+}
+.ae_container_help {
+    @apply container;
+}
+.ae_container_info {
+    @apply container;
+}
+.ae_container_msg {
+    @apply container;
+}
+.ae_container_warning {
+    @apply container;
+}
+.ae_container_tag {
+    @apply container;
+}
+
+.ae_container_modal {
+    @apply container mx-auto max-w-7xl px-4 sm:px-6 lg:px-8;
+}
+.ae_container_modal_header {
+    @apply container;
+}
+.ae_container_modal_content {
+    @apply container;
+}
+.ae_container_modal_footer {
+    @apply container;
+}
+
+
+/* Standard Aether object properties:
+* - id
+* - name
+* - enable
+* - hide
+* - priority
+* - sort
+* - group
+* - notes
+ */
+
+
+
+
 .card-footer {
     border-top: 1px solid hsla(0, 0%, 0%, 0.5);
     margin-top: 1em;