@1001-digital/layers.base 0.0.1

package/app/assets/styles/variables/components/dialogs.css

@@ -0,0 +1,7 @@
+:root {
+  --dialog-initial-x-offset: 0;
+  --dialog-initial-y-offset: var(--spacer);
+  --dialog-x-offset: 0;
+  --dialog-y-offset: 0;
+  --backdrop-background-color: transparent;
+}

package/app/assets/styles/variables/components/forms.css

@@ -0,0 +1,5 @@
+:root {
+  --form-item-height: calc(var(--size-4) + var(--ui-padding-block) * 2);
+  --form-item-height-sm: calc(var(--size-4) + var(--ui-padding-block));
+  --input-text-transform: none;
+}

package/app/assets/styles/variables/components/images.css

@@ -0,0 +1,5 @@
+:root {
+  --image-border-radius: var(--size-1);
+  --image-border: var(--border);
+  --image-loading-background: var(--gray-z-0);
+}

package/app/assets/styles/variables/components/index.css

@@ -0,0 +1,6 @@
+@import './alerts.css';
+@import './buttons.css';
+@import './cards.css';
+@import './dialogs.css';
+@import './forms.css';
+@import './images.css';

package/app/assets/styles/variables/effects.css

@@ -0,0 +1,3 @@
+:root {
+  --blur: blur(var(--size-1));
+}

package/app/assets/styles/variables/fonts.css

@@ -0,0 +1,36 @@
+:root {
+  --rem: 16px;
+
+  /* Font families */
+  --font-family: sans-serif;
+  --font-family-serif: serif;
+
+  /* Fluid font sizes using clamp(min, preferred, max) */
+  --font-base: clamp(0.9375rem, 0.875rem + 0.25vw, 1.0625rem);
+  --font-xs: clamp(0.625rem, 0.6rem + 0.15vw, 0.75rem);
+  --font-sm: clamp(0.75rem, 0.7rem + 0.2vw, 0.875rem);
+  --font-lg: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
+  --font-xl: clamp(1.375rem, 1.2rem + 0.75vw, 1.75rem);
+  --font-2xl: clamp(1.75rem, 1.5rem + 1vw, 2.25rem);
+  --font-3xl: clamp(2.25rem, 1.8rem + 1.5vw, 3rem);
+
+  /* Font weights */
+  --font-weight-light: 300;
+  --font-weight: 400;
+  --font-weight-bold: 500;
+
+  /* Letter spacing */
+  --letter-spacing-sm: -0.025em;
+  --letter-spacing: 0.025em;
+  --letter-spacing-md: 0.05em;
+  --letter-spacing-lg: 0.1em;
+
+  /* Line heights */
+  --line-height-sm: 105%;
+  --line-height: 100%;
+  --line-height-md: 120%;
+  --line-height-lg: 160%;
+
+  /* Text transform */
+  --text-transform: none;
+}

package/app/assets/styles/variables/index.css

@@ -0,0 +1,15 @@
+/*
+ * CSS Custom Properties
+ * Organized by category. Order matters as some depend on others.
+ */
+
+@import './colors.css';
+@import './sizes.css';
+@import './fonts.css';
+@import './borders.css';
+@import './effects.css';
+@import './timing.css';
+@import './ui.css';
+@import './layout.css';
+@import './z-index.css';
+@import './components/index.css';

package/app/assets/styles/variables/layout.css

@@ -0,0 +1,7 @@
+:root {
+  --dialog-width: 27rem;
+  --content-width-wide: 90rem;
+  --content-width: 60rem;
+  --content-width-sm: 35rem;
+  --form-width: 24rem;
+}

package/app/assets/styles/variables/sizes.css

@@ -0,0 +1,24 @@
+:root {
+  --100vh: 100dvh;
+
+  /* Size scale */
+  --size-0: 0.125rem;
+  --size-1: 0.25rem;
+  --size-2: 0.5rem;
+  --size-3: 0.75rem;
+  --size-4: 1rem;
+  --size-5: 1.25rem;
+  --size-6: 1.5rem;
+  --size-7: 2rem;
+  --size-8: 3rem;
+  --size-9: 4.5rem;
+  --size-10: 6rem;
+
+  /* Semantic spacers */
+  --spacer-xs: var(--size-0);
+  --spacer-sm: var(--size-2);
+  --spacer: var(--size-4);
+  --spacer-md: var(--size-6);
+  --spacer-lg: var(--size-7);
+  --spacer-xl: var(--size-9);
+}

package/app/assets/styles/variables/timing.css

@@ -0,0 +1,5 @@
+:root {
+  --speed-fast: 0.15s;
+  --speed: 0.3s;
+  --speed-slow: 0.75s;
+}

package/app/assets/styles/variables/ui.css

