yuyeon 0.0.14 → 0.0.15

package/lib/composables/theme/index.mjs

@@ -1,26 +1,111 @@
-import { effectScope, reactive, ref, toRaw, watch } from "vue";
+import { computed, effectScope, getCurrentInstance, inject, provide, reactive, readonly, ref, unref, watch } from 'vue';
 import bindThemeClass from "../../directives/theme-class.mjs";
+import { propsFactory } from "../../util/vue-component.mjs";
+import { createPalette, createThemes } from "./factory.mjs";
+import { cssClass, cssVariables } from "./helper.mjs";
 import { configureOptions } from "./setting.mjs";
 export const Y_THEME_PREFIX = 'y-theme';
 export const YUYEON_THEME_KEY = Symbol.for('yuyeon.theme');
+export const pressThemePropsOptions = propsFactory({
+  theme: String
+}, 'theme');
+export function isDarkMode() {
+  return window.matchMedia('(prefers-color-scheme: dark)').matches;
+}
+export function isSupportAutoScheme() {
+  return window.matchMedia('(prefers-color-scheme)').media !== 'not all';
+}
 export function createThemeModule(options) {
   const appMountedScope = effectScope();
   const config = reactive(configureOptions(options));
   const scheme = ref(config.scheme);
-  const mode = ref(config.mode);
   const theme = ref(config.theme);
   const themes = ref(config.themes);
-  const themeState = reactive({
-    scheme: scheme,
-    theme: theme,
-    themes: themes,
-    mode: mode
+  const palette = ref(config.palette);
+  const supportedAutoMode = ref(true);
+  const preferColorScheme = ref('');
+  function darkModeWatcher(mediaQueryList) {
+    preferColorScheme.value = mediaQueryList.matches ? 'dark' : 'light';
+  }
+  const currentColorScheme = computed(() => {
+    if (scheme.value === 'auto') {
+      return preferColorScheme.value;
+    }
+    if (scheme.value === 'dark') {
+      return 'dark';
+    }
+    return 'light';
+  });
+  const currentThemeKey = computed(() => {
+    if (typeof theme.value === 'string') {
+      if (theme.value in computedThemes) {
+        return theme.value;
+      }
+    }
+    if (Array.isArray(theme.value)) {
+      return currentColorScheme.value === 'dark' ? theme.value?.[1] ?? 'dark' : theme.value?.[0] ?? 'light';
+    }
+    return currentColorScheme.value;
+  });
+  const computedPalette = computed(() => {
+    return createPalette(palette.value);
+  });
+  const computedThemes = computed(() => {
+    return createThemes(themes.value);
+  });
+  const styles = computed(() => {
+    const lines = [];
+    lines.push(...cssClass(':root', cssVariables(computedPalette.value, 'palette')));
+    for (const [themeKey, themeDefs] of Object.entries(computedThemes.value)) {
+      const {
+        colors,
+        variables,
+        isDark
+      } = themeDefs;
+      const records = {
+        ...colors,
+        ...variables
+      };
+      // if (currentThemeKey.value === themeKey) {
+      //   lines.push(...cssClass(':root', cssVariables(records, 'theme')));
+      // }
+      const themeScheme = isDark ? 'dark' : 'light';
+      if (scheme.value === 'auto') {
+        lines.push(...cssClass(`@media (prefers-color-scheme: ${themeScheme})`, cssClass(`[data-theme-scheme='auto'][data-${themeScheme}-theme='${themeKey}']`, cssVariables(records, 'theme'))));
+      } else {
+        lines.push(...cssClass(`[data-theme-scheme='${themeScheme}'][data-${themeScheme}-theme='${themeKey}']`, cssVariables(records, 'theme')));
+      }
+      lines.push(...cssClass(`.y-theme--${themeKey}`, cssVariables(records, 'theme')));
+    }
+    return lines.join('');
   });
   function install(app) {
     app.directive('theme', bindThemeClass);
+    let styleEl = document.getElementById('yuyeon-theme-palette');
+    watch(styles, updateStyleEl, {
+      immediate: true
+    });
+    function updateStyleEl() {
+      if (typeof document !== 'undefined' && !styleEl) {
+        const el = document.createElement('style');
+        el.type = 'text/css';
+        el.id = 'yuyeon-theme-palette';
+        if (options.cspNonce) el.setAttribute('nonce', options.cspNonce);
+        styleEl = el;
+        document.head.appendChild(styleEl);
+      }
+      if (styleEl) {
+        styleEl.innerHTML = styles.value;
+      }
+    }
   }
   function bindTheme(yuyeon) {
-    console.log(toRaw(yuyeon.theme));
+    supportedAutoMode.value = isSupportAutoScheme();
+    if (supportedAutoMode.value) {
+      const mql = window.matchMedia('(prefers-color-scheme: dark)');
+      darkModeWatcher(mql);
+      mql.addEventListener('change', darkModeWatcher);
+    }
     watch(theme, neo => {
       const [lightTheme, darkTheme] = neo;
       yuyeon.root.dataset.lightTheme = lightTheme;
@@ -29,7 +114,7 @@ export function createThemeModule(options) {
       immediate: true
     });
     watch(scheme, neo => {
-      yuyeon.root.setAttribute('data-theme-scheme', neo);
+      yuyeon.root.setAttribute('data-theme-scheme', neo === 'auto' ? 'auto' : currentColorScheme.value);
     }, {
       immediate: true
     });
@@ -39,11 +124,60 @@ export function createThemeModule(options) {
       bindTheme(yuyeon);
     });
   }
+  const themeClasses = computed(() => `y-theme--${currentThemeKey.value}`);
   return {
     install,
     init,
     scope: appMountedScope,
-    instance: themeState
+    instance: {
+      global: {
+        scheme,
+        theme
+      },
+      themes,
+      scheme,
+      theme,
+      currentThemeKey,
+      themeClasses,
+      computedThemes,
+      computedPalette,
+      supportedAutoMode: readonly(supportedAutoMode),
+      preferColorScheme: readonly(preferColorScheme)
+    }
+  };
+}
+export function useLocalTheme(props) {
+  getCurrentInstance();
+  const themeModule = inject(YUYEON_THEME_KEY, null);
+  if (!themeModule) throw new Error('Not found provided "ThemeModule"');
+  const palette = themeModule.computedPalette;
+  const currentThemeKey = computed(() => {
+    if (props.theme) {
+      switch (props.theme) {
+        case 'light':
+          return themeModule.theme.value?.[0] ?? 'light';
+        case 'dark':
+          return themeModule.theme.value?.[1] ?? 'dark';
+        // TODO: props.theme(themeKey) validation in themes
+        default:
+          return props.theme;
+      }
+    }
+    return unref(themeModule.currentThemeKey);
+  });
+  const themeClasses = computed(() => `y-theme--${currentThemeKey.value}`);
+  const newTheme = {
+    ...themeModule,
+    currentThemeKey,
+    themeClasses
   };
+  provide(YUYEON_THEME_KEY, newTheme);
+  return newTheme;
+}
+export function useTheme() {
+  getCurrentInstance();
+  const theme = inject(YUYEON_THEME_KEY, null);
+  if (!theme) throw new Error('Not found provided "ThemeModule"');
+  return theme;
 }
 //# sourceMappingURL=index.mjs.map

package/lib/composables/theme/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["effectScope","reactive","ref","toRaw","watch","bindThemeClass","configureOptions","Y_THEME_PREFIX","YUYEON_THEME_KEY","Symbol","for","createThemeModule","options","appMountedScope","config","scheme","mode","theme","themes","themeState","install","app","directive","bindTheme","yuyeon","console","log","neo","lightTheme","darkTheme","root","dataset","immediate","setAttribute","init","run","scope","instance"],"sources":["../../../src/composables/theme/index.ts"],"sourcesContent":["import type { App } from 'vue';\r\nimport { effectScope, reactive, ref, toRaw, watch } from \"vue\";\r\n\r\nimport bindThemeClass from '../../directives/theme-class';\r\nimport { configureOptions, ThemeScheme } from \"./setting\";\r\nimport type { ThemeOptions } from \"./setting\";\r\n\r\nexport const Y_THEME_PREFIX = 'y-theme';\r\n\r\ninterface ThemeProvide {\r\n  //\r\n}\r\n\r\nexport const YUYEON_THEME_KEY = Symbol.for('yuyeon.theme');\r\n\r\nexport function createThemeModule(options: ThemeOptions) {\r\n  const appMountedScope = effectScope();\r\n  const config = reactive(configureOptions(options));\r\n  const scheme = ref(config.scheme);\r\n  const mode = ref(config.mode);\r\n  const theme = ref<[string, string]>(config.theme);\r\n  const themes = ref(config.themes);\r\n  const themeState = reactive({\r\n    scheme: scheme,\r\n    theme: theme,\r\n    themes: themes,\r\n    mode: mode,\r\n  });\r\n\r\n  function install(app: App) {\r\n    app.directive('theme', bindThemeClass);\r\n  }\r\n\r\n  function bindTheme(yuyeon: any) {\r\n    console.log(toRaw(yuyeon.theme))\r\n    watch(\r\n      theme,\r\n      (neo) => {\r\n        const [lightTheme, darkTheme] = neo;\r\n        yuyeon.root.dataset.lightTheme = lightTheme;\r\n        yuyeon.root.dataset.darkTheme = darkTheme;\r\n      },\r\n      { immediate: true },\r\n    );\r\n    watch(\r\n      scheme,\r\n      (neo: string) => {\r\n        yuyeon.root.setAttribute('data-theme-scheme', neo);\r\n      },\r\n      { immediate: true },\r\n    );\r\n  }\r\n\r\n  function init(yuyeon: any) {\r\n    appMountedScope.run(() => {\r\n      bindTheme(yuyeon);\r\n    });\r\n  }\r\n\r\n  return {\r\n    install,\r\n    init,\r\n    scope: appMountedScope,\r\n    instance: themeState,\r\n  };\r\n}\r\n"],"mappings":"AACA,SAASA,WAAW,EAAEC,QAAQ,EAAEC,GAAG,EAAEC,KAAK,EAAEC,KAAK,QAAQ,KAAK;AAAC,OAExDC,cAAc;AAAA,SACZC,gBAAgB;AAGzB,OAAO,MAAMC,cAAc,GAAG,SAAS;AAMvC,OAAO,MAAMC,gBAAgB,GAAGC,MAAM,CAACC,GAAG,CAAC,cAAc,CAAC;AAE1D,OAAO,SAASC,iBAAiBA,CAACC,OAAqB,EAAE;EACvD,MAAMC,eAAe,GAAGb,WAAW,CAAC,CAAC;EACrC,MAAMc,MAAM,GAAGb,QAAQ,CAACK,gBAAgB,CAACM,OAAO,CAAC,CAAC;EAClD,MAAMG,MAAM,GAAGb,GAAG,CAACY,MAAM,CAACC,MAAM,CAAC;EACjC,MAAMC,IAAI,GAAGd,GAAG,CAACY,MAAM,CAACE,IAAI,CAAC;EAC7B,MAAMC,KAAK,GAAGf,GAAG,CAAmBY,MAAM,CAACG,KAAK,CAAC;EACjD,MAAMC,MAAM,GAAGhB,GAAG,CAACY,MAAM,CAACI,MAAM,CAAC;EACjC,MAAMC,UAAU,GAAGlB,QAAQ,CAAC;IAC1Bc,MAAM,EAAEA,MAAM;IACdE,KAAK,EAAEA,KAAK;IACZC,MAAM,EAAEA,MAAM;IACdF,IAAI,EAAEA;EACR,CAAC,CAAC;EAEF,SAASI,OAAOA,CAACC,GAAQ,EAAE;IACzBA,GAAG,CAACC,SAAS,CAAC,OAAO,EAAEjB,cAAc,CAAC;EACxC;EAEA,SAASkB,SAASA,CAACC,MAAW,EAAE;IAC9BC,OAAO,CAACC,GAAG,CAACvB,KAAK,CAACqB,MAAM,CAACP,KAAK,CAAC,CAAC;IAChCb,KAAK,CACHa,KAAK,EACJU,GAAG,IAAK;MACP,MAAM,CAACC,UAAU,EAAEC,SAAS,CAAC,GAAGF,GAAG;MACnCH,MAAM,CAACM,IAAI,CAACC,OAAO,CAACH,UAAU,GAAGA,UAAU;MAC3CJ,MAAM,CAACM,IAAI,CAACC,OAAO,CAACF,SAAS,GAAGA,SAAS;IAC3C,CAAC,EACD;MAAEG,SAAS,EAAE;IAAK,CACpB,CAAC;IACD5B,KAAK,CACHW,MAAM,EACLY,GAAW,IAAK;MACfH,MAAM,CAACM,IAAI,CAACG,YAAY,CAAC,mBAAmB,EAAEN,GAAG,CAAC;IACpD,CAAC,EACD;MAAEK,SAAS,EAAE;IAAK,CACpB,CAAC;EACH;EAEA,SAASE,IAAIA,CAACV,MAAW,EAAE;IACzBX,eAAe,CAACsB,GAAG,CAAC,MAAM;MACxBZ,SAAS,CAACC,MAAM,CAAC;IACnB,CAAC,CAAC;EACJ;EAEA,OAAO;IACLJ,OAAO;IACPc,IAAI;IACJE,KAAK,EAAEvB,eAAe;IACtBwB,QAAQ,EAAElB;EACZ,CAAC;AACH"}
+{"version":3,"file":"index.mjs","names":["computed","effectScope","getCurrentInstance","inject","provide","reactive","readonly","ref","unref","watch","bindThemeClass","propsFactory","createPalette","createThemes","cssClass","cssVariables","configureOptions","Y_THEME_PREFIX","YUYEON_THEME_KEY","Symbol","for","pressThemePropsOptions","theme","String","isDarkMode","window","matchMedia","matches","isSupportAutoScheme","media","createThemeModule","options","appMountedScope","config","scheme","themes","palette","supportedAutoMode","preferColorScheme","darkModeWatcher","mediaQueryList","value","currentColorScheme","currentThemeKey","computedThemes","Array","isArray","computedPalette","styles","lines","push","themeKey","themeDefs","Object","entries","colors","variables","isDark","records","themeScheme","join","install","app","directive","styleEl","document","getElementById","updateStyleEl","immediate","el","createElement","type","id","cspNonce","setAttribute","head","appendChild","innerHTML","bindTheme","yuyeon","mql","addEventListener","neo","lightTheme","darkTheme","root","dataset","init","run","themeClasses","scope","instance","global","useLocalTheme","props","themeModule","Error","newTheme","useTheme"],"sources":["../../../src/composables/theme/index.ts"],"sourcesContent":["import type { App, ComputedRef, Ref } from 'vue';\nimport {\n  computed,\n  effectScope,\n  getCurrentInstance,\n  inject,\n  provide,\n  reactive,\n  readonly,\n  ref,\n  unref,\n  watch,\n} from 'vue';\n\nimport bindThemeClass from '../../directives/theme-class';\nimport { propsFactory } from '../../util/vue-component';\nimport { createPalette, createThemes } from './factory';\nimport { cssClass, cssVariables } from './helper';\nimport { ThemeScheme, configureOptions } from './setting';\nimport type { ThemeOptions } from './types';\n\nexport type { ThemeOptions };\n\nexport const Y_THEME_PREFIX = 'y-theme';\n\nexport interface ThemeModuleInstance {\n  scheme: keyof typeof ThemeScheme | 'auto';\n  theme: Ref<[string, string?]>;\n  // theme values(schemes) for colors & variables\n  readonly themes: any;\n  readonly global: {\n    // currentThemeKeys: [lightThemeKey, darkThemeKey]\n    // If used manually, fix the scheme to 'light' and have a [lightThemeKey] value.\n    // Use the appropriate default theme scheme if it does not match the themeKey\n    scheme: keyof typeof ThemeScheme | 'auto';\n    theme: Ref<[string, string?]>;\n  };\n  /* computed */\n  readonly currentThemeKey: Readonly<ComputedRef<string>>;\n  readonly themeClasses: Readonly<ComputedRef<string | undefined>>;\n  readonly computedThemes: Readonly<ComputedRef<any>>;\n  readonly computedPalette: Readonly<ComputedRef<any>>;\n  /* */\n  readonly supportedAutoMode: Readonly<Ref<boolean>>;\n  readonly preferColorScheme: Readonly<Ref<'light' | 'dark'>>;\n}\n\nexport const YUYEON_THEME_KEY = Symbol.for('yuyeon.theme');\n\nexport const pressThemePropsOptions = propsFactory(\n  {\n    theme: String,\n  },\n  'theme',\n);\n\nexport function isDarkMode() {\n  return window.matchMedia('(prefers-color-scheme: dark)').matches;\n}\n\nexport function isSupportAutoScheme() {\n  return window.matchMedia('(prefers-color-scheme)').media !== 'not all';\n}\n\nexport function createThemeModule(options: ThemeOptions) {\n  const appMountedScope = effectScope();\n  const config = reactive(configureOptions(options));\n  const scheme = ref<string>(config.scheme);\n  const theme = ref<[string, string]>(config.theme);\n  const themes = ref(config.themes);\n  const palette = ref(config.palette);\n  const supportedAutoMode = ref(true);\n  const preferColorScheme = ref('');\n\n  function darkModeWatcher(\n    mediaQueryList: MediaQueryListEvent | MediaQueryList,\n  ) {\n    preferColorScheme.value = mediaQueryList.matches ? 'dark' : 'light';\n  }\n\n  const currentColorScheme = computed<'light' | 'dark'>(() => {\n    if (scheme.value === 'auto') {\n      return preferColorScheme.value as 'light' | 'dark';\n    }\n    if (scheme.value === 'dark') {\n      return 'dark';\n    }\n    return 'light';\n  });\n\n  const currentThemeKey = computed(() => {\n    if (typeof theme.value === 'string') {\n      if (theme.value in computedThemes) {\n        return theme.value;\n      }\n    }\n    if (Array.isArray(theme.value)) {\n      return currentColorScheme.value === 'dark'\n        ? theme.value?.[1] ?? 'dark'\n        : theme.value?.[0] ?? 'light';\n    }\n    return currentColorScheme.value;\n  });\n\n  const computedPalette = computed(() => {\n    return createPalette(palette.value);\n  });\n\n  const computedThemes = computed(() => {\n    return createThemes(themes.value);\n  });\n\n  const styles = computed(() => {\n    const lines = [];\n    lines.push(\n      ...cssClass(':root', cssVariables(computedPalette.value, 'palette')),\n    );\n    for (const [themeKey, themeDefs] of Object.entries(computedThemes.value)) {\n      const { colors, variables, isDark } = themeDefs;\n      const records: Record<string, string> = {\n        ...colors,\n        ...variables,\n      };\n      // if (currentThemeKey.value === themeKey) {\n      //   lines.push(...cssClass(':root', cssVariables(records, 'theme')));\n      // }\n      const themeScheme = isDark ? 'dark' : 'light';\n      if (scheme.value === 'auto') {\n        lines.push(\n          ...cssClass(\n            `@media (prefers-color-scheme: ${themeScheme})`,\n            cssClass(\n              `[data-theme-scheme='auto'][data-${themeScheme}-theme='${themeKey}']`,\n              cssVariables(records, 'theme'),\n            ),\n          ),\n        );\n      } else {\n        lines.push(\n          ...cssClass(\n            `[data-theme-scheme='${themeScheme}'][data-${themeScheme}-theme='${themeKey}']`,\n            cssVariables(records, 'theme'),\n          ),\n        );\n      }\n\n      lines.push(\n        ...cssClass(`.y-theme--${themeKey}`, cssVariables(records, 'theme')),\n      );\n    }\n    return lines.join('');\n  });\n\n  function install(app: App) {\n    app.directive('theme', bindThemeClass);\n\n    let styleEl = document.getElementById('yuyeon-theme-palette');\n\n    watch(styles, updateStyleEl, { immediate: true });\n\n    function updateStyleEl() {\n      if (typeof document !== 'undefined' && !styleEl) {\n        const el = document.createElement('style');\n        el.type = 'text/css';\n        el.id = 'yuyeon-theme-palette';\n        if (options.cspNonce) el.setAttribute('nonce', options.cspNonce);\n        styleEl = el;\n        document.head.appendChild(styleEl);\n      }\n      if (styleEl) {\n        styleEl.innerHTML = styles.value;\n      }\n    }\n  }\n\n  function bindTheme(yuyeon: any) {\n    supportedAutoMode.value = isSupportAutoScheme();\n    if (supportedAutoMode.value) {\n      const mql = window.matchMedia('(prefers-color-scheme: dark)');\n      darkModeWatcher(mql);\n      mql.addEventListener('change' as 'change', darkModeWatcher);\n    }\n    watch(\n      theme,\n      (neo) => {\n        const [lightTheme, darkTheme] = neo;\n        yuyeon.root.dataset.lightTheme = lightTheme;\n        yuyeon.root.dataset.darkTheme = darkTheme;\n      },\n      { immediate: true },\n    );\n    watch(\n      scheme,\n      (neo) => {\n        yuyeon.root.setAttribute(\n          'data-theme-scheme',\n          neo === 'auto' ? 'auto' : currentColorScheme.value,\n        );\n      },\n      { immediate: true },\n    );\n  }\n\n  function init(yuyeon: any) {\n    appMountedScope.run(() => {\n      bindTheme(yuyeon);\n    });\n  }\n\n  const themeClasses = computed(() => `y-theme--${currentThemeKey.value}`);\n\n  return {\n    install,\n    init,\n    scope: appMountedScope,\n    instance: {\n      global: {\n        scheme,\n        theme,\n      },\n      themes,\n      scheme,\n      theme,\n      currentThemeKey,\n      themeClasses,\n      computedThemes,\n      computedPalette,\n      supportedAutoMode: readonly(supportedAutoMode),\n      preferColorScheme: readonly(preferColorScheme),\n    },\n  };\n}\n\nexport function useLocalTheme(props: { theme?: string }) {\n  getCurrentInstance();\n\n  const themeModule = inject<ThemeModuleInstance | null>(\n    YUYEON_THEME_KEY,\n    null,\n  );\n\n  if (!themeModule) throw new Error('Not found provided \"ThemeModule\"');\n\n  const palette = themeModule.computedPalette;\n\n  const currentThemeKey = computed<string>(() => {\n    if (props.theme) {\n      switch (props.theme) {\n        case 'light':\n          return themeModule.theme.value?.[0] ?? 'light';\n        case 'dark':\n          return themeModule.theme.value?.[1] ?? 'dark';\n        // TODO: props.theme(themeKey) validation in themes\n        default:\n          return props.theme;\n      }\n    }\n    return unref(themeModule.currentThemeKey);\n  });\n\n  const themeClasses = computed(() => `y-theme--${currentThemeKey.value}`);\n\n  const newTheme: ThemeModuleInstance = {\n    ...themeModule,\n    currentThemeKey,\n    themeClasses,\n  };\n\n  provide(YUYEON_THEME_KEY, newTheme);\n\n  return newTheme;\n}\n\nexport function useTheme() {\n  getCurrentInstance();\n\n  const theme = inject<ThemeModuleInstance | null>(YUYEON_THEME_KEY, null);\n\n  if (!theme) throw new Error('Not found provided \"ThemeModule\"');\n\n  return theme;\n}\n"],"mappings":"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"}

package/lib/composables/theme/setting.mjs

@@ -3,35 +3,69 @@ export const ThemeScheme = {
   light: 'light',
   dark: 'dark'
 };
+export const defaultTonalLuminance = [0, 10, 20, 25, 30, 35, 40, 50, 60, 70, 80, 90, 95, 98, 99, 100];
+export const defaultPalette = {
+  scaleMethod: 'tonal',
+  colors: {
+    primary: '#0062a1',
+    secondary: '#6251a6',
+    tertiary: '#3c691b',
+    neutral: '#5d5e61',
+    positive: '#3da919',
+    negative: '#ba1a1a',
+    warning: '#d09220'
+  }
+};
 export const defaultThemesValues = {
   light: {
-    scheme: ThemeScheme.light,
+    isDark: false,
     colors: {
-      'app-background': '#ffffff',
-      'base-font': '#141414'
+      primary: '#0062a1',
+      secondary: '#6251a6',
+      tertiary: '#3c691b',
+      background: '#fdfbff',
+      surface: '#fdfbff',
+      'surface-variant': '#dfe3eb',
+      outline: '#73777f',
+      error: '#ba1a1a',
+      shadow: '#000000'
     },
     variables: {
-      'base-shadow-opacity': 0.14
+      'outline-opacity': 0.14,
+      'base-shadow-opacity': 0.14,
+      'base-font': '#141414'
     }
   },
   dark: {
-    scheme: ThemeScheme.dark,
+    isDark: true,
     colors: {
-      'app-background': '#1e1e1e',
-      'base-font': '#fff'
+      primary: '#9ccaff',
+      secondary: '#cbbeff',
+      tertiary: '#a1d57a',
+      background: '#001b3d',
+      surface: '#001b3d',
+      'surface-variant': '#42474e',
+      outline: '#8c9199',
+      error: '#ffb4ab',
+      shadow: '#000000'
     },
     variables: {
-      'base-shadow-opacity': 0.14
+      'outline-opacity': 0.14,
+      'base-shadow-opacity': 0.14,
+      'base-font': '#fff'
     }
   }
 };
 export function configureOptions(options) {
   if (!options) {
     return {
-      scheme: 'normal',
+      scheme: ThemeScheme.light,
       theme: ['light', 'dark'],
       themes: {
         ...mergeDeep(defaultThemesValues)
+      },
+      palette: {
+        ...mergeDeep(defaultPalette)
       }
     };
   }
@@ -40,6 +74,9 @@ export function configureOptions(options) {
     theme: ['light', 'dark'],
     themes: {
       ...mergeDeep(defaultThemesValues, options.themes)
+    },
+    palette: {
+      ...mergeDeep(defaultPalette, options.palette)
     }
   };
 }

package/lib/composables/theme/setting.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"setting.mjs","names":["mergeDeep","ThemeScheme","light","dark","defaultThemesValues","scheme","colors","variables","configureOptions","options","theme","themes"],"sources":["../../../src/composables/theme/setting.ts"],"sourcesContent":["import { mergeDeep } from \"../../util/common\";\r\n\r\nexport const ThemeScheme = {\r\n  light: 'light',\r\n  dark: 'dark',\r\n} as const;\r\n\r\nexport interface ThemeOptions {\r\n  mode: 'manual';\r\n  scheme: keyof typeof ThemeScheme | 'normal';\r\n  theme: string | [string, string];\r\n  themes: any;\r\n}\r\n\r\nexport const defaultThemesValues: any = {\r\n  light: {\r\n    scheme: ThemeScheme.light,\r\n    colors: {\r\n      'app-background': '#ffffff',\r\n      'base-font': '#141414',\r\n    },\r\n    variables: {\r\n      'base-shadow-opacity': 0.14\r\n    },\r\n  },\r\n  dark: {\r\n    scheme: ThemeScheme.dark,\r\n    colors: {\r\n      'app-background': '#1e1e1e',\r\n      'base-font': '#fff',\r\n    },\r\n    variables: {\r\n      'base-shadow-opacity': 0.14\r\n    },\r\n  },\r\n};\r\n\r\nexport function configureOptions (options?: ThemeOptions): any {\r\n  if (!options) {\r\n    return {\r\n      scheme: 'normal',\r\n      theme: ['light', 'dark'],\r\n      themes: {...mergeDeep(defaultThemesValues)},\r\n    }\r\n  }\r\n  return {\r\n    scheme: ThemeScheme.light,\r\n    theme: ['light', 'dark'],\r\n    themes: {...mergeDeep(defaultThemesValues, options.themes)},\r\n  }\r\n}\r\n"],"mappings":"SAASA,SAAS;AAElB,OAAO,MAAMC,WAAW,GAAG;EACzBC,KAAK,EAAE,OAAO;EACdC,IAAI,EAAE;AACR,CAAU;AASV,OAAO,MAAMC,mBAAwB,GAAG;EACtCF,KAAK,EAAE;IACLG,MAAM,EAAEJ,WAAW,CAACC,KAAK;IACzBI,MAAM,EAAE;MACN,gBAAgB,EAAE,SAAS;MAC3B,WAAW,EAAE;IACf,CAAC;IACDC,SAAS,EAAE;MACT,qBAAqB,EAAE;IACzB;EACF,CAAC;EACDJ,IAAI,EAAE;IACJE,MAAM,EAAEJ,WAAW,CAACE,IAAI;IACxBG,MAAM,EAAE;MACN,gBAAgB,EAAE,SAAS;MAC3B,WAAW,EAAE;IACf,CAAC;IACDC,SAAS,EAAE;MACT,qBAAqB,EAAE;IACzB;EACF;AACF,CAAC;AAED,OAAO,SAASC,gBAAgBA,CAAEC,OAAsB,EAAO;EAC7D,IAAI,CAACA,OAAO,EAAE;IACZ,OAAO;MACLJ,MAAM,EAAE,QAAQ;MAChBK,KAAK,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC;MACxBC,MAAM,EAAE;QAAC,GAAGX,SAAS,CAACI,mBAAmB;MAAC;IAC5C,CAAC;EACH;EACA,OAAO;IACLC,MAAM,EAAEJ,WAAW,CAACC,KAAK;IACzBQ,KAAK,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC;IACxBC,MAAM,EAAE;MAAC,GAAGX,SAAS,CAACI,mBAAmB,EAAEK,OAAO,CAACE,MAAM;IAAC;EAC5D,CAAC;AACH"}
+{"version":3,"file":"setting.mjs","names":["mergeDeep","ThemeScheme","light","dark","defaultTonalLuminance","defaultPalette","scaleMethod","colors","primary","secondary","tertiary","neutral","positive","negative","warning","defaultThemesValues","isDark","background","surface","outline","error","shadow","variables","configureOptions","options","scheme","theme","themes","palette"],"sources":["../../../src/composables/theme/setting.ts"],"sourcesContent":["import { PaletteOption, ThemeOptions } from './types';\n\nimport { mergeDeep } from '../../util/common';\n\nexport const ThemeScheme = {\n  light: 'light',\n  dark: 'dark',\n} as const;\n\nexport const defaultTonalLuminance = [\n  0, 10, 20, 25, 30, 35, 40, 50, 60, 70, 80, 90, 95, 98, 99, 100,\n];\n\nexport const defaultPalette: PaletteOption = {\n  scaleMethod: 'tonal',\n  colors: {\n    primary: '#0062a1',\n    secondary: '#6251a6',\n    tertiary: '#3c691b',\n    neutral: '#5d5e61',\n    positive: '#3da919',\n    negative: '#ba1a1a',\n    warning: '#d09220',\n  },\n};\n\nexport const defaultThemesValues: any = {\n  light: {\n    isDark: false,\n    colors: {\n      primary: '#0062a1',\n      secondary: '#6251a6',\n      tertiary: '#3c691b',\n      background: '#fdfbff',\n      surface: '#fdfbff',\n      'surface-variant': '#dfe3eb',\n      outline: '#73777f',\n      error: '#ba1a1a',\n      shadow: '#000000',\n    },\n    variables: {\n      'outline-opacity': 0.14,\n      'base-shadow-opacity': 0.14,\n      'base-font': '#141414',\n    },\n  },\n  dark: {\n    isDark: true,\n    colors: {\n      primary: '#9ccaff',\n      secondary: '#cbbeff',\n      tertiary: '#a1d57a',\n      background: '#001b3d',\n      surface: '#001b3d',\n      'surface-variant': '#42474e',\n      outline: '#8c9199',\n      error: '#ffb4ab',\n      shadow: '#000000',\n    },\n    variables: {\n      'outline-opacity': 0.14,\n      'base-shadow-opacity': 0.14,\n      'base-font': '#fff',\n    },\n  },\n};\n\nexport function configureOptions(options?: ThemeOptions): any {\n  if (!options) {\n    return {\n      scheme: ThemeScheme.light,\n      theme: ['light', 'dark'],\n      themes: { ...mergeDeep(defaultThemesValues) },\n      palette: { ...mergeDeep(defaultPalette) },\n    };\n  }\n  return {\n    scheme: ThemeScheme.light,\n    theme: ['light', 'dark'],\n    themes: { ...mergeDeep(defaultThemesValues, options.themes) },\n    palette: { ...mergeDeep(defaultPalette, options.palette) },\n  };\n}\n"],"mappings":"SAESA,SAAS;AAElB,OAAO,MAAMC,WAAW,GAAG;EACzBC,KAAK,EAAE,OAAO;EACdC,IAAI,EAAE;AACR,CAAU;AAEV,OAAO,MAAMC,qBAAqB,GAAG,CACnC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,CAC/D;AAED,OAAO,MAAMC,cAA6B,GAAG;EAC3CC,WAAW,EAAE,OAAO;EACpBC,MAAM,EAAE;IACNC,OAAO,EAAE,SAAS;IAClBC,SAAS,EAAE,SAAS;IACpBC,QAAQ,EAAE,SAAS;IACnBC,OAAO,EAAE,SAAS;IAClBC,QAAQ,EAAE,SAAS;IACnBC,QAAQ,EAAE,SAAS;IACnBC,OAAO,EAAE;EACX;AACF,CAAC;AAED,OAAO,MAAMC,mBAAwB,GAAG;EACtCb,KAAK,EAAE;IACLc,MAAM,EAAE,KAAK;IACbT,MAAM,EAAE;MACNC,OAAO,EAAE,SAAS;MAClBC,SAAS,EAAE,SAAS;MACpBC,QAAQ,EAAE,SAAS;MACnBO,UAAU,EAAE,SAAS;MACrBC,OAAO,EAAE,SAAS;MAClB,iBAAiB,EAAE,SAAS;MAC5BC,OAAO,EAAE,SAAS;MAClBC,KAAK,EAAE,SAAS;MAChBC,MAAM,EAAE;IACV,CAAC;IACDC,SAAS,EAAE;MACT,iBAAiB,EAAE,IAAI;MACvB,qBAAqB,EAAE,IAAI;MAC3B,WAAW,EAAE;IACf;EACF,CAAC;EACDnB,IAAI,EAAE;IACJa,MAAM,EAAE,IAAI;IACZT,MAAM,EAAE;MACNC,OAAO,EAAE,SAAS;MAClBC,SAAS,EAAE,SAAS;MACpBC,QAAQ,EAAE,SAAS;MACnBO,UAAU,EAAE,SAAS;MACrBC,OAAO,EAAE,SAAS;MAClB,iBAAiB,EAAE,SAAS;MAC5BC,OAAO,EAAE,SAAS;MAClBC,KAAK,EAAE,SAAS;MAChBC,MAAM,EAAE;IACV,CAAC;IACDC,SAAS,EAAE;MACT,iBAAiB,EAAE,IAAI;MACvB,qBAAqB,EAAE,IAAI;MAC3B,WAAW,EAAE;IACf;EACF;AACF,CAAC;AAED,OAAO,SAASC,gBAAgBA,CAACC,OAAsB,EAAO;EAC5D,IAAI,CAACA,OAAO,EAAE;IACZ,OAAO;MACLC,MAAM,EAAExB,WAAW,CAACC,KAAK;MACzBwB,KAAK,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC;MACxBC,MAAM,EAAE;QAAE,GAAG3B,SAAS,CAACe,mBAAmB;MAAE,CAAC;MAC7Ca,OAAO,EAAE;QAAE,GAAG5B,SAAS,CAACK,cAAc;MAAE;IAC1C,CAAC;EACH;EACA,OAAO;IACLoB,MAAM,EAAExB,WAAW,CAACC,KAAK;IACzBwB,KAAK,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC;IACxBC,MAAM,EAAE;MAAE,GAAG3B,SAAS,CAACe,mBAAmB,EAAES,OAAO,CAACG,MAAM;IAAE,CAAC;IAC7DC,OAAO,EAAE;MAAE,GAAG5B,SAAS,CAACK,cAAc,EAAEmB,OAAO,CAACI,OAAO;IAAE;EAC3D,CAAC;AACH"}

