@leaflink/stash 50.17.0 → 51.0.0

package/dist/Textarea.js

@@ -1,7 +1,7 @@
-import { defineComponent as E, useAttrs as M, useSlots as k, useCssModule as H, ref as x, computed as w, watch as A, onMounted as I, nextTick as P, onBeforeUnmount as V, createBlock as $, openBlock as q, mergeProps as y, unref as p, createSlots as D, withCtx as b, createElementVNode as j, renderSlot as F } from "vue";
+import { defineComponent as M, useAttrs as k, useSlots as E, useCssModule as H, ref as x, computed as w, watch as A, onMounted as I, nextTick as P, onBeforeUnmount as V, createBlock as $, openBlock as q, mergeProps as y, unref as p, createSlots as D, withCtx as b, createElementVNode as j, renderSlot as F } from "vue";
 import { _ as L } from "./Field.vue_vue_type_script_setup_true_lang-DRaKs9Lm.js";
 import { _ as N } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const U = ["id", "maxlength", "value", "placeholder", "disabled", "readonly", "rows"], W = /* @__PURE__ */ E({
+const U = ["id", "aria-errormessage", "aria-invalid", "maxlength", "value", "placeholder", "disabled", "readonly", "rows"], W = /* @__PURE__ */ M({
   name: "ll-textarea",
   __name: "Textarea",
   props: {
@@ -25,8 +25,8 @@ const U = ["id", "maxlength", "value", "placeholder", "disabled", "readonly", "r
     disabled: { type: Boolean }
   },
   emits: ["update:model-value"],
-  setup(_, { emit: g }) {
-    const c = M(), B = k(), m = H(), t = _, z = g, u = x(), r = x(), R = w(() => t.isReadOnly || "readonly" in c && c.readonly !== !1), T = w(() => {
+  setup(g, { emit: _ }) {
+    const c = k(), B = E(), m = H(), t = g, z = _, u = x(), l = x(), R = w(() => t.isReadOnly || "readonly" in c && c.readonly !== !1), T = w(() => {
       const e = { ...c };
       return delete e["data-test"], delete e.class, e;
     });
@@ -34,43 +34,43 @@ const U = ["id", "maxlength", "value", "placeholder", "disabled", "readonly", "r
       () => t.resize,
       (e) => {
         var o;
-        e ? h() : (o = r.value) == null || o.disconnect();
+        e ? h() : (o = l.value) == null || o.disconnect();
       }
     );
     const O = (e) => {
       z("update:model-value", e.target.value);
     }, h = () => {
-      r.value || !u.value || (r.value = new ResizeObserver(([e]) => {
-        const { target: o } = e, s = v(u.value) || document.documentElement, { scrollTop: a } = s;
-        let n = 0;
-        if (s === document.documentElement) {
-          const { top: l, height: i } = C(o), { innerHeight: d } = window;
-          n = Math.max(l + i - (d + a), 0);
+      l.value || !u.value || (l.value = new ResizeObserver(([e]) => {
+        const { target: o } = e, a = v(u.value) || document.documentElement, { scrollTop: r } = a;
+        let s = 0;
+        if (a === document.documentElement) {
+          const { top: n, height: i } = C(o), { innerHeight: d } = window;
+          s = Math.max(n + i - (d + r), 0);
         } else {
-          const { top: l, height: i } = o.getBoundingClientRect(), { top: d } = s.getBoundingClientRect(), { offsetHeight: f } = s, S = l - d;
-          n = Math.max(S + i - f, 0);
+          const { top: n, height: i } = o.getBoundingClientRect(), { top: d } = a.getBoundingClientRect(), { offsetHeight: f } = a, S = n - d;
+          s = Math.max(S + i - f, 0);
         }
-        n && requestAnimationFrame(() => {
-          s.scrollTop = a + n;
+        s && requestAnimationFrame(() => {
+          a.scrollTop = r + s;
         });
-      }), r.value.observe(u.value));
+      }), l.value.observe(u.value));
     }, v = (e) => {
       const o = e.parentElement;
       if (!o)
         return null;
-      const { overflowY: s } = getComputedStyle(o);
-      return s !== "visible" ? o : o === document.body ? document.documentElement : v(o);
+      const { overflowY: a } = getComputedStyle(o);
+      return a !== "visible" ? o : o === document.body ? document.documentElement : v(o);
     }, C = (e) => {
-      const { offsetWidth: o, offsetHeight: s } = e;
-      let a = 0, n = 0;
-      const l = function({ offsetLeft: i, offsetTop: d, offsetParent: f }) {
-        a += i, n += d, f && l(f);
+      const { offsetWidth: o, offsetHeight: a } = e;
+      let r = 0, s = 0;
+      const n = function({ offsetLeft: i, offsetTop: d, offsetParent: f }) {
+        r += i, s += d, f && n(f);
       };
-      return l(e), {
-        top: n,
-        left: a,
+      return n(e), {
+        top: s,
+        left: r,
         width: o,
-        height: s
+        height: a
       };
     };
     return I(async () => {
@@ -82,22 +82,24 @@ const U = ["id", "maxlength", "value", "placeholder", "disabled", "readonly", "r
       (typeof t.resize == "boolean" && t.resize || (e = t.resize) != null && e.forceBrowserScroll) && (await P(), h());
     }), V(() => {
       var e;
-      (e = r.value) == null || e.disconnect();
+      (e = l.value) == null || e.disconnect();
     }), (e, o) => (q(), $(L, y(t, {
       class: ["stash-textarea", [p(m).root]],
       "data-test": "stash-textarea"
     }), D({
-      default: b(({ fieldId: s, hasError: a }) => [
+      default: b(({ fieldId: a, fieldErrorId: r, hasError: s }) => [
         j("textarea", y({
-          id: s,
+          id: a,
           ref_key: "textareaRef",
           ref: u,
+          "aria-errormessage": r,
+          "aria-invalid": s,
           class: [
             p(m).textarea,
             "tw-border tw-border-ice-500",
             {
-              "stash-textarea--error tw-border-red-500 tw-text-red-500": a,
-              "tw-text-ice-700 hover:tw-border-ice-500 focus:tw-border-blue-500 active:tw-border-blue-500": !a && !t.disabled,
+              "stash-textarea--error tw-border-red-500 tw-text-red-500": s,
+              "tw-text-ice-700 hover:tw-border-ice-500 focus:tw-border-blue-500 active:tw-border-blue-500": !s && !t.disabled,
               "tw-resize-y": t.resize,
               "tw-min-h-[100px]": !t.rows,
               "tw-resize-none": !t.resize

package/dist/Textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.js","sources":["../src/components/Textarea/Textarea.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  import { computed, nextTick, onBeforeUnmount, onMounted, ref, useAttrs, useCssModule, useSlots, watch } from 'vue';\n\n  import { FieldProps } from '../Field/Field.types';\n  import Field from '../Field/Field.vue';\n\n  export interface TextareaResizeOptions {\n    /**\n     * It will automatically scroll the page down when it reaches the bottom of the viewport/element\n     */\n    forceBrowserScroll: boolean;\n  }\n\n  export interface TextAreaProps extends FieldProps {\n    /**\n     * Value for the textarea element.\n     */\n    modelValue?: string;\n\n    /**\n     * Deprecated. Use :model-value or v-model instead of :value.\n     * @deprecated Use :model-value or v-model instead of :value.\n     */\n    value?: string | number | null;\n\n    /**\n     * Allow textarea to be resizable vertically.\n     * Alternatively if you want to disable automatic scroll when resizing, you can set `{ forceBrowserScroll: false }`\n     */\n    resize?: boolean | TextareaResizeOptions;\n\n    /**\n     * Placeholder text for the textarea element.\n     * **Note:** placeholders should be used to display examples; they should not be used as labels because they are not accessible as labels. If a real label cannot be used, use the `aria-label` attribute.\n     */\n    placeholder?: string;\n\n    /**\n     * Number of rows to display in the textarea.\n     */\n    rows?: number;\n\n    /**\n     * Maximum number of characters allowed in the textarea.\n     */\n    maxlength?: number;\n  }\n\n  defineOptions({\n    name: 'll-textarea',\n  });\n\n  const attrs = useAttrs();\n  const slots = useSlots();\n  const classes = useCssModule();\n\n  const props = withDefaults(defineProps<TextAreaProps>(), {\n    modelValue: '',\n    value: null,\n    resize: false,\n    maxlength: undefined,\n    rows: undefined,\n    placeholder: undefined,\n  });\n\n  const emits = defineEmits<{\n    /**\n     * Emitted when the model value changes.\n     */\n    (e: 'update:model-value', value: string): void;\n  }>();\n\n  const textareaRef = ref<HTMLTextAreaElement>();\n  const observer = ref<ResizeObserver>();\n  const isReadOnly = computed(() => props.isReadOnly || ('readonly' in attrs && attrs.readonly !== false));\n\n  const inputAttrs = computed(() => {\n    const allAttrs = { ...attrs };\n\n    delete allAttrs['data-test'];\n    delete allAttrs.class;\n\n    return allAttrs;\n  });\n\n  watch(\n    () => props.resize,\n    (v) => {\n      if (v) {\n        setupResizeObserver();\n      } else {\n        observer.value?.disconnect();\n      }\n    },\n  );\n\n  const onInput = (event: Event) => {\n    emits('update:model-value', (event.target as HTMLTextAreaElement).value);\n  };\n\n  const setupResizeObserver = () => {\n    if (observer.value || !textareaRef.value) {\n      return;\n    }\n\n    // the ResizeObserver will be in charge to detect if page needs to scroll when resizing the component\n    observer.value = new ResizeObserver(([entry]) => {\n      const { target } = entry;\n      const parent = findParentScrollable(textareaRef.value as HTMLTextAreaElement) || document.documentElement;\n\n      const { scrollTop: scrollPosition } = parent;\n      let offsetDiff = 0;\n\n      // checks if the closest parent element scrollable is the document page\n      if (parent === document.documentElement) {\n        const { top, height } = getOffsetClipRect(target as HTMLElement);\n        const { innerHeight: viewportHeight } = window;\n\n        offsetDiff = Math.max(top + height - (viewportHeight + scrollPosition), 0);\n      } else {\n        const { top, height } = (target as HTMLElement).getBoundingClientRect();\n        const { top: parentTop } = parent.getBoundingClientRect();\n        const { offsetHeight: parentHeight } = parent;\n        const offsetTop = top - parentTop;\n\n        offsetDiff = Math.max(offsetTop + height - parentHeight, 0);\n      }\n\n      if (offsetDiff) {\n        requestAnimationFrame(() => {\n          parent.scrollTop = scrollPosition + offsetDiff;\n        });\n      }\n    });\n\n    observer.value.observe(textareaRef.value);\n  };\n\n  /**\n   * Retrieve the closest parent that has a scroll. Defaults to the document page.\n   */\n  const findParentScrollable = (el: HTMLElement): HTMLElement | null => {\n    const parent = el.parentElement as HTMLElement;\n    if (!parent) {\n      return null;\n    }\n\n    const { overflowY } = getComputedStyle(parent);\n    if (overflowY !== 'visible') {\n      return parent;\n    }\n\n    if (parent === document.body) {\n      return document.documentElement;\n    }\n\n    return findParentScrollable(parent);\n  };\n\n  /**\n   * Retrieve element absolute positioning relative to the page.\n   */\n  const getOffsetClipRect = (el: HTMLElement) => {\n    const { offsetWidth: width, offsetHeight: height } = el;\n\n    let left = 0;\n    let top = 0;\n\n    const findPos = function ({ offsetLeft, offsetTop, offsetParent }: HTMLElement) {\n      left += offsetLeft;\n      top += offsetTop;\n\n      if (offsetParent) {\n        findPos(offsetParent as HTMLElement);\n      }\n    };\n\n    findPos(el);\n\n    return {\n      top,\n      left,\n      width,\n      height,\n    };\n  };\n\n  onMounted(async () => {\n    if (props.value !== null) {\n      throw new Error('ll-input: use :model-value or v-model instead of :value.');\n    }\n\n    if (attrs.onInput) {\n      throw new Error('ll-input: use the @update:model-value event instead of @input');\n    }\n\n    if (\n      (typeof props.resize === 'boolean' && props.resize) ||\n      (props.resize as TextareaResizeOptions)?.forceBrowserScroll\n    ) {\n      await nextTick();\n      setupResizeObserver();\n    }\n  });\n\n  onBeforeUnmount(() => {\n    observer.value?.disconnect();\n  });\n</script>\n\n<template>\n  <Field v-bind=\"props\" class=\"stash-textarea\" :class=\"[classes.root]\" data-test=\"stash-textarea\">\n    <template #default=\"{ fieldId, hasError }\">\n      <textarea\n        :id=\"fieldId\"\n        ref=\"textareaRef\"\n        :class=\"[\n          classes.textarea,\n          'tw-border tw-border-ice-500',\n          {\n            'stash-textarea--error tw-border-red-500 tw-text-red-500': hasError,\n            'tw-text-ice-700 hover:tw-border-ice-500 focus:tw-border-blue-500 active:tw-border-blue-500':\n              !hasError && !props.disabled,\n            'tw-resize-y': props.resize,\n            'tw-min-h-[100px]': !props.rows,\n            'tw-resize-none': !props.resize,\n          },\n        ]\"\n        :maxlength=\"props.maxlength\"\n        :value=\"props.modelValue\"\n        data-test=\"stash-textarea|textarea\"\n        :placeholder=\"props.placeholder\"\n        v-bind=\"inputAttrs\"\n        :disabled=\"props.disabled\"\n        :readonly=\"isReadOnly\"\n        :rows=\"props.rows\"\n        @input=\"onInput\"\n      ></textarea>\n    </template>\n    <template v-if=\"slots.hint\" #hint>\n      <!-- @slot Hint content -->\n      <slot name=\"hint\"></slot>\n    </template>\n  </Field>\n</template>\n\n<style module>\n  .root {\n    position: relative;\n    width: 100%;\n  }\n\n  .textarea {\n    background: var(--color-white);\n    border-radius: theme('borderRadius.DEFAULT');\n    display: block;\n    outline: none;\n    padding: theme('spacing[1.5]');\n    width: 100%;\n\n    &::placeholder {\n      color: var(--color-ice-500);\n      opacity: 1;\n    }\n\n    &[disabled] {\n      background-color: var(--color-ice-100);\n      border-color: var(--color-ice-500);\n      color: var(--color-ice-500);\n      pointer-events: none;\n    }\n\n    &[disabled]:active,\n    &[disabled]:focus {\n      box-shadow: none;\n    }\n\n    &[disabled]::placeholder {\n      text-transform: none;\n      color: var(--color-ice-500);\n    }\n\n    &[readonly] {\n      border-color: transparent;\n      background-color: transparent;\n      padding-left: 0;\n      padding-right: 0;\n      min-height: unset;\n    }\n  }\n</style>\n"],"names":["attrs","useAttrs","slots","useSlots","classes","useCssModule","props","__props","emits","__emit","textareaRef","ref","observer","isReadOnly","computed","inputAttrs","allAttrs","watch","v","setupResizeObserver","_a","onInput","event","entry","target","parent","findParentScrollable","scrollPosition","offsetDiff","top","height","getOffsetClipRect","viewportHeight","parentTop","parentHeight","offsetTop","el","overflowY","width","left","findPos","offsetLeft","offsetParent","onMounted","nextTick","onBeforeUnmount"],"mappings":"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"}
+{"version":3,"file":"Textarea.js","sources":["../src/components/Textarea/Textarea.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  import { computed, nextTick, onBeforeUnmount, onMounted, ref, useAttrs, useCssModule, useSlots, watch } from 'vue';\n\n  import { FieldProps } from '../Field/Field.types';\n  import Field from '../Field/Field.vue';\n\n  export interface TextareaResizeOptions {\n    /**\n     * It will automatically scroll the page down when it reaches the bottom of the viewport/element\n     */\n    forceBrowserScroll: boolean;\n  }\n\n  export interface TextAreaProps extends FieldProps {\n    /**\n     * Value for the textarea element.\n     */\n    modelValue?: string;\n\n    /**\n     * Deprecated. Use :model-value or v-model instead of :value.\n     * @deprecated Use :model-value or v-model instead of :value.\n     */\n    value?: string | number | null;\n\n    /**\n     * Allow textarea to be resizable vertically.\n     * Alternatively if you want to disable automatic scroll when resizing, you can set `{ forceBrowserScroll: false }`\n     */\n    resize?: boolean | TextareaResizeOptions;\n\n    /**\n     * Placeholder text for the textarea element.\n     * **Note:** placeholders should be used to display examples; they should not be used as labels because they are not accessible as labels. If a real label cannot be used, use the `aria-label` attribute.\n     */\n    placeholder?: string;\n\n    /**\n     * Number of rows to display in the textarea.\n     */\n    rows?: number;\n\n    /**\n     * Maximum number of characters allowed in the textarea.\n     */\n    maxlength?: number;\n  }\n\n  defineOptions({\n    name: 'll-textarea',\n  });\n\n  const attrs = useAttrs();\n  const slots = useSlots();\n  const classes = useCssModule();\n\n  const props = withDefaults(defineProps<TextAreaProps>(), {\n    modelValue: '',\n    value: null,\n    resize: false,\n    maxlength: undefined,\n    rows: undefined,\n    placeholder: undefined,\n  });\n\n  const emits = defineEmits<{\n    /**\n     * Emitted when the model value changes.\n     */\n    (e: 'update:model-value', value: string): void;\n  }>();\n\n  const textareaRef = ref<HTMLTextAreaElement>();\n  const observer = ref<ResizeObserver>();\n  const isReadOnly = computed(() => props.isReadOnly || ('readonly' in attrs && attrs.readonly !== false));\n\n  const inputAttrs = computed(() => {\n    const allAttrs = { ...attrs };\n\n    delete allAttrs['data-test'];\n    delete allAttrs.class;\n\n    return allAttrs;\n  });\n\n  watch(\n    () => props.resize,\n    (v) => {\n      if (v) {\n        setupResizeObserver();\n      } else {\n        observer.value?.disconnect();\n      }\n    },\n  );\n\n  const onInput = (event: Event) => {\n    emits('update:model-value', (event.target as HTMLTextAreaElement).value);\n  };\n\n  const setupResizeObserver = () => {\n    if (observer.value || !textareaRef.value) {\n      return;\n    }\n\n    // the ResizeObserver will be in charge to detect if page needs to scroll when resizing the component\n    observer.value = new ResizeObserver(([entry]) => {\n      const { target } = entry;\n      const parent = findParentScrollable(textareaRef.value as HTMLTextAreaElement) || document.documentElement;\n\n      const { scrollTop: scrollPosition } = parent;\n      let offsetDiff = 0;\n\n      // checks if the closest parent element scrollable is the document page\n      if (parent === document.documentElement) {\n        const { top, height } = getOffsetClipRect(target as HTMLElement);\n        const { innerHeight: viewportHeight } = window;\n\n        offsetDiff = Math.max(top + height - (viewportHeight + scrollPosition), 0);\n      } else {\n        const { top, height } = (target as HTMLElement).getBoundingClientRect();\n        const { top: parentTop } = parent.getBoundingClientRect();\n        const { offsetHeight: parentHeight } = parent;\n        const offsetTop = top - parentTop;\n\n        offsetDiff = Math.max(offsetTop + height - parentHeight, 0);\n      }\n\n      if (offsetDiff) {\n        requestAnimationFrame(() => {\n          parent.scrollTop = scrollPosition + offsetDiff;\n        });\n      }\n    });\n\n    observer.value.observe(textareaRef.value);\n  };\n\n  /**\n   * Retrieve the closest parent that has a scroll. Defaults to the document page.\n   */\n  const findParentScrollable = (el: HTMLElement): HTMLElement | null => {\n    const parent = el.parentElement as HTMLElement;\n    if (!parent) {\n      return null;\n    }\n\n    const { overflowY } = getComputedStyle(parent);\n    if (overflowY !== 'visible') {\n      return parent;\n    }\n\n    if (parent === document.body) {\n      return document.documentElement;\n    }\n\n    return findParentScrollable(parent);\n  };\n\n  /**\n   * Retrieve element absolute positioning relative to the page.\n   */\n  const getOffsetClipRect = (el: HTMLElement) => {\n    const { offsetWidth: width, offsetHeight: height } = el;\n\n    let left = 0;\n    let top = 0;\n\n    const findPos = function ({ offsetLeft, offsetTop, offsetParent }: HTMLElement) {\n      left += offsetLeft;\n      top += offsetTop;\n\n      if (offsetParent) {\n        findPos(offsetParent as HTMLElement);\n      }\n    };\n\n    findPos(el);\n\n    return {\n      top,\n      left,\n      width,\n      height,\n    };\n  };\n\n  onMounted(async () => {\n    if (props.value !== null) {\n      throw new Error('ll-input: use :model-value or v-model instead of :value.');\n    }\n\n    if (attrs.onInput) {\n      throw new Error('ll-input: use the @update:model-value event instead of @input');\n    }\n\n    if (\n      (typeof props.resize === 'boolean' && props.resize) ||\n      (props.resize as TextareaResizeOptions)?.forceBrowserScroll\n    ) {\n      await nextTick();\n      setupResizeObserver();\n    }\n  });\n\n  onBeforeUnmount(() => {\n    observer.value?.disconnect();\n  });\n</script>\n\n<template>\n  <Field v-bind=\"props\" class=\"stash-textarea\" :class=\"[classes.root]\" data-test=\"stash-textarea\">\n    <template #default=\"{ fieldId, fieldErrorId, hasError }\">\n      <textarea\n        :id=\"fieldId\"\n        ref=\"textareaRef\"\n        :aria-errormessage=\"fieldErrorId\"\n        :aria-invalid=\"hasError\"\n        :class=\"[\n          classes.textarea,\n          'tw-border tw-border-ice-500',\n          {\n            'stash-textarea--error tw-border-red-500 tw-text-red-500': hasError,\n            'tw-text-ice-700 hover:tw-border-ice-500 focus:tw-border-blue-500 active:tw-border-blue-500':\n              !hasError && !props.disabled,\n            'tw-resize-y': props.resize,\n            'tw-min-h-[100px]': !props.rows,\n            'tw-resize-none': !props.resize,\n          },\n        ]\"\n        :maxlength=\"props.maxlength\"\n        :value=\"props.modelValue\"\n        data-test=\"stash-textarea|textarea\"\n        :placeholder=\"props.placeholder\"\n        v-bind=\"inputAttrs\"\n        :disabled=\"props.disabled\"\n        :readonly=\"isReadOnly\"\n        :rows=\"props.rows\"\n        @input=\"onInput\"\n      ></textarea>\n    </template>\n    <template v-if=\"slots.hint\" #hint>\n      <!-- @slot Hint content -->\n      <slot name=\"hint\"></slot>\n    </template>\n  </Field>\n</template>\n\n<style module>\n  .root {\n    position: relative;\n    width: 100%;\n  }\n\n  .textarea {\n    background: var(--color-white);\n    border-radius: theme('borderRadius.DEFAULT');\n    display: block;\n    outline: none;\n    padding: theme('spacing[1.5]');\n    width: 100%;\n\n    &::placeholder {\n      color: var(--color-ice-500);\n      opacity: 1;\n    }\n\n    &[disabled] {\n      background-color: var(--color-ice-100);\n      border-color: var(--color-ice-500);\n      color: var(--color-ice-500);\n      pointer-events: none;\n    }\n\n    &[disabled]:active,\n    &[disabled]:focus {\n      box-shadow: none;\n    }\n\n    &[disabled]::placeholder {\n      text-transform: none;\n      color: var(--color-ice-500);\n    }\n\n    &[readonly] {\n      border-color: transparent;\n      background-color: transparent;\n      padding-left: 0;\n      padding-right: 0;\n      min-height: unset;\n    }\n  }\n</style>\n"],"names":["attrs","useAttrs","slots","useSlots","classes","useCssModule","props","__props","emits","__emit","textareaRef","ref","observer","isReadOnly","computed","inputAttrs","allAttrs","watch","v","setupResizeObserver","_a","onInput","event","entry","target","parent","findParentScrollable","scrollPosition","offsetDiff","top","height","getOffsetClipRect","viewportHeight","parentTop","parentHeight","offsetTop","el","overflowY","width","left","findPos","offsetLeft","offsetParent","onMounted","nextTick","onBeforeUnmount"],"mappings":"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"}

package/dist/tailwind-base.d.ts

@@ -30,6 +30,10 @@ declare const _default: {
         }>;
         fontFamily: {
             mono: [string];
+            sans: [string, string];
+            /**
+             * @deprecated - use `tw-font-sans` instead!
+             */
             sofia: [string, string];
         };
         colors: {

package/dist/tailwind-base.js

@@ -45,10 +45,12 @@ const l = {
   blocklist: ["container"],
   theme: {
     screens: i,
-    // Creates classes like `.sofia` that applies the appropriate font family
-    // to our typography elements.
     fontFamily: {
       mono: ["monospace"],
+      sans: ["Sofia", "sans-serif"],
+      /**
+       * @deprecated - use `tw-font-sans` instead!
+       */
       sofia: ["Sofia", "sans-serif"]
     },
     colors: {
@@ -383,7 +385,7 @@ const l = {
     container: !1,
     preflight: !1
   }
-}, p = () => {
+}, o = () => {
   const e = [];
   return ["purple", "royal", "blue", "seafoam", "teal", "green", "yellow", "orange", "red", "ice"].forEach((a) => {
     ["bg", "text", "border", "stroke"].forEach((t) => {
@@ -395,6 +397,6 @@ const l = {
 };
 export {
   l as default,
-  p as getColorClasses
+  o as getColorClasses
 };
 //# sourceMappingURL=tailwind-base.js.map

package/dist/tailwind-base.js.map

@@ -1 +1 @@
-{"version":3,"file":"tailwind-base.js","sources":["../tailwind-base.ts"],"sourcesContent":["import type { Config } from 'tailwindcss';\n\nimport { SCREEN_SIZES } from './src/constants';\n\nexport default {\n  content: [\n    // Todo: can/should this be optimized? Where should we be looking for classes?\n    './src/**/*.{vue,ts,tsx,js,jsx,mdx}',\n  ],\n\n  prefix: 'tw-',\n\n  // ALWAYS include these color related classes. This allows us to dynamically\n  // create color classes based on a color prop in our components instead of\n  // listing the full class name like is encouraged in the docs.\n  // https://tailwindcss.com/docs/content-configuration#using-regular-expressions\n  //\n  // Note: If any stash components change which color classes they dynamically build,\n  // this needs to change. Keep this list as small as possible.\n  //\n  // Note: Patterns can only match against base utility names like /bg-red-.+/, and won’t match if the pattern\n  // includes a variant modifier like /hover:bg-red-.+/.\n  safelist: [\n    {\n      pattern: /(bg|text|border)-(purple|royal|blue|seafoam|teal|green|yellow|orange|red|ice)(-[1,5,7]00)$/,\n    },\n    // Illustration.vue stroke color.\n    {\n      pattern: /stroke-(purple|royal|blue|seafoam|teal|green|yellow|orange|red|ice)-500$/,\n    },\n    // Illustration.vue dynamic text.\n    {\n      pattern: /text-(purple|royal|blue|seafoam|teal|green|yellow|orange|red|ice)-400$/,\n    },\n    // Dynamic bg color for components using the colorScheme function (Chip, Avatar, etc.)\n    'bg-ice-200',\n    // These are custom classes that we might not use in our Stash code, but we\n    // define in Stash and want to keep in the final CSS for downstream use.\n    'heading-jumbo',\n    // allow white and black to be used dynamically\n    'bg-white',\n    'bg-black',\n    'text-white',\n    'text-black',\n    'border-white',\n    'border-black',\n  ],\n\n  // Conflicts with our own custom classes\n  // https://tailwindcss.com/docs/content-configuration#discarding-classes\n  blocklist: ['container'],\n\n  theme: {\n    screens: SCREEN_SIZES,\n\n    // Creates classes like `.sofia` that applies the appropriate font family\n    // to our typography elements.\n    fontFamily: {\n      mono: ['monospace'],\n      sofia: ['Sofia', 'sans-serif'],\n    },\n\n    colors: {\n      white: '#fff',\n      black: '#000',\n      transparent: 'transparent',\n      inherit: 'inherit',\n\n      // --color-white: #ffffff;\n      // --color-black: #000000;\n      // --color-blue-hover: rgba(0,114,240,0.74902);\n      // --color-red-hover: rgba(228,0,43,0.74902);\n      // --color-ice-700-hover: rgba(118,121,127,0.11765);\n      // --color-white-hover: rgba(255,255,255,0.11765);\n      // --button-secondary-blue-hover: rgba(0,114,240,0.11765);\n      // --button-secondary-red-hover: rgba(228,0,43,0.11765);\n\n      // https://tailwindcss.com/docs/upgrade-guide#fill-and-stroke-use-color-palette\n      current: 'currentColor',\n\n      purple: {\n        900: '#06040F',\n        800: '#0C091E',\n        700: '#120D2D',\n        600: '#18123C',\n        500: '#1E164B',\n        400: '#4B456F',\n        300: '#787393',\n        200: '#A5A2B7',\n        100: '#D2D0DB',\n      },\n\n      royal: {\n        900: '#0A0C24',\n        800: '#131747',\n        700: '#1D236B',\n        600: '#262E8E',\n        500: '#303AB2',\n        400: '#5961C1',\n        300: '#8389D1',\n        200: '#ACB0E0',\n        100: '#D6D8F0',\n      },\n\n      blue: {\n        900: '#001730',\n        800: '#002E60',\n        700: '#004490',\n        600: '#005BC0',\n        500: '#0072F0',\n        400: '#338EF3',\n        300: '#66AAF6',\n        200: '#99C7F9',\n        100: '#CCE3FC',\n      },\n\n      teal: {\n        900: '#002528',\n        800: '#004B50',\n        700: '#017078',\n        600: '#0196A0',\n        500: '#01BBC8',\n        400: '#34C9D3',\n        300: '#67D6DE',\n        200: '#99E4E9',\n        100: '#CCF1F4',\n      },\n\n      green: {\n        900: '#062313',\n        800: '#0C4627',\n        700: '#11683A',\n        600: '#178B4E',\n        500: '#1DAE61',\n        400: '#4ABE81',\n        300: '#77CEA0',\n        200: '#A5DFC0',\n        100: '#D2EFDF',\n      },\n\n      seafoam: {\n        900: '#0C2C26',\n        800: '#18584D',\n        700: '#248373',\n        600: '#30AF9A',\n        500: '#3CDBC0',\n        400: '#63E2CD',\n        300: '#8AE9D9',\n        200: '#B1F1E6',\n        100: '#D8F8F2',\n      },\n\n      yellow: {\n        900: '#332A00',\n        800: '#665500',\n        700: '#997F00',\n        600: '#CCAA00',\n        500: '#FFD400',\n        400: '#FFDD33',\n        300: '#FFE566',\n        200: '#FFEE99',\n        100: '#FFF6CC',\n      },\n\n      orange: {\n        900: '#331E07',\n        800: '#663B0F',\n        700: '#995916',\n        600: '#CC761E',\n        500: '#FF9425',\n        400: '#FFA951',\n        300: '#FFBF7C',\n        200: '#FFD4A8',\n        100: '#FFEAD3',\n      },\n\n      red: {\n        900: '#2E0009',\n        800: '#5B0011',\n        700: '#89001A',\n        600: '#B60022',\n        500: '#E4002B',\n        400: '#E93355',\n        300: '#EF6680',\n        200: '#F499AA',\n        100: '#FACCD5',\n      },\n\n      ice: {\n        900: '#27282A',\n        800: '#4F5055',\n        700: '#76797F',\n        600: '#9EA1AA',\n        500: '#C5C9D4',\n        400: '#D1D4DD',\n        300: '#DCDFE5',\n        200: '#E8E9EE',\n        100: '#F3F4F6',\n      },\n    },\n\n    // Custom additions to Tailwind's existing utility classes.\n    // https://tailwindcss.com/docs/theme#extending-the-default-theme\n    extend: {\n      backgroundImage: {\n        'scroll-shadow': 'linear-gradient(0deg, rgb(197 201 212 / 35%), rgb(38 38 38 / 0%))',\n      },\n\n      borderWidth: {\n        6: '6px',\n        10: '10px',\n        12: '12px',\n      },\n\n      // .tw-shadow-*\n      boxShadow: {\n        // Modules or Images if necessary (Previously Shadow Low)\n        DEFAULT: '0px 2px 2px 0px rgba(38, 38, 38, 0.05), 0px 2px 6px 0px rgba(38, 38, 38, 0.10)',\n\n        // Cards Scroll Lock Modules like Global Nav or the Bulk Select Mobile Pattern\n        md: '0px 3px 3px 1px rgba(38, 38, 38, 0.05), 0px 3px 12px 1px rgba(38, 38, 38, 0.10)',\n\n        // TBD\n        lg: '0px 6px 6px 0px rgba(38, 38, 38, 0.05), 0px 6px 18px 2px rgba(38, 38, 38, 0.10), 0px 6px 18px 2px rgba(38, 38, 38, 0.15)',\n\n        // Floating UIs like the Zendesk Help center\n        xl: '0px 12px 12px 0px rgba(38, 38, 38, 0.05), 0px 12px 12px 2px rgba(38, 38, 38, 0.10), 0px 12px 24px 2px rgba(38, 38, 38, 0.15)',\n\n        // Dropdowns, Selects, Menus\n        '2xl':\n          '0px 18px 18px 4px rgba(38, 38, 38, 0.05), 0px 18px 18px 4px rgba(38, 38, 38, 0.10), 0px 18px 30px 0px rgba(38, 38, 38, 0.15)',\n\n        // Dialogs, Modals and any other Overlay types (Previously Shadow High)\n        '3xl':\n          '0px 24px 24px 0px rgba(38, 38, 38, 0.05), 0px 24px 24px 8px rgba(38, 38, 38, 0.10), 0px 24px 48px 8px rgba(38, 38, 38, 0.15)',\n\n        // @deprecated - use `tw-shadow` instead!\n        low: '0 2px 4px rgba(0, 15, 35, 0.06)',\n\n        // @deprecated - use `tw-shadow-3xl` instead!\n        high: '0 4px 8px rgba(0, 15, 35, 0.06)',\n      },\n\n      // .tw-text-*\n      // Note: All these font SIZES match tailwind! We're only overriding default\n      // line-height to match LL typography & adjust for Sofia.\n      fontSize: {\n        '2xl': [\n          '1.5rem',\n          {\n            lineHeight: 'calc(32/24)',\n          },\n        ],\n\n        xl: [\n          '1.25rem',\n          {\n            lineHeight: 'calc(28/20)',\n          },\n        ],\n\n        base: [\n          '1rem',\n          {\n            lineHeight: 'calc(24/16)',\n          },\n        ],\n\n        sm: [\n          '0.875rem',\n          {\n            lineHeight: 'calc(20/14)',\n          },\n        ],\n\n        xs: [\n          '0.75rem',\n          {\n            lineHeight: 'calc(16/12)',\n          },\n        ],\n      },\n\n      height: {\n        input: '2.25rem', // 36px\n        logo: '1.375rem', // 22px\n        topbar: '3.5rem', // 56px\n        chip: '1.375rem', // 22px\n      },\n\n      // .tw-max-h-*\n      maxHeight: {\n        'select-menu': '18.75rem', // 300px - sharable with dropdown, date, etc.\n      },\n\n      // .tw-leading-*\n      lineHeight: {\n        initial: 'initial',\n        '2xl': 'calc(32/24)',\n        xl: 'calc(28/20)',\n        base: 'calc(24/16)',\n        // for backwards compatibility with LL typography line-heights\n        body: '20/14',\n        small: '16/12',\n        button: '24/14',\n      },\n\n      // .tw-min-w-*\n      minWidth: {\n        auto: 'auto',\n        input: '9rem', // 144px\n      },\n\n      // .tw-max-w-*\n      maxWidth: {\n        field: '18rem', // 288px - standard width used for form field elements\n        initial: 'initial',\n        container: '87.5rem', // 1400px - max width used for page content\n      },\n\n      // .tw-rotate-*\n      rotate: {\n        '270': '270deg',\n      },\n\n      // https://tailwindcss.com/docs/customizing-spacing\n      spacing: {\n        15: '3.75rem', // 60px (same as ll-spacing-6 to help migrate)\n        // This is the only tailwind setting dependent on a variable and this is because the\n        // variable actually has responsive styles baked in, and there's no way to do that\n        // with tailwind. Defined in `styles/base.css`.\n        gutter: 'var(--grid-gutter)',\n        sidebar: '17.5rem', // 280px\n      },\n\n      // .tw-w-*\n      width: {\n        container: '87.5rem', // 1400px\n        'inline-edit': '8.75rem', // 140px - standard width used for ll-inline-edit elements\n        'inline-edit-small': '5.6rem', // 90px - standard width used for smaller ll-inline-edit elements\n        sidebar: '17.5rem', // 280px\n        'select-menu': '5rem', // 80px\n      },\n\n      // .tw-z-*\n      zIndex: {\n        '-10': '-10',\n        '-20': '-20',\n        '-30': '-30',\n        behind: '-1',\n        content: '100', // general content on the page\n        control: '200', // for UI controls, widgets, buttons, etc. These are given one level higher priority\n        page: '300', // applies to page-level blocks, ie. site-header, side-nav, etc\n        screen: '400', // covers all \"standard\" things visible on the screen: page-level blocks, UI/control things, general content\n        modal: '1000', // covers all things except dialogs, including other elements promoted along the z-axis.\n        dialog: '1001', // covers all things, including other elements promoted along the z-axis.\n      },\n\n      animation: {\n        grow: 'grow 1s',\n        pulse: 'pulse 2s cubic-bezier(.4, 0, .6,1) infinite',\n        shake: 'shake 1s ease 0s 1 normal none running',\n      },\n\n      keyframes: {\n        grow: {\n          'from, to': {\n            transform: 'scale3d(1, 1, 1)',\n          },\n          '50%': {\n            transform: 'scale3d(1.25, 1.25, 1.25)',\n          },\n        },\n\n        pulse: {\n          '0%, 100%': { opacity: '1' },\n          '50%': { opacity: '0.25' },\n        },\n\n        shake: {\n          'from, to': {\n            transform: 'translate3d(0, 0, 0)',\n          },\n          '10%, 30%, 50%, 70%, 90%': {\n            transform: 'translate3d(-10px, 0, 0)',\n          },\n          '20%, 40%, 60%, 80%': {\n            transform: 'translate3d(10px, 0, 0)',\n          },\n        },\n      },\n\n      // .tw-ease-*\n      transitionTimingFunction: {\n        'fast-out-slow-in': 'cubic-bezier(0.4, 0, 0.2, 1)',\n        'linear-out-slow-in': 'cubic-bezier(0, 0, 0.2, 1)',\n        'fast-out-linear-in': 'cubic-bezier(0.4, 0, 1, 1)',\n        'ease-in-out': 'cubic-bezier(0.4, 0, 0.6, 1)',\n        'fast-in-fast-out': 'cubic-bezier(0.25, 0.8, 0.25, 1)',\n        swing: 'cubic-bezier(0.25, 0.8, 0.5, 1)',\n      },\n\n      // .tw-duration-*\n      transitionDuration: {\n        snap: '0.1s',\n        fast: '0.165s',\n        brisk: '0.333s',\n        slow: '0.5s',\n        sleepy: '1s',\n      },\n    },\n  },\n\n  corePlugins: {\n    // because we have our own\n    container: false,\n    preflight: false,\n  },\n} satisfies Config;\n\n/**\n * Utility to return a holistic array of tailwind color classes.\n *\n * This function will allow downstream applications to easily **blocklist** the same color\n * classes that are safelisted in the base preset, just in case they need to prevent unnecessarily\n * duplicating classes in their final build.\n *\n * @see {@link https://tailwindcss.com/docs/content-configuration#discarding-classes}\n */\nexport const getColorClasses = () => {\n  const classes: Array<string> = [];\n\n  ['purple', 'royal', 'blue', 'seafoam', 'teal', 'green', 'yellow', 'orange', 'red', 'ice'].forEach((color) => {\n    ['bg', 'text', 'border', 'stroke'].forEach((plugin) => {\n      ['', '400'].forEach((shade) => {\n        classes.push(`tw-${plugin}-${color}${shade ? `-${shade}` : ''}`);\n      });\n    });\n  });\n\n  return classes;\n};\n"],"names":["tailwindBase","SCREEN_SIZES","getColorClasses","classes","color","plugin","shade"],"mappings":"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"}
+{"version":3,"file":"tailwind-base.js","sources":["../tailwind-base.ts"],"sourcesContent":["import type { Config } from 'tailwindcss';\n\nimport { SCREEN_SIZES } from './src/constants';\n\nexport default {\n  content: [\n    // Todo: can/should this be optimized? Where should we be looking for classes?\n    './src/**/*.{vue,ts,tsx,js,jsx,mdx}',\n  ],\n\n  prefix: 'tw-',\n\n  // ALWAYS include these color related classes. This allows us to dynamically\n  // create color classes based on a color prop in our components instead of\n  // listing the full class name like is encouraged in the docs.\n  // https://tailwindcss.com/docs/content-configuration#using-regular-expressions\n  //\n  // Note: If any stash components change which color classes they dynamically build,\n  // this needs to change. Keep this list as small as possible.\n  //\n  // Note: Patterns can only match against base utility names like /bg-red-.+/, and won’t match if the pattern\n  // includes a variant modifier like /hover:bg-red-.+/.\n  safelist: [\n    {\n      pattern: /(bg|text|border)-(purple|royal|blue|seafoam|teal|green|yellow|orange|red|ice)(-[1,5,7]00)$/,\n    },\n    // Illustration.vue stroke color.\n    {\n      pattern: /stroke-(purple|royal|blue|seafoam|teal|green|yellow|orange|red|ice)-500$/,\n    },\n    // Illustration.vue dynamic text.\n    {\n      pattern: /text-(purple|royal|blue|seafoam|teal|green|yellow|orange|red|ice)-400$/,\n    },\n    // Dynamic bg color for components using the colorScheme function (Chip, Avatar, etc.)\n    'bg-ice-200',\n    // These are custom classes that we might not use in our Stash code, but we\n    // define in Stash and want to keep in the final CSS for downstream use.\n    'heading-jumbo',\n    // allow white and black to be used dynamically\n    'bg-white',\n    'bg-black',\n    'text-white',\n    'text-black',\n    'border-white',\n    'border-black',\n  ],\n\n  // Conflicts with our own custom classes\n  // https://tailwindcss.com/docs/content-configuration#discarding-classes\n  blocklist: ['container'],\n\n  theme: {\n    screens: SCREEN_SIZES,\n\n    fontFamily: {\n      mono: ['monospace'],\n      sans: ['Sofia', 'sans-serif'],\n      /**\n       * @deprecated - use `tw-font-sans` instead!\n       */\n      sofia: ['Sofia', 'sans-serif'],\n    },\n\n    colors: {\n      white: '#fff',\n      black: '#000',\n      transparent: 'transparent',\n      inherit: 'inherit',\n\n      // --color-white: #ffffff;\n      // --color-black: #000000;\n      // --color-blue-hover: rgba(0,114,240,0.74902);\n      // --color-red-hover: rgba(228,0,43,0.74902);\n      // --color-ice-700-hover: rgba(118,121,127,0.11765);\n      // --color-white-hover: rgba(255,255,255,0.11765);\n      // --button-secondary-blue-hover: rgba(0,114,240,0.11765);\n      // --button-secondary-red-hover: rgba(228,0,43,0.11765);\n\n      // https://tailwindcss.com/docs/upgrade-guide#fill-and-stroke-use-color-palette\n      current: 'currentColor',\n\n      purple: {\n        900: '#06040F',\n        800: '#0C091E',\n        700: '#120D2D',\n        600: '#18123C',\n        500: '#1E164B',\n        400: '#4B456F',\n        300: '#787393',\n        200: '#A5A2B7',\n        100: '#D2D0DB',\n      },\n\n      royal: {\n        900: '#0A0C24',\n        800: '#131747',\n        700: '#1D236B',\n        600: '#262E8E',\n        500: '#303AB2',\n        400: '#5961C1',\n        300: '#8389D1',\n        200: '#ACB0E0',\n        100: '#D6D8F0',\n      },\n\n      blue: {\n        900: '#001730',\n        800: '#002E60',\n        700: '#004490',\n        600: '#005BC0',\n        500: '#0072F0',\n        400: '#338EF3',\n        300: '#66AAF6',\n        200: '#99C7F9',\n        100: '#CCE3FC',\n      },\n\n      teal: {\n        900: '#002528',\n        800: '#004B50',\n        700: '#017078',\n        600: '#0196A0',\n        500: '#01BBC8',\n        400: '#34C9D3',\n        300: '#67D6DE',\n        200: '#99E4E9',\n        100: '#CCF1F4',\n      },\n\n      green: {\n        900: '#062313',\n        800: '#0C4627',\n        700: '#11683A',\n        600: '#178B4E',\n        500: '#1DAE61',\n        400: '#4ABE81',\n        300: '#77CEA0',\n        200: '#A5DFC0',\n        100: '#D2EFDF',\n      },\n\n      seafoam: {\n        900: '#0C2C26',\n        800: '#18584D',\n        700: '#248373',\n        600: '#30AF9A',\n        500: '#3CDBC0',\n        400: '#63E2CD',\n        300: '#8AE9D9',\n        200: '#B1F1E6',\n        100: '#D8F8F2',\n      },\n\n      yellow: {\n        900: '#332A00',\n        800: '#665500',\n        700: '#997F00',\n        600: '#CCAA00',\n        500: '#FFD400',\n        400: '#FFDD33',\n        300: '#FFE566',\n        200: '#FFEE99',\n        100: '#FFF6CC',\n      },\n\n      orange: {\n        900: '#331E07',\n        800: '#663B0F',\n        700: '#995916',\n        600: '#CC761E',\n        500: '#FF9425',\n        400: '#FFA951',\n        300: '#FFBF7C',\n        200: '#FFD4A8',\n        100: '#FFEAD3',\n      },\n\n      red: {\n        900: '#2E0009',\n        800: '#5B0011',\n        700: '#89001A',\n        600: '#B60022',\n        500: '#E4002B',\n        400: '#E93355',\n        300: '#EF6680',\n        200: '#F499AA',\n        100: '#FACCD5',\n      },\n\n      ice: {\n        900: '#27282A',\n        800: '#4F5055',\n        700: '#76797F',\n        600: '#9EA1AA',\n        500: '#C5C9D4',\n        400: '#D1D4DD',\n        300: '#DCDFE5',\n        200: '#E8E9EE',\n        100: '#F3F4F6',\n      },\n    },\n\n    // Custom additions to Tailwind's existing utility classes.\n    // https://tailwindcss.com/docs/theme#extending-the-default-theme\n    extend: {\n      backgroundImage: {\n        'scroll-shadow': 'linear-gradient(0deg, rgb(197 201 212 / 35%), rgb(38 38 38 / 0%))',\n      },\n\n      borderWidth: {\n        6: '6px',\n        10: '10px',\n        12: '12px',\n      },\n\n      // .tw-shadow-*\n      boxShadow: {\n        // Modules or Images if necessary (Previously Shadow Low)\n        DEFAULT: '0px 2px 2px 0px rgba(38, 38, 38, 0.05), 0px 2px 6px 0px rgba(38, 38, 38, 0.10)',\n\n        // Cards Scroll Lock Modules like Global Nav or the Bulk Select Mobile Pattern\n        md: '0px 3px 3px 1px rgba(38, 38, 38, 0.05), 0px 3px 12px 1px rgba(38, 38, 38, 0.10)',\n\n        // TBD\n        lg: '0px 6px 6px 0px rgba(38, 38, 38, 0.05), 0px 6px 18px 2px rgba(38, 38, 38, 0.10), 0px 6px 18px 2px rgba(38, 38, 38, 0.15)',\n\n        // Floating UIs like the Zendesk Help center\n        xl: '0px 12px 12px 0px rgba(38, 38, 38, 0.05), 0px 12px 12px 2px rgba(38, 38, 38, 0.10), 0px 12px 24px 2px rgba(38, 38, 38, 0.15)',\n\n        // Dropdowns, Selects, Menus\n        '2xl':\n          '0px 18px 18px 4px rgba(38, 38, 38, 0.05), 0px 18px 18px 4px rgba(38, 38, 38, 0.10), 0px 18px 30px 0px rgba(38, 38, 38, 0.15)',\n\n        // Dialogs, Modals and any other Overlay types (Previously Shadow High)\n        '3xl':\n          '0px 24px 24px 0px rgba(38, 38, 38, 0.05), 0px 24px 24px 8px rgba(38, 38, 38, 0.10), 0px 24px 48px 8px rgba(38, 38, 38, 0.15)',\n\n        // @deprecated - use `tw-shadow` instead!\n        low: '0 2px 4px rgba(0, 15, 35, 0.06)',\n\n        // @deprecated - use `tw-shadow-3xl` instead!\n        high: '0 4px 8px rgba(0, 15, 35, 0.06)',\n      },\n\n      // .tw-text-*\n      // Note: All these font SIZES match tailwind! We're only overriding default\n      // line-height to match LL typography & adjust for Sofia.\n      fontSize: {\n        '2xl': [\n          '1.5rem',\n          {\n            lineHeight: 'calc(32/24)',\n          },\n        ],\n\n        xl: [\n          '1.25rem',\n          {\n            lineHeight: 'calc(28/20)',\n          },\n        ],\n\n        base: [\n          '1rem',\n          {\n            lineHeight: 'calc(24/16)',\n          },\n        ],\n\n        sm: [\n          '0.875rem',\n          {\n            lineHeight: 'calc(20/14)',\n          },\n        ],\n\n        xs: [\n          '0.75rem',\n          {\n            lineHeight: 'calc(16/12)',\n          },\n        ],\n      },\n\n      height: {\n        input: '2.25rem', // 36px\n        logo: '1.375rem', // 22px\n        topbar: '3.5rem', // 56px\n        chip: '1.375rem', // 22px\n      },\n\n      // .tw-max-h-*\n      maxHeight: {\n        'select-menu': '18.75rem', // 300px - sharable with dropdown, date, etc.\n      },\n\n      // .tw-leading-*\n      lineHeight: {\n        initial: 'initial',\n        '2xl': 'calc(32/24)',\n        xl: 'calc(28/20)',\n        base: 'calc(24/16)',\n        // for backwards compatibility with LL typography line-heights\n        body: '20/14',\n        small: '16/12',\n        button: '24/14',\n      },\n\n      // .tw-min-w-*\n      minWidth: {\n        auto: 'auto',\n        input: '9rem', // 144px\n      },\n\n      // .tw-max-w-*\n      maxWidth: {\n        field: '18rem', // 288px - standard width used for form field elements\n        initial: 'initial',\n        container: '87.5rem', // 1400px - max width used for page content\n      },\n\n      // .tw-rotate-*\n      rotate: {\n        '270': '270deg',\n      },\n\n      // https://tailwindcss.com/docs/customizing-spacing\n      spacing: {\n        15: '3.75rem', // 60px (same as ll-spacing-6 to help migrate)\n        // This is the only tailwind setting dependent on a variable and this is because the\n        // variable actually has responsive styles baked in, and there's no way to do that\n        // with tailwind. Defined in `styles/base.css`.\n        gutter: 'var(--grid-gutter)',\n        sidebar: '17.5rem', // 280px\n      },\n\n      // .tw-w-*\n      width: {\n        container: '87.5rem', // 1400px\n        'inline-edit': '8.75rem', // 140px - standard width used for ll-inline-edit elements\n        'inline-edit-small': '5.6rem', // 90px - standard width used for smaller ll-inline-edit elements\n        sidebar: '17.5rem', // 280px\n        'select-menu': '5rem', // 80px\n      },\n\n      // .tw-z-*\n      zIndex: {\n        '-10': '-10',\n        '-20': '-20',\n        '-30': '-30',\n        behind: '-1',\n        content: '100', // general content on the page\n        control: '200', // for UI controls, widgets, buttons, etc. These are given one level higher priority\n        page: '300', // applies to page-level blocks, ie. site-header, side-nav, etc\n        screen: '400', // covers all \"standard\" things visible on the screen: page-level blocks, UI/control things, general content\n        modal: '1000', // covers all things except dialogs, including other elements promoted along the z-axis.\n        dialog: '1001', // covers all things, including other elements promoted along the z-axis.\n      },\n\n      animation: {\n        grow: 'grow 1s',\n        pulse: 'pulse 2s cubic-bezier(.4, 0, .6,1) infinite',\n        shake: 'shake 1s ease 0s 1 normal none running',\n      },\n\n      keyframes: {\n        grow: {\n          'from, to': {\n            transform: 'scale3d(1, 1, 1)',\n          },\n          '50%': {\n            transform: 'scale3d(1.25, 1.25, 1.25)',\n          },\n        },\n\n        pulse: {\n          '0%, 100%': { opacity: '1' },\n          '50%': { opacity: '0.25' },\n        },\n\n        shake: {\n          'from, to': {\n            transform: 'translate3d(0, 0, 0)',\n          },\n          '10%, 30%, 50%, 70%, 90%': {\n            transform: 'translate3d(-10px, 0, 0)',\n          },\n          '20%, 40%, 60%, 80%': {\n            transform: 'translate3d(10px, 0, 0)',\n          },\n        },\n      },\n\n      // .tw-ease-*\n      transitionTimingFunction: {\n        'fast-out-slow-in': 'cubic-bezier(0.4, 0, 0.2, 1)',\n        'linear-out-slow-in': 'cubic-bezier(0, 0, 0.2, 1)',\n        'fast-out-linear-in': 'cubic-bezier(0.4, 0, 1, 1)',\n        'ease-in-out': 'cubic-bezier(0.4, 0, 0.6, 1)',\n        'fast-in-fast-out': 'cubic-bezier(0.25, 0.8, 0.25, 1)',\n        swing: 'cubic-bezier(0.25, 0.8, 0.5, 1)',\n      },\n\n      // .tw-duration-*\n      transitionDuration: {\n        snap: '0.1s',\n        fast: '0.165s',\n        brisk: '0.333s',\n        slow: '0.5s',\n        sleepy: '1s',\n      },\n    },\n  },\n\n  corePlugins: {\n    // because we have our own\n    container: false,\n    preflight: false,\n  },\n} satisfies Config;\n\n/**\n * Utility to return a holistic array of tailwind color classes.\n *\n * This function will allow downstream applications to easily **blocklist** the same color\n * classes that are safelisted in the base preset, just in case they need to prevent unnecessarily\n * duplicating classes in their final build.\n *\n * @see {@link https://tailwindcss.com/docs/content-configuration#discarding-classes}\n */\nexport const getColorClasses = () => {\n  const classes: Array<string> = [];\n\n  ['purple', 'royal', 'blue', 'seafoam', 'teal', 'green', 'yellow', 'orange', 'red', 'ice'].forEach((color) => {\n    ['bg', 'text', 'border', 'stroke'].forEach((plugin) => {\n      ['', '400'].forEach((shade) => {\n        classes.push(`tw-${plugin}-${color}${shade ? `-${shade}` : ''}`);\n      });\n    });\n  });\n\n  return classes;\n};\n"],"names":["tailwindBase","SCREEN_SIZES","getColorClasses","classes","color","plugin","shade"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leaflink/stash",
-  "version": "50.17.0",
+  "version": "51.0.0",
   "description": "LeafLink's design system.",
   "homepage": "https://stash.leaflink.com",
   "main": "./dist/index.ts",

package/styles/base.css

@@ -183,33 +183,6 @@
  */
 
 @layer base {
-  @font-face {
-    font-family: Sofia;
-    font-style: normal;
-    font-weight: 400;
-    src:
-      url('/static/fonts/sofia/SofiaProRegular.woff2') format('woff2'),
-      url('/static/fonts/sofia/SofiaProRegular.woff') format('woff');
-  }
-
-  @font-face {
-    font-family: Sofia;
-    font-style: normal;
-    font-weight: 500;
-    src:
-      url('/static/fonts/sofia/SofiaProMedium.woff2') format('woff2'),
-      url('/static/fonts/sofia/SofiaProMedium.woff') format('woff');
-  }
-
-  @font-face {
-    font-family: Sofia;
-    font-style: normal;
-    font-weight: 600;
-    src:
-      url('/static/fonts/sofia/SofiaProSemiBold.woff2') format('woff2'),
-      url('/static/fonts/sofia/SofiaProSemiBold.woff') format('woff');
-  }
-
   html {
     -moz-osx-font-smoothing: grayscale;
     -webkit-font-smoothing: antialiased;
@@ -219,9 +192,8 @@
   }
 
   body {
-    @apply tw-leading-normal tw-text-ice-700 tw-bg-ice-100 tw-font-normal tw-text-sm;
+    @apply tw-leading-normal tw-text-ice-700 tw-bg-ice-100 tw-font-normal tw-text-sm tw-font-sans;
 
-    font-family: Sofia, sans-serif;
     min-height: 100vh;
     position: relative;
   }

package/styles/sofia-font.css

@@ -0,0 +1,30 @@
+@tailwind base;
+
+@layer base {
+  @font-face {
+    font-family: Sofia;
+    font-style: normal;
+    font-weight: 400;
+    src:
+      url('/static/fonts/sofia/SofiaProRegular.woff2') format('woff2'),
+      url('/static/fonts/sofia/SofiaProRegular.woff') format('woff');
+  }
+
+  @font-face {
+    font-family: Sofia;
+    font-style: normal;
+    font-weight: 500;
+    src:
+      url('/static/fonts/sofia/SofiaProMedium.woff2') format('woff2'),
+      url('/static/fonts/sofia/SofiaProMedium.woff') format('woff');
+  }
+
+  @font-face {
+    font-family: Sofia;
+    font-style: normal;
+    font-weight: 600;
+    src:
+      url('/static/fonts/sofia/SofiaProSemiBold.woff2') format('woff2'),
+      url('/static/fonts/sofia/SofiaProSemiBold.woff') format('woff');
+  }
+}

package/tailwind-base.ts

@@ -53,10 +53,12 @@ export default {
   theme: {
     screens: SCREEN_SIZES,
 
-    // Creates classes like `.sofia` that applies the appropriate font family
-    // to our typography elements.
     fontFamily: {
       mono: ['monospace'],
+      sans: ['Sofia', 'sans-serif'],
+      /**
+       * @deprecated - use `tw-font-sans` instead!
+       */
       sofia: ['Sofia', 'sans-serif'],
     },