@@ -0,0 +1,18 @@
+:root {
+  /* UI typography */
+  --ui-font-family: sans-serif;
+  --ui-font-size: 13px;
+  --ui-font-weight: 400;
+  --ui-text-transform: uppercase;
+  --ui-letter-spacing: var(--letter-spacing);
+  --ui-line-height: var(--line-height);
+
+  /* UI colors */
+  --ui-color: var(--primary);
+  --ui-placeholder-color: var(--gray-z-5);
+  --ui-color-visited: var(--primary);
+
+  /* UI spacing (logical property naming) */
+  --ui-padding-block: var(--spacer-sm);
+  --ui-padding-inline: var(--spacer);
+}

package/app/assets/styles/variables/z-index.css

@@ -0,0 +1,7 @@
+:root {
+  --z-index-n1: -1;
+  --z-index-0: 0;
+  --z-index-ui: 2;
+  --z-index-overlay: 9;
+  --z-index-dialog: 10;
+}

package/app/components/Actions.vue

@@ -0,0 +1,57 @@
+<template>
+  <menu class="actions">
+    <slot />
+  </menu>
+</template>
+
+<style scoped>
+.actions {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--spacer-sm);
+
+  &:not(.left) {
+    justify-content: flex-end;
+  }
+
+  &:empty {
+    display: none !important;
+  }
+
+  :deep(> a),
+  :deep(> button),
+  :deep(> .input-group),
+  :deep(> .input-group > *) {
+    block-size: var(--form-item-height);
+
+    &.small {
+      block-size: var(--form-item-height-sm);
+    }
+  }
+
+  :deep(> label) {
+    font-family: var(--ui-font-family);
+    font-size: var(--ui-font-size);
+    font-weight: var(--ui-font-weight);
+    text-transform: var(--ui-text-transform);
+    letter-spacing: var(--ui-letter-spacing);
+    line-height: var(--ui-line-height);
+    display: flex;
+    align-items: center;
+    gap: var(--spacer-sm);
+    white-space: nowrap;
+  }
+
+  :deep(.button) {
+    inline-size: auto;
+  }
+
+  :deep(select) {
+    inline-size: auto;
+  }
+}
+</style>

package/app/components/Alert.vue

@@ -0,0 +1,78 @@
+<template>
+  <Transition name="fade">
+    <aside v-if="!dismissed" class="alert" :class="[type]">
+      <button v-if="dismissable" @click="dismiss" class="close">
+        <Icon type="close" />
+      </button>
+      <slot />
+    </aside>
+  </Transition>
+</template>
+
+<script setup lang="ts">
+import { useLocalStorage } from '@vueuse/core'
+
+const props = defineProps<{
+  type?: 'info' | 'error'
+  dismiss?: string
+}>()
+
+const dismissKey = computed(() => `alert:${props.dismiss}`)
+
+const dismissed = useLocalStorage(dismissKey.value, false)
+const dismissable = computed(() => !!props.dismiss)
+
+const dismiss = () => {
+  dismissed.value = true
+}
+</script>
+
+<style scoped>
+.alert {
+  position: relative;
+  display: grid;
+  padding: var(--spacer-sm);
+  gap: var(--spacer-sm);
+  border: var(--border);
+  border-color: var(--alert-border-color);
+  background-color: var(--alert-background-color);
+  color: var(--alert-color);
+  font-family: var(--ui-font-family);
+  font-size: var(--ui-font-size);
+  text-transform: var(--ui-text-transform);
+
+  &.info {
+    border-color: var(--alert-info-border-color);
+    background-color: var(--alert-info-background-color);
+    color: var(--alert-info-color);
+  }
+
+  &.error {
+    border-color: var(--alert-error-border-color);
+    background-color: var(--alert-error-background-color);
+    color: var(--alert-error-color);
+  }
+
+  :deep(> h1) {
+    text-transform: uppercase;
+    font-weight: bold;
+  }
+
+  .close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    inline-size: var(--size-4);
+    block-size: var(--size-4);
+    padding: 0;
+    inset-block-start: var(--spacer-sm);
+    inset-inline-end: var(--spacer-sm);
+    background: none;
+
+    &:is(:hover, :active, :focus, .active) {
+      background: none;
+    }
+  }
+}
+</style>

package/app/components/Button.vue