package/lib/composables/theme/types.mjs

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.mjs.map

package/lib/composables/theme/types.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.mjs","names":[],"sources":["../../../src/composables/theme/types.ts"],"sourcesContent":["import { ThemeScheme } from \"./setting\";\r\n\r\nexport interface ThemeOptions {\r\n  scheme: 'light' | 'dark' | 'auto';\r\n  theme: [string, string?];\r\n  themes: Record<string, ThemeDefinition>;\r\n  palette?: PaletteOption;\r\n  cspNonce?: string;\r\n}\r\n\r\nexport interface PaletteOption {\r\n  scaleMethod: 'manual' | 'luma' | 'tonal';\r\n  colors: Record<string, string | PaletteLevelColorOption | PaletteLumaColorOption>;\r\n  defaultLamaScale?: {\r\n    darken?: 0 | 1 | 2 | 3 | 4;\r\n    lighten?: 0 | 1 | 2 | 3 | 4 | 5;\r\n  }\r\n}\r\n\r\ntype ScaleLevel = number;\r\nexport type PaletteLevelColorOption = Record<ScaleLevel, string>\r\n\r\nexport type PaletteLumaColorOption = {\r\n  value: string,\r\n  darken?: 0 | 1 | 2 | 3 | 4;\r\n  lighten?: 0 | 1 | 2 | 3 | 4 | 5;\r\n}\r\n\r\nexport interface ThemeDefinition {\r\n  isDark: boolean;\r\n  colors: Record<string, string>;\r\n  variables: Record<string, string>;\r\n}\r\n"],"mappings":""}

