srcdev-nuxt-components 9.1.55 → 9.1.56

package/app/assets/styles/setup/03.theming/error/_light.css

@@ -1,74 +0,0 @@
-:where([data-invalid]),
-:where([data-theme="error"]) {
-  /* ===========================================
-     COLOR SCALE VARIABLES
-     Base color tokens for the error theme
-     =========================================== */
-  --colour-theme-1: var(--red-01);
-  --colour-theme-2: var(--red-02);
-  --colour-theme-3: var(--red-03);
-  --colour-theme-4: var(--red-04);
-  --colour-theme-5: var(--red-05);
-  --colour-theme-6: var(--red-06);
-  --colour-theme-7: var(--red-07);
-  --colour-theme-8: var(--red-08);
-  --colour-theme-9: var(--red-09);
-  --colour-theme-10: var(--red-10);
-  --colour-theme-11: var(--red-10);
-  --colour-theme-12: var(--red-10);
-
-  /* ===========================================
-     FORM ERROR DISPLAY
-     =========================================== */
-  --input-error-color: white;
-  --theme-error-surface: var(--red-06);
-  --theme-error-border: var(--red-06);
-  --theme-error-outline: var(--red-01);
-
-  /* ===========================================
-     FORM INPUT VARIABLES
-     Styling for form inputs and controls
-     =========================================== */
-  --theme-input-border: var(--red-06);
-  --theme-input-border-focus: var(--red-04);
-  --theme-input-border-hover: var(--red-04);
-
-  /* Input outlines and focus */
-  --theme-input-outline: var(--red-01);
-  --theme-input-outline-focus: var(--red-04);
-  --theme-input-visible-outline: var(--red-04);
-  --theme-focus-visible-shadow: 0 0 0 2px var(--red-02);
-
-  /* ===========================================
-     FORM BUTTON VARIABLES
-     Styling for form buttons and controls
-     =========================================== */
-
-  /* Variant Primary */
-  --theme-button-primary-surface: var(--red-09);
-  --theme-button-primary-surface-hover: var(--red-08);
-  --theme-button-primary-surface-active: var(--red-07);
-  --theme-button-primary-border: var(--red-09);
-  --theme-button-primary-border-active: var(--red-09);
-  --theme-button-primary-outline: var(--red-01);
-  --theme-button-primary-outline-active: var(--red-07);
-  --theme-button-primary-text: var(--red-00);
-  --theme-button-primary-text-hover: var(--red-00);
-
-  /* Variant Secondary */
-  --theme-button-secondary-surface: transparent;
-  --theme-button-secondary-surface-hover: var(--red-01);
-  --theme-button-secondary-surface-active: var(--red-01);
-  --theme-button-secondary-border: var(--red-09);
-  --theme-button-secondary-border-active: var(--red-09);
-  --theme-button-secondary-outline: var(--red-09);
-  --theme-button-secondary-outline-active: var(--red-09);
-  --theme-button-secondary-text: var(--red-09);
-  --theme-button-secondary-text-hover: var(--red-09);
-
-  /* Variant Tertiary */
-  --theme-button-tertiary-surface: var(--slate-01);
-  --theme-button-tertiary-text: var(--red-09);
-  --theme-button-tertiary-border-active: var(--red-09);
-  --theme-button-tertiary-outline-active: var(--red-09);
-}

package/app/assets/styles/setup/03.theming/error/index.css

@@ -1,2 +0,0 @@
-@import "./_light";
-@import "./_dark";

package/app/assets/styles/setup/03.theming/success/_dark.css

