@indielayer/ui 1.2.0 → 1.4.0

package/lib/themes/carbon/styles.css.js

@@ -0,0 +1,86 @@
+const o = `html {
+  color: #111827;
+  background-color: white;
+}
+
+html.dark {
+  color: #f3f4f6;
+  background-color: #111827;
+}
+
+*,
+::before,
+::after {
+  border-color: #e5e7eb;
+}
+
+.dark *,
+.dark ::before,
+.dark ::after {
+  border-color: #374151;
+}
+
+:root {
+  --font-family-sans: "IBM Plex Sans", "Helvetica Neue", arial, sans-serif;
+  --font-family-mono: "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", courier, monospace;
+  --border-color: 226, 232, 240;
+  --primary-color-50: 236, 253, 245;
+  --primary-color-100: 209, 250, 229;
+  --primary-color-200: 167, 243, 208;
+  --primary-color-300: 110, 231, 183;
+  --primary-color-400: 52, 211, 153;
+  --primary-color-500: 16, 185, 129;
+  --primary-color-600: 5, 150, 105;
+  --primary-color-700: 4, 120, 87;
+  --primary-color-800: 6, 95, 70;
+  --primary-color-900: 6, 78, 59;
+  --primary-color-950: 2, 44, 34;
+  --secondary-color-50: 248, 250, 252;
+  --secondary-color-100: 241, 245, 249;
+  --secondary-color-200: 226, 232, 240;
+  --secondary-color-300: 203, 213, 225;
+  --secondary-color-400: 148, 163, 184;
+  --secondary-color-500: 100, 116, 139;
+  --secondary-color-600: 71, 85, 105;
+  --secondary-color-700: 51, 65, 85;
+  --secondary-color-800: 30, 41, 59;
+  --secondary-color-900: 15, 23, 42;
+  --secondary-color-950: 2, 6, 23;
+  --success-color-50: 240, 253, 244;
+  --success-color-100: 220, 252, 231;
+  --success-color-200: 187, 247, 208;
+  --success-color-300: 134, 239, 172;
+  --success-color-400: 74, 222, 128;
+  --success-color-500: 34, 197, 94;
+  --success-color-600: 22, 163, 74;
+  --success-color-700: 21, 128, 61;
+  --success-color-800: 22, 101, 52;
+  --success-color-900: 20, 83, 45;
+  --success-color-950: 5, 46, 22;
+  --warning-color-50: 254, 252, 232;
+  --warning-color-100: 254, 249, 195;
+  --warning-color-200: 254, 240, 138;
+  --warning-color-300: 253, 224, 71;
+  --warning-color-400: 250, 204, 21;
+  --warning-color-500: 234, 179, 8;
+  --warning-color-600: 202, 138, 4;
+  --warning-color-700: 161, 98, 7;
+  --warning-color-800: 133, 77, 14;
+  --warning-color-900: 113, 63, 18;
+  --warning-color-950: 66, 32, 6;
+  --error-color-50: 254, 242, 242;
+  --error-color-100: 254, 226, 226;
+  --error-color-200: 254, 202, 202;
+  --error-color-300: 252, 165, 165;
+  --error-color-400: 248, 113, 113;
+  --error-color-500: 239, 68, 68;
+  --error-color-600: 220, 38, 38;
+  --error-color-700: 185, 28, 28;
+  --error-color-800: 153, 27, 27;
+  --error-color-900: 127, 29, 29;
+  --error-color-950: 69, 10, 10;
+}
+`;
+export {
+  o as default
+};

package/lib/themes/index.d.ts

@@ -0,0 +1,2 @@
+export { default as BaseTheme } from './base';
+export { default as CarbonTheme } from './carbon';

package/lib/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "1.2.0";
+declare const _default: "1.4.0";
 export default _default;

package/lib/version.js

