@gospore/theme 1.0.121 → 1.0.123
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/theme.cjs.js +1 -1
- package/dist/theme.cjs.js.map +1 -1
- package/dist/theme.css +1 -1
- package/dist/theme.es.js +191 -145
- package/dist/theme.es.js.map +1 -1
- package/dist/theme.umd.js +1 -1
- package/dist/theme.umd.js.map +1 -1
- package/package.json +2 -2
package/dist/theme.cjs.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue");require("what-input");const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue");require("what-input");const N=require("@gospore/dropdown-menu"),k=["auto","light","dark"],E="gospore-theme-mode",y=60*60*24*365,D="(prefers-color-scheme: dark)";function v(){if(typeof document>"u")return null;const t=S(E);return t&&k.includes(t)?t:null}function b(t){if(typeof document>"u"||!k.includes(t))return;const n=typeof window<"u"?window.location.hostname:"",c=typeof window<"u"?window.location.protocol:"",r=R(n),l=c==="https:",d=["path=/",`max-age=${y}`,"SameSite=Lax"];r&&d.push(`domain=${r}`),l&&d.push("Secure"),document.cookie=[`${encodeURIComponent(E)}=${encodeURIComponent(t)}`,...d].join("; ")}function g(t){if(typeof document>"u")return;const n=typeof t=="string"&&k.includes(t)?t:v()??"auto";console.log("Applying theme mode:",n);const c=O(n);document.documentElement.setAttribute("dark-mode",c)}function S(t){if(typeof document>"u"||!document.cookie)return null;const n=`${encodeURIComponent(t)}=`,c=document.cookie.split("; ");for(const r of c)if(r.startsWith(n))return decodeURIComponent(r.slice(n.length));return null}function R(t){if(!t||t==="localhost")return null;if(/^\d+(?:\.\d+){3}$/.test(t))return t;const c=t.split(".");return c.length<=1?null:c.length===2?t:c.slice(-2).join(".")}function O(t){if(t==="dark")return!0;if(t==="light"||typeof window>"u")return!1;try{const n=typeof window.matchMedia=="function"?window.matchMedia(D):null;return n?n.matches:!1}catch{return!1}}const T={class:"theme"},B="(prefers-color-scheme: dark)",I="(prefers-reduced-motion: reduce)",A=200,U=Object.assign({name:"Theme"},{__name:"Theme",props:{mode:{type:String,validator:t=>["auto","light","dark"].includes(t)}},setup(t){const n=t,c=window.matchMedia(B),r=window.matchMedia(I),l=u();g(l);const d=e.ref(l),f=e.ref({darkMode:h(l)});c.addEventListener("change",a),e.watch(()=>n.mode,()=>{m()},{immediate:!0}),e.watch(()=>f.value.darkMode,(o,p)=>{if(p===void 0){i(o);return}s(()=>{i(o)})},{immediate:!0}),e.onBeforeUnmount(()=>{c.removeEventListener("change",a)});function m(){const o=u();d.value=o,f.value.darkMode=h(o)}function h(o){return o==="dark"?!0:o==="light"?!1:c.matches}function a(o){!o||d.value!=="auto"||(f.value.darkMode=o.matches)}function i(o){document.documentElement.setAttribute("dark-mode",o)}function s(o){if(r.matches){o();return}const p=document.startViewTransition?.bind(document);if(p){p(()=>{o()});return}o();const M=document.documentElement;typeof M.animate=="function"&&window.requestAnimationFrame(()=>{M.animate([{opacity:.85},{opacity:1}],{duration:A,easing:"ease-in-out"})})}function u(){return n.mode??v()??"auto"}return e.provide("theme",f),(o,p)=>(e.openBlock(),e.createElementBlock("div",T,[e.renderSlot(o.$slots,"default")]))}}),$=(t,n)=>{const c=t.__vccOpts||t;for(const[r,l]of n)c[r]=l;return c},C={__name:"ThemeSwitcher",props:{mode:{type:String,default:"auto",validator:t=>["auto","light","dark"].includes(t)}},emits:["update:mode"],setup(t,{emit:n}){const r=[{value:"auto",label:"System"},{value:"light",label:"Light"},{value:"dark",label:"Dark"}].reduce((i,s)=>(i[s.value]=s.label,i),{}),l=k,d=t,f=n;g();const m=e.ref(!1),h=v()??d.mode,a=e.ref(l.includes(h)?h:"auto");return e.computed(()=>r[a.value]??r.auto),e.watch(()=>d.mode,i=>{l.includes(i)&&i!==a.value&&(a.value=i)}),e.watch(a,i=>{if(!l.includes(i)){a.value="auto";return}m.value=!1,f("update:mode",i),b(i)},{immediate:!0}),(i,s)=>(e.openBlock(),e.createBlock(e.unref(N.DropdownMenu),{open:m.value,"onUpdate:open":s[3]||(s[3]=u=>m.value=u),text:"Theme","aria-label":"Select theme mode"},{default:e.withCtx(()=>[e.createVNode(e.unref(N.DropdownItemGroup),{title:"Theme"},{default:e.withCtx(()=>[e.createVNode(e.unref(N.DropdownItemRadio),{checked:a.value,"onUpdate:checked":s[0]||(s[0]=u=>a.value=u),value:"auto",label:e.unref(r).auto,"aria-label":`${e.unref(r).auto} mode`},null,8,["checked","label","aria-label"]),s[4]||(s[4]=e.createElementVNode("hr",{class:"theme-switcher-divider",role:"separator"},null,-1)),e.createVNode(e.unref(N.DropdownItemRadio),{checked:a.value,"onUpdate:checked":s[1]||(s[1]=u=>a.value=u),value:"light",label:e.unref(r).light,"aria-label":`${e.unref(r).light} mode`},null,8,["checked","label","aria-label"]),e.createVNode(e.unref(N.DropdownItemRadio),{checked:a.value,"onUpdate:checked":s[2]||(s[2]=u=>a.value=u),value:"dark",label:e.unref(r).dark,"aria-label":`${e.unref(r).dark} mode`},null,8,["checked","label","aria-label"])]),_:1})]),_:1},8,["open"]))}},L=$(C,[["__scopeId","data-v-9b82a61c"]]),V="hsl(225, 90%, 16%)",Y="#061f80",w="hsl(225, 94%, 35%)",x="#06c",G="hsl(210, 100%, 50%)",P="hsl(210, 100%, 93%)",j="hsl(225, 100%, 96%)",q="hsl(12, 91%, 46%)",Q="hsl(11, 100%, 59%)",K="hsl(40, 100%, 50%)",F="hsl(46, 100%, 50%)",H="hsl(120, 100%, 25%)",W="#36b37e",z="hsl(0, 0%, 0%)",J="hsl(218, 76%, 15%)",X="hsla(0,0%,10%,.9)",Z="hsla(0,0%,10%,.6)",ee="hsl(218, 20%, 39%)",te="hsl(218, 17%, 44%)",ne="hsl(218, 14%, 49%)",oe="hsl(218, 14%, 54%)",re="hsl(218, 13%, 59%)",ce="hsl(218, 13%, 64%)",se="hsl(217, 13%, 69%)",ae="hsl(223, 12%, 89%)",ie="hsl(228, 14%, 93%)",le="hsl(210, 7%, 95%)",ue="hsl(220, 16%, 96%)",de="hsl(210, 25%, 98%)",fe="hsl(0, 0%, 98%)",_="hsl(0, 0%, 100%)",me=w,he=w,pe=_;exports.B100=j;exports.B200=P;exports.B300=G;exports.B400=x;exports.B500=w;exports.B600=Y;exports.B900=V;exports.G300=W;exports.G500=H;exports.N0=_;exports.N10=de;exports.N100=oe;exports.N1000=z;exports.N20=ue;exports.N200=ne;exports.N25=le;exports.N30=ie;exports.N300=te;exports.N40=ae;exports.N400=ee;exports.N5=fe;exports.N500=Z;exports.N70=se;exports.N80=ce;exports.N800=X;exports.N90=re;exports.N900=J;exports.R300=Q;exports.R400=q;exports.Theme=U;exports.ThemeSwitcher=L;exports.Y200=F;exports.Y300=K;exports.primary1=me;exports.primary2=he;exports.primary3=pe;
|
|
2
2
|
//# sourceMappingURL=theme.cjs.js.map
|
package/dist/theme.cjs.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"theme.cjs.js","sources":["../src/Theme.vue","../src/ThemeSwitcher.vue","../src/colors.js"],"sourcesContent":["<template>\n <div class=\"theme\">\n <slot />\n </div>\n</template>\n\n<script setup>\nimport { provide, ref, watch, onBeforeUnmount } from \"vue\";\nimport \"what-input\";\n\ndefineOptions({\n name: \"Theme\",\n});\nconst props = defineProps({\n mode: {\n type: String,\n default: \"auto\",\n validator: (value) => [\"auto\", \"light\", \"dark\"].includes(value),\n },\n});\n\nconst DARK_MODE_QUERY = \"(prefers-color-scheme: dark)\";\nconst PREFERS_REDUCED_MOTION_QUERY = \"(prefers-reduced-motion: reduce)\";\nconst THEME_TRANSITION_DURATION = 200;\nconst darkModeMedia = window.matchMedia(DARK_MODE_QUERY);\nconst prefersReducedMotionMedia = window.matchMedia(\n PREFERS_REDUCED_MOTION_QUERY,\n);\n\nconst theme = ref({\n darkMode: resolveDarkMode(props.mode),\n});\n\ndarkModeMedia.addEventListener(\"change\", handleSystemPreferenceChange);\n\n// Set the color-scheme meta tag.\nvar colorSchemeMeta = document.createElement(\"meta\");\ncolorSchemeMeta.name = \"color-scheme\";\ncolorSchemeMeta.setAttribute(\"content\", \"light dark\");\ndocument.getElementsByTagName(\"head\")[0].appendChild(colorSchemeMeta);\n\nwatch(\n () => props.mode,\n () => {\n syncDarkMode();\n },\n { immediate: true },\n);\n\nwatch(\n () => theme.value.darkMode,\n (darkMode, previousValue) => {\n if (previousValue === undefined) {\n setDocumentDarkModeAttribute(darkMode);\n return;\n }\n withThemeTransition(() => {\n setDocumentDarkModeAttribute(darkMode);\n });\n },\n { immediate: true },\n);\n\nonBeforeUnmount(() => {\n darkModeMedia.removeEventListener(\"change\", handleSystemPreferenceChange);\n});\n\nfunction syncDarkMode() {\n theme.value.darkMode = resolveDarkMode(props.mode);\n}\n\nfunction resolveDarkMode(mode) {\n if (mode === \"dark\") {\n return true;\n }\n if (mode === \"light\") {\n return false;\n }\n return darkModeMedia.matches;\n}\n\nfunction handleSystemPreferenceChange(event) {\n if (!event || props.mode !== \"auto\") {\n return;\n }\n theme.value.darkMode = event.matches;\n}\n\nfunction setDocumentDarkModeAttribute(darkMode) {\n document.documentElement.setAttribute(\"dark-mode\", darkMode);\n}\n\nfunction withThemeTransition(applyTheme) {\n if (prefersReducedMotionMedia.matches) {\n applyTheme();\n return;\n }\n const startViewTransition = document.startViewTransition?.bind(document);\n if (startViewTransition) {\n startViewTransition(() => {\n applyTheme();\n });\n return;\n }\n applyTheme();\n const element = document.documentElement;\n if (typeof element.animate !== \"function\") {\n return;\n }\n window.requestAnimationFrame(() => {\n element.animate(\n [\n { opacity: 0.85 },\n { opacity: 1 },\n ],\n {\n duration: THEME_TRANSITION_DURATION,\n easing: \"ease-in-out\",\n },\n );\n });\n}\n\nprovide(\"theme\", theme);\n</script>\n\n<style lang=\"less\">\n@import \"index.less\";\n</style>\n","<template>\n <DropdownMenu\n v-model:open=\"open\"\n text=\"Theme\"\n aria-label=\"Select theme mode\"\n >\n <DropdownItemGroup title=\"Theme\">\n <DropdownItemRadio\n v-model:checked=\"internalMode\"\n value=\"auto\"\n :label=\"MODE_LABELS.auto\"\n :aria-label=\"`${MODE_LABELS.auto} mode`\"\n />\n <hr class=\"theme-switcher-divider\" role=\"separator\" />\n <DropdownItemRadio\n v-model:checked=\"internalMode\"\n value=\"light\"\n :label=\"MODE_LABELS.light\"\n :aria-label=\"`${MODE_LABELS.light} mode`\"\n />\n <DropdownItemRadio\n v-model:checked=\"internalMode\"\n value=\"dark\"\n :label=\"MODE_LABELS.dark\"\n :aria-label=\"`${MODE_LABELS.dark} mode`\"\n />\n </DropdownItemGroup>\n </DropdownMenu>\n</template>\n\n<script setup>\nimport { ref, computed, watch } from \"vue\";\nimport {\n DropdownMenu,\n DropdownItemGroup,\n DropdownItemRadio,\n} from \"@gospore/dropdown-menu\";\n\nconst MODE_OPTIONS = [\n { value: \"auto\", label: \"System\" },\n { value: \"light\", label: \"Light\" },\n { value: \"dark\", label: \"Dark\" },\n];\nconst MODE_LABELS = MODE_OPTIONS.reduce((map, option) => {\n map[option.value] = option.label;\n return map;\n}, {});\nconst VALID_MODES = MODE_OPTIONS.map((option) => option.value);\nconst STORAGE_KEY = \"gospore-theme-mode\";\n\nconst props = defineProps({\n mode: {\n type: String,\n default: \"auto\",\n validator: (value) => [\"auto\", \"light\", \"dark\"].includes(value),\n },\n});\nconst emit = defineEmits([\"update:mode\"]);\n\nconst open = ref(false);\nconst initialMode = readStoredMode() ?? props.mode;\nconst internalMode = ref(\n VALID_MODES.includes(initialMode) ? initialMode : \"auto\",\n);\nconst label = computed(\n () => MODE_LABELS[internalMode.value] ?? MODE_LABELS.auto,\n);\n\nwatch(\n () => props.mode,\n (mode) => {\n if (VALID_MODES.includes(mode) && mode !== internalMode.value) {\n internalMode.value = mode;\n }\n },\n);\n\nwatch(\n internalMode,\n (mode) => {\n if (!VALID_MODES.includes(mode)) {\n internalMode.value = \"auto\";\n return;\n }\n open.value = false;\n emit(\"update:mode\", mode);\n writeStoredMode(mode);\n },\n { immediate: true },\n);\n\nfunction readStoredMode() {\n if (typeof window === \"undefined\") {\n return null;\n }\n const stored = window.localStorage.getItem(STORAGE_KEY);\n return stored && VALID_MODES.includes(stored) ? stored : null;\n}\n\nfunction writeStoredMode(mode) {\n if (typeof window === \"undefined\") {\n return;\n }\n window.localStorage.setItem(STORAGE_KEY, mode);\n}\n</script>\n\n<style scoped lang=\"less\">\n.theme-switcher-divider {\n margin: 4px 0;\n background-color: var(--go-color-n20);\n}\n\n[dark-mode=\"true\"] {\n .theme-switcher-divider {\n background-color: var(--background-color-secondary-dark);\n }\n}\n</style>\n","// Blues\nexport const B900 = \"hsl(225, 90%, 16%)\";\n// @go-color-b700 = #000e7f;\nexport const B600 = \"#061f80\";\nexport const B500 = \"hsl(225, 94%, 35%)\";\n// @go-color-b550 = #131ff2;\n// @go-color-b500 = #001dff;\n// @go-color-b400 = #3333ff;\nexport const B400 = \"#06c\";\nexport const B300 = \"hsl(210, 100%, 50%)\";\nexport const B200 = \"hsl(210, 100%, 93%)\";\nexport const B100 = \"hsl(225, 100%, 96%)\";\n\n// Reds\nexport const R400 = \"hsl(12, 91%, 46%)\";\nexport const R300 = \"hsl(11, 100%, 59%)\";\n\n// Yellows\nexport const Y300 = \"hsl(40, 100%, 50%)\";\nexport const Y200 = \"hsl(46, 100%, 50%)\";\n\n// Greens\nexport const G500 = \"hsl(120, 100%, 25%)\";\nexport const G300 = \"#36b37e\";\n\n// Neutrals\nexport const N1000 = \"hsl(0, 0%, 0%)\";\nexport const N900 = \"hsl(218, 76%, 15%)\";\n// @go-color-n900 = hsl(218, 54%, 20%);\nexport const N800 = \"hsla(0,0%,10%,.9)\";\nexport const N500 = \"hsla(0,0%,10%,.6)\";\nexport const N400 = \"hsl(218, 20%, 39%)\";\nexport const N300 = \"hsl(218, 17%, 44%)\";\nexport const N200 = \"hsl(218, 14%, 49%)\";\nexport const N100 = \"hsl(218, 14%, 54%)\";\nexport const N90 = \"hsl(218, 13%, 59%)\";\nexport const N80 = \"hsl(218, 13%, 64%)\";\nexport const N70 = \"hsl(217, 13%, 69%)\";\nexport const N40 = \"hsl(223, 12%, 89%)\";\nexport const N30 = \"hsl(228, 14%, 93%)\";\nexport const N25 = \"hsl(210, 7%, 95%)\";\nexport const N20 = \"hsl(220, 16%, 96%)\";\nexport const N10 = \"hsl(210, 25%, 98%)\";\nexport const N5 = \"hsl(0, 0%, 98%)\";\nexport const N0 = \"hsl(0, 0%, 100%)\";\n\n// Primary color palette\nexport const primary1 = B500;\nexport const primary2 = B500;\nexport const primary3 = N0;\n"],"names":["props","__props","darkModeMedia","DARK_MODE_QUERY","prefersReducedMotionMedia","PREFERS_REDUCED_MOTION_QUERY","theme","ref","resolveDarkMode","handleSystemPreferenceChange","colorSchemeMeta","watch","syncDarkMode","darkMode","previousValue","setDocumentDarkModeAttribute","withThemeTransition","onBeforeUnmount","mode","event","applyTheme","startViewTransition","element","THEME_TRANSITION_DURATION","provide","_openBlock","_createElementBlock","_hoisted_1","_renderSlot","_ctx","MODE_OPTIONS","MODE_LABELS","map","option","VALID_MODES","emit","__emit","open","initialMode","readStoredMode","internalMode","computed","writeStoredMode","stored","STORAGE_KEY","_createBlock","_unref","DropdownMenu","$event","_createVNode","DropdownItemGroup","DropdownItemRadio","_createElementVNode","B900","B600","B500","B400","B300","B200","B100","R400","R300","Y300","Y200","G500","G300","N1000","N900","N800","N500","N400","N300","N200","N100","N90","N80","N70","N40","N30","N25","N20","N10","N5","N0","primary1","primary2","primary3"],"mappings":"wZAaA,MAAMA,EAAQC,EAWRC,EAAgB,OAAO,WAAWC,CAAe,EACjDC,EAA4B,OAAO,WACrCC,CACJ,EAEMC,EAAQC,EAAAA,IAAI,CACd,SAAUC,EAAgBR,EAAM,IAAI,CACxC,CAAC,EAEDE,EAAc,iBAAiB,SAAUO,CAA4B,EAGrE,IAAIC,EAAkB,SAAS,cAAc,MAAM,EACnDA,EAAgB,KAAO,eACvBA,EAAgB,aAAa,UAAW,YAAY,EACpD,SAAS,qBAAqB,MAAM,EAAE,CAAC,EAAE,YAAYA,CAAe,EAEpEC,EAAAA,MACI,IAAMX,EAAM,KACZ,IAAM,CACFY,EAAY,CAChB,EACA,CAAE,UAAW,EAAI,CACrB,EAEAD,EAAAA,MACI,IAAML,EAAM,MAAM,SAClB,CAACO,EAAUC,IAAkB,CACzB,GAAIA,IAAkB,OAAW,CAC7BC,EAA6BF,CAAQ,EACrC,MACJ,CACAG,EAAoB,IAAM,CACtBD,EAA6BF,CAAQ,CACzC,CAAC,CACL,EACA,CAAE,UAAW,EAAI,CACrB,EAEAI,EAAAA,gBAAgB,IAAM,CAClBf,EAAc,oBAAoB,SAAUO,CAA4B,CAC5E,CAAC,EAED,SAASG,GAAe,CACpBN,EAAM,MAAM,SAAWE,EAAgBR,EAAM,IAAI,CACrD,CAEA,SAASQ,EAAgBU,EAAM,CAC3B,OAAIA,IAAS,OACF,GAEPA,IAAS,QACF,GAEJhB,EAAc,OACzB,CAEA,SAASO,EAA6BU,EAAO,CACrC,CAACA,GAASnB,EAAM,OAAS,SAG7BM,EAAM,MAAM,SAAWa,EAAM,QACjC,CAEA,SAASJ,EAA6BF,EAAU,CAC5C,SAAS,gBAAgB,aAAa,YAAaA,CAAQ,CAC/D,CAEA,SAASG,EAAoBI,EAAY,CACrC,GAAIhB,EAA0B,QAAS,CACnCgB,EAAU,EACV,MACJ,CACA,MAAMC,EAAsB,SAAS,qBAAqB,KAAK,QAAQ,EACvE,GAAIA,EAAqB,CACrBA,EAAoB,IAAM,CACtBD,EAAU,CACd,CAAC,EACD,MACJ,CACAA,EAAU,EACV,MAAME,EAAU,SAAS,gBACrB,OAAOA,EAAQ,SAAY,YAG/B,OAAO,sBAAsB,IAAM,CAC/BA,EAAQ,QACJ,CACI,CAAE,QAAS,GAAI,EACf,CAAE,QAAS,CAAC,CAC5B,EACY,CACI,SAAUC,EACV,OAAQ,aACxB,CACA,CACI,CAAC,CACL,CAEAC,OAAAA,EAAAA,QAAQ,QAASlB,CAAK,UA1HlBmB,YAAA,EAAAC,qBAEK,MAFLC,EAEK,CADDC,aAAOC,EAAA,OAAA,SAAA,iQCoCf,MAAMC,EAAe,CACjB,CAAE,MAAO,OAAQ,MAAO,QAAQ,EAChC,CAAE,MAAO,QAAS,MAAO,OAAO,EAChC,CAAE,MAAO,OAAQ,MAAO,MAAM,CAClC,EACMC,EAAcD,EAAa,OAAO,CAACE,EAAKC,KAC1CD,EAAIC,EAAO,KAAK,EAAIA,EAAO,MACpBD,GACR,EAAE,EACCE,EAAcJ,EAAa,IAAKG,GAAWA,EAAO,KAAK,EAGvDjC,EAAQC,EAORkC,EAAOC,EAEPC,EAAO9B,EAAAA,IAAI,EAAK,EAChB+B,EAAcC,KAAoBvC,EAAM,KACxCwC,EAAejC,EAAAA,IACjB2B,EAAY,SAASI,CAAW,EAAIA,EAAc,MACtD,EACcG,EAAAA,SACV,IAAMV,EAAYS,EAAa,KAAK,GAAKT,EAAY,IACzD,EAEApB,EAAAA,MACI,IAAMX,EAAM,KACXkB,GAAS,CACFgB,EAAY,SAAShB,CAAI,GAAKA,IAASsB,EAAa,QACpDA,EAAa,MAAQtB,EAE7B,CACJ,EAEAP,EAAAA,MACI6B,EACCtB,GAAS,CACN,GAAI,CAACgB,EAAY,SAAShB,CAAI,EAAG,CAC7BsB,EAAa,MAAQ,OACrB,MACJ,CACAH,EAAK,MAAQ,GACbF,EAAK,cAAejB,CAAI,EACxBwB,EAAgBxB,CAAI,CACxB,EACA,CAAE,UAAW,EAAI,CACrB,EAEA,SAASqB,GAAiB,CACtB,GAAI,OAAO,OAAW,IAClB,OAAO,KAEX,MAAMI,EAAS,OAAO,aAAa,QAAQC,CAAW,EACtD,OAAOD,GAAUT,EAAY,SAASS,CAAM,EAAIA,EAAS,IAC7D,CAEA,SAASD,EAAgBxB,EAAM,CACvB,OAAO,OAAW,KAGtB,OAAO,aAAa,QAAQ0B,EAAa1B,CAAI,CACjD,6BAvGI2B,EAAAA,YA0BcC,EAAAA,MAAAC,EAAAA,YAAA,EAAA,CAzBF,KAAMV,EAAA,qCAAAA,EAAI,MAAAW,GAClB,KAAK,QACL,aAAW,wCAEX,IAoBmB,CApBnBC,EAAAA,YAoBmBH,EAAAA,MAAAI,EAAAA,iBAAA,EAAA,CApBA,MAAM,OAAO,EAAA,mBAC5B,IAKC,CALDD,cAKCH,EAAAA,MAAAK,EAAAA,iBAAA,EAAA,CAJW,QAASX,EAAA,wCAAAA,EAAY,MAAAQ,GAC7B,MAAM,OACL,MAAOF,EAAAA,MAAAf,CAAA,EAAY,KACnB,aAAU,GAAKe,EAAAA,MAAAf,CAAA,EAAY,IAAI,8DAEpCqB,EAAAA,mBAAqD,KAAA,CAAjD,MAAM,yBAAyB,KAAK,uBACxCH,cAKCH,EAAAA,MAAAK,EAAAA,iBAAA,EAAA,CAJW,QAASX,EAAA,wCAAAA,EAAY,MAAAQ,GAC7B,MAAM,QACL,MAAOF,EAAAA,MAAAf,CAAA,EAAY,MACnB,aAAU,GAAKe,EAAAA,MAAAf,CAAA,EAAY,KAAK,kDAErCkB,cAKCH,EAAAA,MAAAK,EAAAA,iBAAA,EAAA,CAJW,QAASX,EAAA,wCAAAA,EAAY,MAAAQ,GAC7B,MAAM,OACL,MAAOF,EAAAA,MAAAf,CAAA,EAAY,KACnB,aAAU,GAAKe,EAAAA,MAAAf,CAAA,EAAY,IAAI,yHCvBnCsB,EAAO,qBAEPC,EAAO,UACPC,EAAO,qBAIPC,EAAO,OACPC,EAAO,sBACPC,EAAO,sBACPC,EAAO,sBAGPC,EAAO,oBACPC,EAAO,qBAGPC,EAAO,qBACPC,EAAO,qBAGPC,EAAO,sBACPC,EAAO,UAGPC,EAAQ,iBACRC,EAAO,qBAEPC,EAAO,oBACPC,EAAO,oBACPC,EAAO,qBACPC,EAAO,qBACPC,EAAO,qBACPC,EAAO,qBACPC,EAAM,qBACNC,EAAM,qBACNC,EAAM,qBACNC,EAAM,qBACNC,EAAM,qBACNC,EAAM,oBACNC,GAAM,qBACNC,GAAM,qBACNC,GAAK,kBACLC,EAAK,mBAGLC,GAAW7B,EACX8B,GAAW9B,EACX+B,GAAWH"}
|
|
1
|
+
{"version":3,"file":"theme.cjs.js","sources":["../src/modeStorage.js","../src/Theme.vue","../src/ThemeSwitcher.vue","../src/colors.js"],"sourcesContent":["const VALID_THEME_MODES = [\"auto\", \"light\", \"dark\"];\nconst STORAGE_KEY = \"gospore-theme-mode\";\nconst ONE_YEAR_IN_SECONDS = 60 * 60 * 24 * 365;\nconst DARK_MODE_QUERY = \"(prefers-color-scheme: dark)\";\n\nexport function readStoredMode() {\n if (typeof document === \"undefined\") {\n return null;\n }\n const stored = getCookie(STORAGE_KEY);\n return stored && VALID_THEME_MODES.includes(stored) ? stored : null;\n}\n\nexport function writeStoredMode(mode) {\n if (typeof document === \"undefined\" || !VALID_THEME_MODES.includes(mode)) {\n return;\n }\n const hostname =\n typeof window !== \"undefined\" ? window.location.hostname : \"\";\n const protocol =\n typeof window !== \"undefined\" ? window.location.protocol : \"\";\n const domain = getCookieDomain(hostname);\n const secure = protocol === \"https:\";\n const attributes = [\n \"path=/\",\n `max-age=${ONE_YEAR_IN_SECONDS}`,\n \"SameSite=Lax\",\n ];\n if (domain) {\n attributes.push(`domain=${domain}`);\n }\n if (secure) {\n attributes.push(\"Secure\");\n }\n document.cookie = [\n `${encodeURIComponent(STORAGE_KEY)}=${encodeURIComponent(mode)}`,\n ...attributes,\n ].join(\"; \");\n}\n\nexport function applyStoredModeToDocument(mode) {\n if (typeof document === \"undefined\") {\n return;\n }\n const resolvedMode =\n typeof mode === \"string\" && VALID_THEME_MODES.includes(mode)\n ? mode\n : readStoredMode() ?? \"auto\";\n console.log(\"Applying theme mode:\", resolvedMode);\n const darkMode = resolveDarkMode(resolvedMode);\n document.documentElement.setAttribute(\"dark-mode\", darkMode);\n}\n\nexport { VALID_THEME_MODES, STORAGE_KEY };\n\nfunction getCookie(name) {\n if (typeof document === \"undefined\" || !document.cookie) {\n return null;\n }\n const encodedName = `${encodeURIComponent(name)}=`;\n const cookies = document.cookie.split(\"; \");\n for (const cookie of cookies) {\n if (cookie.startsWith(encodedName)) {\n return decodeURIComponent(cookie.slice(encodedName.length));\n }\n }\n return null;\n}\n\nfunction getCookieDomain(hostname) {\n if (!hostname || hostname === \"localhost\") {\n return null;\n }\n const isIpAddress = /^\\d+(?:\\.\\d+){3}$/.test(hostname);\n if (isIpAddress) {\n return hostname;\n }\n const parts = hostname.split(\".\");\n if (parts.length <= 1) {\n return null;\n }\n if (parts.length === 2) {\n return hostname;\n }\n return parts.slice(-2).join(\".\");\n}\n\nfunction resolveDarkMode(mode) {\n if (mode === \"dark\") {\n return true;\n }\n if (mode === \"light\") {\n return false;\n }\n if (typeof window === \"undefined\") {\n return false;\n }\n try {\n const mediaQueryList =\n typeof window.matchMedia === \"function\"\n ? window.matchMedia(DARK_MODE_QUERY)\n : null;\n return mediaQueryList ? mediaQueryList.matches : false;\n } catch (error) {\n return false;\n }\n}\n","<template>\n <div class=\"theme\">\n <slot />\n </div>\n</template>\n\n<script setup>\nimport { provide, ref, watch, onBeforeUnmount } from \"vue\";\nimport { applyStoredModeToDocument, readStoredMode } from \"./modeStorage\";\nimport \"what-input\";\n\ndefineOptions({\n name: \"Theme\",\n});\nconst props = defineProps({\n mode: {\n type: String,\n validator: (value) => [\"auto\", \"light\", \"dark\"].includes(value),\n },\n});\n\nconst DARK_MODE_QUERY = \"(prefers-color-scheme: dark)\";\nconst PREFERS_REDUCED_MOTION_QUERY = \"(prefers-reduced-motion: reduce)\";\nconst THEME_TRANSITION_DURATION = 200;\nconst darkModeMedia = window.matchMedia(DARK_MODE_QUERY);\nconst prefersReducedMotionMedia = window.matchMedia(\n PREFERS_REDUCED_MOTION_QUERY,\n);\n\nconst initialMode = getEffectiveMode();\napplyStoredModeToDocument(initialMode);\n\nconst currentMode = ref(initialMode);\n\nconst theme = ref({\n darkMode: resolveDarkMode(initialMode),\n});\n\ndarkModeMedia.addEventListener(\"change\", handleSystemPreferenceChange);\n\nwatch(\n () => props.mode,\n () => {\n syncDarkMode();\n },\n { immediate: true },\n);\n\nwatch(\n () => theme.value.darkMode,\n (darkMode, previousValue) => {\n if (previousValue === undefined) {\n setDocumentDarkModeAttribute(darkMode);\n return;\n }\n withThemeTransition(() => {\n setDocumentDarkModeAttribute(darkMode);\n });\n },\n { immediate: true },\n);\n\nonBeforeUnmount(() => {\n darkModeMedia.removeEventListener(\"change\", handleSystemPreferenceChange);\n});\n\nfunction syncDarkMode() {\n const mode = getEffectiveMode();\n currentMode.value = mode;\n theme.value.darkMode = resolveDarkMode(mode);\n}\n\nfunction resolveDarkMode(mode) {\n if (mode === \"dark\") {\n return true;\n }\n if (mode === \"light\") {\n return false;\n }\n return darkModeMedia.matches;\n}\n\nfunction handleSystemPreferenceChange(event) {\n if (!event || currentMode.value !== \"auto\") {\n return;\n }\n theme.value.darkMode = event.matches;\n}\n\nfunction setDocumentDarkModeAttribute(darkMode) {\n document.documentElement.setAttribute(\"dark-mode\", darkMode);\n}\n\nfunction withThemeTransition(applyTheme) {\n if (prefersReducedMotionMedia.matches) {\n applyTheme();\n return;\n }\n const startViewTransition = document.startViewTransition?.bind(document);\n if (startViewTransition) {\n startViewTransition(() => {\n applyTheme();\n });\n return;\n }\n applyTheme();\n const element = document.documentElement;\n if (typeof element.animate !== \"function\") {\n return;\n }\n window.requestAnimationFrame(() => {\n element.animate([{ opacity: 0.85 }, { opacity: 1 }], {\n duration: THEME_TRANSITION_DURATION,\n easing: \"ease-in-out\",\n });\n });\n}\n\nfunction getEffectiveMode() {\n return props.mode ?? readStoredMode() ?? \"auto\";\n}\n\nprovide(\"theme\", theme);\n</script>\n\n<style lang=\"less\">\n@import \"index.less\";\n</style>\n","<template>\n <DropdownMenu\n v-model:open=\"open\"\n text=\"Theme\"\n aria-label=\"Select theme mode\"\n >\n <DropdownItemGroup title=\"Theme\">\n <DropdownItemRadio\n v-model:checked=\"internalMode\"\n value=\"auto\"\n :label=\"MODE_LABELS.auto\"\n :aria-label=\"`${MODE_LABELS.auto} mode`\"\n />\n <hr class=\"theme-switcher-divider\" role=\"separator\" />\n <DropdownItemRadio\n v-model:checked=\"internalMode\"\n value=\"light\"\n :label=\"MODE_LABELS.light\"\n :aria-label=\"`${MODE_LABELS.light} mode`\"\n />\n <DropdownItemRadio\n v-model:checked=\"internalMode\"\n value=\"dark\"\n :label=\"MODE_LABELS.dark\"\n :aria-label=\"`${MODE_LABELS.dark} mode`\"\n />\n </DropdownItemGroup>\n </DropdownMenu>\n</template>\n\n<script setup>\nimport { ref, computed, watch } from \"vue\";\nimport {\n DropdownMenu,\n DropdownItemGroup,\n DropdownItemRadio,\n} from \"@gospore/dropdown-menu\";\nimport {\n readStoredMode,\n writeStoredMode,\n VALID_THEME_MODES,\n applyStoredModeToDocument,\n} from \"./modeStorage\";\n\nconst MODE_OPTIONS = [\n { value: \"auto\", label: \"System\" },\n { value: \"light\", label: \"Light\" },\n { value: \"dark\", label: \"Dark\" },\n];\nconst MODE_LABELS = MODE_OPTIONS.reduce((map, option) => {\n map[option.value] = option.label;\n return map;\n}, {});\nconst VALID_MODES = VALID_THEME_MODES;\n\nconst props = defineProps({\n mode: {\n type: String,\n default: \"auto\",\n validator: (value) => [\"auto\", \"light\", \"dark\"].includes(value),\n },\n});\nconst emit = defineEmits([\"update:mode\"]);\n\napplyStoredModeToDocument();\n\nconst open = ref(false);\nconst initialMode = readStoredMode() ?? props.mode;\nconst internalMode = ref(\n VALID_MODES.includes(initialMode) ? initialMode : \"auto\",\n);\nconst label = computed(\n () => MODE_LABELS[internalMode.value] ?? MODE_LABELS.auto,\n);\n\nwatch(\n () => props.mode,\n (mode) => {\n if (VALID_MODES.includes(mode) && mode !== internalMode.value) {\n internalMode.value = mode;\n }\n },\n);\n\nwatch(\n internalMode,\n (mode) => {\n if (!VALID_MODES.includes(mode)) {\n internalMode.value = \"auto\";\n return;\n }\n open.value = false;\n emit(\"update:mode\", mode);\n writeStoredMode(mode);\n },\n { immediate: true },\n);\n\n</script>\n\n<style scoped lang=\"less\">\n.theme-switcher-divider {\n margin: 4px 0;\n background-color: var(--go-color-n20);\n}\n\n[dark-mode=\"true\"] {\n .theme-switcher-divider {\n background-color: var(--background-color-secondary-dark);\n }\n}\n</style>\n","// Blues\nexport const B900 = \"hsl(225, 90%, 16%)\";\n// @go-color-b700 = #000e7f;\nexport const B600 = \"#061f80\";\nexport const B500 = \"hsl(225, 94%, 35%)\";\n// @go-color-b550 = #131ff2;\n// @go-color-b500 = #001dff;\n// @go-color-b400 = #3333ff;\nexport const B400 = \"#06c\";\nexport const B300 = \"hsl(210, 100%, 50%)\";\nexport const B200 = \"hsl(210, 100%, 93%)\";\nexport const B100 = \"hsl(225, 100%, 96%)\";\n\n// Reds\nexport const R400 = \"hsl(12, 91%, 46%)\";\nexport const R300 = \"hsl(11, 100%, 59%)\";\n\n// Yellows\nexport const Y300 = \"hsl(40, 100%, 50%)\";\nexport const Y200 = \"hsl(46, 100%, 50%)\";\n\n// Greens\nexport const G500 = \"hsl(120, 100%, 25%)\";\nexport const G300 = \"#36b37e\";\n\n// Neutrals\nexport const N1000 = \"hsl(0, 0%, 0%)\";\nexport const N900 = \"hsl(218, 76%, 15%)\";\n// @go-color-n900 = hsl(218, 54%, 20%);\nexport const N800 = \"hsla(0,0%,10%,.9)\";\nexport const N500 = \"hsla(0,0%,10%,.6)\";\nexport const N400 = \"hsl(218, 20%, 39%)\";\nexport const N300 = \"hsl(218, 17%, 44%)\";\nexport const N200 = \"hsl(218, 14%, 49%)\";\nexport const N100 = \"hsl(218, 14%, 54%)\";\nexport const N90 = \"hsl(218, 13%, 59%)\";\nexport const N80 = \"hsl(218, 13%, 64%)\";\nexport const N70 = \"hsl(217, 13%, 69%)\";\nexport const N40 = \"hsl(223, 12%, 89%)\";\nexport const N30 = \"hsl(228, 14%, 93%)\";\nexport const N25 = \"hsl(210, 7%, 95%)\";\nexport const N20 = \"hsl(220, 16%, 96%)\";\nexport const N10 = \"hsl(210, 25%, 98%)\";\nexport const N5 = \"hsl(0, 0%, 98%)\";\nexport const N0 = \"hsl(0, 0%, 100%)\";\n\n// Primary color palette\nexport const primary1 = B500;\nexport const primary2 = B500;\nexport const primary3 = N0;\n"],"names":["VALID_THEME_MODES","STORAGE_KEY","ONE_YEAR_IN_SECONDS","DARK_MODE_QUERY","readStoredMode","stored","getCookie","writeStoredMode","mode","hostname","protocol","domain","getCookieDomain","secure","attributes","applyStoredModeToDocument","resolvedMode","darkMode","resolveDarkMode","name","encodedName","cookies","cookie","parts","mediaQueryList","props","__props","darkModeMedia","prefersReducedMotionMedia","PREFERS_REDUCED_MOTION_QUERY","initialMode","getEffectiveMode","currentMode","ref","theme","handleSystemPreferenceChange","watch","syncDarkMode","previousValue","setDocumentDarkModeAttribute","withThemeTransition","onBeforeUnmount","event","applyTheme","startViewTransition","element","THEME_TRANSITION_DURATION","provide","_openBlock","_createElementBlock","_hoisted_1","_renderSlot","_ctx","MODE_LABELS","map","option","VALID_MODES","emit","__emit","open","internalMode","computed","_createBlock","_unref","DropdownMenu","$event","_createVNode","DropdownItemGroup","DropdownItemRadio","_createElementVNode","B900","B600","B500","B400","B300","B200","B100","R400","R300","Y300","Y200","G500","G300","N1000","N900","N800","N500","N400","N300","N200","N100","N90","N80","N70","N40","N30","N25","N20","N10","N5","N0","primary1","primary2","primary3"],"mappings":"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"}
|
package/dist/theme.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--border-radius-regular: 3px;--border-radius-large: 6px;--border-width: var(--border-width-2);--border-width-1: 1px;--border-width-2: 2px;--border-width-3: 3px}:root{--go-color-primary1: var(--go-color-b600);--go-color-primary2: var(--go-color-b500);--go-color-primary3: var(--go-color-n0);--go-color-n0: #ffffff;--go-color-n0-rgb: 255, 255, 255;--go-color-n10: #fafbfc;--go-color-n10-rgb: 250, 251, 252;--go-color-n20: #f4f5f7;--go-color-n30: #ebecf0;--go-color-n40: #dfe1e6;--go-color-n40-rgb: 223, 225, 230;--go-color-n50: #c1c7d0;--go-color-n60: #b3bac5;--go-color-n70: #a5adba;--go-color-n80: #97a0af;--go-color-n90: #8993a4;--go-color-n100: #7a869a;--go-color-n100-rgb: 122, 134, 154;--go-color-n200: #6b778c;--go-color-n300: #5e6c84;--go-color-n400: #505f79;--go-color-n500: #42526e;--go-color-n600: #344563;--go-color-n700: #253858;--go-color-n700-rgb: 37, 56, 88;--go-color-n800: #172b4d;--go-color-n900: #091e42;--go-color-n900-rgb: 9, 30, 66;--go-color-n1000: #000000;--go-color-n1000-rgb: 0, 0, 0;--go-color-dn0: #0d1424;--go-color-dn0-rgb: 13, 20, 36;--go-color-dn10: #0e1624;--go-color-dn20: #121a29;--go-color-dn30: #1b2638;--go-color-dn40: #202b3d;--go-color-dn50: #283447;--go-color-dn60: #313d52;--go-color-dn70: #3b475c;--go-color-dn70-rgb: 61, 72, 92;--go-color-dn80: #455166;--go-color-dn90: #56637a;--go-color-dn100: #67758f;--go-color-dn200: #7988a3;--go-color-dn200-rgb: 121, 136, 163;--go-color-dn300: #8c9cb8;--go-color-dn300-rgb: 140, 156, 184;--go-color-dn400: #9fb0cc;--go-color-dn400-rgb: 159, 176, 204;--go-color-dn500: #abbbd6;--go-color-dn500-rgb: 171, 187, 214;--go-color-dn600: #b8c7e0;--go-color-dn600-rgb: 184, 199, 224;--go-color-dn700: #ced9eb;--go-color-dn800: #dce5f5;--go-color-dn900: #e6edfa;--go-color-dn900-rgb: 230, 237, 250;--go-color-r50: #ffebe6;--go-color-r75: #ffbdad;--go-color-r100: #ff8f73;--go-color-r200: #ff7452;--go-color-r300: #ff5630;--go-color-r300-rgb: 255, 86, 48;--go-color-r400: #de350b;--go-color-r500: #bf2600;--go-color-y50: #fffae6;--go-color-y75: #fff0b3;--go-color-y100: #ffe380;--go-color-y200: #ffc400;--go-color-y300: #ffab00;--go-color-y300-rgb: 255, 171, 0;--go-color-y400: #ff991f;--go-color-y500: #ff8b00;--go-color-g50: #e3fcef;--go-color-g75: #abf5d1;--go-color-g100: #79f2c0;--go-color-g200: #57d9a3;--go-color-g300: #36b37e;--go-color-g300-rgb: 54, 179, 126;--go-color-g400: #00875a;--go-color-g500: #006644;--go-color-b50: #deebff;--go-color-b75: #b3d4ff;--go-color-b75-rgb: 179, 212, 255;--go-color-b100: #4c9aff;--go-color-b100-rgb: 76, 154, 255;--go-color-b200: #2684ff;--go-color-b200-rgb: 38, 132, 255;--go-color-b300: #0065ff;--go-color-b400: #0052cc;--go-color-b400-rgb: 0, 82, 204;--go-color-b500: #0747a6;--go-color-b600: #061f80;--go-color-p50: #eae6ff;--go-color-p75: #c0b6f2;--go-color-p100: #998dd9;--go-color-p100-rgb: 153, 141, 217;--go-color-p200: #8777d9;--go-color-p300: #6554c0;--go-color-p300-rgb: 101, 84, 192;--go-color-p400: #5243aa;--go-color-p500: #403294;--go-color-t50: #e6fcff;--go-color-t75: #b3f5ff;--go-color-t100: #79e2f2;--go-color-t200: #00c7e6;--go-color-t200-rgb: 0, 199, 230;--go-color-t300: #00b8d9;--go-color-t300-rgb: 0, 184, 217;--go-color-t400: #00a3bf;--go-color-t500: #008da6;--go-color-primary-light: var(--go-color-b400);--go-color-primary-dark: var(--go-color-b100);--go-color-blue-light: var(--go-color-b400);--go-color-blue-light-rgb: var(--go-color-b400-rgb);--go-color-blue-dark: var(--go-color-b100);--go-color-blue-dark-rgb: var(--go-color-b100-rgb);--go-color-teal-light: var(--go-color-t300);--go-color-teal-light-rgb: var(--go-color-t300-rgb);--go-color-teal-dark: var(--go-color-t200);--go-color-teal-dark-rgb: var(--go-color-t200-rgb);--go-color-purple-light: var(--go-color-p300);--go-color-purple-light-rgb: var(--go-color-p300-rgb);--go-color-purple-dark: var(--go-color-p100);--go-color-purple-dark-rgb: var(--go-color-p100-rgb);--go-color-red-light: var(--go-color-r300);--go-color-red-light-rgb: var(--go-color-r300-rgb);--go-color-red-dark: var(--go-color-r300);--go-color-red-dark-rgb: var(--go-color-r300-rgb);--go-color-yellow-light: var(--go-color-y300);--go-color-yellow-light-rgb: var(--go-color-y300-rgb);--go-color-yellow-dark: var(--go-color-y300);--go-color-yellow-dark-rgb: var(--go-color-y300-rgb);--go-color-green-light: var(--go-color-g300);--go-color-green-light-rgb: var(--go-color-g300-rgb);--go-color-green-dark: var(--go-color-g300);--go-color-green-dark-rgb: var(--go-color-g300-rgb);--background-color-light: var(--go-color-n0);--background-color-dark: var(--go-color-dn0);--background-color-secondary-light: var(--go-color-n20);--background-color-secondary-dark: var(--go-color-dn30);--text-color-light: var(--go-color-n1000);--text-color-dark: var(--go-color-n0);--placeholder-color-light: var(--go-color-n100);--placeholder-color-dark: var(--go-color-dn200);--heading-color-default-light: var(--go-color-n1000);--heading-color-default-dark: var(--go-color-n0);--heading-color-subtle-light: var(--go-color-n200);--heading-color-subtle-dark: var(--go-color-dn300);--link-color-default-light: var(--go-color-b400);--link-color-default-dark: var(--go-color-b100);--link-color-hover-light: var(--go-color-b300);--link-color-hover-dark: var(--go-color-b200);--link-color-active-light: var(--go-color-b500);--link-color-active-dark: var(--go-color-b100);--focus-outline-color: var(--go-color-b100);--table-border-color-light: var(--go-color-n40);--table-border-color-dark: var(--go-color-dn70);--table-hover-color-light: var(--go-color-n20);--table-hover-color-dark: var(--go-color-dn50);--horizontal-rule-color-light: var(--go-color-n40);--horizontal-rule-color-dark: var(--go-color-dn70);--code-color-light: var(--go-color-n40);--code-color-dark: var(--go-color-dn70);--code-block-color-light: var(--background-color-secondary-light);--code-block-color-dark: var(--background-color-secondary-dark);--blockquote-border-color-light: var(--go-color-n40);--blockquote-border-color-dark: var(--go-color-dn70)}:root{--elevation-raised-light: rgba(var(--go-color-n900-rgb), .25) 0px 1px 1px, rgba(var(--go-color-n900-rgb), .31) 0px 0px 1px;--elevation-raised-dark: rgba(var(--go-color-n1000-rgb), 0) 0px 0px 0px, rgba(var(--go-color-n1000-rgb), .5) 0px 1px 1px, rgba(var(--go-color-n1000-rgb), .5) 0px 0px 1px;--elevation-overlay-light: rgba(var(--go-color-n900-rgb), .15) 0px 8px 12px 0px, rgba(var(--go-color-n900-rgb), .31) 0px 0px 1px 0px;--elevation-overlay-dark: var(--go-color-dn70) 0px 0px 0px 1px, rgba(var(--go-color-dn0-rgb), .36) 0px 8px 12px 0px, rgba(var(--go-color-dn0-rgb), .5) 0px 0px 1px 1px;--elevation-avatar-light: inset 0 0 10px rgba(var(--go-color-n900-rgb), 5%);--elevation-avatar-dark: inset 0 0 10px rgba(var(--go-color-dn600-rgb), 5%)}:root{--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;--font-family-code: ui-monospace, SFMono-Medium, "SF Mono", "Segoe UI Mono", "Roboto Mono", "Ubuntu Mono", Menlo, monospace;--font-style-normal: normal;--font-style-italic: italic;--font-size-default: var(--font-size-14);--font-size-12: 12px;--font-size-13: 13px;--font-size-14: 14px;--font-size-15: 15px;--font-size-16: 16px;--font-size-18: 18px;--font-size-20: 20px;--font-size-24: 24px;--font-size-30: 30px;--font-size-36: 36px;--font-size-48: 48px;--font-size-60: 60px;--font-size-72: 72px;--font-weight-thin: 100;--font-weight-light: 300;--font-weight-regular: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--font-weight-extrabold: 800;--font-weight-black: 900}:root{--layer-card: 100;--layer-navigation: 200;--layer-dialog: 300;--layer-overlay: 400;--layer-modal: 500;--layer-flag: 600;--layer-spotlight: 700;--layer-tooltip: 800}:root{--size-0: 0px;--size-4: 4px;--size-8: 8px;--size-12: 12px;--size-16: 16px;--size-24: 24px;--size-32: 32px;--size-40: 40px;--size-48: 48px;--size-64: 64px;--size-96: 96px;--size-128: 128px;--size-192: 192px;--size-256: 256px;--size-384: 384px;--size-512: 512px;--size-640: 640px;--size-768: 768px;--size-896: 896px;--size-1024: 1024px;--size-1152: 1152px;--size-1280: 1280px;--size-1408: 1408px;--size-1536: 1536px;--size-1664: 1664px;--size-1792: 1792px;--size-1920: 1920px}:root{--transition-100ms-ease-out: .1s ease-out;--transition-100ms-ease-in-out: .1s ease-in-out;--transition-200ms-ease-in: .2s ease-in;--transition-200ms-ease-in-out: .2s ease-in-out}html,body,p,div,h1,h2,h3,h4,h5,h6,ul,ol,dl,img,pre,form,fieldset{margin:var(--size-0);padding:var(--size-0)}img,fieldset{border:var(--size-0)}body,html,#app{height:100%;width:100%}body{background-color:var(--background-color-light);color:var(--text-color-light);font-family:var(--font-family);font-size:var(--font-size-default);font-style:var(--font-style-normal);font-weight:var(--font-weight-regular);line-height:23px}input,select,textarea,button{font-family:inherit;font-size:inherit;font-weight:inherit;line-height:25px}p,ul,ol,dl,h1,h2,h3,h4,h5,h6,blockquote,pre,form,table{margin:calc(var(--grid-size) * 2px) var(--size-0) var(--size-0) var(--size-0)}a{color:var(--link-color-default-light);text-decoration:var(--link-text-decoration-default);border-radius:var(--border-width);cursor:pointer;transition:color var(--transition-100ms-ease-in-out),background-color var(--transition-100ms-ease-in-out)}a:hover{color:var(--link-color-hover-light);text-decoration:var(--link-text-decoration-hover)}a:active{color:var(--link-color-active-light)}h1{font-size:2.07142857em;font-style:var(--font-style-normal);line-height:1.10344828em;color:var(--heading-color-default-light);font-weight:var(--font-weight-semibold);letter-spacing:-.01em;margin-top:calc(var(--grid-size) * 5px)}[dark-mode=true] h1{color:var(--heading-color-default-dark)}h1:first-child{margin-top:var(--size-0)}h2{font-size:1.71428571em;font-style:var(--font-style-normal);line-height:1.16666667em;color:var(--heading-color-default-light);font-weight:var(--font-weight-medium);letter-spacing:-.01em;margin-top:calc(var(--grid-size) * 5px)}[dark-mode=true] h2{color:var(--heading-color-default-dark)}h2:first-child{margin-top:var(--size-0)}h3{font-size:1.42857143em;font-style:var(--font-style-normal);line-height:1.2em;color:var(--heading-color-default-light);font-weight:var(--font-weight-medium);letter-spacing:-.008em;margin-top:calc(var(--grid-size) * 3.5px)}[dark-mode=true] h3{color:var(--heading-color-default-dark)}h3:first-child{margin-top:var(--size-0)}h4{font-size:1.14285714em;font-style:var(--font-style-normal);line-height:1.25em;color:var(--heading-color-default-light);font-weight:var(--font-weight-semibold);letter-spacing:-.006em;margin-top:calc(var(--grid-size) * 3px)}[dark-mode=true] h4{color:var(--heading-color-default-dark)}h4:first-child{margin-top:var(--size-0)}h5{font-size:1em;font-style:var(--font-style-normal);line-height:1.14285714em;color:var(--heading-color-default-light);font-weight:var(--font-weight-semibold);letter-spacing:-.003em;margin-top:calc(var(--grid-size) * 2px)}[dark-mode=true] h5{color:var(--heading-color-default-dark)}h5:first-child{margin-top:var(--size-0)}h6{font-size:.85714286em;font-style:var(--font-style-normal);line-height:1.33333333em;color:var(--heading-color-default-light);font-weight:var(--font-weight-semibold);margin-top:calc(var(--grid-size) * 2.5px);text-transform:uppercase}[dark-mode=true] h6{color:var(--heading-color-default-dark)}h6:first-child{margin-top:var(--size-0)}ul,ol,dl{padding-left:calc(var(--grid-size) * 5px)}dd,dd+dt,li+li{margin-top:calc(var(--grid-size) / 2px)}ul ul:not(:first-child),ol ul:not(:first-child),ul ol:not(:first-child),ol ol:not(:first-child){margin-top:calc(var(--grid-size) / 2px)}p:first-child,ul:first-child,ol:first-child,dl:first-child,h1:first-child,h2:first-child,h3:first-child,h4:first-child,h5:first-child,h6:first-child,blockquote:first-child,pre:first-child,form:first-child,table:first-child{margin-top:var(--size-0)}:focus{outline:none;box-shadow:var(--size-0) var(--size-0) var(--size-0) var(--focus-outline-width) var(--focus-outline-color)}[data-whatintent=mouse] :focus{outline:none;box-shadow:none}table{border-collapse:collapse;width:100%}thead,tbody,tfoot{border-bottom:var(--border-width) solid var(--table-border-color-light)}td,th{border:none;padding:calc((var(--grid-size) / 2) * 1px) calc(var(--grid-size) * 1px);text-align:left}th{font-size:.78571429em;font-style:var(--font-style-normal);line-height:1.45454545em;color:var(--heading-color-subtle-light);font-weight:var(--font-weight-bold);margin-top:calc(var(--grid-size) * 2px);line-height:inherit}[dark-mode=true] th{color:var(--heading-color-subtle-dark)}th:first-child{margin-top:var(--size-0)}td:first-child,th:first-child{padding-left:var(--size-0)}td:last-child,th:last-child{padding-right:var(--size-0)}tr{transition:background .1s ease-out,box-shadow .15s cubic-bezier(.47,.03,.49,1.38)}tbody tr:hover{background-color:var(--table-hover-color-light)}hr{background-color:var(--horizontal-rule-color-light);height:2px;border-style:none;margin:var(--size-40) var(--size-0)}pre{font-family:var(--font-family-code);white-space:pre-wrap;padding:var(--size-24) var(--size-32);border-radius:var(--border-radius-regular);background:var(--code-block-color-light);font-size:var(--font-size-12);line-height:23px;overflow-x:auto}code{font-family:var(--font-family-code);padding:var(--size-0);font-size:var(--font-size-12)}p code{font-family:var(--font-family-code);padding:var(--size-0) var(--size-8);border-radius:var(--border-radius-regular);background:var(--code-color-light);font-size:var(--font-size-14)}blockquote{white-space:pre-wrap;border-left:var(--border-width-3) solid var(--blockquote-border-color-light);padding-left:var(--size-8);font-style:var(--font-style-italic)}caption{font-size:1.42857143em;font-style:var(--font-style-normal);line-height:1.2em;color:var(--heading-color-default-light);font-weight:var(--font-weight-medium);letter-spacing:-.008em;margin-top:calc(var(--grid-size) * 3.5px);margin-bottom:var(--size-8);text-align:left}[dark-mode=true] caption{color:var(--heading-color-default-dark)}caption:first-child{margin-top:var(--size-0)}[dark-mode=true] body{background-color:var(--background-color-dark);color:var(--text-color-dark)}[dark-mode=true] h1,[dark-mode=true] h2,[dark-mode=true] h3,[dark-mode=true] h4,[dark-mode=true] h5{color:var(--heading-color-default-dark)}[dark-mode=true] h6{color:var(--heading-color-subtle-dark)}[dark-mode=true] a{color:var(--link-color-default-dark)}[dark-mode=true] a:hover{color:var(--link-color-hover-dark)}[dark-mode=true] a:active{color:var(--link-color-active-dark)}[dark-mode=true] hr{background-color:var(--horizontal-rule-color-dark)}[dark-mode=true] pre{background:var(--code-block-color-dark)}[dark-mode=true] p code{background:var(--code-color-dark)}[dark-mode=true] blockquote{border-left:var(--border-width-3) solid var(--blockquote-border-color-dark)}[dark-mode=true] thead,[dark-mode=true] tbody,[dark-mode=true] tfoot{border-bottom:var(--border-width) solid var(--table-border-color-dark)}[dark-mode=true] tbody tr:hover{background-color:var(--table-hover-color-dark)}:root{--grid-size: 8;--focus-outline-width: 2px;--link-text-decoration-default: none;--link-text-decoration-hover: underline}.heading-900{font-size:2.85714286em;font-style:var(--font-style-normal);line-height:1.14285714em;color:var(--heading-color-default-light);font-weight:var(--font-weight-semibold);letter-spacing:-.01em;margin-top:calc(var(--grid-size) * 6.5px)}[dark-mode=true] .heading-900{color:var(--heading-color-default-dark)}.heading-900:first-child{margin-top:var(--size-0)}.heading-800{font-size:2.07142857em;font-style:var(--font-style-normal);line-height:1.10344828em;color:var(--heading-color-default-light);font-weight:var(--font-weight-semibold);letter-spacing:-.01em;margin-top:calc(var(--grid-size) * 5px)}[dark-mode=true] .heading-800{color:var(--heading-color-default-dark)}.heading-800:first-child{margin-top:var(--size-0)}.heading-700{font-size:1.71428571em;font-style:var(--font-style-normal);line-height:1.16666667em;color:var(--heading-color-default-light);font-weight:var(--font-weight-medium);letter-spacing:-.01em;margin-top:calc(var(--grid-size) * 5px)}[dark-mode=true] .heading-700{color:var(--heading-color-default-dark)}.heading-700:first-child{margin-top:var(--size-0)}.heading-600{font-size:1.42857143em;font-style:var(--font-style-normal);line-height:1.2em;color:var(--heading-color-default-light);font-weight:var(--font-weight-medium);letter-spacing:-.008em;margin-top:calc(var(--grid-size) * 3.5px)}[dark-mode=true] .heading-600{color:var(--heading-color-default-dark)}.heading-600:first-child{margin-top:var(--size-0)}.heading-500{font-size:1.14285714em;font-style:var(--font-style-normal);line-height:1.25em;color:var(--heading-color-default-light);font-weight:var(--font-weight-semibold);letter-spacing:-.006em;margin-top:calc(var(--grid-size) * 3px)}[dark-mode=true] .heading-500{color:var(--heading-color-default-dark)}.heading-500:first-child{margin-top:var(--size-0)}.heading-400{font-size:1em;font-style:var(--font-style-normal);line-height:1.14285714em;color:var(--heading-color-default-light);font-weight:var(--font-weight-semibold);letter-spacing:-.003em;margin-top:calc(var(--grid-size) * 2px)}[dark-mode=true] .heading-400{color:var(--heading-color-default-dark)}.heading-400:first-child{margin-top:var(--size-0)}.heading-300{font-size:.85714286em;font-style:var(--font-style-normal);line-height:1.33333333em;color:var(--heading-color-default-light);font-weight:var(--font-weight-semibold);margin-top:calc(var(--grid-size) * 2.5px);text-transform:uppercase}[dark-mode=true] .heading-300{color:var(--heading-color-default-dark)}.heading-300:first-child{margin-top:var(--size-0)}.heading-200{font-size:.85714286em;font-style:var(--font-style-normal);line-height:1.33333333em;color:var(--heading-color-subtle-light);font-weight:var(--font-weight-semibold);margin-top:calc(var(--grid-size) * 2px)}[dark-mode=true] .heading-200{color:var(--heading-color-subtle-dark)}.heading-200:first-child{margin-top:var(--size-0)}.heading-100{font-size:.78571429em;font-style:var(--font-style-normal);line-height:1.45454545em;color:var(--heading-color-subtle-light);font-weight:var(--font-weight-bold);margin-top:calc(var(--grid-size) * 2px)}[dark-mode=true] .heading-100{color:var(--heading-color-subtle-dark)}.heading-100:first-child{margin-top:var(--size-0)}.text-intro{font-size:1.42857143em;font-style:var(--font-style-normal);font-weight:var(--font-weight-regular);line-height:32px}.text-caption{font-size:var(--font-size-12);font-weight:var(--font-weight-regular);display:block;line-height:18px;color:var(--placeholder-color-light)}.text-caption-bold{font-size:var(--font-size-12);font-weight:var(--font-weight-semibold);color:var(--text-color-light)}.text-prominent{font-size:var(--font-size-default);font-weight:var(--font-weight-semibold);color:var(--text-color-light)}.error{color:var(--go-color-red-light)}[dark-mode=true] .text-caption{color:var(--placeholder-color-dark)}[dark-mode=true] .text-caption-bold,[dark-mode=true] .text-prominent{color:var(--text-color-dark)}[dark-mode=true] .error{color:var(--go-color-red-dark)}.theme-switcher-divider[data-v-441a2d2e]{margin:4px 0;background-color:var(--go-color-n20)}[dark-mode=true] .theme-switcher-divider[data-v-441a2d2e]{background-color:var(--background-color-secondary-dark)}
|
|
1
|
+
:root{--border-radius-regular: 3px;--border-radius-large: 6px;--border-width: var(--border-width-2);--border-width-1: 1px;--border-width-2: 2px;--border-width-3: 3px}:root{--go-color-primary1: var(--go-color-b600);--go-color-primary2: var(--go-color-b500);--go-color-primary3: var(--go-color-n0);--go-color-n0: #ffffff;--go-color-n0-rgb: 255, 255, 255;--go-color-n10: #fafbfc;--go-color-n10-rgb: 250, 251, 252;--go-color-n20: #f4f5f7;--go-color-n30: #ebecf0;--go-color-n40: #dfe1e6;--go-color-n40-rgb: 223, 225, 230;--go-color-n50: #c1c7d0;--go-color-n60: #b3bac5;--go-color-n70: #a5adba;--go-color-n80: #97a0af;--go-color-n90: #8993a4;--go-color-n100: #7a869a;--go-color-n100-rgb: 122, 134, 154;--go-color-n200: #6b778c;--go-color-n300: #5e6c84;--go-color-n400: #505f79;--go-color-n500: #42526e;--go-color-n600: #344563;--go-color-n700: #253858;--go-color-n700-rgb: 37, 56, 88;--go-color-n800: #172b4d;--go-color-n900: #091e42;--go-color-n900-rgb: 9, 30, 66;--go-color-n1000: #000000;--go-color-n1000-rgb: 0, 0, 0;--go-color-dn0: #0d1424;--go-color-dn0-rgb: 13, 20, 36;--go-color-dn10: #0e1624;--go-color-dn20: #121a29;--go-color-dn30: #1b2638;--go-color-dn40: #202b3d;--go-color-dn50: #283447;--go-color-dn60: #313d52;--go-color-dn70: #3b475c;--go-color-dn70-rgb: 61, 72, 92;--go-color-dn80: #455166;--go-color-dn90: #56637a;--go-color-dn100: #67758f;--go-color-dn200: #7988a3;--go-color-dn200-rgb: 121, 136, 163;--go-color-dn300: #8c9cb8;--go-color-dn300-rgb: 140, 156, 184;--go-color-dn400: #9fb0cc;--go-color-dn400-rgb: 159, 176, 204;--go-color-dn500: #abbbd6;--go-color-dn500-rgb: 171, 187, 214;--go-color-dn600: #b8c7e0;--go-color-dn600-rgb: 184, 199, 224;--go-color-dn700: #ced9eb;--go-color-dn800: #dce5f5;--go-color-dn900: #e6edfa;--go-color-dn900-rgb: 230, 237, 250;--go-color-r50: #ffebe6;--go-color-r75: #ffbdad;--go-color-r100: #ff8f73;--go-color-r200: #ff7452;--go-color-r300: #ff5630;--go-color-r300-rgb: 255, 86, 48;--go-color-r400: #de350b;--go-color-r500: #bf2600;--go-color-y50: #fffae6;--go-color-y75: #fff0b3;--go-color-y100: #ffe380;--go-color-y200: #ffc400;--go-color-y300: #ffab00;--go-color-y300-rgb: 255, 171, 0;--go-color-y400: #ff991f;--go-color-y500: #ff8b00;--go-color-g50: #e3fcef;--go-color-g75: #abf5d1;--go-color-g100: #79f2c0;--go-color-g200: #57d9a3;--go-color-g300: #36b37e;--go-color-g300-rgb: 54, 179, 126;--go-color-g400: #00875a;--go-color-g500: #006644;--go-color-b50: #deebff;--go-color-b75: #b3d4ff;--go-color-b75-rgb: 179, 212, 255;--go-color-b100: #4c9aff;--go-color-b100-rgb: 76, 154, 255;--go-color-b200: #2684ff;--go-color-b200-rgb: 38, 132, 255;--go-color-b300: #0065ff;--go-color-b400: #0052cc;--go-color-b400-rgb: 0, 82, 204;--go-color-b500: #0747a6;--go-color-b600: #061f80;--go-color-p50: #eae6ff;--go-color-p75: #c0b6f2;--go-color-p100: #998dd9;--go-color-p100-rgb: 153, 141, 217;--go-color-p200: #8777d9;--go-color-p300: #6554c0;--go-color-p300-rgb: 101, 84, 192;--go-color-p400: #5243aa;--go-color-p500: #403294;--go-color-t50: #e6fcff;--go-color-t75: #b3f5ff;--go-color-t100: #79e2f2;--go-color-t200: #00c7e6;--go-color-t200-rgb: 0, 199, 230;--go-color-t300: #00b8d9;--go-color-t300-rgb: 0, 184, 217;--go-color-t400: #00a3bf;--go-color-t500: #008da6;--go-color-primary-light: var(--go-color-b400);--go-color-primary-dark: var(--go-color-b100);--go-color-blue-light: var(--go-color-b400);--go-color-blue-light-rgb: var(--go-color-b400-rgb);--go-color-blue-dark: var(--go-color-b100);--go-color-blue-dark-rgb: var(--go-color-b100-rgb);--go-color-teal-light: var(--go-color-t300);--go-color-teal-light-rgb: var(--go-color-t300-rgb);--go-color-teal-dark: var(--go-color-t200);--go-color-teal-dark-rgb: var(--go-color-t200-rgb);--go-color-purple-light: var(--go-color-p300);--go-color-purple-light-rgb: var(--go-color-p300-rgb);--go-color-purple-dark: var(--go-color-p100);--go-color-purple-dark-rgb: var(--go-color-p100-rgb);--go-color-red-light: var(--go-color-r300);--go-color-red-light-rgb: var(--go-color-r300-rgb);--go-color-red-dark: var(--go-color-r300);--go-color-red-dark-rgb: var(--go-color-r300-rgb);--go-color-yellow-light: var(--go-color-y300);--go-color-yellow-light-rgb: var(--go-color-y300-rgb);--go-color-yellow-dark: var(--go-color-y300);--go-color-yellow-dark-rgb: var(--go-color-y300-rgb);--go-color-green-light: var(--go-color-g300);--go-color-green-light-rgb: var(--go-color-g300-rgb);--go-color-green-dark: var(--go-color-g300);--go-color-green-dark-rgb: var(--go-color-g300-rgb);--background-color-light: var(--go-color-n0);--background-color-dark: var(--go-color-dn0);--background-color-secondary-light: var(--go-color-n20);--background-color-secondary-dark: var(--go-color-dn30);--text-color-light: var(--go-color-n1000);--text-color-dark: var(--go-color-n0);--placeholder-color-light: var(--go-color-n100);--placeholder-color-dark: var(--go-color-dn200);--heading-color-default-light: var(--go-color-n1000);--heading-color-default-dark: var(--go-color-n0);--heading-color-subtle-light: var(--go-color-n200);--heading-color-subtle-dark: var(--go-color-dn300);--link-color-default-light: var(--go-color-b400);--link-color-default-dark: var(--go-color-b100);--link-color-hover-light: var(--go-color-b300);--link-color-hover-dark: var(--go-color-b200);--link-color-active-light: var(--go-color-b500);--link-color-active-dark: var(--go-color-b100);--focus-outline-color: var(--go-color-b100);--table-border-color-light: var(--go-color-n40);--table-border-color-dark: var(--go-color-dn70);--table-hover-color-light: var(--go-color-n20);--table-hover-color-dark: var(--go-color-dn50);--horizontal-rule-color-light: var(--go-color-n40);--horizontal-rule-color-dark: var(--go-color-dn70);--code-color-light: var(--go-color-n40);--code-color-dark: var(--go-color-dn70);--code-block-color-light: var(--background-color-secondary-light);--code-block-color-dark: var(--background-color-secondary-dark);--blockquote-border-color-light: var(--go-color-n40);--blockquote-border-color-dark: var(--go-color-dn70)}:root{--elevation-raised-light: rgba(var(--go-color-n900-rgb), .25) 0px 1px 1px, rgba(var(--go-color-n900-rgb), .31) 0px 0px 1px;--elevation-raised-dark: rgba(var(--go-color-n1000-rgb), 0) 0px 0px 0px, rgba(var(--go-color-n1000-rgb), .5) 0px 1px 1px, rgba(var(--go-color-n1000-rgb), .5) 0px 0px 1px;--elevation-overlay-light: rgba(var(--go-color-n900-rgb), .15) 0px 8px 12px 0px, rgba(var(--go-color-n900-rgb), .31) 0px 0px 1px 0px;--elevation-overlay-dark: var(--go-color-dn70) 0px 0px 0px 1px, rgba(var(--go-color-dn0-rgb), .36) 0px 8px 12px 0px, rgba(var(--go-color-dn0-rgb), .5) 0px 0px 1px 1px;--elevation-avatar-light: inset 0 0 10px rgba(var(--go-color-n900-rgb), 5%);--elevation-avatar-dark: inset 0 0 10px rgba(var(--go-color-dn600-rgb), 5%)}:root{--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;--font-family-code: ui-monospace, SFMono-Medium, "SF Mono", "Segoe UI Mono", "Roboto Mono", "Ubuntu Mono", Menlo, monospace;--font-style-normal: normal;--font-style-italic: italic;--font-size-default: var(--font-size-14);--font-size-12: 12px;--font-size-13: 13px;--font-size-14: 14px;--font-size-15: 15px;--font-size-16: 16px;--font-size-18: 18px;--font-size-20: 20px;--font-size-24: 24px;--font-size-30: 30px;--font-size-36: 36px;--font-size-48: 48px;--font-size-60: 60px;--font-size-72: 72px;--font-weight-thin: 100;--font-weight-light: 300;--font-weight-regular: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--font-weight-extrabold: 800;--font-weight-black: 900}:root{--layer-card: 100;--layer-navigation: 200;--layer-dialog: 300;--layer-overlay: 400;--layer-modal: 500;--layer-flag: 600;--layer-spotlight: 700;--layer-tooltip: 800}:root{--size-0: 0px;--size-4: 4px;--size-8: 8px;--size-12: 12px;--size-16: 16px;--size-24: 24px;--size-32: 32px;--size-40: 40px;--size-48: 48px;--size-64: 64px;--size-96: 96px;--size-128: 128px;--size-192: 192px;--size-256: 256px;--size-384: 384px;--size-512: 512px;--size-640: 640px;--size-768: 768px;--size-896: 896px;--size-1024: 1024px;--size-1152: 1152px;--size-1280: 1280px;--size-1408: 1408px;--size-1536: 1536px;--size-1664: 1664px;--size-1792: 1792px;--size-1920: 1920px}:root{--transition-100ms-ease-out: .1s ease-out;--transition-100ms-ease-in-out: .1s ease-in-out;--transition-200ms-ease-in: .2s ease-in;--transition-200ms-ease-in-out: .2s ease-in-out}html,body,p,div,h1,h2,h3,h4,h5,h6,ul,ol,dl,img,pre,form,fieldset{margin:var(--size-0);padding:var(--size-0)}img,fieldset{border:var(--size-0)}body,html,#app{height:100%;width:100%}body{background-color:var(--background-color-light);color:var(--text-color-light);font-family:var(--font-family);font-size:var(--font-size-default);font-style:var(--font-style-normal);font-weight:var(--font-weight-regular);line-height:23px}input,select,textarea,button{font-family:inherit;font-size:inherit;font-weight:inherit;line-height:25px}p,ul,ol,dl,h1,h2,h3,h4,h5,h6,blockquote,pre,form,table{margin:calc(var(--grid-size) * 2px) var(--size-0) var(--size-0) var(--size-0)}a{color:var(--link-color-default-light);text-decoration:var(--link-text-decoration-default);border-radius:var(--border-width);cursor:pointer;transition:color var(--transition-100ms-ease-in-out),background-color var(--transition-100ms-ease-in-out)}a:hover{color:var(--link-color-hover-light);text-decoration:var(--link-text-decoration-hover)}a:active{color:var(--link-color-active-light)}h1{font-size:2.07142857em;font-style:var(--font-style-normal);line-height:1.10344828em;color:var(--heading-color-default-light);font-weight:var(--font-weight-semibold);letter-spacing:-.01em;margin-top:calc(var(--grid-size) * 5px)}[dark-mode=true] h1{color:var(--heading-color-default-dark)}h1:first-child{margin-top:var(--size-0)}h2{font-size:1.71428571em;font-style:var(--font-style-normal);line-height:1.16666667em;color:var(--heading-color-default-light);font-weight:var(--font-weight-medium);letter-spacing:-.01em;margin-top:calc(var(--grid-size) * 5px)}[dark-mode=true] h2{color:var(--heading-color-default-dark)}h2:first-child{margin-top:var(--size-0)}h3{font-size:1.42857143em;font-style:var(--font-style-normal);line-height:1.2em;color:var(--heading-color-default-light);font-weight:var(--font-weight-medium);letter-spacing:-.008em;margin-top:calc(var(--grid-size) * 3.5px)}[dark-mode=true] h3{color:var(--heading-color-default-dark)}h3:first-child{margin-top:var(--size-0)}h4{font-size:1.14285714em;font-style:var(--font-style-normal);line-height:1.25em;color:var(--heading-color-default-light);font-weight:var(--font-weight-semibold);letter-spacing:-.006em;margin-top:calc(var(--grid-size) * 3px)}[dark-mode=true] h4{color:var(--heading-color-default-dark)}h4:first-child{margin-top:var(--size-0)}h5{font-size:1em;font-style:var(--font-style-normal);line-height:1.14285714em;color:var(--heading-color-default-light);font-weight:var(--font-weight-semibold);letter-spacing:-.003em;margin-top:calc(var(--grid-size) * 2px)}[dark-mode=true] h5{color:var(--heading-color-default-dark)}h5:first-child{margin-top:var(--size-0)}h6{font-size:.85714286em;font-style:var(--font-style-normal);line-height:1.33333333em;color:var(--heading-color-default-light);font-weight:var(--font-weight-semibold);margin-top:calc(var(--grid-size) * 2.5px);text-transform:uppercase}[dark-mode=true] h6{color:var(--heading-color-default-dark)}h6:first-child{margin-top:var(--size-0)}ul,ol,dl{padding-left:calc(var(--grid-size) * 5px)}dd,dd+dt,li+li{margin-top:calc(var(--grid-size) / 2px)}ul ul:not(:first-child),ol ul:not(:first-child),ul ol:not(:first-child),ol ol:not(:first-child){margin-top:calc(var(--grid-size) / 2px)}p:first-child,ul:first-child,ol:first-child,dl:first-child,h1:first-child,h2:first-child,h3:first-child,h4:first-child,h5:first-child,h6:first-child,blockquote:first-child,pre:first-child,form:first-child,table:first-child{margin-top:var(--size-0)}:focus{outline:none;box-shadow:var(--size-0) var(--size-0) var(--size-0) var(--focus-outline-width) var(--focus-outline-color)}[data-whatintent=mouse] :focus{outline:none;box-shadow:none}table{border-collapse:collapse;width:100%}thead,tbody,tfoot{border-bottom:var(--border-width) solid var(--table-border-color-light)}td,th{border:none;padding:calc((var(--grid-size) / 2) * 1px) calc(var(--grid-size) * 1px);text-align:left}th{font-size:.78571429em;font-style:var(--font-style-normal);line-height:1.45454545em;color:var(--heading-color-subtle-light);font-weight:var(--font-weight-bold);margin-top:calc(var(--grid-size) * 2px);line-height:inherit}[dark-mode=true] th{color:var(--heading-color-subtle-dark)}th:first-child{margin-top:var(--size-0)}td:first-child,th:first-child{padding-left:var(--size-0)}td:last-child,th:last-child{padding-right:var(--size-0)}tr{transition:background .1s ease-out,box-shadow .15s cubic-bezier(.47,.03,.49,1.38)}tbody tr:hover{background-color:var(--table-hover-color-light)}hr{background-color:var(--horizontal-rule-color-light);height:2px;border-style:none;margin:var(--size-40) var(--size-0)}pre{font-family:var(--font-family-code);white-space:pre-wrap;padding:var(--size-24) var(--size-32);border-radius:var(--border-radius-regular);background:var(--code-block-color-light);font-size:var(--font-size-12);line-height:23px;overflow-x:auto}code{font-family:var(--font-family-code);padding:var(--size-0);font-size:var(--font-size-12)}p code{font-family:var(--font-family-code);padding:var(--size-0) var(--size-8);border-radius:var(--border-radius-regular);background:var(--code-color-light);font-size:var(--font-size-14)}blockquote{white-space:pre-wrap;border-left:var(--border-width-3) solid var(--blockquote-border-color-light);padding-left:var(--size-8);font-style:var(--font-style-italic)}caption{font-size:1.42857143em;font-style:var(--font-style-normal);line-height:1.2em;color:var(--heading-color-default-light);font-weight:var(--font-weight-medium);letter-spacing:-.008em;margin-top:calc(var(--grid-size) * 3.5px);margin-bottom:var(--size-8);text-align:left}[dark-mode=true] caption{color:var(--heading-color-default-dark)}caption:first-child{margin-top:var(--size-0)}[dark-mode=true] body{background-color:var(--background-color-dark);color:var(--text-color-dark)}[dark-mode=true] h1,[dark-mode=true] h2,[dark-mode=true] h3,[dark-mode=true] h4,[dark-mode=true] h5{color:var(--heading-color-default-dark)}[dark-mode=true] h6{color:var(--heading-color-subtle-dark)}[dark-mode=true] a{color:var(--link-color-default-dark)}[dark-mode=true] a:hover{color:var(--link-color-hover-dark)}[dark-mode=true] a:active{color:var(--link-color-active-dark)}[dark-mode=true] hr{background-color:var(--horizontal-rule-color-dark)}[dark-mode=true] pre{background:var(--code-block-color-dark)}[dark-mode=true] p code{background:var(--code-color-dark)}[dark-mode=true] blockquote{border-left:var(--border-width-3) solid var(--blockquote-border-color-dark)}[dark-mode=true] thead,[dark-mode=true] tbody,[dark-mode=true] tfoot{border-bottom:var(--border-width) solid var(--table-border-color-dark)}[dark-mode=true] tbody tr:hover{background-color:var(--table-hover-color-dark)}:root{--grid-size: 8;--focus-outline-width: 2px;--link-text-decoration-default: none;--link-text-decoration-hover: underline}.heading-900{font-size:2.85714286em;font-style:var(--font-style-normal);line-height:1.14285714em;color:var(--heading-color-default-light);font-weight:var(--font-weight-semibold);letter-spacing:-.01em;margin-top:calc(var(--grid-size) * 6.5px)}[dark-mode=true] .heading-900{color:var(--heading-color-default-dark)}.heading-900:first-child{margin-top:var(--size-0)}.heading-800{font-size:2.07142857em;font-style:var(--font-style-normal);line-height:1.10344828em;color:var(--heading-color-default-light);font-weight:var(--font-weight-semibold);letter-spacing:-.01em;margin-top:calc(var(--grid-size) * 5px)}[dark-mode=true] .heading-800{color:var(--heading-color-default-dark)}.heading-800:first-child{margin-top:var(--size-0)}.heading-700{font-size:1.71428571em;font-style:var(--font-style-normal);line-height:1.16666667em;color:var(--heading-color-default-light);font-weight:var(--font-weight-medium);letter-spacing:-.01em;margin-top:calc(var(--grid-size) * 5px)}[dark-mode=true] .heading-700{color:var(--heading-color-default-dark)}.heading-700:first-child{margin-top:var(--size-0)}.heading-600{font-size:1.42857143em;font-style:var(--font-style-normal);line-height:1.2em;color:var(--heading-color-default-light);font-weight:var(--font-weight-medium);letter-spacing:-.008em;margin-top:calc(var(--grid-size) * 3.5px)}[dark-mode=true] .heading-600{color:var(--heading-color-default-dark)}.heading-600:first-child{margin-top:var(--size-0)}.heading-500{font-size:1.14285714em;font-style:var(--font-style-normal);line-height:1.25em;color:var(--heading-color-default-light);font-weight:var(--font-weight-semibold);letter-spacing:-.006em;margin-top:calc(var(--grid-size) * 3px)}[dark-mode=true] .heading-500{color:var(--heading-color-default-dark)}.heading-500:first-child{margin-top:var(--size-0)}.heading-400{font-size:1em;font-style:var(--font-style-normal);line-height:1.14285714em;color:var(--heading-color-default-light);font-weight:var(--font-weight-semibold);letter-spacing:-.003em;margin-top:calc(var(--grid-size) * 2px)}[dark-mode=true] .heading-400{color:var(--heading-color-default-dark)}.heading-400:first-child{margin-top:var(--size-0)}.heading-300{font-size:.85714286em;font-style:var(--font-style-normal);line-height:1.33333333em;color:var(--heading-color-default-light);font-weight:var(--font-weight-semibold);margin-top:calc(var(--grid-size) * 2.5px);text-transform:uppercase}[dark-mode=true] .heading-300{color:var(--heading-color-default-dark)}.heading-300:first-child{margin-top:var(--size-0)}.heading-200{font-size:.85714286em;font-style:var(--font-style-normal);line-height:1.33333333em;color:var(--heading-color-subtle-light);font-weight:var(--font-weight-semibold);margin-top:calc(var(--grid-size) * 2px)}[dark-mode=true] .heading-200{color:var(--heading-color-subtle-dark)}.heading-200:first-child{margin-top:var(--size-0)}.heading-100{font-size:.78571429em;font-style:var(--font-style-normal);line-height:1.45454545em;color:var(--heading-color-subtle-light);font-weight:var(--font-weight-bold);margin-top:calc(var(--grid-size) * 2px)}[dark-mode=true] .heading-100{color:var(--heading-color-subtle-dark)}.heading-100:first-child{margin-top:var(--size-0)}.text-intro{font-size:1.42857143em;font-style:var(--font-style-normal);font-weight:var(--font-weight-regular);line-height:32px}.text-caption{font-size:var(--font-size-12);font-weight:var(--font-weight-regular);display:block;line-height:18px;color:var(--placeholder-color-light)}.text-caption-bold{font-size:var(--font-size-12);font-weight:var(--font-weight-semibold);color:var(--text-color-light)}.text-prominent{font-size:var(--font-size-default);font-weight:var(--font-weight-semibold);color:var(--text-color-light)}.error{color:var(--go-color-red-light)}[dark-mode=true] .text-caption{color:var(--placeholder-color-dark)}[dark-mode=true] .text-caption-bold,[dark-mode=true] .text-prominent{color:var(--text-color-dark)}[dark-mode=true] .error{color:var(--go-color-red-dark)}.theme-switcher-divider[data-v-9b82a61c]{margin:4px 0;background-color:var(--go-color-n20)}[dark-mode=true] .theme-switcher-divider[data-v-9b82a61c]{background-color:var(--background-color-secondary-dark)}
|
package/dist/theme.es.js
CHANGED
|
@@ -1,172 +1,218 @@
|
|
|
1
|
-
import { ref as
|
|
1
|
+
import { ref as v, watch as M, onBeforeUnmount as O, provide as R, createElementBlock as T, openBlock as D, renderSlot as I, computed as A, createBlock as U, unref as l, withCtx as g, createVNode as k, createElementVNode as B } from "vue";
|
|
2
2
|
import "what-input";
|
|
3
|
-
import { DropdownMenu as
|
|
4
|
-
const
|
|
3
|
+
import { DropdownMenu as $, DropdownItemGroup as C, DropdownItemRadio as E } from "@gospore/dropdown-menu";
|
|
4
|
+
const w = ["auto", "light", "dark"], b = "gospore-theme-mode", L = 60 * 60 * 24 * 365, x = "(prefers-color-scheme: dark)";
|
|
5
|
+
function N() {
|
|
6
|
+
if (typeof document > "u")
|
|
7
|
+
return null;
|
|
8
|
+
const e = V(b);
|
|
9
|
+
return e && w.includes(e) ? e : null;
|
|
10
|
+
}
|
|
11
|
+
function Y(e) {
|
|
12
|
+
if (typeof document > "u" || !w.includes(e))
|
|
13
|
+
return;
|
|
14
|
+
const t = typeof window < "u" ? window.location.hostname : "", r = typeof window < "u" ? window.location.protocol : "", n = G(t), i = r === "https:", u = [
|
|
15
|
+
"path=/",
|
|
16
|
+
`max-age=${L}`,
|
|
17
|
+
"SameSite=Lax"
|
|
18
|
+
];
|
|
19
|
+
n && u.push(`domain=${n}`), i && u.push("Secure"), document.cookie = [
|
|
20
|
+
`${encodeURIComponent(b)}=${encodeURIComponent(e)}`,
|
|
21
|
+
...u
|
|
22
|
+
].join("; ");
|
|
23
|
+
}
|
|
24
|
+
function S(e) {
|
|
25
|
+
if (typeof document > "u")
|
|
26
|
+
return;
|
|
27
|
+
const t = typeof e == "string" && w.includes(e) ? e : N() ?? "auto";
|
|
28
|
+
console.log("Applying theme mode:", t);
|
|
29
|
+
const r = P(t);
|
|
30
|
+
document.documentElement.setAttribute("dark-mode", r);
|
|
31
|
+
}
|
|
32
|
+
function V(e) {
|
|
33
|
+
if (typeof document > "u" || !document.cookie)
|
|
34
|
+
return null;
|
|
35
|
+
const t = `${encodeURIComponent(e)}=`, r = document.cookie.split("; ");
|
|
36
|
+
for (const n of r)
|
|
37
|
+
if (n.startsWith(t))
|
|
38
|
+
return decodeURIComponent(n.slice(t.length));
|
|
39
|
+
return null;
|
|
40
|
+
}
|
|
41
|
+
function G(e) {
|
|
42
|
+
if (!e || e === "localhost")
|
|
43
|
+
return null;
|
|
44
|
+
if (/^\d+(?:\.\d+){3}$/.test(e))
|
|
45
|
+
return e;
|
|
46
|
+
const r = e.split(".");
|
|
47
|
+
return r.length <= 1 ? null : r.length === 2 ? e : r.slice(-2).join(".");
|
|
48
|
+
}
|
|
49
|
+
function P(e) {
|
|
50
|
+
if (e === "dark")
|
|
51
|
+
return !0;
|
|
52
|
+
if (e === "light" || typeof window > "u")
|
|
53
|
+
return !1;
|
|
54
|
+
try {
|
|
55
|
+
const t = typeof window.matchMedia == "function" ? window.matchMedia(x) : null;
|
|
56
|
+
return t ? t.matches : !1;
|
|
57
|
+
} catch {
|
|
58
|
+
return !1;
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
const Q = { class: "theme" }, j = "(prefers-color-scheme: dark)", K = "(prefers-reduced-motion: reduce)", F = 200, Z = /* @__PURE__ */ Object.assign({
|
|
5
62
|
name: "Theme"
|
|
6
63
|
}, {
|
|
7
64
|
__name: "Theme",
|
|
8
65
|
props: {
|
|
9
66
|
mode: {
|
|
10
67
|
type: String,
|
|
11
|
-
|
|
12
|
-
validator: (s) => ["auto", "light", "dark"].includes(s)
|
|
68
|
+
validator: (e) => ["auto", "light", "dark"].includes(e)
|
|
13
69
|
}
|
|
14
70
|
},
|
|
15
|
-
setup(
|
|
16
|
-
const
|
|
17
|
-
|
|
18
|
-
),
|
|
19
|
-
|
|
71
|
+
setup(e) {
|
|
72
|
+
const t = e, r = window.matchMedia(j), n = window.matchMedia(
|
|
73
|
+
K
|
|
74
|
+
), i = d();
|
|
75
|
+
S(i);
|
|
76
|
+
const u = v(i), m = v({
|
|
77
|
+
darkMode: h(i)
|
|
20
78
|
});
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
u.name = "color-scheme", u.setAttribute("content", "light dark"), document.getElementsByTagName("head")[0].appendChild(u), p(
|
|
24
|
-
() => d.mode,
|
|
79
|
+
r.addEventListener("change", c), M(
|
|
80
|
+
() => t.mode,
|
|
25
81
|
() => {
|
|
26
|
-
|
|
82
|
+
f();
|
|
27
83
|
},
|
|
28
84
|
{ immediate: !0 }
|
|
29
|
-
),
|
|
30
|
-
() =>
|
|
31
|
-
(
|
|
32
|
-
if (
|
|
33
|
-
|
|
85
|
+
), M(
|
|
86
|
+
() => m.value.darkMode,
|
|
87
|
+
(o, p) => {
|
|
88
|
+
if (p === void 0) {
|
|
89
|
+
a(o);
|
|
34
90
|
return;
|
|
35
91
|
}
|
|
36
|
-
|
|
37
|
-
|
|
92
|
+
s(() => {
|
|
93
|
+
a(o);
|
|
38
94
|
});
|
|
39
95
|
},
|
|
40
96
|
{ immediate: !0 }
|
|
41
|
-
),
|
|
42
|
-
|
|
97
|
+
), O(() => {
|
|
98
|
+
r.removeEventListener("change", c);
|
|
43
99
|
});
|
|
44
|
-
function
|
|
45
|
-
|
|
100
|
+
function f() {
|
|
101
|
+
const o = d();
|
|
102
|
+
u.value = o, m.value.darkMode = h(o);
|
|
46
103
|
}
|
|
47
|
-
function
|
|
48
|
-
return
|
|
104
|
+
function h(o) {
|
|
105
|
+
return o === "dark" ? !0 : o === "light" ? !1 : r.matches;
|
|
49
106
|
}
|
|
50
|
-
function
|
|
51
|
-
!
|
|
107
|
+
function c(o) {
|
|
108
|
+
!o || u.value !== "auto" || (m.value.darkMode = o.matches);
|
|
52
109
|
}
|
|
53
|
-
function
|
|
54
|
-
document.documentElement.setAttribute("dark-mode",
|
|
110
|
+
function a(o) {
|
|
111
|
+
document.documentElement.setAttribute("dark-mode", o);
|
|
55
112
|
}
|
|
56
|
-
function
|
|
57
|
-
if (
|
|
58
|
-
|
|
113
|
+
function s(o) {
|
|
114
|
+
if (n.matches) {
|
|
115
|
+
o();
|
|
59
116
|
return;
|
|
60
117
|
}
|
|
61
|
-
const
|
|
62
|
-
if (
|
|
63
|
-
|
|
64
|
-
|
|
118
|
+
const p = document.startViewTransition?.bind(document);
|
|
119
|
+
if (p) {
|
|
120
|
+
p(() => {
|
|
121
|
+
o();
|
|
65
122
|
});
|
|
66
123
|
return;
|
|
67
124
|
}
|
|
68
|
-
|
|
69
|
-
const
|
|
70
|
-
typeof
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
],
|
|
76
|
-
{
|
|
77
|
-
duration: x,
|
|
78
|
-
easing: "ease-in-out"
|
|
79
|
-
}
|
|
80
|
-
);
|
|
125
|
+
o();
|
|
126
|
+
const _ = document.documentElement;
|
|
127
|
+
typeof _.animate == "function" && window.requestAnimationFrame(() => {
|
|
128
|
+
_.animate([{ opacity: 0.85 }, { opacity: 1 }], {
|
|
129
|
+
duration: F,
|
|
130
|
+
easing: "ease-in-out"
|
|
131
|
+
});
|
|
81
132
|
});
|
|
82
133
|
}
|
|
83
|
-
|
|
84
|
-
|
|
134
|
+
function d() {
|
|
135
|
+
return t.mode ?? N() ?? "auto";
|
|
136
|
+
}
|
|
137
|
+
return R("theme", m), (o, p) => (D(), T("div", Q, [
|
|
138
|
+
I(o.$slots, "default")
|
|
85
139
|
]));
|
|
86
140
|
}
|
|
87
|
-
}),
|
|
88
|
-
const
|
|
89
|
-
for (const [
|
|
90
|
-
|
|
91
|
-
return
|
|
92
|
-
},
|
|
141
|
+
}), H = (e, t) => {
|
|
142
|
+
const r = e.__vccOpts || e;
|
|
143
|
+
for (const [n, i] of t)
|
|
144
|
+
r[n] = i;
|
|
145
|
+
return r;
|
|
146
|
+
}, q = {
|
|
93
147
|
__name: "ThemeSwitcher",
|
|
94
148
|
props: {
|
|
95
149
|
mode: {
|
|
96
150
|
type: String,
|
|
97
151
|
default: "auto",
|
|
98
|
-
validator: (
|
|
152
|
+
validator: (e) => ["auto", "light", "dark"].includes(e)
|
|
99
153
|
}
|
|
100
154
|
},
|
|
101
155
|
emits: ["update:mode"],
|
|
102
|
-
setup(
|
|
103
|
-
const
|
|
156
|
+
setup(e, { emit: t }) {
|
|
157
|
+
const n = [
|
|
104
158
|
{ value: "auto", label: "System" },
|
|
105
159
|
{ value: "light", label: "Light" },
|
|
106
160
|
{ value: "dark", label: "Dark" }
|
|
107
|
-
]
|
|
108
|
-
|
|
161
|
+
].reduce((a, s) => (a[s.value] = s.label, a), {}), i = w, u = e, m = t;
|
|
162
|
+
S();
|
|
163
|
+
const f = v(!1), h = N() ?? u.mode, c = v(
|
|
164
|
+
i.includes(h) ? h : "auto"
|
|
109
165
|
);
|
|
110
|
-
|
|
111
|
-
() =>
|
|
112
|
-
),
|
|
166
|
+
return A(
|
|
167
|
+
() => n[c.value] ?? n.auto
|
|
168
|
+
), M(
|
|
113
169
|
() => u.mode,
|
|
114
|
-
(
|
|
115
|
-
|
|
170
|
+
(a) => {
|
|
171
|
+
i.includes(a) && a !== c.value && (c.value = a);
|
|
116
172
|
}
|
|
117
|
-
),
|
|
118
|
-
|
|
119
|
-
(
|
|
120
|
-
if (!
|
|
121
|
-
|
|
173
|
+
), M(
|
|
174
|
+
c,
|
|
175
|
+
(a) => {
|
|
176
|
+
if (!i.includes(a)) {
|
|
177
|
+
c.value = "auto";
|
|
122
178
|
return;
|
|
123
179
|
}
|
|
124
|
-
|
|
180
|
+
f.value = !1, m("update:mode", a), Y(a);
|
|
125
181
|
},
|
|
126
182
|
{ immediate: !0 }
|
|
127
|
-
)
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
return null;
|
|
131
|
-
const e = window.localStorage.getItem(b);
|
|
132
|
-
return e && l.includes(e) ? e : null;
|
|
133
|
-
}
|
|
134
|
-
function t(e) {
|
|
135
|
-
typeof window > "u" || window.localStorage.setItem(b, e);
|
|
136
|
-
}
|
|
137
|
-
return (e, o) => (g(), B(r(R), {
|
|
138
|
-
open: m.value,
|
|
139
|
-
"onUpdate:open": o[3] || (o[3] = (i) => m.value = i),
|
|
183
|
+
), (a, s) => (D(), U(l($), {
|
|
184
|
+
open: f.value,
|
|
185
|
+
"onUpdate:open": s[3] || (s[3] = (d) => f.value = d),
|
|
140
186
|
text: "Theme",
|
|
141
187
|
"aria-label": "Select theme mode"
|
|
142
188
|
}, {
|
|
143
|
-
default:
|
|
144
|
-
|
|
145
|
-
default:
|
|
146
|
-
|
|
147
|
-
checked:
|
|
148
|
-
"onUpdate:checked":
|
|
189
|
+
default: g(() => [
|
|
190
|
+
k(l(C), { title: "Theme" }, {
|
|
191
|
+
default: g(() => [
|
|
192
|
+
k(l(E), {
|
|
193
|
+
checked: c.value,
|
|
194
|
+
"onUpdate:checked": s[0] || (s[0] = (d) => c.value = d),
|
|
149
195
|
value: "auto",
|
|
150
|
-
label:
|
|
151
|
-
"aria-label": `${
|
|
196
|
+
label: l(n).auto,
|
|
197
|
+
"aria-label": `${l(n).auto} mode`
|
|
152
198
|
}, null, 8, ["checked", "label", "aria-label"]),
|
|
153
|
-
|
|
199
|
+
s[4] || (s[4] = B("hr", {
|
|
154
200
|
class: "theme-switcher-divider",
|
|
155
201
|
role: "separator"
|
|
156
202
|
}, null, -1)),
|
|
157
|
-
|
|
158
|
-
checked:
|
|
159
|
-
"onUpdate:checked":
|
|
203
|
+
k(l(E), {
|
|
204
|
+
checked: c.value,
|
|
205
|
+
"onUpdate:checked": s[1] || (s[1] = (d) => c.value = d),
|
|
160
206
|
value: "light",
|
|
161
|
-
label:
|
|
162
|
-
"aria-label": `${
|
|
207
|
+
label: l(n).light,
|
|
208
|
+
"aria-label": `${l(n).light} mode`
|
|
163
209
|
}, null, 8, ["checked", "label", "aria-label"]),
|
|
164
|
-
|
|
165
|
-
checked:
|
|
166
|
-
"onUpdate:checked":
|
|
210
|
+
k(l(E), {
|
|
211
|
+
checked: c.value,
|
|
212
|
+
"onUpdate:checked": s[2] || (s[2] = (d) => c.value = d),
|
|
167
213
|
value: "dark",
|
|
168
|
-
label:
|
|
169
|
-
"aria-label": `${
|
|
214
|
+
label: l(n).dark,
|
|
215
|
+
"aria-label": `${l(n).dark} mode`
|
|
170
216
|
}, null, 8, ["checked", "label", "aria-label"])
|
|
171
217
|
]),
|
|
172
218
|
_: 1
|
|
@@ -175,43 +221,43 @@ const A = { class: "theme" }, U = "(prefers-color-scheme: dark)", L = "(prefers-
|
|
|
175
221
|
_: 1
|
|
176
222
|
}, 8, ["open"]));
|
|
177
223
|
}
|
|
178
|
-
},
|
|
224
|
+
}, ee = /* @__PURE__ */ H(q, [["__scopeId", "data-v-9b82a61c"]]), te = "hsl(225, 90%, 16%)", oe = "#061f80", y = "hsl(225, 94%, 35%)", ne = "#06c", re = "hsl(210, 100%, 50%)", se = "hsl(210, 100%, 93%)", ce = "hsl(225, 100%, 96%)", ae = "hsl(12, 91%, 46%)", ie = "hsl(11, 100%, 59%)", le = "hsl(40, 100%, 50%)", de = "hsl(46, 100%, 50%)", ue = "hsl(120, 100%, 25%)", me = "#36b37e", fe = "hsl(0, 0%, 0%)", he = "hsl(218, 76%, 15%)", pe = "hsla(0,0%,10%,.9)", ke = "hsla(0,0%,10%,.6)", ve = "hsl(218, 20%, 39%)", Me = "hsl(218, 17%, 44%)", we = "hsl(218, 14%, 49%)", Ee = "hsl(218, 14%, 54%)", Ne = "hsl(218, 13%, 59%)", _e = "hsl(218, 13%, 64%)", ge = "hsl(217, 13%, 69%)", De = "hsl(223, 12%, 89%)", be = "hsl(228, 14%, 93%)", Se = "hsl(210, 7%, 95%)", ye = "hsl(220, 16%, 96%)", Oe = "hsl(210, 25%, 98%)", Re = "hsl(0, 0%, 98%)", W = "hsl(0, 0%, 100%)", Te = y, Ie = y, Ae = W;
|
|
179
225
|
export {
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
226
|
+
ce as B100,
|
|
227
|
+
se as B200,
|
|
228
|
+
re as B300,
|
|
229
|
+
ne as B400,
|
|
230
|
+
y as B500,
|
|
231
|
+
oe as B600,
|
|
232
|
+
te as B900,
|
|
233
|
+
me as G300,
|
|
234
|
+
ue as G500,
|
|
235
|
+
W as N0,
|
|
236
|
+
Oe as N10,
|
|
237
|
+
Ee as N100,
|
|
238
|
+
fe as N1000,
|
|
239
|
+
ye as N20,
|
|
240
|
+
we as N200,
|
|
241
|
+
Se as N25,
|
|
242
|
+
be as N30,
|
|
243
|
+
Me as N300,
|
|
244
|
+
De as N40,
|
|
245
|
+
ve as N400,
|
|
246
|
+
Re as N5,
|
|
247
|
+
ke as N500,
|
|
248
|
+
ge as N70,
|
|
249
|
+
_e as N80,
|
|
250
|
+
pe as N800,
|
|
251
|
+
Ne as N90,
|
|
252
|
+
he as N900,
|
|
253
|
+
ie as R300,
|
|
254
|
+
ae as R400,
|
|
255
|
+
Z as Theme,
|
|
256
|
+
ee as ThemeSwitcher,
|
|
257
|
+
de as Y200,
|
|
258
|
+
le as Y300,
|
|
259
|
+
Te as primary1,
|
|
260
|
+
Ie as primary2,
|
|
261
|
+
Ae as primary3
|
|
216
262
|
};
|
|
217
263
|
//# sourceMappingURL=theme.es.js.map
|
package/dist/theme.es.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"theme.es.js","sources":["../src/Theme.vue","../src/ThemeSwitcher.vue","../src/colors.js"],"sourcesContent":["<template>\n <div class=\"theme\">\n <slot />\n </div>\n</template>\n\n<script setup>\nimport { provide, ref, watch, onBeforeUnmount } from \"vue\";\nimport \"what-input\";\n\ndefineOptions({\n name: \"Theme\",\n});\nconst props = defineProps({\n mode: {\n type: String,\n default: \"auto\",\n validator: (value) => [\"auto\", \"light\", \"dark\"].includes(value),\n },\n});\n\nconst DARK_MODE_QUERY = \"(prefers-color-scheme: dark)\";\nconst PREFERS_REDUCED_MOTION_QUERY = \"(prefers-reduced-motion: reduce)\";\nconst THEME_TRANSITION_DURATION = 200;\nconst darkModeMedia = window.matchMedia(DARK_MODE_QUERY);\nconst prefersReducedMotionMedia = window.matchMedia(\n PREFERS_REDUCED_MOTION_QUERY,\n);\n\nconst theme = ref({\n darkMode: resolveDarkMode(props.mode),\n});\n\ndarkModeMedia.addEventListener(\"change\", handleSystemPreferenceChange);\n\n// Set the color-scheme meta tag.\nvar colorSchemeMeta = document.createElement(\"meta\");\ncolorSchemeMeta.name = \"color-scheme\";\ncolorSchemeMeta.setAttribute(\"content\", \"light dark\");\ndocument.getElementsByTagName(\"head\")[0].appendChild(colorSchemeMeta);\n\nwatch(\n () => props.mode,\n () => {\n syncDarkMode();\n },\n { immediate: true },\n);\n\nwatch(\n () => theme.value.darkMode,\n (darkMode, previousValue) => {\n if (previousValue === undefined) {\n setDocumentDarkModeAttribute(darkMode);\n return;\n }\n withThemeTransition(() => {\n setDocumentDarkModeAttribute(darkMode);\n });\n },\n { immediate: true },\n);\n\nonBeforeUnmount(() => {\n darkModeMedia.removeEventListener(\"change\", handleSystemPreferenceChange);\n});\n\nfunction syncDarkMode() {\n theme.value.darkMode = resolveDarkMode(props.mode);\n}\n\nfunction resolveDarkMode(mode) {\n if (mode === \"dark\") {\n return true;\n }\n if (mode === \"light\") {\n return false;\n }\n return darkModeMedia.matches;\n}\n\nfunction handleSystemPreferenceChange(event) {\n if (!event || props.mode !== \"auto\") {\n return;\n }\n theme.value.darkMode = event.matches;\n}\n\nfunction setDocumentDarkModeAttribute(darkMode) {\n document.documentElement.setAttribute(\"dark-mode\", darkMode);\n}\n\nfunction withThemeTransition(applyTheme) {\n if (prefersReducedMotionMedia.matches) {\n applyTheme();\n return;\n }\n const startViewTransition = document.startViewTransition?.bind(document);\n if (startViewTransition) {\n startViewTransition(() => {\n applyTheme();\n });\n return;\n }\n applyTheme();\n const element = document.documentElement;\n if (typeof element.animate !== \"function\") {\n return;\n }\n window.requestAnimationFrame(() => {\n element.animate(\n [\n { opacity: 0.85 },\n { opacity: 1 },\n ],\n {\n duration: THEME_TRANSITION_DURATION,\n easing: \"ease-in-out\",\n },\n );\n });\n}\n\nprovide(\"theme\", theme);\n</script>\n\n<style lang=\"less\">\n@import \"index.less\";\n</style>\n","<template>\n <DropdownMenu\n v-model:open=\"open\"\n text=\"Theme\"\n aria-label=\"Select theme mode\"\n >\n <DropdownItemGroup title=\"Theme\">\n <DropdownItemRadio\n v-model:checked=\"internalMode\"\n value=\"auto\"\n :label=\"MODE_LABELS.auto\"\n :aria-label=\"`${MODE_LABELS.auto} mode`\"\n />\n <hr class=\"theme-switcher-divider\" role=\"separator\" />\n <DropdownItemRadio\n v-model:checked=\"internalMode\"\n value=\"light\"\n :label=\"MODE_LABELS.light\"\n :aria-label=\"`${MODE_LABELS.light} mode`\"\n />\n <DropdownItemRadio\n v-model:checked=\"internalMode\"\n value=\"dark\"\n :label=\"MODE_LABELS.dark\"\n :aria-label=\"`${MODE_LABELS.dark} mode`\"\n />\n </DropdownItemGroup>\n </DropdownMenu>\n</template>\n\n<script setup>\nimport { ref, computed, watch } from \"vue\";\nimport {\n DropdownMenu,\n DropdownItemGroup,\n DropdownItemRadio,\n} from \"@gospore/dropdown-menu\";\n\nconst MODE_OPTIONS = [\n { value: \"auto\", label: \"System\" },\n { value: \"light\", label: \"Light\" },\n { value: \"dark\", label: \"Dark\" },\n];\nconst MODE_LABELS = MODE_OPTIONS.reduce((map, option) => {\n map[option.value] = option.label;\n return map;\n}, {});\nconst VALID_MODES = MODE_OPTIONS.map((option) => option.value);\nconst STORAGE_KEY = \"gospore-theme-mode\";\n\nconst props = defineProps({\n mode: {\n type: String,\n default: \"auto\",\n validator: (value) => [\"auto\", \"light\", \"dark\"].includes(value),\n },\n});\nconst emit = defineEmits([\"update:mode\"]);\n\nconst open = ref(false);\nconst initialMode = readStoredMode() ?? props.mode;\nconst internalMode = ref(\n VALID_MODES.includes(initialMode) ? initialMode : \"auto\",\n);\nconst label = computed(\n () => MODE_LABELS[internalMode.value] ?? MODE_LABELS.auto,\n);\n\nwatch(\n () => props.mode,\n (mode) => {\n if (VALID_MODES.includes(mode) && mode !== internalMode.value) {\n internalMode.value = mode;\n }\n },\n);\n\nwatch(\n internalMode,\n (mode) => {\n if (!VALID_MODES.includes(mode)) {\n internalMode.value = \"auto\";\n return;\n }\n open.value = false;\n emit(\"update:mode\", mode);\n writeStoredMode(mode);\n },\n { immediate: true },\n);\n\nfunction readStoredMode() {\n if (typeof window === \"undefined\") {\n return null;\n }\n const stored = window.localStorage.getItem(STORAGE_KEY);\n return stored && VALID_MODES.includes(stored) ? stored : null;\n}\n\nfunction writeStoredMode(mode) {\n if (typeof window === \"undefined\") {\n return;\n }\n window.localStorage.setItem(STORAGE_KEY, mode);\n}\n</script>\n\n<style scoped lang=\"less\">\n.theme-switcher-divider {\n margin: 4px 0;\n background-color: var(--go-color-n20);\n}\n\n[dark-mode=\"true\"] {\n .theme-switcher-divider {\n background-color: var(--background-color-secondary-dark);\n }\n}\n</style>\n","// Blues\nexport const B900 = \"hsl(225, 90%, 16%)\";\n// @go-color-b700 = #000e7f;\nexport const B600 = \"#061f80\";\nexport const B500 = \"hsl(225, 94%, 35%)\";\n// @go-color-b550 = #131ff2;\n// @go-color-b500 = #001dff;\n// @go-color-b400 = #3333ff;\nexport const B400 = \"#06c\";\nexport const B300 = \"hsl(210, 100%, 50%)\";\nexport const B200 = \"hsl(210, 100%, 93%)\";\nexport const B100 = \"hsl(225, 100%, 96%)\";\n\n// Reds\nexport const R400 = \"hsl(12, 91%, 46%)\";\nexport const R300 = \"hsl(11, 100%, 59%)\";\n\n// Yellows\nexport const Y300 = \"hsl(40, 100%, 50%)\";\nexport const Y200 = \"hsl(46, 100%, 50%)\";\n\n// Greens\nexport const G500 = \"hsl(120, 100%, 25%)\";\nexport const G300 = \"#36b37e\";\n\n// Neutrals\nexport const N1000 = \"hsl(0, 0%, 0%)\";\nexport const N900 = \"hsl(218, 76%, 15%)\";\n// @go-color-n900 = hsl(218, 54%, 20%);\nexport const N800 = \"hsla(0,0%,10%,.9)\";\nexport const N500 = \"hsla(0,0%,10%,.6)\";\nexport const N400 = \"hsl(218, 20%, 39%)\";\nexport const N300 = \"hsl(218, 17%, 44%)\";\nexport const N200 = \"hsl(218, 14%, 49%)\";\nexport const N100 = \"hsl(218, 14%, 54%)\";\nexport const N90 = \"hsl(218, 13%, 59%)\";\nexport const N80 = \"hsl(218, 13%, 64%)\";\nexport const N70 = \"hsl(217, 13%, 69%)\";\nexport const N40 = \"hsl(223, 12%, 89%)\";\nexport const N30 = \"hsl(228, 14%, 93%)\";\nexport const N25 = \"hsl(210, 7%, 95%)\";\nexport const N20 = \"hsl(220, 16%, 96%)\";\nexport const N10 = \"hsl(210, 25%, 98%)\";\nexport const N5 = \"hsl(0, 0%, 98%)\";\nexport const N0 = \"hsl(0, 0%, 100%)\";\n\n// Primary color palette\nexport const primary1 = B500;\nexport const primary2 = B500;\nexport const primary3 = N0;\n"],"names":["props","__props","darkModeMedia","DARK_MODE_QUERY","prefersReducedMotionMedia","PREFERS_REDUCED_MOTION_QUERY","theme","ref","resolveDarkMode","handleSystemPreferenceChange","colorSchemeMeta","watch","syncDarkMode","darkMode","previousValue","setDocumentDarkModeAttribute","withThemeTransition","onBeforeUnmount","mode","event","applyTheme","startViewTransition","element","THEME_TRANSITION_DURATION","provide","_openBlock","_createElementBlock","_hoisted_1","_renderSlot","_ctx","MODE_OPTIONS","MODE_LABELS","map","option","VALID_MODES","emit","__emit","open","initialMode","readStoredMode","internalMode","computed","writeStoredMode","stored","STORAGE_KEY","_createBlock","_unref","DropdownMenu","$event","_createVNode","DropdownItemGroup","DropdownItemRadio","_createElementVNode","B900","B600","B500","B400","B300","B200","B100","R400","R300","Y300","Y200","G500","G300","N1000","N900","N800","N500","N400","N300","N200","N100","N90","N80","N70","N40","N30","N25","N20","N10","N5","N0","primary1","primary2","primary3"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"theme.es.js","sources":["../src/modeStorage.js","../src/Theme.vue","../src/ThemeSwitcher.vue","../src/colors.js"],"sourcesContent":["const VALID_THEME_MODES = [\"auto\", \"light\", \"dark\"];\nconst STORAGE_KEY = \"gospore-theme-mode\";\nconst ONE_YEAR_IN_SECONDS = 60 * 60 * 24 * 365;\nconst DARK_MODE_QUERY = \"(prefers-color-scheme: dark)\";\n\nexport function readStoredMode() {\n if (typeof document === \"undefined\") {\n return null;\n }\n const stored = getCookie(STORAGE_KEY);\n return stored && VALID_THEME_MODES.includes(stored) ? stored : null;\n}\n\nexport function writeStoredMode(mode) {\n if (typeof document === \"undefined\" || !VALID_THEME_MODES.includes(mode)) {\n return;\n }\n const hostname =\n typeof window !== \"undefined\" ? window.location.hostname : \"\";\n const protocol =\n typeof window !== \"undefined\" ? window.location.protocol : \"\";\n const domain = getCookieDomain(hostname);\n const secure = protocol === \"https:\";\n const attributes = [\n \"path=/\",\n `max-age=${ONE_YEAR_IN_SECONDS}`,\n \"SameSite=Lax\",\n ];\n if (domain) {\n attributes.push(`domain=${domain}`);\n }\n if (secure) {\n attributes.push(\"Secure\");\n }\n document.cookie = [\n `${encodeURIComponent(STORAGE_KEY)}=${encodeURIComponent(mode)}`,\n ...attributes,\n ].join(\"; \");\n}\n\nexport function applyStoredModeToDocument(mode) {\n if (typeof document === \"undefined\") {\n return;\n }\n const resolvedMode =\n typeof mode === \"string\" && VALID_THEME_MODES.includes(mode)\n ? mode\n : readStoredMode() ?? \"auto\";\n console.log(\"Applying theme mode:\", resolvedMode);\n const darkMode = resolveDarkMode(resolvedMode);\n document.documentElement.setAttribute(\"dark-mode\", darkMode);\n}\n\nexport { VALID_THEME_MODES, STORAGE_KEY };\n\nfunction getCookie(name) {\n if (typeof document === \"undefined\" || !document.cookie) {\n return null;\n }\n const encodedName = `${encodeURIComponent(name)}=`;\n const cookies = document.cookie.split(\"; \");\n for (const cookie of cookies) {\n if (cookie.startsWith(encodedName)) {\n return decodeURIComponent(cookie.slice(encodedName.length));\n }\n }\n return null;\n}\n\nfunction getCookieDomain(hostname) {\n if (!hostname || hostname === \"localhost\") {\n return null;\n }\n const isIpAddress = /^\\d+(?:\\.\\d+){3}$/.test(hostname);\n if (isIpAddress) {\n return hostname;\n }\n const parts = hostname.split(\".\");\n if (parts.length <= 1) {\n return null;\n }\n if (parts.length === 2) {\n return hostname;\n }\n return parts.slice(-2).join(\".\");\n}\n\nfunction resolveDarkMode(mode) {\n if (mode === \"dark\") {\n return true;\n }\n if (mode === \"light\") {\n return false;\n }\n if (typeof window === \"undefined\") {\n return false;\n }\n try {\n const mediaQueryList =\n typeof window.matchMedia === \"function\"\n ? window.matchMedia(DARK_MODE_QUERY)\n : null;\n return mediaQueryList ? mediaQueryList.matches : false;\n } catch (error) {\n return false;\n }\n}\n","<template>\n <div class=\"theme\">\n <slot />\n </div>\n</template>\n\n<script setup>\nimport { provide, ref, watch, onBeforeUnmount } from \"vue\";\nimport { applyStoredModeToDocument, readStoredMode } from \"./modeStorage\";\nimport \"what-input\";\n\ndefineOptions({\n name: \"Theme\",\n});\nconst props = defineProps({\n mode: {\n type: String,\n validator: (value) => [\"auto\", \"light\", \"dark\"].includes(value),\n },\n});\n\nconst DARK_MODE_QUERY = \"(prefers-color-scheme: dark)\";\nconst PREFERS_REDUCED_MOTION_QUERY = \"(prefers-reduced-motion: reduce)\";\nconst THEME_TRANSITION_DURATION = 200;\nconst darkModeMedia = window.matchMedia(DARK_MODE_QUERY);\nconst prefersReducedMotionMedia = window.matchMedia(\n PREFERS_REDUCED_MOTION_QUERY,\n);\n\nconst initialMode = getEffectiveMode();\napplyStoredModeToDocument(initialMode);\n\nconst currentMode = ref(initialMode);\n\nconst theme = ref({\n darkMode: resolveDarkMode(initialMode),\n});\n\ndarkModeMedia.addEventListener(\"change\", handleSystemPreferenceChange);\n\nwatch(\n () => props.mode,\n () => {\n syncDarkMode();\n },\n { immediate: true },\n);\n\nwatch(\n () => theme.value.darkMode,\n (darkMode, previousValue) => {\n if (previousValue === undefined) {\n setDocumentDarkModeAttribute(darkMode);\n return;\n }\n withThemeTransition(() => {\n setDocumentDarkModeAttribute(darkMode);\n });\n },\n { immediate: true },\n);\n\nonBeforeUnmount(() => {\n darkModeMedia.removeEventListener(\"change\", handleSystemPreferenceChange);\n});\n\nfunction syncDarkMode() {\n const mode = getEffectiveMode();\n currentMode.value = mode;\n theme.value.darkMode = resolveDarkMode(mode);\n}\n\nfunction resolveDarkMode(mode) {\n if (mode === \"dark\") {\n return true;\n }\n if (mode === \"light\") {\n return false;\n }\n return darkModeMedia.matches;\n}\n\nfunction handleSystemPreferenceChange(event) {\n if (!event || currentMode.value !== \"auto\") {\n return;\n }\n theme.value.darkMode = event.matches;\n}\n\nfunction setDocumentDarkModeAttribute(darkMode) {\n document.documentElement.setAttribute(\"dark-mode\", darkMode);\n}\n\nfunction withThemeTransition(applyTheme) {\n if (prefersReducedMotionMedia.matches) {\n applyTheme();\n return;\n }\n const startViewTransition = document.startViewTransition?.bind(document);\n if (startViewTransition) {\n startViewTransition(() => {\n applyTheme();\n });\n return;\n }\n applyTheme();\n const element = document.documentElement;\n if (typeof element.animate !== \"function\") {\n return;\n }\n window.requestAnimationFrame(() => {\n element.animate([{ opacity: 0.85 }, { opacity: 1 }], {\n duration: THEME_TRANSITION_DURATION,\n easing: \"ease-in-out\",\n });\n });\n}\n\nfunction getEffectiveMode() {\n return props.mode ?? readStoredMode() ?? \"auto\";\n}\n\nprovide(\"theme\", theme);\n</script>\n\n<style lang=\"less\">\n@import \"index.less\";\n</style>\n","<template>\n <DropdownMenu\n v-model:open=\"open\"\n text=\"Theme\"\n aria-label=\"Select theme mode\"\n >\n <DropdownItemGroup title=\"Theme\">\n <DropdownItemRadio\n v-model:checked=\"internalMode\"\n value=\"auto\"\n :label=\"MODE_LABELS.auto\"\n :aria-label=\"`${MODE_LABELS.auto} mode`\"\n />\n <hr class=\"theme-switcher-divider\" role=\"separator\" />\n <DropdownItemRadio\n v-model:checked=\"internalMode\"\n value=\"light\"\n :label=\"MODE_LABELS.light\"\n :aria-label=\"`${MODE_LABELS.light} mode`\"\n />\n <DropdownItemRadio\n v-model:checked=\"internalMode\"\n value=\"dark\"\n :label=\"MODE_LABELS.dark\"\n :aria-label=\"`${MODE_LABELS.dark} mode`\"\n />\n </DropdownItemGroup>\n </DropdownMenu>\n</template>\n\n<script setup>\nimport { ref, computed, watch } from \"vue\";\nimport {\n DropdownMenu,\n DropdownItemGroup,\n DropdownItemRadio,\n} from \"@gospore/dropdown-menu\";\nimport {\n readStoredMode,\n writeStoredMode,\n VALID_THEME_MODES,\n applyStoredModeToDocument,\n} from \"./modeStorage\";\n\nconst MODE_OPTIONS = [\n { value: \"auto\", label: \"System\" },\n { value: \"light\", label: \"Light\" },\n { value: \"dark\", label: \"Dark\" },\n];\nconst MODE_LABELS = MODE_OPTIONS.reduce((map, option) => {\n map[option.value] = option.label;\n return map;\n}, {});\nconst VALID_MODES = VALID_THEME_MODES;\n\nconst props = defineProps({\n mode: {\n type: String,\n default: \"auto\",\n validator: (value) => [\"auto\", \"light\", \"dark\"].includes(value),\n },\n});\nconst emit = defineEmits([\"update:mode\"]);\n\napplyStoredModeToDocument();\n\nconst open = ref(false);\nconst initialMode = readStoredMode() ?? props.mode;\nconst internalMode = ref(\n VALID_MODES.includes(initialMode) ? initialMode : \"auto\",\n);\nconst label = computed(\n () => MODE_LABELS[internalMode.value] ?? MODE_LABELS.auto,\n);\n\nwatch(\n () => props.mode,\n (mode) => {\n if (VALID_MODES.includes(mode) && mode !== internalMode.value) {\n internalMode.value = mode;\n }\n },\n);\n\nwatch(\n internalMode,\n (mode) => {\n if (!VALID_MODES.includes(mode)) {\n internalMode.value = \"auto\";\n return;\n }\n open.value = false;\n emit(\"update:mode\", mode);\n writeStoredMode(mode);\n },\n { immediate: true },\n);\n\n</script>\n\n<style scoped lang=\"less\">\n.theme-switcher-divider {\n margin: 4px 0;\n background-color: var(--go-color-n20);\n}\n\n[dark-mode=\"true\"] {\n .theme-switcher-divider {\n background-color: var(--background-color-secondary-dark);\n }\n}\n</style>\n","// Blues\nexport const B900 = \"hsl(225, 90%, 16%)\";\n// @go-color-b700 = #000e7f;\nexport const B600 = \"#061f80\";\nexport const B500 = \"hsl(225, 94%, 35%)\";\n// @go-color-b550 = #131ff2;\n// @go-color-b500 = #001dff;\n// @go-color-b400 = #3333ff;\nexport const B400 = \"#06c\";\nexport const B300 = \"hsl(210, 100%, 50%)\";\nexport const B200 = \"hsl(210, 100%, 93%)\";\nexport const B100 = \"hsl(225, 100%, 96%)\";\n\n// Reds\nexport const R400 = \"hsl(12, 91%, 46%)\";\nexport const R300 = \"hsl(11, 100%, 59%)\";\n\n// Yellows\nexport const Y300 = \"hsl(40, 100%, 50%)\";\nexport const Y200 = \"hsl(46, 100%, 50%)\";\n\n// Greens\nexport const G500 = \"hsl(120, 100%, 25%)\";\nexport const G300 = \"#36b37e\";\n\n// Neutrals\nexport const N1000 = \"hsl(0, 0%, 0%)\";\nexport const N900 = \"hsl(218, 76%, 15%)\";\n// @go-color-n900 = hsl(218, 54%, 20%);\nexport const N800 = \"hsla(0,0%,10%,.9)\";\nexport const N500 = \"hsla(0,0%,10%,.6)\";\nexport const N400 = \"hsl(218, 20%, 39%)\";\nexport const N300 = \"hsl(218, 17%, 44%)\";\nexport const N200 = \"hsl(218, 14%, 49%)\";\nexport const N100 = \"hsl(218, 14%, 54%)\";\nexport const N90 = \"hsl(218, 13%, 59%)\";\nexport const N80 = \"hsl(218, 13%, 64%)\";\nexport const N70 = \"hsl(217, 13%, 69%)\";\nexport const N40 = \"hsl(223, 12%, 89%)\";\nexport const N30 = \"hsl(228, 14%, 93%)\";\nexport const N25 = \"hsl(210, 7%, 95%)\";\nexport const N20 = \"hsl(220, 16%, 96%)\";\nexport const N10 = \"hsl(210, 25%, 98%)\";\nexport const N5 = \"hsl(0, 0%, 98%)\";\nexport const N0 = \"hsl(0, 0%, 100%)\";\n\n// Primary color palette\nexport const primary1 = B500;\nexport const primary2 = B500;\nexport const primary3 = N0;\n"],"names":["VALID_THEME_MODES","STORAGE_KEY","ONE_YEAR_IN_SECONDS","DARK_MODE_QUERY","readStoredMode","stored","getCookie","writeStoredMode","mode","hostname","protocol","domain","getCookieDomain","secure","attributes","applyStoredModeToDocument","resolvedMode","darkMode","resolveDarkMode","name","encodedName","cookies","cookie","parts","mediaQueryList","props","__props","darkModeMedia","prefersReducedMotionMedia","PREFERS_REDUCED_MOTION_QUERY","initialMode","getEffectiveMode","currentMode","ref","theme","handleSystemPreferenceChange","watch","syncDarkMode","previousValue","setDocumentDarkModeAttribute","withThemeTransition","onBeforeUnmount","event","applyTheme","startViewTransition","element","THEME_TRANSITION_DURATION","provide","_openBlock","_createElementBlock","_hoisted_1","_renderSlot","_ctx","MODE_LABELS","map","option","VALID_MODES","emit","__emit","open","internalMode","computed","_createBlock","_unref","DropdownMenu","$event","_createVNode","DropdownItemGroup","DropdownItemRadio","_createElementVNode","B900","B600","B500","B400","B300","B200","B100","R400","R300","Y300","Y200","G500","G300","N1000","N900","N800","N500","N400","N300","N200","N100","N90","N80","N70","N40","N30","N25","N20","N10","N5","N0","primary1","primary2","primary3"],"mappings":"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"}
|
package/dist/theme.umd.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
(function(e,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue"),require("what-input"),require("@gospore/dropdown-menu")):typeof define=="function"&&define.amd?define(["exports","vue","what-input","@gospore/dropdown-menu"],t):(e=typeof globalThis<"u"?globalThis:e||self,t(e.theme={},e.Vue,e.whatInput,e.DropdownMenu))})(this,function(e,t,
|
|
1
|
+
(function(e,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue"),require("what-input"),require("@gospore/dropdown-menu")):typeof define=="function"&&define.amd?define(["exports","vue","what-input","@gospore/dropdown-menu"],t):(e=typeof globalThis<"u"?globalThis:e||self,t(e.theme={},e.Vue,e.whatInput,e.DropdownMenu))})(this,function(e,t,he,h){"use strict";const w=["auto","light","dark"],M="gospore-theme-mode",S="(prefers-color-scheme: dark)";function _(){if(typeof document>"u")return null;const n=R(M);return n&&w.includes(n)?n:null}function b(n){if(typeof document>"u"||!w.includes(n))return;const o=typeof window<"u"?window.location.hostname:"",a=typeof window<"u"?window.location.protocol:"",i=I(o),s=a==="https:",f=["path=/","max-age=31536000","SameSite=Lax"];i&&f.push(`domain=${i}`),s&&f.push("Secure"),document.cookie=[`${encodeURIComponent(M)}=${encodeURIComponent(n)}`,...f].join("; ")}function g(n){if(typeof document>"u")return;const o=typeof n=="string"&&w.includes(n)?n:_()??"auto";console.log("Applying theme mode:",o);const a=O(o);document.documentElement.setAttribute("dark-mode",a)}function R(n){if(typeof document>"u"||!document.cookie)return null;const o=`${encodeURIComponent(n)}=`,a=document.cookie.split("; ");for(const i of a)if(i.startsWith(o))return decodeURIComponent(i.slice(o.length));return null}function I(n){if(!n||n==="localhost")return null;if(/^\d+(?:\.\d+){3}$/.test(n))return n;const a=n.split(".");return a.length<=1?null:a.length===2?n:a.slice(-2).join(".")}function O(n){if(n==="dark")return!0;if(n==="light"||typeof window>"u")return!1;try{const o=typeof window.matchMedia=="function"?window.matchMedia(S):null;return o?o.matches:!1}catch{return!1}}const T={class:"theme"},B="(prefers-color-scheme: dark)",A="(prefers-reduced-motion: reduce)",U=200,C=Object.assign({name:"Theme"},{__name:"Theme",props:{mode:{type:String,validator:n=>["auto","light","dark"].includes(n)}},setup(n){const o=n,a=window.matchMedia(B),i=window.matchMedia(A),s=u();g(s);const f=t.ref(s),m=t.ref({darkMode:p(s)});a.addEventListener("change",d),t.watch(()=>o.mode,()=>{N()},{immediate:!0}),t.watch(()=>m.value.darkMode,(c,k)=>{if(k===void 0){l(c);return}r(()=>{l(c)})},{immediate:!0}),t.onBeforeUnmount(()=>{a.removeEventListener("change",d)});function N(){const c=u();f.value=c,m.value.darkMode=p(c)}function p(c){return c==="dark"?!0:c==="light"?!1:a.matches}function d(c){!c||f.value!=="auto"||(m.value.darkMode=c.matches)}function l(c){document.documentElement.setAttribute("dark-mode",c)}function r(c){if(i.matches){c();return}const k=document.startViewTransition?.bind(document);if(k){k(()=>{c()});return}c();const D=document.documentElement;typeof D.animate=="function"&&window.requestAnimationFrame(()=>{D.animate([{opacity:.85},{opacity:1}],{duration:U,easing:"ease-in-out"})})}function u(){return o.mode??_()??"auto"}return t.provide("theme",m),(c,k)=>(t.openBlock(),t.createElementBlock("div",T,[t.renderSlot(c.$slots,"default")]))}}),$=((n,o)=>{const a=n.__vccOpts||n;for(const[i,s]of o)a[i]=s;return a})({__name:"ThemeSwitcher",props:{mode:{type:String,default:"auto",validator:n=>["auto","light","dark"].includes(n)}},emits:["update:mode"],setup(n,{emit:o}){const i=[{value:"auto",label:"System"},{value:"light",label:"Light"},{value:"dark",label:"Dark"}].reduce((l,r)=>(l[r.value]=r.label,l),{}),s=w,f=n,m=o;g();const N=t.ref(!1),p=_()??f.mode,d=t.ref(s.includes(p)?p:"auto");return t.computed(()=>i[d.value]??i.auto),t.watch(()=>f.mode,l=>{s.includes(l)&&l!==d.value&&(d.value=l)}),t.watch(d,l=>{if(!s.includes(l)){d.value="auto";return}N.value=!1,m("update:mode",l),b(l)},{immediate:!0}),(l,r)=>(t.openBlock(),t.createBlock(t.unref(h.DropdownMenu),{open:N.value,"onUpdate:open":r[3]||(r[3]=u=>N.value=u),text:"Theme","aria-label":"Select theme mode"},{default:t.withCtx(()=>[t.createVNode(t.unref(h.DropdownItemGroup),{title:"Theme"},{default:t.withCtx(()=>[t.createVNode(t.unref(h.DropdownItemRadio),{checked:d.value,"onUpdate:checked":r[0]||(r[0]=u=>d.value=u),value:"auto",label:t.unref(i).auto,"aria-label":`${t.unref(i).auto} mode`},null,8,["checked","label","aria-label"]),r[4]||(r[4]=t.createElementVNode("hr",{class:"theme-switcher-divider",role:"separator"},null,-1)),t.createVNode(t.unref(h.DropdownItemRadio),{checked:d.value,"onUpdate:checked":r[1]||(r[1]=u=>d.value=u),value:"light",label:t.unref(i).light,"aria-label":`${t.unref(i).light} mode`},null,8,["checked","label","aria-label"]),t.createVNode(t.unref(h.DropdownItemRadio),{checked:d.value,"onUpdate:checked":r[2]||(r[2]=u=>d.value=u),value:"dark",label:t.unref(i).dark,"aria-label":`${t.unref(i).dark} mode`},null,8,["checked","label","aria-label"])]),_:1})]),_:1},8,["open"]))}},[["__scopeId","data-v-9b82a61c"]]),V="hsl(225, 90%, 16%)",Y="#061f80",E="hsl(225, 94%, 35%)",v="#06c",L="hsl(210, 100%, 50%)",G="hsl(210, 100%, 93%)",j="hsl(225, 100%, 96%)",P="hsl(12, 91%, 46%)",q="hsl(11, 100%, 59%)",Q="hsl(40, 100%, 50%)",K="hsl(46, 100%, 50%)",F="hsl(120, 100%, 25%)",H="#36b37e",W="hsl(0, 0%, 0%)",z="hsl(218, 76%, 15%)",J="hsla(0,0%,10%,.9)",X="hsla(0,0%,10%,.6)",Z="hsl(218, 20%, 39%)",x="hsl(218, 17%, 44%)",ee="hsl(218, 14%, 49%)",te="hsl(218, 14%, 54%)",ne="hsl(218, 13%, 59%)",oe="hsl(218, 13%, 64%)",ce="hsl(217, 13%, 69%)",ie="hsl(223, 12%, 89%)",ae="hsl(228, 14%, 93%)",re="hsl(210, 7%, 95%)",de="hsl(220, 16%, 96%)",le="hsl(210, 25%, 98%)",se="hsl(0, 0%, 98%)",y="hsl(0, 0%, 100%)",ue=E,fe=E,me=y;e.B100=j,e.B200=G,e.B300=L,e.B400=v,e.B500=E,e.B600=Y,e.B900=V,e.G300=H,e.G500=F,e.N0=y,e.N10=le,e.N100=te,e.N1000=W,e.N20=de,e.N200=ee,e.N25=re,e.N30=ae,e.N300=x,e.N40=ie,e.N400=Z,e.N5=se,e.N500=X,e.N70=ce,e.N80=oe,e.N800=J,e.N90=ne,e.N900=z,e.R300=q,e.R400=P,e.Theme=C,e.ThemeSwitcher=$,e.Y200=K,e.Y300=Q,e.primary1=ue,e.primary2=fe,e.primary3=me,Object.defineProperty(e,Symbol.toStringTag,{value:"Module"})});
|
|
2
2
|
//# sourceMappingURL=theme.umd.js.map
|
package/dist/theme.umd.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"theme.umd.js","sources":["../src/Theme.vue","../src/ThemeSwitcher.vue","../src/colors.js"],"sourcesContent":["<template>\n <div class=\"theme\">\n <slot />\n </div>\n</template>\n\n<script setup>\nimport { provide, ref, watch, onBeforeUnmount } from \"vue\";\nimport \"what-input\";\n\ndefineOptions({\n name: \"Theme\",\n});\nconst props = defineProps({\n mode: {\n type: String,\n default: \"auto\",\n validator: (value) => [\"auto\", \"light\", \"dark\"].includes(value),\n },\n});\n\nconst DARK_MODE_QUERY = \"(prefers-color-scheme: dark)\";\nconst PREFERS_REDUCED_MOTION_QUERY = \"(prefers-reduced-motion: reduce)\";\nconst THEME_TRANSITION_DURATION = 200;\nconst darkModeMedia = window.matchMedia(DARK_MODE_QUERY);\nconst prefersReducedMotionMedia = window.matchMedia(\n PREFERS_REDUCED_MOTION_QUERY,\n);\n\nconst theme = ref({\n darkMode: resolveDarkMode(props.mode),\n});\n\ndarkModeMedia.addEventListener(\"change\", handleSystemPreferenceChange);\n\n// Set the color-scheme meta tag.\nvar colorSchemeMeta = document.createElement(\"meta\");\ncolorSchemeMeta.name = \"color-scheme\";\ncolorSchemeMeta.setAttribute(\"content\", \"light dark\");\ndocument.getElementsByTagName(\"head\")[0].appendChild(colorSchemeMeta);\n\nwatch(\n () => props.mode,\n () => {\n syncDarkMode();\n },\n { immediate: true },\n);\n\nwatch(\n () => theme.value.darkMode,\n (darkMode, previousValue) => {\n if (previousValue === undefined) {\n setDocumentDarkModeAttribute(darkMode);\n return;\n }\n withThemeTransition(() => {\n setDocumentDarkModeAttribute(darkMode);\n });\n },\n { immediate: true },\n);\n\nonBeforeUnmount(() => {\n darkModeMedia.removeEventListener(\"change\", handleSystemPreferenceChange);\n});\n\nfunction syncDarkMode() {\n theme.value.darkMode = resolveDarkMode(props.mode);\n}\n\nfunction resolveDarkMode(mode) {\n if (mode === \"dark\") {\n return true;\n }\n if (mode === \"light\") {\n return false;\n }\n return darkModeMedia.matches;\n}\n\nfunction handleSystemPreferenceChange(event) {\n if (!event || props.mode !== \"auto\") {\n return;\n }\n theme.value.darkMode = event.matches;\n}\n\nfunction setDocumentDarkModeAttribute(darkMode) {\n document.documentElement.setAttribute(\"dark-mode\", darkMode);\n}\n\nfunction withThemeTransition(applyTheme) {\n if (prefersReducedMotionMedia.matches) {\n applyTheme();\n return;\n }\n const startViewTransition = document.startViewTransition?.bind(document);\n if (startViewTransition) {\n startViewTransition(() => {\n applyTheme();\n });\n return;\n }\n applyTheme();\n const element = document.documentElement;\n if (typeof element.animate !== \"function\") {\n return;\n }\n window.requestAnimationFrame(() => {\n element.animate(\n [\n { opacity: 0.85 },\n { opacity: 1 },\n ],\n {\n duration: THEME_TRANSITION_DURATION,\n easing: \"ease-in-out\",\n },\n );\n });\n}\n\nprovide(\"theme\", theme);\n</script>\n\n<style lang=\"less\">\n@import \"index.less\";\n</style>\n","<template>\n <DropdownMenu\n v-model:open=\"open\"\n text=\"Theme\"\n aria-label=\"Select theme mode\"\n >\n <DropdownItemGroup title=\"Theme\">\n <DropdownItemRadio\n v-model:checked=\"internalMode\"\n value=\"auto\"\n :label=\"MODE_LABELS.auto\"\n :aria-label=\"`${MODE_LABELS.auto} mode`\"\n />\n <hr class=\"theme-switcher-divider\" role=\"separator\" />\n <DropdownItemRadio\n v-model:checked=\"internalMode\"\n value=\"light\"\n :label=\"MODE_LABELS.light\"\n :aria-label=\"`${MODE_LABELS.light} mode`\"\n />\n <DropdownItemRadio\n v-model:checked=\"internalMode\"\n value=\"dark\"\n :label=\"MODE_LABELS.dark\"\n :aria-label=\"`${MODE_LABELS.dark} mode`\"\n />\n </DropdownItemGroup>\n </DropdownMenu>\n</template>\n\n<script setup>\nimport { ref, computed, watch } from \"vue\";\nimport {\n DropdownMenu,\n DropdownItemGroup,\n DropdownItemRadio,\n} from \"@gospore/dropdown-menu\";\n\nconst MODE_OPTIONS = [\n { value: \"auto\", label: \"System\" },\n { value: \"light\", label: \"Light\" },\n { value: \"dark\", label: \"Dark\" },\n];\nconst MODE_LABELS = MODE_OPTIONS.reduce((map, option) => {\n map[option.value] = option.label;\n return map;\n}, {});\nconst VALID_MODES = MODE_OPTIONS.map((option) => option.value);\nconst STORAGE_KEY = \"gospore-theme-mode\";\n\nconst props = defineProps({\n mode: {\n type: String,\n default: \"auto\",\n validator: (value) => [\"auto\", \"light\", \"dark\"].includes(value),\n },\n});\nconst emit = defineEmits([\"update:mode\"]);\n\nconst open = ref(false);\nconst initialMode = readStoredMode() ?? props.mode;\nconst internalMode = ref(\n VALID_MODES.includes(initialMode) ? initialMode : \"auto\",\n);\nconst label = computed(\n () => MODE_LABELS[internalMode.value] ?? MODE_LABELS.auto,\n);\n\nwatch(\n () => props.mode,\n (mode) => {\n if (VALID_MODES.includes(mode) && mode !== internalMode.value) {\n internalMode.value = mode;\n }\n },\n);\n\nwatch(\n internalMode,\n (mode) => {\n if (!VALID_MODES.includes(mode)) {\n internalMode.value = \"auto\";\n return;\n }\n open.value = false;\n emit(\"update:mode\", mode);\n writeStoredMode(mode);\n },\n { immediate: true },\n);\n\nfunction readStoredMode() {\n if (typeof window === \"undefined\") {\n return null;\n }\n const stored = window.localStorage.getItem(STORAGE_KEY);\n return stored && VALID_MODES.includes(stored) ? stored : null;\n}\n\nfunction writeStoredMode(mode) {\n if (typeof window === \"undefined\") {\n return;\n }\n window.localStorage.setItem(STORAGE_KEY, mode);\n}\n</script>\n\n<style scoped lang=\"less\">\n.theme-switcher-divider {\n margin: 4px 0;\n background-color: var(--go-color-n20);\n}\n\n[dark-mode=\"true\"] {\n .theme-switcher-divider {\n background-color: var(--background-color-secondary-dark);\n }\n}\n</style>\n","// Blues\nexport const B900 = \"hsl(225, 90%, 16%)\";\n// @go-color-b700 = #000e7f;\nexport const B600 = \"#061f80\";\nexport const B500 = \"hsl(225, 94%, 35%)\";\n// @go-color-b550 = #131ff2;\n// @go-color-b500 = #001dff;\n// @go-color-b400 = #3333ff;\nexport const B400 = \"#06c\";\nexport const B300 = \"hsl(210, 100%, 50%)\";\nexport const B200 = \"hsl(210, 100%, 93%)\";\nexport const B100 = \"hsl(225, 100%, 96%)\";\n\n// Reds\nexport const R400 = \"hsl(12, 91%, 46%)\";\nexport const R300 = \"hsl(11, 100%, 59%)\";\n\n// Yellows\nexport const Y300 = \"hsl(40, 100%, 50%)\";\nexport const Y200 = \"hsl(46, 100%, 50%)\";\n\n// Greens\nexport const G500 = \"hsl(120, 100%, 25%)\";\nexport const G300 = \"#36b37e\";\n\n// Neutrals\nexport const N1000 = \"hsl(0, 0%, 0%)\";\nexport const N900 = \"hsl(218, 76%, 15%)\";\n// @go-color-n900 = hsl(218, 54%, 20%);\nexport const N800 = \"hsla(0,0%,10%,.9)\";\nexport const N500 = \"hsla(0,0%,10%,.6)\";\nexport const N400 = \"hsl(218, 20%, 39%)\";\nexport const N300 = \"hsl(218, 17%, 44%)\";\nexport const N200 = \"hsl(218, 14%, 49%)\";\nexport const N100 = \"hsl(218, 14%, 54%)\";\nexport const N90 = \"hsl(218, 13%, 59%)\";\nexport const N80 = \"hsl(218, 13%, 64%)\";\nexport const N70 = \"hsl(217, 13%, 69%)\";\nexport const N40 = \"hsl(223, 12%, 89%)\";\nexport const N30 = \"hsl(228, 14%, 93%)\";\nexport const N25 = \"hsl(210, 7%, 95%)\";\nexport const N20 = \"hsl(220, 16%, 96%)\";\nexport const N10 = \"hsl(210, 25%, 98%)\";\nexport const N5 = \"hsl(0, 0%, 98%)\";\nexport const N0 = \"hsl(0, 0%, 100%)\";\n\n// Primary color palette\nexport const primary1 = B500;\nexport const primary2 = B500;\nexport const primary3 = N0;\n"],"names":["props","__props","darkModeMedia","DARK_MODE_QUERY","prefersReducedMotionMedia","PREFERS_REDUCED_MOTION_QUERY","theme","ref","resolveDarkMode","handleSystemPreferenceChange","colorSchemeMeta","watch","syncDarkMode","darkMode","previousValue","setDocumentDarkModeAttribute","withThemeTransition","onBeforeUnmount","mode","event","applyTheme","startViewTransition","element","THEME_TRANSITION_DURATION","provide","_openBlock","_createElementBlock","_hoisted_1","_renderSlot","_ctx","MODE_OPTIONS","MODE_LABELS","map","option","VALID_MODES","emit","__emit","open","initialMode","readStoredMode","internalMode","computed","writeStoredMode","stored","STORAGE_KEY","_createBlock","_unref","DropdownMenu","$event","_createVNode","DropdownItemGroup","DropdownItemRadio","_createElementVNode","B900","B600","B500","B400","B300","B200","B100","R400","R300","Y300","Y200","G500","G300","N1000","N900","N800","N500","N400","N300","N200","N100","N90","N80","N70","N40","N30","N25","N20","N10","N5","N0","primary1","primary2","primary3"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"theme.umd.js","sources":["../src/modeStorage.js","../src/Theme.vue","../src/ThemeSwitcher.vue","../src/colors.js"],"sourcesContent":["const VALID_THEME_MODES = [\"auto\", \"light\", \"dark\"];\nconst STORAGE_KEY = \"gospore-theme-mode\";\nconst ONE_YEAR_IN_SECONDS = 60 * 60 * 24 * 365;\nconst DARK_MODE_QUERY = \"(prefers-color-scheme: dark)\";\n\nexport function readStoredMode() {\n if (typeof document === \"undefined\") {\n return null;\n }\n const stored = getCookie(STORAGE_KEY);\n return stored && VALID_THEME_MODES.includes(stored) ? stored : null;\n}\n\nexport function writeStoredMode(mode) {\n if (typeof document === \"undefined\" || !VALID_THEME_MODES.includes(mode)) {\n return;\n }\n const hostname =\n typeof window !== \"undefined\" ? window.location.hostname : \"\";\n const protocol =\n typeof window !== \"undefined\" ? window.location.protocol : \"\";\n const domain = getCookieDomain(hostname);\n const secure = protocol === \"https:\";\n const attributes = [\n \"path=/\",\n `max-age=${ONE_YEAR_IN_SECONDS}`,\n \"SameSite=Lax\",\n ];\n if (domain) {\n attributes.push(`domain=${domain}`);\n }\n if (secure) {\n attributes.push(\"Secure\");\n }\n document.cookie = [\n `${encodeURIComponent(STORAGE_KEY)}=${encodeURIComponent(mode)}`,\n ...attributes,\n ].join(\"; \");\n}\n\nexport function applyStoredModeToDocument(mode) {\n if (typeof document === \"undefined\") {\n return;\n }\n const resolvedMode =\n typeof mode === \"string\" && VALID_THEME_MODES.includes(mode)\n ? mode\n : readStoredMode() ?? \"auto\";\n console.log(\"Applying theme mode:\", resolvedMode);\n const darkMode = resolveDarkMode(resolvedMode);\n document.documentElement.setAttribute(\"dark-mode\", darkMode);\n}\n\nexport { VALID_THEME_MODES, STORAGE_KEY };\n\nfunction getCookie(name) {\n if (typeof document === \"undefined\" || !document.cookie) {\n return null;\n }\n const encodedName = `${encodeURIComponent(name)}=`;\n const cookies = document.cookie.split(\"; \");\n for (const cookie of cookies) {\n if (cookie.startsWith(encodedName)) {\n return decodeURIComponent(cookie.slice(encodedName.length));\n }\n }\n return null;\n}\n\nfunction getCookieDomain(hostname) {\n if (!hostname || hostname === \"localhost\") {\n return null;\n }\n const isIpAddress = /^\\d+(?:\\.\\d+){3}$/.test(hostname);\n if (isIpAddress) {\n return hostname;\n }\n const parts = hostname.split(\".\");\n if (parts.length <= 1) {\n return null;\n }\n if (parts.length === 2) {\n return hostname;\n }\n return parts.slice(-2).join(\".\");\n}\n\nfunction resolveDarkMode(mode) {\n if (mode === \"dark\") {\n return true;\n }\n if (mode === \"light\") {\n return false;\n }\n if (typeof window === \"undefined\") {\n return false;\n }\n try {\n const mediaQueryList =\n typeof window.matchMedia === \"function\"\n ? window.matchMedia(DARK_MODE_QUERY)\n : null;\n return mediaQueryList ? mediaQueryList.matches : false;\n } catch (error) {\n return false;\n }\n}\n","<template>\n <div class=\"theme\">\n <slot />\n </div>\n</template>\n\n<script setup>\nimport { provide, ref, watch, onBeforeUnmount } from \"vue\";\nimport { applyStoredModeToDocument, readStoredMode } from \"./modeStorage\";\nimport \"what-input\";\n\ndefineOptions({\n name: \"Theme\",\n});\nconst props = defineProps({\n mode: {\n type: String,\n validator: (value) => [\"auto\", \"light\", \"dark\"].includes(value),\n },\n});\n\nconst DARK_MODE_QUERY = \"(prefers-color-scheme: dark)\";\nconst PREFERS_REDUCED_MOTION_QUERY = \"(prefers-reduced-motion: reduce)\";\nconst THEME_TRANSITION_DURATION = 200;\nconst darkModeMedia = window.matchMedia(DARK_MODE_QUERY);\nconst prefersReducedMotionMedia = window.matchMedia(\n PREFERS_REDUCED_MOTION_QUERY,\n);\n\nconst initialMode = getEffectiveMode();\napplyStoredModeToDocument(initialMode);\n\nconst currentMode = ref(initialMode);\n\nconst theme = ref({\n darkMode: resolveDarkMode(initialMode),\n});\n\ndarkModeMedia.addEventListener(\"change\", handleSystemPreferenceChange);\n\nwatch(\n () => props.mode,\n () => {\n syncDarkMode();\n },\n { immediate: true },\n);\n\nwatch(\n () => theme.value.darkMode,\n (darkMode, previousValue) => {\n if (previousValue === undefined) {\n setDocumentDarkModeAttribute(darkMode);\n return;\n }\n withThemeTransition(() => {\n setDocumentDarkModeAttribute(darkMode);\n });\n },\n { immediate: true },\n);\n\nonBeforeUnmount(() => {\n darkModeMedia.removeEventListener(\"change\", handleSystemPreferenceChange);\n});\n\nfunction syncDarkMode() {\n const mode = getEffectiveMode();\n currentMode.value = mode;\n theme.value.darkMode = resolveDarkMode(mode);\n}\n\nfunction resolveDarkMode(mode) {\n if (mode === \"dark\") {\n return true;\n }\n if (mode === \"light\") {\n return false;\n }\n return darkModeMedia.matches;\n}\n\nfunction handleSystemPreferenceChange(event) {\n if (!event || currentMode.value !== \"auto\") {\n return;\n }\n theme.value.darkMode = event.matches;\n}\n\nfunction setDocumentDarkModeAttribute(darkMode) {\n document.documentElement.setAttribute(\"dark-mode\", darkMode);\n}\n\nfunction withThemeTransition(applyTheme) {\n if (prefersReducedMotionMedia.matches) {\n applyTheme();\n return;\n }\n const startViewTransition = document.startViewTransition?.bind(document);\n if (startViewTransition) {\n startViewTransition(() => {\n applyTheme();\n });\n return;\n }\n applyTheme();\n const element = document.documentElement;\n if (typeof element.animate !== \"function\") {\n return;\n }\n window.requestAnimationFrame(() => {\n element.animate([{ opacity: 0.85 }, { opacity: 1 }], {\n duration: THEME_TRANSITION_DURATION,\n easing: \"ease-in-out\",\n });\n });\n}\n\nfunction getEffectiveMode() {\n return props.mode ?? readStoredMode() ?? \"auto\";\n}\n\nprovide(\"theme\", theme);\n</script>\n\n<style lang=\"less\">\n@import \"index.less\";\n</style>\n","<template>\n <DropdownMenu\n v-model:open=\"open\"\n text=\"Theme\"\n aria-label=\"Select theme mode\"\n >\n <DropdownItemGroup title=\"Theme\">\n <DropdownItemRadio\n v-model:checked=\"internalMode\"\n value=\"auto\"\n :label=\"MODE_LABELS.auto\"\n :aria-label=\"`${MODE_LABELS.auto} mode`\"\n />\n <hr class=\"theme-switcher-divider\" role=\"separator\" />\n <DropdownItemRadio\n v-model:checked=\"internalMode\"\n value=\"light\"\n :label=\"MODE_LABELS.light\"\n :aria-label=\"`${MODE_LABELS.light} mode`\"\n />\n <DropdownItemRadio\n v-model:checked=\"internalMode\"\n value=\"dark\"\n :label=\"MODE_LABELS.dark\"\n :aria-label=\"`${MODE_LABELS.dark} mode`\"\n />\n </DropdownItemGroup>\n </DropdownMenu>\n</template>\n\n<script setup>\nimport { ref, computed, watch } from \"vue\";\nimport {\n DropdownMenu,\n DropdownItemGroup,\n DropdownItemRadio,\n} from \"@gospore/dropdown-menu\";\nimport {\n readStoredMode,\n writeStoredMode,\n VALID_THEME_MODES,\n applyStoredModeToDocument,\n} from \"./modeStorage\";\n\nconst MODE_OPTIONS = [\n { value: \"auto\", label: \"System\" },\n { value: \"light\", label: \"Light\" },\n { value: \"dark\", label: \"Dark\" },\n];\nconst MODE_LABELS = MODE_OPTIONS.reduce((map, option) => {\n map[option.value] = option.label;\n return map;\n}, {});\nconst VALID_MODES = VALID_THEME_MODES;\n\nconst props = defineProps({\n mode: {\n type: String,\n default: \"auto\",\n validator: (value) => [\"auto\", \"light\", \"dark\"].includes(value),\n },\n});\nconst emit = defineEmits([\"update:mode\"]);\n\napplyStoredModeToDocument();\n\nconst open = ref(false);\nconst initialMode = readStoredMode() ?? props.mode;\nconst internalMode = ref(\n VALID_MODES.includes(initialMode) ? initialMode : \"auto\",\n);\nconst label = computed(\n () => MODE_LABELS[internalMode.value] ?? MODE_LABELS.auto,\n);\n\nwatch(\n () => props.mode,\n (mode) => {\n if (VALID_MODES.includes(mode) && mode !== internalMode.value) {\n internalMode.value = mode;\n }\n },\n);\n\nwatch(\n internalMode,\n (mode) => {\n if (!VALID_MODES.includes(mode)) {\n internalMode.value = \"auto\";\n return;\n }\n open.value = false;\n emit(\"update:mode\", mode);\n writeStoredMode(mode);\n },\n { immediate: true },\n);\n\n</script>\n\n<style scoped lang=\"less\">\n.theme-switcher-divider {\n margin: 4px 0;\n background-color: var(--go-color-n20);\n}\n\n[dark-mode=\"true\"] {\n .theme-switcher-divider {\n background-color: var(--background-color-secondary-dark);\n }\n}\n</style>\n","// Blues\nexport const B900 = \"hsl(225, 90%, 16%)\";\n// @go-color-b700 = #000e7f;\nexport const B600 = \"#061f80\";\nexport const B500 = \"hsl(225, 94%, 35%)\";\n// @go-color-b550 = #131ff2;\n// @go-color-b500 = #001dff;\n// @go-color-b400 = #3333ff;\nexport const B400 = \"#06c\";\nexport const B300 = \"hsl(210, 100%, 50%)\";\nexport const B200 = \"hsl(210, 100%, 93%)\";\nexport const B100 = \"hsl(225, 100%, 96%)\";\n\n// Reds\nexport const R400 = \"hsl(12, 91%, 46%)\";\nexport const R300 = \"hsl(11, 100%, 59%)\";\n\n// Yellows\nexport const Y300 = \"hsl(40, 100%, 50%)\";\nexport const Y200 = \"hsl(46, 100%, 50%)\";\n\n// Greens\nexport const G500 = \"hsl(120, 100%, 25%)\";\nexport const G300 = \"#36b37e\";\n\n// Neutrals\nexport const N1000 = \"hsl(0, 0%, 0%)\";\nexport const N900 = \"hsl(218, 76%, 15%)\";\n// @go-color-n900 = hsl(218, 54%, 20%);\nexport const N800 = \"hsla(0,0%,10%,.9)\";\nexport const N500 = \"hsla(0,0%,10%,.6)\";\nexport const N400 = \"hsl(218, 20%, 39%)\";\nexport const N300 = \"hsl(218, 17%, 44%)\";\nexport const N200 = \"hsl(218, 14%, 49%)\";\nexport const N100 = \"hsl(218, 14%, 54%)\";\nexport const N90 = \"hsl(218, 13%, 59%)\";\nexport const N80 = \"hsl(218, 13%, 64%)\";\nexport const N70 = \"hsl(217, 13%, 69%)\";\nexport const N40 = \"hsl(223, 12%, 89%)\";\nexport const N30 = \"hsl(228, 14%, 93%)\";\nexport const N25 = \"hsl(210, 7%, 95%)\";\nexport const N20 = \"hsl(220, 16%, 96%)\";\nexport const N10 = \"hsl(210, 25%, 98%)\";\nexport const N5 = \"hsl(0, 0%, 98%)\";\nexport const N0 = \"hsl(0, 0%, 100%)\";\n\n// Primary color palette\nexport const primary1 = B500;\nexport const primary2 = B500;\nexport const primary3 = N0;\n"],"names":["VALID_THEME_MODES","STORAGE_KEY","DARK_MODE_QUERY","readStoredMode","stored","getCookie","writeStoredMode","mode","hostname","protocol","domain","getCookieDomain","secure","attributes","applyStoredModeToDocument","resolvedMode","darkMode","resolveDarkMode","name","encodedName","cookies","cookie","parts","mediaQueryList","props","__props","darkModeMedia","prefersReducedMotionMedia","PREFERS_REDUCED_MOTION_QUERY","initialMode","getEffectiveMode","currentMode","ref","theme","handleSystemPreferenceChange","watch","syncDarkMode","previousValue","setDocumentDarkModeAttribute","withThemeTransition","onBeforeUnmount","event","applyTheme","startViewTransition","element","THEME_TRANSITION_DURATION","provide","_openBlock","_createElementBlock","_hoisted_1","_renderSlot","_ctx","MODE_LABELS","map","option","VALID_MODES","emit","__emit","open","internalMode","computed","_createBlock","_unref","DropdownMenu","$event","_createVNode","DropdownItemGroup","DropdownItemRadio","_createElementVNode","B900","B600","B500","B400","B300","B200","B100","R400","R300","Y300","Y200","G500","G300","N1000","N900","N800","N500","N400","N300","N200","N100","N90","N80","N70","N40","N30","N25","N20","N10","N5","N0","primary1","primary2","primary3"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gospore/theme",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.123",
|
|
4
4
|
"description": "",
|
|
5
5
|
"author": "Gospore",
|
|
6
6
|
"type": "module",
|
|
@@ -34,5 +34,5 @@
|
|
|
34
34
|
"unplugin-vue-macros": "^2.14.5",
|
|
35
35
|
"vite": "^7.1.9"
|
|
36
36
|
},
|
|
37
|
-
"gitHead": "
|
|
37
|
+
"gitHead": "86999130cd1fa29f924a110a622e33b075643181"
|
|
38
38
|
}
|