@@ -1,50 +0,0 @@
-:where(html.dark [data-theme="success"]) {
-  /* ===========================================
-     COLOR SCALE VARIABLES
-     Base color tokens for the success theme
-     =========================================== */
-  --colour-theme-1: var(--green-01);
-  --colour-theme-2: var(--green-02);
-  --colour-theme-3: var(--green-03);
-  --colour-theme-4: var(--green-04);
-  --colour-theme-5: var(--green-05);
-  --colour-theme-6: var(--green-06);
-  --colour-theme-7: var(--green-07);
-  --colour-theme-8: var(--green-08);
-  --colour-theme-9: var(--green-09);
-  --colour-theme-10: var(--green-10);
-  --colour-theme-11: var(--green-10);
-  --colour-theme-12: var(--green-10);
-
-  /* ===========================================
-     FORM INPUT VARIABLES
-     Styling for form inputs and controls
-     =========================================== */
-  --theme-input-border: var(--green-05);
-  --theme-input-border-focus: var(--green-04);
-
-  /* Input outlines and focus */
-  --theme-input-outline: var(--green-05);
-
-  /* ===========================================
-     FORM BUTTON VARIABLES
-     Styling for form buttons and controls
-     =========================================== */
-
-  /* Variant Primary */
-  --theme-button-primary-border: var(--green-07);
-  --theme-button-primary-border-active: var(--green-07);
-  --theme-button-primary-text: var(--green-00);
-  --theme-button-primary-text-hover: var(--green-00);
-
-  /* Variant Secondary */
-  --theme-button-secondary-surface: var(--green-01);
-  --theme-button-secondary-border-active: var(--green-01);
-  --theme-button-secondary-text: var(--green-09);
-
-  /* Variant Tertiary */
-  --theme-button-tertiary-surface: transparent;
-  --theme-button-tertiary-text: var(--green-01);
-  --theme-button-tertiary-border-active: var(--green-01);
-  --theme-button-tertiary-outline-active: var(--green-09);
-}

package/app/assets/styles/setup/03.theming/success/_light.css

@@ -1,65 +0,0 @@
-:where([data-theme="success"]) {
-  /* ===========================================
-     COLOR SCALE VARIABLES
-     Base color tokens for the success theme
-     =========================================== */
-  --colour-theme-1: var(--green-01);
-  --colour-theme-2: var(--green-02);
-  --colour-theme-3: var(--green-03);
-  --colour-theme-4: var(--green-04);
-  --colour-theme-5: var(--green-05);
-  --colour-theme-6: var(--green-06);
-  --colour-theme-7: var(--green-07);
-  --colour-theme-8: var(--green-08);
-  --colour-theme-9: var(--green-09);
-  --colour-theme-10: var(--green-10);
-  --colour-theme-11: var(--green-10);
-  --colour-theme-12: var(--green-10);
-
-  /* ===========================================
-     FORM INPUT VARIABLES
-     Styling for form inputs and controls
-     =========================================== */
-  --theme-input-border: var(--green-06);
-  --theme-input-border-focus: var(--green-04);
-  --theme-input-border-hover: var(--green-04);
-
-  /* Input outlines and focus */
-  --theme-input-outline: var(--green-01);
-  --theme-input-outline-focus: var(--green-04);
-  --theme-input-visible-outline: var(--green-04);
-  --theme-focus-visible-shadow: 0 0 0 2px var(--green-02);
-
-  /* ===========================================
-     FORM BUTTON VARIABLES
-     Styling for form buttons and controls
-     =========================================== */
-
-  /* Variant Primary */
-  --theme-button-primary-surface: var(--green-09);
-  --theme-button-primary-surface-hover: var(--green-08);
-  --theme-button-primary-surface-active: var(--green-07);
-  --theme-button-primary-border: var(--green-09);
-  --theme-button-primary-border-active: var(--green-09);
-  --theme-button-primary-outline: var(--green-01);
-  --theme-button-primary-outline-active: var(--green-07);
-  --theme-button-primary-text: var(--green-00);
-  --theme-button-primary-text-hover: var(--green-00);
-
-  /* Variant Secondary */
-  --theme-button-secondary-surface: transparent;
-  --theme-button-secondary-surface-hover: var(--green-01);
-  --theme-button-secondary-surface-active: var(--green-01);
-  --theme-button-secondary-border: var(--green-09);
-  --theme-button-secondary-border-active: var(--green-09);
-  --theme-button-secondary-outline: var(--green-09);
-  --theme-button-secondary-outline-active: var(--green-09);
-  --theme-button-secondary-text: var(--green-09);
-  --theme-button-secondary-text-hover: var(--green-09);
-
-  /* Variant Tertiary */
-  --theme-button-tertiary-surface: var(--slate-01);
-  --theme-button-tertiary-text: var(--green-09);
-  --theme-button-tertiary-border-active: var(--green-09);
-  --theme-button-tertiary-outline-active: var(--green-09);
-}

package/app/assets/styles/setup/03.theming/success/index.css

@@ -1,2 +0,0 @@
-@import "./_light";
-@import "./_dark";