package/lib/directives/complement-click/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["documentRoot","defaultDetermine","directive","mouseEvent","element","binding","value","handler","_complementClick","lastMousedownWasOutside","checkEvent","setTimeout","determine","root","ShadowRoot","host","target","elements","include","push","some","el","contains","event","determineFn","implant","callback","document","ComplementClick","mounted","onClick","onMousedown","app","addEventListener","_uid","instance","$","uid","unmounted","old","removeEventListener"],"sources":["../../../src/directives/complement-click/index.ts"],"sourcesContent":["import { DirectiveBinding } from 'vue';\n\nimport { documentRoot } from '../../util/dom';\n\ninterface ComplementClickDirectiveElementImplanted {\n  onClick: EventListener;\n  onMousedown: EventListener;\n}\n\ndeclare global {\n  interface Element {\n    _complementClick?: Record<\n      number,\n      ComplementClickDirectiveElementImplanted | undefined\n    > & { lastMousedownWasOutside: boolean };\n  }\n}\n\nexport interface ComplementClickBindingOptions {\n  handler: (mouseEvent: MouseEvent) => void;\n  determine?: (event: Event) => boolean;\n  include?: () => HTMLElement[];\n}\n\nexport interface ComplementClickBinding extends DirectiveBinding {\n  value: ((mouseEvent: MouseEvent) => void) | ComplementClickBindingOptions;\n}\n\nfunction defaultDetermine() {\n  return true;\n}\n\nfunction directive(\n  mouseEvent: MouseEvent,\n  element: HTMLElement,\n  binding: ComplementClickBinding,\n) {\n  const { value } = binding;\n  const handler = typeof value === 'function' ? value : value.handler;\n  element._complementClick!.lastMousedownWasOutside &&\n    checkEvent(mouseEvent, element, binding) &&\n    setTimeout(() => {\n      determine(mouseEvent, binding) && handler && handler(mouseEvent);\n    }, 0);\n}\n\nfunction checkEvent(\n  mouseEvent: MouseEvent,\n  element: HTMLElement,\n  binding: ComplementClickBinding,\n): boolean {\n  if (!mouseEvent || determine(mouseEvent, binding) === false) {\n    return false;\n  }\n  const root = documentRoot(element);\n  if (\n    typeof ShadowRoot !== 'undefined' &&\n    root instanceof ShadowRoot &&\n    root.host === mouseEvent.target\n  ) {\n    return false;\n  }\n  const elements = (\n    (typeof binding.value === 'object' && binding.value.include) ||\n    (() => [])\n  )();\n  elements.push(element);\n  return !elements.some((el) => el?.contains(mouseEvent.target as Node));\n}\n\nfunction determine(\n  event: MouseEvent,\n  binding: ComplementClickBinding,\n): boolean {\n  const { value } = binding;\n  const determineFn =\n    (typeof value === 'object' && value.determine) || defaultDetermine;\n  return determineFn && determineFn?.(event);\n}\n\nfunction implant(\n  element: HTMLElement,\n  callback: (app: HTMLDocument | ShadowRoot | null) => void,\n) {\n  const root = documentRoot(element);\n  callback(document);\n  if (typeof ShadowRoot !== 'undefined' && root instanceof ShadowRoot) {\n    callback(root);\n  }\n}\n\nexport const ComplementClick = {\n  mounted(element: HTMLElement, binding: ComplementClickBinding) {\n    const onClick = (event: Event) =>\n      directive(event as MouseEvent, element, binding);\n    const onMousedown = (event: Event) => {\n      element._complementClick!.lastMousedownWasOutside = checkEvent(\n        event as MouseEvent,\n        element,\n        binding,\n      );\n    };\n    implant(element, (app) => {\n      app?.addEventListener('click', onClick, true);\n      app?.addEventListener('mousedown', onMousedown, true);\n    });\n    if (!element._complementClick) {\n      element._complementClick = {\n        lastMousedownWasOutside: true,\n      };\n    }\n    const _uid = binding.instance!.$.uid;\n    element._complementClick[_uid] = {\n      onClick,\n      onMousedown,\n    };\n  },\n  unmounted(element: HTMLElement, binding: ComplementClickBinding) {\n    if (!element._complementClick) return;\n    const _uid = binding.instance!.$.uid;\n    implant(element, (app) => {\n      const old = element._complementClick?.[_uid];\n      if (old) {\n        const { onClick, onMousedown } = old;\n        app?.removeEventListener('click', onClick, true);\n        app?.removeEventListener('mousedown', onMousedown, true);\n      }\n    });\n    delete element._complementClick[_uid];\n  },\n};\n"],"mappings":"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"}
+{"version":3,"file":"index.mjs","names":["documentRoot","defaultDetermine","directive","mouseEvent","element","binding","value","handler","_complementClick","lastMousedownWasOutside","checkEvent","setTimeout","determine","root","ShadowRoot","host","target","elements","include","push","some","el","contains","event","determineFn","implant","callback","document","ComplementClick","mounted","onClick","onMousedown","app","addEventListener","_uid","instance","$","uid","unmounted","old","removeEventListener"],"sources":["../../../src/directives/complement-click/index.ts"],"sourcesContent":["import { DirectiveBinding } from 'vue';\n\nimport { documentRoot } from '../../util/dom';\n\ninterface ComplementClickDirectiveElementImplanted {\n  onClick: EventListener;\n  onMousedown: EventListener;\n}\n\ndeclare global {\n  interface Element {\n    _complementClick?: Record<\n      number,\n      ComplementClickDirectiveElementImplanted | undefined\n    > & { lastMousedownWasOutside: boolean };\n  }\n}\n\nexport interface ComplementClickBindingOptions {\n  handler: (mouseEvent: MouseEvent) => void;\n  determine?: (event: Event) => boolean;\n  include?: () => (HTMLElement | undefined)[];\n}\n\nexport interface ComplementClickBinding extends DirectiveBinding {\n  value: ((mouseEvent: MouseEvent) => void) | ComplementClickBindingOptions;\n}\n\nfunction defaultDetermine() {\n  return true;\n}\n\nfunction directive(\n  mouseEvent: MouseEvent,\n  element: HTMLElement,\n  binding: ComplementClickBinding,\n) {\n  const { value } = binding;\n  const handler = typeof value === 'function' ? value : value.handler;\n  element._complementClick!.lastMousedownWasOutside &&\n    checkEvent(mouseEvent, element, binding) &&\n    setTimeout(() => {\n      determine(mouseEvent, binding) && handler && handler(mouseEvent);\n    }, 0);\n}\n\nfunction checkEvent(\n  mouseEvent: MouseEvent,\n  element: HTMLElement,\n  binding: ComplementClickBinding,\n): boolean {\n  if (!mouseEvent || determine(mouseEvent, binding) === false) {\n    return false;\n  }\n  const root = documentRoot(element);\n  if (\n    typeof ShadowRoot !== 'undefined' &&\n    root instanceof ShadowRoot &&\n    root.host === mouseEvent.target\n  ) {\n    return false;\n  }\n  const elements = (\n    (typeof binding.value === 'object' && binding.value.include) ||\n    (() => [])\n  )();\n  elements.push(element);\n  return !elements.some((el) => el?.contains(mouseEvent.target as Node));\n}\n\nfunction determine(\n  event: MouseEvent,\n  binding: ComplementClickBinding,\n): boolean {\n  const { value } = binding;\n  const determineFn =\n    (typeof value === 'object' && value.determine) || defaultDetermine;\n  return determineFn && determineFn?.(event);\n}\n\nfunction implant(\n  element: HTMLElement,\n  callback: (app: HTMLDocument | ShadowRoot | null) => void,\n) {\n  const root = documentRoot(element);\n  callback(document);\n  if (typeof ShadowRoot !== 'undefined' && root instanceof ShadowRoot) {\n    callback(root);\n  }\n}\n\nexport const ComplementClick = {\n  mounted(element: HTMLElement, binding: ComplementClickBinding) {\n    const onClick = (event: Event) =>\n      directive(event as MouseEvent, element, binding);\n    const onMousedown = (event: Event) => {\n      element._complementClick!.lastMousedownWasOutside = checkEvent(\n        event as MouseEvent,\n        element,\n        binding,\n      );\n    };\n    implant(element, (app) => {\n      app?.addEventListener('click', onClick, true);\n      app?.addEventListener('mousedown', onMousedown, true);\n    });\n    if (!element._complementClick) {\n      element._complementClick = {\n        lastMousedownWasOutside: true,\n      };\n    }\n    const _uid = binding.instance!.$.uid;\n    element._complementClick[_uid] = {\n      onClick,\n      onMousedown,\n    };\n  },\n  unmounted(element: HTMLElement, binding: ComplementClickBinding) {\n    if (!element._complementClick) return;\n    const _uid = binding.instance!.$.uid;\n    implant(element, (app) => {\n      const old = element._complementClick?.[_uid];\n      if (old) {\n        const { onClick, onMousedown } = old;\n        app?.removeEventListener('click', onClick, true);\n        app?.removeEventListener('mousedown', onMousedown, true);\n      }\n    });\n    delete element._complementClick[_uid];\n  },\n};\n"],"mappings":"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"}