@@ -0,0 +1,196 @@
+<template>
+  <NuxtLink v-if="to" :to="to" :exact="exact" :target="target" :class="['button']">
+    <slot />
+  </NuxtLink>
+  <button v-else>
+    <slot />
+  </button>
+</template>
+
+<script setup lang="ts">
+import type { RouteLocationRaw } from 'vue-router'
+
+withDefaults(defineProps<{
+  to?: string | RouteLocationRaw
+  target?: string
+  exact?: boolean
+}>(), {
+  target: '_self',
+})
+</script>
+
+<style scoped>
+button,
+a.button {
+  position: relative;
+  min-inline-size: fit-content;
+  inline-size: fit-content;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  gap: var(--spacer-sm);
+
+  &:not(.unstyled) {
+    background: var(--button-background);
+    color: var(--button-color);
+    padding: var(--ui-padding-block) var(--ui-padding-inline);
+    border: none;
+    border-radius: var(--button-border-radius);
+    box-shadow: var(--border-shadow);
+    transition:
+      background var(--speed),
+      box-shadow var(--speed),
+      color var(--speed);
+  }
+
+  >span {
+    display: flex;
+    gap: var(--ui-padding-inline);
+    line-height: var(--ui-line-height);
+    justify-content: center;
+    text-align: center;
+    align-items: center;
+    inline-size: 100%;
+    block-size: 100%;
+  }
+
+  >.icon {
+    color: var(--button-icon-color);
+    transition: color var(--speed);
+  }
+
+  &:has(> .icon:first-child) {
+    padding-inline-start: calc(var(--ui-padding-inline) - var(--size-1));
+
+    &.small {
+      padding-inline-start: calc(var(--ui-padding-inline) / 2);
+    }
+  }
+
+  &:has(> .icon:first-child:last-child) {
+    padding: var(--ui-padding-block);
+    aspect-ratio: 1;
+
+    &.small {
+      padding: calc(var(--ui-padding-block) / 2);
+    }
+  }
+
+  &.non-interactive,
+  &[disabled]:not([disabled='false']) {
+    pointer-events: none;
+  }
+
+  &[disabled]:not([disabled='false']) {
+    color: var(--muted);
+    opacity: 0.5;
+  }
+
+  &.small {
+    padding: calc(var(--ui-padding-block) / 2) calc(var(--ui-padding-inline) / 2);
+    min-block-size: 0;
+
+    >.icon {
+      inline-size: var(--size-3);
+      block-size: var(--size-3);
+    }
+  }
+
+  &.link {
+    box-shadow: none;
+    background: transparent;
+    line-height: inherit;
+    color: var(--color);
+    padding: 0;
+
+    >.icon {
+      align-self: center;
+      block-size: 1em;
+      inline-size: 1em;
+    }
+
+    &.muted {
+      color: var(--muted);
+
+      >.icon {
+        color: var(--muted);
+      }
+    }
+  }
+
+  &.inline {
+    display: inline-flex;
+    align-self: baseline;
+    align-items: baseline;
+    block-size: inherit;
+    margin: 0 !important;
+    padding: 0 var(--size-1) !important;
+    gap: 0.2em;
+    inline-size: min-content;
+  }
+
+  &.invisible {
+    position: absolute;
+    inset-inline-start: -200vw;
+    opacity: 0;
+  }
+
+  &.danger {
+    box-shadow: 0 0 0 var(--border-width) var(--error);
+    color: var(--error) !important;
+
+    >.icon {
+      color: var(--error);
+    }
+  }
+
+  /* Primary variant */
+  &.primary {
+    background: var(--button-primary-background);
+    box-shadow: 0 0 0 var(--border-width) var(--button-primary-border-color);
+    color: var(--button-primary-color);
+
+    >.icon {
+      color: var(--button-primary-color);
+    }
+
+    &:is(:hover, :active, :focus, .active) {
+      background: var(--button-primary-background-highlight);
+      box-shadow: 0 0 0 var(--border-width) var(--button-primary-border-color-highlight);
+      color: var(--button-primary-color-highlight);
+
+      >.icon {
+        color: var(--button-primary-color-highlight);
+      }
+    }
+  }
+
+  &:is(:hover, :active, :focus, .active) {
+    background: var(--button-background-highlight);
+    box-shadow: var(--border-shadow-highlight);
+    color: var(--button-color-highlight);
+
+    >.icon {
+      color: var(--button-icon-color-highlight);
+    }
+
+    &.link {
+      background: transparent !important;
+      box-shadow: none;
+      color: var(--color);
+
+      >.icon {
+        color: var(--gray-z-7);
+      }
+
+      &.muted {
+        color: var(--color);
+
+        >.icon {
+          color: var(--gray-z-7);
+        }
+      }
+    }
+  }
+}
+</style>

package/app/components/Card.vue

@@ -0,0 +1,62 @@
+<template>
+  <article class="card">
+    <slot />
+  </article>
+</template>
+
+<style scoped>
+.card {
+  display: grid;
+  gap: var(--spacer);
+  background-color: var(--card-background);
+  block-size: 100%;
+  padding: var(--spacer);
+  transition:
+    background var(--speed),
+    border-color var(--speed);
+
+  &:not(.borderless) {
+    border: var(--card-border);
+    border-radius: var(--card-border-radius);
+
+    &:has(> .card-link) {
+      &:has(> .card-link:hover),
+      &:has(> .card-link:focus) {
+        border-color: var(--card-border-color-highlight);
+      }
+    }
+  }
+
+  &.borderless {
+    padding: 0;
+  }
+
+  &:has(> .card-link) {
+    &:has(> .card-link:hover),
+    &:has(> .card-link:focus) {
+      background-color: var(--card-background-highlight);
+    }
+  }
+
+  &.static {
+    background-color: var(--card-background);
+  }
+
+  &.highlight {
+    background-color: var(--card-background-highlight);
+  }
+
+  > * {
+    inline-size: 100%;
+    place-self: center;
+
+    &:first-child {
+      place-self: flex-start;
+    }
+
+    &:last-child {
+      place-self: flex-end;
+    }
+  }
+}
+</style>