package/app/assets/styles/setup/03.theming/warning/_dark.css

@@ -1,50 +0,0 @@
-:where(html.dark [data-theme="warning"]) {
-  /* ===========================================
-     COLOR SCALE VARIABLES
-     Base color tokens for the warning theme
-     =========================================== */
-  --colour-theme-1: var(--orange-01);
-  --colour-theme-2: var(--orange-02);
-  --colour-theme-3: var(--orange-03);
-  --colour-theme-4: var(--orange-04);
-  --colour-theme-5: var(--orange-05);
-  --colour-theme-6: var(--orange-06);
-  --colour-theme-7: var(--orange-07);
-  --colour-theme-8: var(--orange-08);
-  --colour-theme-9: var(--orange-09);
-  --colour-theme-10: var(--orange-10);
-  --colour-theme-11: var(--orange-10);
-  --colour-theme-12: var(--orange-10);
-
-  /* ===========================================
-     FORM INPUT VARIABLES
-     Styling for form inputs and controls
-     =========================================== */
-  --theme-input-border: var(--orange-05);
-  --theme-input-border-focus: var(--orange-04);
-
-  /* Input outlines and focus */
-  --theme-input-outline: var(--orange-05);
-
-  /* ===========================================
-     FORM BUTTON VARIABLES
-     Styling for form buttons and controls
-     =========================================== */
-
-  /* Variant Primary */
-  --theme-button-primary-border: var(--sunset-07);
-  --theme-button-primary-border-active: var(--sunset-07);
-  --theme-button-primary-text: white;
-  --theme-button-primary-text-hover: var(--sunset-00);
-
-  /* Variant Secondary */
-  /* --theme-button-secondary-surface: var(--sunset-01); */
-  /* --theme-button-secondary-border-active: var(--sunset-01); */
-  --theme-button-secondary-text: var(--sunset-05);
-
-  /* Variant Tertiary */
-  --theme-button-tertiary-surface: transparent;
-  --theme-button-tertiary-text: var(--sunset-05);
-  --theme-button-tertiary-border-active: var(--sunset-05);
-  --theme-button-tertiary-outline-active: var(--sunset-05);
-}

package/app/assets/styles/setup/03.theming/warning/_light.css

@@ -1,64 +0,0 @@
-:where([data-theme="warning"]) {
-  /* ===========================================
-     COLOR SCALE VARIABLES
-     Base color tokens for the warning theme
-     =========================================== */
-  --colour-theme-1: var(--orange-01);
-  --colour-theme-2: var(--orange-02);
-  --colour-theme-3: var(--orange-03);
-  --colour-theme-4: var(--orange-04);
-  --colour-theme-5: var(--orange-05);
-  --colour-theme-6: var(--orange-06);
-  --colour-theme-7: var(--orange-07);
-  --colour-theme-8: var(--orange-08);
-  --colour-theme-9: var(--orange-09);
-  --colour-theme-10: var(--orange-10);
-  --colour-theme-11: var(--orange-10);
-  --colour-theme-12: var(--orange-10);
-
-  /* ===========================================
-     FORM INPUT VARIABLES
-     Styling for form inputs and controls
-     =========================================== */
-  --theme-input-border: var(--orange-06);
-  --theme-input-border-focus: var(--orange-04);
-  --theme-input-border-hover: var(--orange-04);
-
-  /* Input outlines and focus */
-  --theme-input-outline: var(--orange-01);
-  --theme-input-outline-focus: var(--orange-04);
-  --theme-input-visible-outline: var(--orange-04);
-  --theme-focus-visible-shadow: 0 0 0 2px var(--orange-02);
-
-  /* ===========================================
-     FORM BUTTON VARIABLES
-     Styling for form buttons and controls
-     =========================================== */
-
-  /* Variant Primary */
-  --theme-button-primary-surface: var(--sunset-05);
-  --theme-button-primary-surface-hover: var(--sunset-08);
-  --theme-button-primary-surface-active: var(--sunset-07);
-  --theme-button-primary-border: var(--sunset-05);
-  --theme-button-primary-border-active: var(--sunset-05);
-  --theme-button-primary-outline: var(--sunset-01);
-  --theme-button-primary-text: white;
-  --theme-button-primary-text-hover: var(--sunset-01);
-  --theme-button-primary-outline-active: var(--sunset-05);
-
-  /* Variant Secondary */
-  --theme-button-secondary-surface: transparent;
-  --theme-button-secondary-surface-hover: var(--sunset-02);
-  --theme-button-secondary-surface-active: var(--sunset-03);
-  --theme-button-secondary-border: var(--sunset-05);
-  --theme-button-secondary-border-active: var(--sunset-05);
-  --theme-button-secondary-outline: var(--sunset-05);
-  --theme-button-secondary-text: var(--sunset-05);
-  --theme-button-secondary-text-hover: var(--sunset-05);
-  --theme-button-secondary-outline-active: var(--sunset-05);
-
-  /* Variant Tertiary */
-  --theme-button-tertiary-text: var(--sunset-05);
-  --theme-button-tertiary-border-active: var(--sunset-07);
-  --theme-button-tertiary-outline-active: var(--sunset-04);
-}