@@ -1,4 +1,4 @@
-const e = "1.2.0";
+const e = "1.4.0";
 export {
   e as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indielayer/ui",
-  "version": "1.2.0",
+  "version": "1.4.0",
   "description": "Indielayer UI Components with Tailwind CSS build for Vue 3",
   "author": {
     "name": "João Teixeira",
@@ -20,6 +20,7 @@
   "files": [
     "lib",
     "src",
+    "docs",
     "*.d.ts",
     "exports",
     "README.md"
@@ -46,8 +47,6 @@
     "vue": "^3.0.0"
   },
   "devDependencies": {
-    "@cypress/vite-dev-server": "^5.0.5",
-    "@cypress/vue": "^5.0.5",
     "@indielayer/stylelint-config": "^1.0.0",
     "@rushstack/eslint-patch": "^1.3.2",
     "@tsconfig/node18": "^2.0.1",
@@ -61,19 +60,19 @@
     "autoprefixer": "^10.4.0",
     "c8": "^7.12.0",
     "clean-css": "^5.3.0",
-    "cypress": "^12.16.0",
     "eslint": "^8.43.0",
-    "eslint-plugin-cypress": "^2.13.3",
+    "floating-vue": "^5.2.0",
     "jsdom": "^22.1.0",
     "postcss": "^8.4.4",
     "rollup-plugin-visualizer": "^5.9.2",
-    "start-server-and-test": "^1.14.0",
+    "shiki": "1.0.0-beta.1",
     "stylelint": "^14.16.1",
     "tailwindcss": "^3.3.2",
     "typescript": "^5.2.2",
     "vite": "^4.4.11",
     "vitest": "^0.32.2",
-    "vue": "^3.3.4",
+    "vue": "^3.3.9",
+    "vue-router": "^4.2.2",
     "vue-tsc": "^1.8.2"
   },
   "browserslist": [
@@ -94,9 +93,11 @@
     "access": "public"
   },
   "scripts": {
-    "dev": "pnpm generate && vite build --watch",
+    "dev": "vite dev --mode docs",
     "build": "pnpm generate && vite build",
+    "build:docs": "pnpm build --mode docs",
     "build:prod": "pnpm build && pnpm gen-types",
+    "build:watch": "pnpm generate && vite build --watch",
     "build:only": "vite build",
     "build:stats": "VITE_VISUALIZER=Y npm run build",
     "generate": "pnpm gen-version",
@@ -104,8 +105,6 @@
     "gen-version": "node .scripts/gen-version.cjs",
     "test": "pnpm test:unit",
     "test:unit": "vitest --environment jsdom",
-    "test:e2e": "start-server-and-test preview http://127.0.0.1:5050/ 'cypress open'",
-    "test:e2e:ci": "start-server-and-test preview http://127.0.0.1:5050/ 'cypress run'",
     "typecheck": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
     "stylelint": "stylelint \"**/*.{css,vue,postcss,scss,sass}\" --ignore-path .gitignore"
   }

package/src/{composables/colors-utils.ts → common/colors.ts}

@@ -1,4 +1,4 @@
-import type { Tone, ColorLibrary } from './colors'
+import type { Tone, ColorLibrary } from '../composables/useColors'
 
 const isHex = (hex: string) => /^#(?:[A-Fa-f0-9]{3}){1,2}$/.test(hex)
 const isRGB = (rgb: string) => /^rgb[(](?:\s*0*(?:\d\d?(?:\.\d+)?(?:\s*%)?|\.\d+\s*%|100(?:\.0*)?\s*%|(?:1\d\d|2[0-4]\d|25[0-5])(?:\.\d+)?)\s*(?:,(?![)])|(?=[)]))){3}[)]$/.test(rgb)

package/src/common/icons.ts

@@ -11,5 +11,8 @@ export const dotsIcon = '<path d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2
 export const prevIcon = '<path d="M15 19l-7-7 7-7" />'
 export const nextIcon = '<path d="M9 5l7 7-7 7" />'
 export const checkIcon = '<path d="M5 13l4 4L19 7" />'
-export const chevronDownIcon = '<path d="M8 9l4-4 4 4m0 6l-4 4-4-4" />'
+export const selectIcon = '<path d="M8 9l4-4 4 4m0 6l-4 4-4-4" />'
 export const externalIcon = '<line x1="7" y1="17" x2="17" y2="7" /><polyline points="7 7 17 7 17 17" />'