package/lib/directives/theme-class.mjs

@@ -1,8 +1,8 @@
-import { watchEffect } from "vue";
+import { unref, watchEffect } from 'vue';
 const bindThemeClass = (el, binding, vnode) => {
   function bindingClass(themeClass) {
     el.classList.forEach(classToken => {
-      if (classToken.startsWith('theme--') && classToken !== themeClass) {
+      if (classToken.startsWith('y-theme--') && classToken !== themeClass) {
         el.classList.remove(classToken);
       }
     });
@@ -10,11 +10,11 @@ const bindThemeClass = (el, binding, vnode) => {
   }
   watchEffect(() => {
     const theme = binding.instance?.$yuyeon?.theme ?? vnode?.ctx?.root.appContext.config.globalProperties?.$yuyeon?.theme;
-    const themeName = binding.value ?? theme.name ?? '';
+    const themeName = binding.value ?? unref(theme.currentThemeKey) ?? '';
     if (!themeName) {
       return;
     }
-    const themeClass = `theme--${themeName}`;
+    const themeClass = `y-theme--${themeName}`;
     bindingClass(themeClass);
   }, {
     flush: 'post'

package/lib/directives/theme-class.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"theme-class.mjs","names":["watchEffect","bindThemeClass","el","binding","vnode","bindingClass","themeClass","classList","forEach","classToken","startsWith","remove","add","theme","instance","$yuyeon","ctx","root","appContext","config","globalProperties","themeName","value","name","flush"],"sources":["../../src/directives/theme-class.ts"],"sourcesContent":["import { FunctionDirective, watchEffect } from \"vue\";\r\n\r\nconst bindThemeClass: FunctionDirective = (el, binding, vnode) => {\r\n  function bindingClass(themeClass: string) {\r\n    el.classList.forEach((classToken: string) => {\r\n      if (classToken.startsWith('theme--') && classToken !== themeClass) {\r\n        el.classList.remove(classToken);\r\n      }\r\n    });\r\n    el.classList.add(themeClass);\r\n  }\r\n\r\n  watchEffect(() => {\r\n    const theme = (binding.instance as any)?.$yuyeon?.theme ?? (vnode as any)?.ctx?.root.appContext.config.globalProperties?.$yuyeon?.theme;\r\n    const themeName = binding.value ?? theme.name ?? '';\r\n    if (!themeName) { return; }\r\n    const themeClass = `theme--${themeName}`;\r\n    bindingClass(themeClass);\r\n  }, { flush: 'post' });\r\n};\r\n\r\nexport default bindThemeClass;\r\n"],"mappings":"AAAA,SAA4BA,WAAW,QAAQ,KAAK;AAEpD,MAAMC,cAAiC,GAAGA,CAACC,EAAE,EAAEC,OAAO,EAAEC,KAAK,KAAK;EAChE,SAASC,YAAYA,CAACC,UAAkB,EAAE;IACxCJ,EAAE,CAACK,SAAS,CAACC,OAAO,CAAEC,UAAkB,IAAK;MAC3C,IAAIA,UAAU,CAACC,UAAU,CAAC,SAAS,CAAC,IAAID,UAAU,KAAKH,UAAU,EAAE;QACjEJ,EAAE,CAACK,SAAS,CAACI,MAAM,CAACF,UAAU,CAAC;MACjC;IACF,CAAC,CAAC;IACFP,EAAE,CAACK,SAAS,CAACK,GAAG,CAACN,UAAU,CAAC;EAC9B;EAEAN,WAAW,CAAC,MAAM;IAChB,MAAMa,KAAK,GAAIV,OAAO,CAACW,QAAQ,EAAUC,OAAO,EAAEF,KAAK,IAAKT,KAAK,EAAUY,GAAG,EAAEC,IAAI,CAACC,UAAU,CAACC,MAAM,CAACC,gBAAgB,EAAEL,OAAO,EAAEF,KAAK;IACvI,MAAMQ,SAAS,GAAGlB,OAAO,CAACmB,KAAK,IAAIT,KAAK,CAACU,IAAI,IAAI,EAAE;IACnD,IAAI,CAACF,SAAS,EAAE;MAAE;IAAQ;IAC1B,MAAMf,UAAU,GAAI,UAASe,SAAU,EAAC;IACxChB,YAAY,CAACC,UAAU,CAAC;EAC1B,CAAC,EAAE;IAAEkB,KAAK,EAAE;EAAO,CAAC,CAAC;AACvB,CAAC;AAED,eAAevB,cAAc"}
+{"version":3,"file":"theme-class.mjs","names":["unref","watchEffect","bindThemeClass","el","binding","vnode","bindingClass","themeClass","classList","forEach","classToken","startsWith","remove","add","theme","instance","$yuyeon","ctx","root","appContext","config","globalProperties","themeName","value","currentThemeKey","flush"],"sources":["../../src/directives/theme-class.ts"],"sourcesContent":["import { FunctionDirective, unref, watchEffect } from 'vue';\n\nconst bindThemeClass: FunctionDirective = (el, binding, vnode) => {\n  function bindingClass(themeClass: string) {\n    el.classList.forEach((classToken: string) => {\n      if (classToken.startsWith('y-theme--') && classToken !== themeClass) {\n        el.classList.remove(classToken);\n      }\n    });\n    el.classList.add(themeClass);\n  }\n\n  watchEffect(\n    () => {\n      const theme =\n        (binding.instance as any)?.$yuyeon?.theme ??\n        (vnode as any)?.ctx?.root.appContext.config.globalProperties?.$yuyeon\n          ?.theme;\n      const themeName = binding.value ?? unref(theme.currentThemeKey) ?? '';\n      if (!themeName) {\n        return;\n      }\n      const themeClass = `y-theme--${themeName}`;\n      bindingClass(themeClass);\n    },\n    { flush: 'post' },\n  );\n};\n\nexport default bindThemeClass;\n"],"mappings":"AAAA,SAA4BA,KAAK,EAAEC,WAAW,QAAQ,KAAK;AAE3D,MAAMC,cAAiC,GAAGA,CAACC,EAAE,EAAEC,OAAO,EAAEC,KAAK,KAAK;EAChE,SAASC,YAAYA,CAACC,UAAkB,EAAE;IACxCJ,EAAE,CAACK,SAAS,CAACC,OAAO,CAAEC,UAAkB,IAAK;MAC3C,IAAIA,UAAU,CAACC,UAAU,CAAC,WAAW,CAAC,IAAID,UAAU,KAAKH,UAAU,EAAE;QACnEJ,EAAE,CAACK,SAAS,CAACI,MAAM,CAACF,UAAU,CAAC;MACjC;IACF,CAAC,CAAC;IACFP,EAAE,CAACK,SAAS,CAACK,GAAG,CAACN,UAAU,CAAC;EAC9B;EAEAN,WAAW,CACT,MAAM;IACJ,MAAMa,KAAK,GACRV,OAAO,CAACW,QAAQ,EAAUC,OAAO,EAAEF,KAAK,IACxCT,KAAK,EAAUY,GAAG,EAAEC,IAAI,CAACC,UAAU,CAACC,MAAM,CAACC,gBAAgB,EAAEL,OAAO,EACjEF,KAAK;IACX,MAAMQ,SAAS,GAAGlB,OAAO,CAACmB,KAAK,IAAIvB,KAAK,CAACc,KAAK,CAACU,eAAe,CAAC,IAAI,EAAE;IACrE,IAAI,CAACF,SAAS,EAAE;MACd;IACF;IACA,MAAMf,UAAU,GAAI,YAAWe,SAAU,EAAC;IAC1ChB,YAAY,CAACC,UAAU,CAAC;EAC1B,CAAC,EACD;IAAEkB,KAAK,EAAE;EAAO,CAClB,CAAC;AACH,CAAC;AAED,eAAevB,cAAc"}

package/lib/index.mjs

@@ -1,8 +1,8 @@
-import { nextTick, reactive } from "vue";
 import * as components from "./components/index.mjs";
-import { createThemeModule } from "./composables/theme/index.mjs";
-import PlateWave from "./directives/plate-wave/index.mjs";
-import { YUYEON_LOGO } from "./etc/index.mjs"; //
+import { YUYEON_LOGO } from "./etc/index.mjs";
+import { nextTick, reactive } from 'vue';
+import { YUYEON_THEME_KEY, createThemeModule, useTheme } from "./composables/theme/index.mjs";
+import PlateWave from "./directives/plate-wave/index.mjs"; //
 import "./styles/base.scss";
 const defaultOptions = {
   credit: true
@@ -22,7 +22,7 @@ export function init() {
       app.component(componentName, comp);
     });
     app.directive('plate-wave', PlateWave);
-    app.provide('theme', yuyeon.theme);
+    app.provide(YUYEON_THEME_KEY, yuyeon.theme);
     app.config.globalProperties.$yuyeon = yuyeon;
     nextTick(() => {
       yuyeon.app = app._instance;
@@ -52,4 +52,6 @@ export function init() {
     // theme: themeModule,
   };
 }
+
+export { useTheme };
 //# sourceMappingURL=index.mjs.map

package/lib/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["nextTick","reactive","components","createThemeModule","PlateWave","YUYEON_LOGO","defaultOptions","credit","init","options","arguments","length","undefined","themeModule","theme","install","app","yuyeon","root","instance","Object","keys","forEach","componentName","comp","component","directive","provide","config","globalProperties","$yuyeon","_instance","_container","Error","$el","classList","add","setAttribute","console","log","unmount","scope","stop"],"sources":["../src/index.ts"],"sourcesContent":["import { Component, ComponentInternalInstance } from \"@vue/runtime-core\";\r\nimport type { App } from 'vue';\r\nimport { nextTick, reactive } from \"vue\";\r\n\r\nimport * as components from './components';\r\nimport { createThemeModule } from './composables/theme';\r\nimport PlateWave from './directives/plate-wave';\r\nimport { YUYEON_LOGO } from './etc';\r\n//\r\nimport './styles/base.scss';\r\n\r\n\r\nconst defaultOptions = {\r\n  credit: true,\r\n};\r\n\r\ndeclare module 'vue' {\r\n  interface ComponentCustomProperties {\r\n    $yuyeon: any;\r\n  }\r\n}\r\n\r\nexport function init(options: any = defaultOptions) {\r\n  const themeModule = createThemeModule(options?.theme);\r\n\r\n  const install = (app: App): any => {\r\n    themeModule.install(app);\r\n\r\n    const yuyeon = reactive({\r\n      app: null as ComponentInternalInstance | null,\r\n      root: null as HTMLElement | null,\r\n      theme: themeModule.instance,\r\n    });\r\n\r\n    Object.keys(components).forEach((componentName) => {\r\n      const comp = components[componentName as keyof typeof components];\r\n      app.component(componentName, comp as Component);\r\n    });\r\n\r\n    app.directive('plate-wave', PlateWave);\r\n\r\n    app.provide('theme', yuyeon.theme);\r\n\r\n    app.config.globalProperties.$yuyeon = yuyeon;\r\n\r\n    nextTick(() => {\r\n      yuyeon.app = app._instance as any;\r\n      yuyeon.root = app._container;\r\n      if (!yuyeon.root) {\r\n        throw new Error(`yuyeon: Can't found instance`);\r\n      }\r\n      const $el = yuyeon.root;\r\n      $el.classList.add('y-root');\r\n      $el.setAttribute('data-y-root', '');\r\n      themeModule.init(yuyeon);\r\n    });\r\n    if (options?.credit) {\r\n      console.log(YUYEON_LOGO);\r\n    }\r\n    const { unmount } = app;\r\n    app.unmount = () => {\r\n      unmount();\r\n      themeModule.scope.stop();\r\n      app.unmount = unmount;\r\n    }\r\n  };\r\n\r\n  return {\r\n    install,\r\n    // theme: themeModule,\r\n  };\r\n}\r\n"],"mappings":"AAEA,SAASA,QAAQ,EAAEC,QAAQ,QAAQ,KAAK;AAAC,OAElC,KAAKC,UAAU;AAAA,SACbC,iBAAiB;AAAA,OACnBC,SAAS;AAAA,SACPC,WAAW,2BACpB;AACA;AAGA,MAAMC,cAAc,GAAG;EACrBC,MAAM,EAAE;AACV,CAAC;AAQD,OAAO,SAASC,IAAIA,CAAA,EAAgC;EAAA,IAA/BC,OAAY,GAAAC,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAGJ,cAAc;EAChD,MAAMO,WAAW,GAAGV,iBAAiB,CAACM,OAAO,EAAEK,KAAK,CAAC;EAErD,MAAMC,OAAO,GAAIC,GAAQ,IAAU;IACjCH,WAAW,CAACE,OAAO,CAACC,GAAG,CAAC;IAExB,MAAMC,MAAM,GAAGhB,QAAQ,CAAC;MACtBe,GAAG,EAAE,IAAwC;MAC7CE,IAAI,EAAE,IAA0B;MAChCJ,KAAK,EAAED,WAAW,CAACM;IACrB,CAAC,CAAC;IAEFC,MAAM,CAACC,IAAI,CAACnB,UAAU,CAAC,CAACoB,OAAO,CAAEC,aAAa,IAAK;MACjD,MAAMC,IAAI,GAAGtB,UAAU,CAACqB,aAAa,CAA4B;MACjEP,GAAG,CAACS,SAAS,CAACF,aAAa,EAAEC,IAAiB,CAAC;IACjD,CAAC,CAAC;IAEFR,GAAG,CAACU,SAAS,CAAC,YAAY,EAAEtB,SAAS,CAAC;IAEtCY,GAAG,CAACW,OAAO,CAAC,OAAO,EAAEV,MAAM,CAACH,KAAK,CAAC;IAElCE,GAAG,CAACY,MAAM,CAACC,gBAAgB,CAACC,OAAO,GAAGb,MAAM;IAE5CjB,QAAQ,CAAC,MAAM;MACbiB,MAAM,CAACD,GAAG,GAAGA,GAAG,CAACe,SAAgB;MACjCd,MAAM,CAACC,IAAI,GAAGF,GAAG,CAACgB,UAAU;MAC5B,IAAI,CAACf,MAAM,CAACC,IAAI,EAAE;QAChB,MAAM,IAAIe,KAAK,CAAE,8BAA6B,CAAC;MACjD;MACA,MAAMC,GAAG,GAAGjB,MAAM,CAACC,IAAI;MACvBgB,GAAG,CAACC,SAAS,CAACC,GAAG,CAAC,QAAQ,CAAC;MAC3BF,GAAG,CAACG,YAAY,CAAC,aAAa,EAAE,EAAE,CAAC;MACnCxB,WAAW,CAACL,IAAI,CAACS,MAAM,CAAC;IAC1B,CAAC,CAAC;IACF,IAAIR,OAAO,EAAEF,MAAM,EAAE;MACnB+B,OAAO,CAACC,GAAG,CAAClC,WAAW,CAAC;IAC1B;IACA,MAAM;MAAEmC;IAAQ,CAAC,GAAGxB,GAAG;IACvBA,GAAG,CAACwB,OAAO,GAAG,MAAM;MAClBA,OAAO,CAAC,CAAC;MACT3B,WAAW,CAAC4B,KAAK,CAACC,IAAI,CAAC,CAAC;MACxB1B,GAAG,CAACwB,OAAO,GAAGA,OAAO;IACvB,CAAC;EACH,CAAC;EAED,OAAO;IACLzB;IACA;EACF,CAAC;AACH"}
+{"version":3,"file":"index.mjs","names":["components","YUYEON_LOGO","nextTick","reactive","YUYEON_THEME_KEY","createThemeModule","useTheme","PlateWave","defaultOptions","credit","init","options","arguments","length","undefined","themeModule","theme","install","app","yuyeon","root","instance","Object","keys","forEach","componentName","comp","component","directive","provide","config","globalProperties","$yuyeon","_instance","_container","Error","$el","classList","add","setAttribute","console","log","unmount","scope","stop"],"sources":["../src/index.ts"],"sourcesContent":["import * as components from './components';\nimport { YUYEON_LOGO } from './etc';\nimport { Component, ComponentInternalInstance } from '@vue/runtime-core';\nimport type { App } from 'vue';\nimport { nextTick, reactive } from 'vue';\n\nimport {\n  YUYEON_THEME_KEY,\n  createThemeModule,\n  useTheme,\n} from './composables/theme';\nimport PlateWave from './directives/plate-wave';\n\n//\nimport './styles/base.scss';\n\nconst defaultOptions = {\n  credit: true,\n};\n\ndeclare module 'vue' {\n  interface ComponentCustomProperties {\n    $yuyeon: any;\n  }\n}\n\nexport function init(options: any = defaultOptions) {\n  const themeModule = createThemeModule(options?.theme);\n\n  const install = (app: App): any => {\n    themeModule.install(app);\n\n    const yuyeon = reactive({\n      app: null as ComponentInternalInstance | null,\n      root: null as HTMLElement | null,\n      theme: themeModule.instance,\n    });\n\n    Object.keys(components).forEach((componentName) => {\n      const comp = components[componentName as keyof typeof components];\n      app.component(componentName, comp as Component);\n    });\n\n    app.directive('plate-wave', PlateWave);\n\n    app.provide(YUYEON_THEME_KEY, yuyeon.theme);\n\n    app.config.globalProperties.$yuyeon = yuyeon;\n\n    nextTick(() => {\n      yuyeon.app = app._instance as any;\n      yuyeon.root = app._container;\n      if (!yuyeon.root) {\n        throw new Error(`yuyeon: Can't found instance`);\n      }\n      const $el = yuyeon.root;\n      $el.classList.add('y-root');\n      $el.setAttribute('data-y-root', '');\n      themeModule.init(yuyeon);\n    });\n    if (options?.credit) {\n      console.log(YUYEON_LOGO);\n    }\n    const { unmount } = app;\n    app.unmount = () => {\n      unmount();\n      themeModule.scope.stop();\n      app.unmount = unmount;\n    };\n  };\n\n  return {\n    install,\n    // theme: themeModule,\n  };\n}\n\nexport { useTheme };\n"],"mappings":"OAAO,KAAKA,UAAU;AAAA,SACbC,WAAW;AAGpB,SAASC,QAAQ,EAAEC,QAAQ,QAAQ,KAAK;AAAC,SAGvCC,gBAAgB,EAChBC,iBAAiB,EACjBC,QAAQ;AAAA,OAEHC,SAAS,2CAEhB;AACA;AAEA,MAAMC,cAAc,GAAG;EACrBC,MAAM,EAAE;AACV,CAAC;AAQD,OAAO,SAASC,IAAIA,CAAA,EAAgC;EAAA,IAA/BC,OAAY,GAAAC,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAGJ,cAAc;EAChD,MAAMO,WAAW,GAAGV,iBAAiB,CAACM,OAAO,EAAEK,KAAK,CAAC;EAErD,MAAMC,OAAO,GAAIC,GAAQ,IAAU;IACjCH,WAAW,CAACE,OAAO,CAACC,GAAG,CAAC;IAExB,MAAMC,MAAM,GAAGhB,QAAQ,CAAC;MACtBe,GAAG,EAAE,IAAwC;MAC7CE,IAAI,EAAE,IAA0B;MAChCJ,KAAK,EAAED,WAAW,CAACM;IACrB,CAAC,CAAC;IAEFC,MAAM,CAACC,IAAI,CAACvB,UAAU,CAAC,CAACwB,OAAO,CAAEC,aAAa,IAAK;MACjD,MAAMC,IAAI,GAAG1B,UAAU,CAACyB,aAAa,CAA4B;MACjEP,GAAG,CAACS,SAAS,CAACF,aAAa,EAAEC,IAAiB,CAAC;IACjD,CAAC,CAAC;IAEFR,GAAG,CAACU,SAAS,CAAC,YAAY,EAAErB,SAAS,CAAC;IAEtCW,GAAG,CAACW,OAAO,CAACzB,gBAAgB,EAAEe,MAAM,CAACH,KAAK,CAAC;IAE3CE,GAAG,CAACY,MAAM,CAACC,gBAAgB,CAACC,OAAO,GAAGb,MAAM;IAE5CjB,QAAQ,CAAC,MAAM;MACbiB,MAAM,CAACD,GAAG,GAAGA,GAAG,CAACe,SAAgB;MACjCd,MAAM,CAACC,IAAI,GAAGF,GAAG,CAACgB,UAAU;MAC5B,IAAI,CAACf,MAAM,CAACC,IAAI,EAAE;QAChB,MAAM,IAAIe,KAAK,CAAE,8BAA6B,CAAC;MACjD;MACA,MAAMC,GAAG,GAAGjB,MAAM,CAACC,IAAI;MACvBgB,GAAG,CAACC,SAAS,CAACC,GAAG,CAAC,QAAQ,CAAC;MAC3BF,GAAG,CAACG,YAAY,CAAC,aAAa,EAAE,EAAE,CAAC;MACnCxB,WAAW,CAACL,IAAI,CAACS,MAAM,CAAC;IAC1B,CAAC,CAAC;IACF,IAAIR,OAAO,EAAEF,MAAM,EAAE;MACnB+B,OAAO,CAACC,GAAG,CAACxC,WAAW,CAAC;IAC1B;IACA,MAAM;MAAEyC;IAAQ,CAAC,GAAGxB,GAAG;IACvBA,GAAG,CAACwB,OAAO,GAAG,MAAM;MAClBA,OAAO,CAAC,CAAC;MACT3B,WAAW,CAAC4B,KAAK,CAACC,IAAI,CAAC,CAAC;MACxB1B,GAAG,CAACwB,OAAO,GAAGA,OAAO;IACvB,CAAC;EACH,CAAC;EAED,OAAO;IACLzB;IACA;EACF,CAAC;AACH;;AAEA,SAASX,QAAQ"}

package/lib/mixins/di.mjs

@@ -5,9 +5,6 @@ import { defineComponent } from 'vue';
 export default defineComponent({
   name: 'DiMixin',
   inject: {
-    theme: {
-      from: 'theme'
-    },
     form$: {
       default: null
     }

package/lib/mixins/di.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"di.mjs","names":["defineComponent","name","inject","theme","from","form$","default","mounted","register","beforeUnmount","unregister"],"sources":["../../src/mixins/di.ts"],"sourcesContent":["/*\n * Created by yuyeon-ui 2022.\n */\nimport { defineComponent } from 'vue';\n\nexport default defineComponent({\n  name: 'DiMixin',\n  inject: {\n    theme: {\n      from: 'theme',\n    },\n    form$: {\n      default: null,\n    },\n  },\n  mounted() {\n    ((this as any).form$ as any)?.register(this);\n  },\n  beforeUnmount() {\n    ((this as any).form$ as any)?.unregister(this);\n  },\n});\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,eAAe,QAAQ,KAAK;AAErC,eAAeA,eAAe,CAAC;EAC7BC,IAAI,EAAE,SAAS;EACfC,MAAM,EAAE;IACNC,KAAK,EAAE;MACLC,IAAI,EAAE;IACR,CAAC;IACDC,KAAK,EAAE;MACLC,OAAO,EAAE;IACX;EACF,CAAC;EACDC,OAAOA,CAAA,EAAG;IACN,IAAI,CAASF,KAAK,EAAUG,QAAQ,CAAC,IAAI,CAAC;EAC9C,CAAC;EACDC,aAAaA,CAAA,EAAG;IACZ,IAAI,CAASJ,KAAK,EAAUK,UAAU,CAAC,IAAI,CAAC;EAChD;AACF,CAAC,CAAC"}
+{"version":3,"file":"di.mjs","names":["defineComponent","name","inject","form$","default","mounted","register","beforeUnmount","unregister"],"sources":["../../src/mixins/di.ts"],"sourcesContent":["/*\n * Created by yuyeon-ui 2022.\n */\nimport { defineComponent } from 'vue';\n\nexport default defineComponent({\n  name: 'DiMixin',\n  inject: {\n    form$: {\n      default: null,\n    },\n  },\n  mounted() {\n    ((this as any).form$ as any)?.register(this);\n  },\n  beforeUnmount() {\n    ((this as any).form$ as any)?.unregister(this);\n  },\n});\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,eAAe,QAAQ,KAAK;AAErC,eAAeA,eAAe,CAAC;EAC7BC,IAAI,EAAE,SAAS;EACfC,MAAM,EAAE;IACNC,KAAK,EAAE;MACLC,OAAO,EAAE;IACX;EACF,CAAC;EACDC,OAAOA,CAAA,EAAG;IACN,IAAI,CAASF,KAAK,EAAUG,QAAQ,CAAC,IAAI,CAAC;EAC9C,CAAC;EACDC,aAAaA,CAAA,EAAG;IACZ,IAAI,CAASJ,KAAK,EAAUK,UAAU,CAAC,IAAI,CAAC;EAChD;AACF,CAAC,CAAC"}

package/lib/styles/_elevation.scss

@@ -0,0 +1,15 @@
+
+@use 'sass:map';
+@use './util/var';
+@use './settings/elevation' as *;
+
+@mixin styles() {
+  @each $level, $core-dimension in $core-shadow-dimension {
+    $ambient-dimension: map.get($ambient-shadow-dimension, $level);
+    $var: --y-elevation--level#{$level};
+    #{$var}: #{$core-dimension} rgba(var(--y-elevation-color), #{$core-shadow-opacity}), #{$ambient-dimension} rgba(var(--y-elevation-color), #{$ambient-shadow-opacity});
+    .elevation-#{$level} {
+      box-shadow: var(#{$var});
+    }
+  }
+}

package/lib/styles/base.scss

@@ -3,16 +3,22 @@
 @use 'settings/variables';
 @use 'palette';
 
+@use 'elevation';
+
 :root {
   box-sizing: border-box;
 }
 
 :root {
-  --y-palette--primary: #{palette.$primary};
-  //--y-theme--primary: 79, 151, 220;
-  //--y-theme--base-bg: 255, 255, 255;
-  //--y-line-color: 0, 0, 0;
-  //--y-line-opacity: 0.14;
+  --default-shadow: 0, 0, 0;
+  --y-elevation-color: var(--y-theme-shadow, var(--default-shadow));
+
+  @include elevation.styles();
+}
+
+.y-root {
+  background: rgba(var(--y-theme-background), 1);
+  color: rgba(var(--y-theme-on-background), 1);
 }
 
 .fade-enter-active,

package/lib/styles/settings/_elevation.scss

@@ -0,0 +1,20 @@
+$core-shadow-opacity: 0.3;
+$ambient-shadow-opacity: 0.15;
+
+$core-shadow-dimension: (
+  0: (0px 0px 0px 0px),
+  1: (0px 1px 2px 0px),
+  2: (0px 1px 2px 0px),
+  3: (0px 1px 3px 0px),
+  4: (0px 2px 3px 0px),
+  5: (0px 4px 4px 0px),
+);
+
+$ambient-shadow-dimension: (
+  0: (0px 0px 0px 0px),
+  1: (0px 1px 3px 1px),
+  2: (0px 2px 6px 2px),
+  3: (0px 4px 8px 3px),
+  4: (0px 6px 10px 4px),
+  5: (0px 8px 12px 6px),
+)

package/lib/styles/theme/light.scss

@@ -15,7 +15,7 @@ $theme--light: map.deep-merge(
     'select': (
       'selected': palette.$basic-black,
       'selected-background': palette.$basic-gray-700,
-    ),
+    )
   ),
   $theme--light
 );

package/lib/styles/util/_helper.scss

@@ -0,0 +1,12 @@
+@use 'sass:string';
+
+@function deepGet($map, $keys...) {
+  @each $key in $keys {
+    $map: map-get($map, $key);
+  }
+  @return $map;
+}
+
+@function hasPrefix($string, $prefix) {
+  @return string.slice($string, 1, string.length($prefix)) == $prefix;
+}

package/lib/styles/util/_var.scss

@@ -0,0 +1,18 @@
+@use 'sass:string';
+@use './helper';
+
+@function create($name, $fallback: null) {
+  $name: createName($name);
+  @if fallback == null {
+    @return var(#{$name});
+  }
+
+  @return var(#{$name}, $fallback);
+}
+
+@function createName($name) {
+  @if helper.hasPrefix($name, '--') {
+    @return $name;
+  }
+  @return string.unquote('--y-#{$name}');
+}