package/app/assets/styles/setup/03.theming/warning/index.css

@@ -1,2 +0,0 @@
-@import "./_light";
-@import "./_dark";

package/app/components/display-prompt/DisplayPromptCore.vue

@@ -1,228 +0,0 @@
-<template>
-  <div
-    ref="promptElementRef"
-    class="display-prompt-core"
-    :class="[{ closed: !compopnentOpen }]"
-    :data-test-id="`display-prompt-core-${theme}`"
-    tabindex="0"
-  >
-    <div class="display-prompt-wrapper" :data-theme="theme" :class="[elementClasses]" data-test-id="display-prompt">
-      <div class="display-prompt-inner">
-        <div class="display-prompt-icon" data-test-id="prompt-icon" aria-hidden="true">
-          <slot name="customDecoratorIcon">
-            <Icon :name="displayPromptIcons[theme] ?? 'akar-icons:circle-alert'" class="icon" :color="iconColor" />
-          </slot>
-        </div>
-        <div class="display-prompt-content" :aria-live="useAutoFocus ? 'polite' : undefined">
-          <p class="title" data-test-id="display-prompt-title">
-            <slot name="title"></slot>
-          </p>
-          <p v-if="slots.content" class="text" data-test-id="display-prompt-content">
-            <slot name="content"></slot>
-          </p>
-        </div>
-        <button
-          v-if="dismissible"
-          data-test-id="display-prompt-action"
-          class="display-prompt-action"
-          @click.prevent="updateComponentState()"
-        >
-          <slot name="customCloseIcon">
-            <Icon name="bitcoin-icons:cross-filled" class="icon" />
-          </slot>
-          <span class="sr-only">
-            <slot name="customTitle">Close this prompt</slot>
-          </span>
-        </button>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-const props = defineProps({
-  dismissible: {
-    type: Boolean,
-    default: false,
-  },
-  theme: {
-    type: String,
-    default: "error",
-  },
-  styleClassPassthrough: {
-    type: [String, Array] as PropType<string | string[]>,
-    default: () => [],
-  },
-  iconColor: {
-    type: String as PropType<string>,
-    default: "dark-grey",
-  },
-  displayPromptIcons: {
-    type: Object as PropType<Record<string, string>>,
-    default: () => ({
-      error: "akar-icons:circle-alert",
-      info: "akar-icons:info",
-      success: "akar-icons:check",
-      warning: "akar-icons:circle-alert",
-      secondary: "akar-icons:info",
-    }),
-  },
-  useAutoFocus: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-const slots = useSlots();
-const promptElementRef = useTemplateRef<HTMLElement>("promptElementRef");
-const parentComponentState = defineModel<boolean>({ default: false });
-const compopnentOpen = ref(true);
-const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
-
-const updateComponentState = () => {
-  if (parentComponentState.value) {
-    parentComponentState.value = false;
-    return;
-  }
-
-  compopnentOpen.value = false;
-};
-
-onMounted(async () => {
-  if (props.useAutoFocus && promptElementRef.value) {
-    promptElementRef.value.focus();
-  }
-});
-</script>
-
-<style lang="css">
-@layer components {
-.display-prompt-core {
-  display: grid;
-  grid-template-rows: 1fr;
-  opacity: 1;
-  transition: all 200ms ease-in-out;
-
-  &.closed {
-    grid-template-rows: 0fr;
-    opacity: 0;
-    pointer-events: none;
-  }
-
-  .display-prompt-wrapper {
-    background-color: var(--colour-theme-8);
-    border: 0px solid transparent;
-    border-radius: 4px;
-    border-start-start-radius: 8px;
-    border-end-start-radius: 8px;
-    padding-inline-start: 8px;
-
-    overflow: hidden;
-
-    &:not(.dark) {
-      &.outlined {
-        border: 1px solid var(--colour-theme-8);
-      }
-    }
-
-    &.dark {
-      border-width: 0;
-
-      .display-prompt-inner {
-        background-color: var(--slate-01);
-      }
-
-      &.outlined {
-        border: 1px solid var(--colour-theme-8);
-      }
-    }
-
-    .display-prompt-inner {
-      align-items: center;
-      display: flex;
-      gap: 12px;
-      justify-content: space-between;
-      padding-block: 1rem;
-      padding-inline: 1.5rem;
-
-      border-start-start-radius: 8px;
-      border-end-start-radius: 8px;
-      background-color: var(--colour-theme-10);
-
-      .display-prompt-icon {
-        display: inline-flex;
-        .icon {
-          color: var(--colour-theme-8);
-          display: inline-block;
-          font-size: 3rem;
-          font-style: normal;
-          font-weight: normal;
-          overflow: hidden;
-        }
-      }
-
-      .display-prompt-content {
-        display: block flex;
-        flex-direction: column;
-        flex-grow: 1;
-        gap: 1rem;
-        margin: 0;
-        padding: 0.2rem;
-
-        .title {
-          font-size: var(--step-5);
-          font-weight: bold;
-          line-height: 1.3;
-          color: var(--colour-theme-8);
-          margin: 0;
-          padding: 0;
-        }
-
-        .text {
-          font-size: var(--step-4);
-          font-weight: normal;
-          line-height: 1.3;
-          color: var(--colour-theme-8);
-          margin: 0;
-          padding: 0;
-        }
-      }
-      .display-prompt-action {
-        background-color: transparent;
-        display: block flex;
-        align-items: center;
-        justify-content: center;
-        margin: 1rem;
-        padding: 0.5rem;
-        border: 0.1rem solid var(--colour-theme-8);
-        border-radius: 50%;
-        outline: 1px solid var(--colour-theme-3);
-
-        transition:
-          border 200ms ease-in-out,
-          outline 200ms ease-in-out;
-
-        &:hover {
-          cursor: pointer;
-          border: 0.1rem solid var(--colour-theme-12);
-          outline: 2px solid var(--colour-theme-6);
-        }
-
-        &:focus-visible {
-          box-shadow: var(--focus-box-shadow-colour-on);
-          border: 0.1rem solid var(--colour-theme-12);
-          outline: 2px solid var(--colour-theme-6);
-        }
-
-        .icon {
-          color: var(--colour-theme-8);
-          display: block;
-          font-size: var(--step-5);
-          padding: 1rem;
-        }
-      }
-    }
-  }
-}
-}
-</style>

package/app/components/display-prompt/variants/DisplayPromptError.vue

@@ -1,53 +0,0 @@
-<template>
-  <DisplayPromptCore variant="error" :dismissible icon-color="white" :style-class-passthrough>
-    <template #icon>
-      <Icon name="akar-icons:circle-alert" class="icon" />
-    </template>
-    <template #title>
-      <slot name="title"></slot>
-    </template>
-    <template v-if="slots.content" #content>
-      <slot name="content"></slot>
-    </template>
-  </DisplayPromptCore>
-</template>
-
-<script setup lang="ts">
-const props = defineProps({
-  dismissible: {
-    type: Boolean,
-    default: false,
-  },
-  styleClassPassthrough: {
-    type: [String, Array] as PropType<string | string[]>,
-    default: () => [],
-  },
-});
-
-const slots = useSlots();
-</script>
-
-<style lang="css">
-@layer components {
-.display-prompt.error {
-  --bg-color: var(--red-02);
-  --text-color: var(--slate-00);
-}
-
-.display-prompt {
-  &.error {
-    background-color: var(--bg-color);
-  }
-
-  &-icon {
-    .icon {
-      color: var(--text-color);
-    }
-  }
-
-  &-content {
-    color: var(--text-color);
-  }
-}
-}
-</style>