+export const stepperPristineIcon = '<path d="M7.5 4.21v.01M4.21 7.5v.01M3 12v.01m1.21 4.49v.01m3.29 3.28v.01M12 21v.01m4.5-1.22v.01m3.29-3.3v.01M21 12v.01M19.79 7.5v.01m-3.29-3.3v.01M12 3v.01"/>'
+export const stepperIncompleteIcon = '<svg focusable="false" preserveAspectRatio="xMidYMid meet" fill="currentColor" viewBox="0 0 32 32" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><path d="M23.7642 6.8593l1.2851-1.5315A13.976 13.976 0 0020.8672 2.887l-.6836 1.8776A11.9729 11.9729 0 0123.7642 6.8593zM27.81 14l1.9677-.4128A13.8888 13.8888 0 0028.14 9.0457L26.4087 10A12.52 12.52 0 0127.81 14zM20.1836 27.2354l.6836 1.8776a13.976 13.976 0 004.1821-2.4408l-1.2851-1.5315A11.9729 11.9729 0 0120.1836 27.2354zM26.4087 22L28.14 23a14.14 14.14 0 001.6382-4.5872L27.81 18.0659A12.1519 12.1519 0 0126.4087 22zM16 30V2a14 14 0 000 28z"></path></svg>'
+export const chevronDownIcon = '<path d="M19 9l-7 7-7-7" />'

package/src/common/utils.ts

@@ -1,15 +1,14 @@
-/* eslint-disable @typescript-eslint/ban-types */
 import { unref, isRef } from 'vue'
 
 export const isObject = (val: unknown): val is object => val !== null && typeof val === 'object'
 export const isArray = (val: unknown): val is [] => Array.isArray(val)
+// eslint-disable-next-line @typescript-eslint/ban-types
 export const isFunction = (val: unknown): val is Function => typeof val === 'function'
 
 /**
  * Deeply unref a value, recursing into objects and arrays.
  *
  * @param {Mixed} val - The value to deeply unref.
- *
  * @return {Mixed}
  */
 export const deepUnref = (val: any) => {
@@ -30,7 +29,6 @@ export const deepUnref = (val: any) => {
  * Unref a value, recursing into it if it's an object.
  *
  * @param {Mixed} val - The value to unref.
- *
  * @return {Mixed}
  */
 export const smartUnref = (val: any) => {
@@ -46,7 +44,6 @@ export const smartUnref = (val: any) => {
  * Unref an array, recursively.
  *
  * @param {Array} arr - The array to unref.
- *
  * @return {Array}
  */
 export const unrefArray: any = (arr: []) => arr.map(smartUnref)
@@ -55,7 +52,6 @@ export const unrefArray: any = (arr: []) => arr.map(smartUnref)
  * Unref an object, recursively.
  *
  * @param {Object} obj - The object to unref.
- *
  * @return {Object}
  */
 export const unrefObject = (obj: any) => {
@@ -69,6 +65,12 @@ export const unrefObject = (obj: any) => {
   return unreffed
 }
 
+/**
+ * Merge two objects, deeply.
+ * @param {Object} source - The source object.
+ * @param {Object} target - The target object.
+ * @return {Object}
+ */
 export const mergeRightDeep = (source: any = {}, target: any = {}) => {
   const sourceKeys = Object.keys(source)
   const targetKeys = Object.keys(target)

package/src/components/accordion/Accordion.vue

@@ -0,0 +1,55 @@
+<script lang="ts">
+const accordionProps = {
+  tag: {
+    type: String,
+    default: 'div',
+  },
+  disabled: Boolean,
+  expanded: Boolean,
+  showIcon: {
+    type: Boolean,
+    default: true,
+  },
+  icon: String,
+  iconAlign: String as PropType<AccordionItemAlign>,
+}
+
+export type AccordionProps = ExtractPublicPropTypes<typeof accordionProps>
+
+export type AccordionInjection = AccordionProps & {
+  isInsideAccordion: boolean;
+}
+
+type InternalClasses = 'wrapper'
+export interface AccordionTheme extends ThemeComponent<AccordionProps, InternalClasses> {}
+
+export default {
+  name: 'XAccordion',
+  validators: {},
+}
+</script>
+
+<script setup lang="ts">
+import { type ExtractPublicPropTypes, type PropType, provide } from 'vue'
+import { useTheme, type ThemeComponent } from '../../composables/useTheme'
+import type { AccordionItemAlign } from './AccordionItem.vue'
+import { injectAccordionKey } from '../../composables/keys'
+
+const props = defineProps(accordionProps)
+
+provide(injectAccordionKey, { ...props, isInsideAccordion: true })
+
+const { styles, classes, className } = useTheme('Accordion', {}, props)
+</script>
+
+<template>
+  <div
+    :style="styles"
+    :class="[
+      className,
+      classes.wrapper,
+    ]"
+  >
+    <slot></slot>
+  </div>
+</template>

package/src/components/{collapse/Collapse.vue → accordion/AccordionItem.vue}

@@ -1,34 +1,61 @@
 <script lang="ts">
-const collapseProps = {
-  ...useColors.props(),
+const accordionItemAlign = ['left', 'right'] as const
+const accordionItemProps = {
   tag: {
     type: String,
     default: 'div',
   },
   disabled: Boolean,
   expanded: Boolean,
-  showIcon: Boolean,
+  showIcon: {
+    type: Boolean,
+    default: true,
+  },
   icon: String,
+  iconAlign: {
+    type: String as PropType<AccordionItemAlign>,
+    default: 'right',
+  },
 }
 
-export type CollapseProps = ExtractPublicPropTypes<typeof collapseProps>
+export type AccordionItemAlign = typeof accordionItemAlign[number]
+export type AccordionItemProps = ExtractPublicPropTypes<typeof accordionItemProps>
+
+type InternalClasses = 'wrapper' | 'icon' | 'content'
+type InternalData = {
+  collapsed: boolean;
+  isInsideAccordion: boolean;
+}
+export interface AccordionItemTheme extends ThemeComponent<AccordionItemProps, InternalClasses, InternalData> {}
 
-export default { name: 'XCollapse' }
+export default {
+  name: 'XAccordionItem',
+  validators: {
+    iconAlign: accordionItemAlign,
+  },
+}
 </script>
 
 <script setup lang="ts">
-import { ref, watch, type ExtractPublicPropTypes } from 'vue'
-import { useTheme } from '../../composables/theme'
-import { useColors } from '../../composables/colors'
+import { ref, watch, type ExtractPublicPropTypes, type PropType, inject, computed, reactive } from 'vue'
+import { useTheme, type ThemeComponent } from '../../composables/useTheme'
 
 import XIcon from '../../components/icon/Icon.vue'
+import { injectAccordionKey } from '../../composables/keys'
 
-import theme from './Collapse.theme'
-
-const props = defineProps(collapseProps)
+const props = defineProps(accordionItemProps)
 
 const emit = defineEmits(['expand'])
 
+const accordionProps = inject(injectAccordionKey, {
+  isInsideAccordion: false,
+})
+
+const computedIconAlign = computed(() => accordionProps.iconAlign || props.iconAlign)
+const computedProps = reactive({
+  iconAlign: computedIconAlign,
+})
+
 const collapsed = ref(!props.expanded)
 const animated = ref(true)
 
@@ -100,7 +127,10 @@ function onExpand(anim = true) {
   emit('expand')
 }
 
-const { styles, classes, className } = useTheme('collapse', theme, props)
+const { styles, classes, className } = useTheme('AccordionItem', {}, {
+  ...props,
+  ...computedProps,
+}, { collapsed, isInsideAccordion: accordionProps.isInsideAccordion })
 
 defineExpose({ toggle, open, close })
 </script>
@@ -113,7 +143,7 @@ defineExpose({ toggle, open, close })
     :aria-disabled="disabled"
     :aria-expanded="collapsed ? 'false' : 'true'"
   >
-    <div
+    <button
       :class="classes.wrapper"
       @click="toggle"
     >
@@ -122,29 +152,19 @@ defineExpose({ toggle, open, close })
       </div>
 
       <div v-if="showIcon" :class="classes.icon">
-        <span
-          class="flex transform transition-transform duration-150"
-          :class="[
-            {
-              'rotate-180': !collapsed,
-              'text-gray-300': disabled
-            }
-          ]"
+        <x-icon v-if="icon" :icon="icon" />
+        <svg
+          v-else
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+          fill="none"
+          role="presentation"
+          class="stroke-2 w-4 h-4"
         >
-          <x-icon v-if="icon" :icon="icon" />
-          <svg
-            v-else
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-            fill="none"
-            role="presentation"
-            class="stroke-2 w-5 h-5"
-          >
-            <path d="M19 9l-7 7-7-7" />
-          </svg>
-        </span>
+          <path d="M19 9l-7 7-7-7" />
+        </svg>
       </div>
-    </div>
+    </button>
 
     <template v-if="$slots.summary">
       <slot name="summary"></slot>

package/src/components/accordion/__tests__/Accordion.spec.ts

@@ -0,0 +1,11 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import Accordion from '../Accordion.vue'
+
+describe('Accordion', () => {
+  it('renders properly', () => {
+    const wrapper = mount(Accordion)
+
+    expect(wrapper.vm).toBeTruthy()
+  })
+})

package/src/components/accordion/index.ts

@@ -0,0 +1,4 @@
+export { default as XAccordion } from './Accordion.vue'
+export type { AccordionProps, AccordionInjection, AccordionTheme } from './Accordion.vue'
+export { default as XAccordionItem } from './AccordionItem.vue'
+export type { AccordionItemProps, AccordionItemTheme } from './AccordionItem.vue'

package/src/components/accordion/theme/Accordion.base.theme.ts

@@ -0,0 +1,9 @@
+import type { AccordionTheme } from '../Accordion.vue'
+
+const theme: AccordionTheme = {
+  classes: {
+    wrapper: 'grid grid-cols-1 divide-y',
+  },
+}
+
+export default theme

package/src/components/accordion/theme/Accordion.carbon.theme.ts

@@ -0,0 +1,7 @@
+import type { AccordionTheme } from '../Accordion.vue'
+
+import BaseTheme from './Accordion.base.theme'
+
+const theme: AccordionTheme = BaseTheme
+
+export default theme

package/src/components/accordion/theme/AccordionItem.base.theme.ts

@@ -0,0 +1,38 @@
+import type { AccordionItemTheme } from '../AccordionItem.vue'
+
+const theme: AccordionItemTheme = {
+  classes: {
+    wrapper: ({ props, slots, data }) => {
+      const classes = ['relative flex items-center w-full text-left']
+
+      if (!data.isInsideAccordion) return classes
+
+      if (slots.default) {
+        if (props.iconAlign === 'left') classes.push('pl-8 pr-4')
+        else classes.push('pr-8 pl-4')
+        classes.push('py-2')
+        if (!props.disabled) classes.push('hover:bg-gray-50 dark:hover:bg-gray-600')
+      }
+
+      if (!props.disabled) classes.push('cursor-pointer')
+
+      return classes
+    },
+
+    icon: ({ props, data }) => {
+      const classes = ['absolute flex transform transition-transform duration-150']
+
+      if (!data.collapsed) classes.push('rotate-180')
+      if (props.disabled) classes.push('text-gray-300')
+
+      if (props.iconAlign === 'left') classes.push('left-2')
+      else classes.push('right-2')
+
+      return classes
+    },
+
+    content: 'transition-[height] duration-150 overflow-y-hidden',
+  },
+}
+
+export default theme

package/src/components/accordion/theme/AccordionItem.carbon.theme.ts

@@ -0,0 +1,7 @@
+import type { AccordionItemTheme } from '../AccordionItem.vue'
+
+import BaseTheme from './AccordionItem.base.theme'
+
+const theme: AccordionItemTheme = BaseTheme
+
+export default theme

package/src/components/alert/Alert.vue

@@ -13,6 +13,9 @@ const alertProps = {
 export type AlertType = typeof alertType[number]
 export type AlertProps = ExtractPublicPropTypes<typeof alertProps>
 
+type InternalClasses = 'wrapper'
+export interface AlertTheme extends ThemeComponent<AlertProps, InternalClasses> {}
+
 export default {
   name: 'XAlert',
   validators: {
@@ -23,14 +26,12 @@ export default {
 
 <script setup lang="ts">
 import { computed, type ExtractPublicPropTypes, type PropType } from 'vue'
-import { useColors } from '../../composables/colors'
-import { useTheme } from '../../composables/theme'
+import { useColors } from '../../composables/useColors'
+import { useTheme, type ThemeComponent } from '../../composables/useTheme'
 import { closeIcon, successIcon, errorIcon, warningIcon, infoIcon } from '../../common/icons'
 
 import XIcon from '../icon/Icon.vue'
 
-import theme from './Alert.theme'
-
 const props = defineProps(alertProps)
 
 defineEmits(['remove'])
@@ -44,7 +45,7 @@ const icon = computed(() => {
   return ''
 })
 
-const { styles, classes, className } = useTheme('alert', theme, props)
+const { styles, classes, className } = useTheme('Alert', {}, props)
 </script>
 
 <template>
@@ -69,7 +70,6 @@ const { styles, classes, className } = useTheme('alert', theme, props)
     <div>
       <slot></slot>
     </div>
-
     <template v-if="removable">
       <div class="flex-grow"></div>
       <button class="shrink-0" :aria-label="closeLabel" @click="(e: Event) => $emit('remove', e)">

package/src/components/alert/__tests__/Alert.spec.ts

@@ -7,8 +7,5 @@ describe('Alert', () => {
     const wrapper = mount(Alert)
 
     expect(wrapper.vm).toBeTruthy()
-    // expect(wrapper.isVueInstance()).toBeTruthy()
-
-    // expect(wrapper.text()).toContain('Hi there!')
   })
 })

package/src/components/alert/index.ts

@@ -1,3 +1,2 @@
 export { default as XAlert } from './Alert.vue'
-export type { AlertProps, AlertType } from './Alert.vue'
-export type { AlertTheme } from './Alert.theme'
+export type { AlertProps, AlertType, AlertTheme } from './Alert.vue'

package/src/components/alert/{Alert.theme.ts → theme/Alert.base.theme.ts}

@@ -1,14 +1,6 @@
-import type { ThemeClasses, ThemeComponent } from '../../composables/theme'
-import type { AlertProps } from './Alert.vue'
+import type { AlertTheme } from '../Alert.vue'
 
-type InternalClasses = 'wrapper'
-
-interface InternalTheme extends ThemeComponent<AlertProps, InternalClasses> {}
-export interface AlertTheme extends Omit<InternalTheme, 'classes'> {
-  classes?: Partial<ThemeClasses<AlertProps, InternalClasses>>;
-}
-
-const theme: InternalTheme = {
+const theme: AlertTheme = {
   classes: {
     wrapper: 'flex items-center rounded-md space-x-2 px-4 py-2 border',
   },

package/src/components/alert/theme/Alert.carbon.theme.ts

@@ -0,0 +1,59 @@
+import type { AlertTheme } from '../Alert.vue'
+
+const theme: AlertTheme = {
+  classes: {
+    wrapper: 'flex items-center space-x-2 px-4 py-3 border border-l-4 text-sm',
+  },
+  styles: ({ props, colors, css }) => {
+    const gray = colors.getPalette('gray')
+    const color = colors.getPalette(props.color)
+    const vars = []
+
+    if (props.glow) vars.push(css.get('glow', colors.getColorOpacity(color[500], 0.5)))
+
+    if (props.color) {
+      if (props.light) {
+        vars.push(css.variables({
+          bg: color[50],
+          text: gray[900],
+          icon: color[600],
+          border: props.outlined ? color[600] : color[50],
+          dark: {
+            bg: gray[800],
+            text: gray[100],
+            icon: color[600],
+            border: props.outlined ? color[500] : color[200],
+          },
+        }))
+      } else {
+        vars.push(css.variables({
+          bg: props.outlined ? 'transparent' : color[600],
+          text: props.outlined ? color[600] : color[50],
+          icon: props.outlined ? color[600] : color[50],
+          border: color[600],
+          dark: {
+            border: color[400],
+            text: props.outlined ? color[400] : color[50],
+          },
+        }))
+      }
+
+      return vars
+    }
+
+    vars.push(css.variables({
+      bg: 'transparent',
+      text: color[500],
+      border: color[300],
+      dark: {
+        bg: 'transparent',
+        text: color[300],
+        border: color[500],
+      },
+    }))
+
+    return vars
+  },
+}
+
+export default theme