amotify 0.0.13 → 0.0.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "amotify",
-  "version": "0.0.13",
+  "version": "0.0.15",
   "description": "UI Component for React",
   "main": "dist/launch.js",
   "types": "dist/@types.d.ts",
@@ -21,43 +21,48 @@
     "UI Component",
     "React"
   ],
-  "author": "",
+  "author": "IkkoKoyama <mingoo.master@gmail.com>",
   "license": "MIT",
   "bugs": {
     "url": "https://github.com/IkkoKoyama/amotify/issues"
   },
   "homepage": "https://github.com/IkkoKoyama/amotify#readme",
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.4.2",
+    "@fortawesome/free-brands-svg-icons": "^6.4.2",
+    "@fortawesome/pro-regular-svg-icons": "^6.4.2",
+    "@fortawesome/pro-solid-svg-icons": "^6.4.2",
+    "@fortawesome/react-fontawesome": "^0.2.0",
+    "jsmin-front": "^0.0.15",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.19.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.17.0",
-    "@babel/preset-env": "^7.16.11",
-    "@babel/preset-react": "^7.16.7",
-    "@babel/preset-typescript": "^7.16.7",
-    "@types/express": "^4.17.13",
-    "@types/google.maps": "^3.50.0",
+    "@babel/cli": "^7.23.0",
+    "@babel/preset-env": "^7.23.3",
+    "@babel/preset-react": "^7.23.3",
+    "@babel/preset-typescript": "^7.23.3",
+    "@types/express": "^4.17.21",
+    "@types/google.maps": "^3.54.8",
     "@types/react": "^18.2.37",
     "@types/react-dom": "^18.2.15",
-    "babel-loader": "^8.2.3",
+    "babel-loader": "^9.1.3",
     "babel-preset-preact": "^2.0.0",
     "browser-sync-webpack-plugin": "^2.3.0",
-    "css-loader": "^6.6.0",
-    "dotenv": "^16.0.3",
-    "express": "^4.17.2",
-    "jsmin-front": "^0.0.5",
+    "css-loader": "^6.8.1",
+    "dotenv": "^16.3.1",
+    "express": "^4.18.2",
     "mini-css-extract-plugin": "^2.7.6",
     "npm-run-all": "^4.1.5",
     "prop-types": "^15.8.1",
-    "sass": "^1.49.8",
-    "sass-loader": "^12.6.0",
-    "terser-webpack-plugin": "^5.3.1",
-    "ts-loader": "^9.2.8",
-    "webpack": "^5.69.1",
-    "webpack-bundle-analyzer": "^4.5.0",
-    "webpack-cli": "^4.9.2",
-    "webpack-remove-empty-scripts": "^0.7.3"
+    "sass": "^1.69.5",
+    "sass-loader": "^13.3.2",
+    "terser-webpack-plugin": "^5.3.9",
+    "ts-loader": "^9.5.1",
+    "webpack": "^5.89.0",
+    "webpack-bundle-analyzer": "^4.10.1",
+    "webpack-cli": "^5.1.4",
+    "webpack-remove-empty-scripts": "^1.0.4"
   }
-}
+}

package/src/@atoms.tsx

@@ -9,7 +9,9 @@ import {
   Placeholder
 } from './atoms/Various/parts';
 
-import { FAIcon } from './atoms/FAIcon/parts';
+import {
+  FAI
+} from './atoms/FAI/parts';
 
 import { Logo } from './atoms/Logo/parts';
 
@@ -17,7 +19,7 @@ export {
   Flex,
   FlexBr,
 
-  FAIcon,
+  FAI,
 
   Placeholder,
 

package/src/@global.tsx

@@ -1,9 +1,11 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import * as ReactRouterDOM from 'react-router-dom';
+import { baseElements } from './launch';
 
 import { LaunchReactApplication } from './global/LaunchReactApplication';
 
+export { baseElements }
 const Inmemory: {
   [ key: string ]: {
     privateKey?: string
@@ -128,6 +130,9 @@ const StyleConverter = {
   ToClassName
 }
 
+if ( !global.React ) global.React = React;
+if ( !global.ReactDOM ) global.ReactDOM = ReactDOM;
+
 export {
   React,
   ReactDOM,

package/src/@jsminAmotifyExtension/fetch.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 const fetcher = async ( params: JsminExtension.Fetch.Input & {
   method: string
 },callback?: JsminExtension.Fetch.callback ) => {

package/src/@jsminAmotifyExtension/variables.tsx

@@ -1,3 +1,7 @@
+import {
+  React
+} from '@global';
+
 $.NoticeHttpStatus = ( params ) => {
   let {
     status,

package/src/@organisms.tsx

@@ -1,5 +1 @@
-import { DisplayStyleInput } from './organisms/DisplayStyleInput/_';
-
-export {
-  DisplayStyleInput
-}
+export {}

package/src/@styles/UniStyling.scss

@@ -166,6 +166,9 @@
       &3#{ $DS } {
         font-weight: bold;
       }
+      &inherit#{ $DS } {
+        font-weight: inherit;
+      }
     }
   }
   &bgc {
@@ -556,6 +559,9 @@
         &dotted#{ $DS } {
           border-style: dotted;
         }
+        &none#{ $DS } {
+          border-style: none;
+        }
       }
     }
     &r_ {

package/src/@styles/init.scss

@@ -1,12 +1,4 @@
 @use './props' as *;
-* {
-  padding: 0;
-  margin: 0;
-  box-sizing: border-box;
-  &:before, &:after {
-    box-sizing: border-box;
-  }
-}
 html {
   &.usrDevice_ {
     &Windows {
@@ -28,15 +20,26 @@ html {
     &iPhone {}
     &iPad {}
   }
-  * {
-    line-height: 1.5;
-    &::selection {
-      background-color: $color-theme !important;
-      color: #fff !important;
-    }
-  }
 }
-body {
+.AMOTIFY_be_body {
+  padding: 0;
+  margin: 0;
+  transition: opacity $animation-time-middle;
+  background-color: $color-dark;
+}
+.AMOTIFY_be_origin {
+  max-width: 200rem;
+  min-height: $viewHeight;
+  background-color: $color-base;
+  position: relative;
+  margin: 0 auto;
+  padding: 0;
+  z-index: 1;
+}
+.AMOTIFY_be {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
   letter-spacing: .5px;
   word-wrap: break-word;
   word-break: normal;
@@ -54,101 +57,34 @@ body {
   font-kerning: normal;
   // -webkit-font-smoothing: antialiased;
   caret-color: $color-theme;
-  transition: opacity $animation-time-middle;
-  background-color: $color-dark;
-  #ROOT {
-    max-width: 200rem;
-    min-height: $viewHeight;
-    background-color: $color-base;
-    position: relative;
-    margin: 0 auto;
+  line-height: 1.5;
+  * {
     padding: 0;
-    z-index: 1;
+    margin: 0;
+    box-sizing: border-box;
+    &:before, &:after {
+      box-sizing: border-box;
+    }
   }
-}
-a, button, label, input, button, select, textarea {
-  display: inline-block;
-  font-size: inherit;
-  font-family: inherit;
-  font-weight: inherit;
-  color: inherit;
-  outline: none;
-  -webkit-appearance: none;
-  -webkit-tap-highlight-color: rgba(#000, 0);
-  touch-action: manipulation;
-  background-color: transparent;
-  border: none;
-  border-style: none;
-  text-decoration: none;
-}
-input, select, textarea {
-  &[ disabled] {
-    box-shadow: none !important;
-    background-color: $color-layer3 !important;
-    color: $font-color5 !important;
-    filter: grayscale(50%);
-    cursor: not-allowed !important;
+  * {
+    &::selection {
+      background-color: $color-theme !important;
+      color: #fff !important;
+    }
   }
-}
-a, button, label, select {
-  cursor: pointer;
-}
-input, textarea {
-  cursor: text;
-}
-input, textarea {
-  &::placeholder {
+  button, a, label, input, select, textarea {
+    line-height: inherit;
     font-family: inherit;
-    color: $font-color5;
-  }
-}
-input {
-  &:-webkit-autofill {
-    box-shadow: 0 0 0 100rem $color-layer3 inset !important;
-    -webkit-text-fill-color: $font-color3;
-  }
-  &[ type="radio"], &[ type="checkbox"], &[ type="file"] {
-    opacity: 0;
-    width: 0;
-    height: 0;
-    overflow: hidden;
-    position: absolute;
-    appearance: none;
+    outline: none;
+    -webkit-appearance: none;
+    -webkit-tap-highlight-color: rgba(#000, 0);
+    touch-action: manipulation;
   }
-  min-width: 0;
-  display: block;
-  &[ type="text"], &[ type="number"] {
-    width: 100%;
+  button, a, label {
+    cursor: pointer;
   }
-  &[ type="number"] {
-    &::-webkit-inner-spin-button,
-    &::-webkit-outer-spin-button {
-      -webkit-appearance: none;
-    }
+  svg {
+    vertical-align: top;
+    object-fit: cover;
   }
-}
-textarea {
-  display: block;
-  width: 100%;
-  min-height: $unit4;
-}
-a, label, button, canvas {
-  vertical-align: bottom;
-}
-svg {
-  vertical-align: top;
-  object-fit: cover;
-  height: 100%;
-}
-img {
-  user-drag: none;
-  -webkit-user-drag: none;
-  -moz-user-select: none;
-}
-img, video, iframe {
-  vertical-align: top;
-  object-fit: cover;
-  width: 100%;
-  height: 100%;
-  border-radius: inherit;
 }

package/src/@variables.tsx

@@ -0,0 +1,70 @@
+export const launchID = $.uuidGen();
+
+export const ColorKeys: amotify.ThemeColorTypes[] = [
+  'comun',
+  'leaf',
+  'heart',
+  'droplet',
+  'brick',
+  'flower',
+  'lip',
+  'wine',
+  'theater',
+  'bat',
+  'poizon',
+  'eggplant',
+  'ufo',
+  'alien',
+  'tombstone',
+  'ninja',
+  'moon',
+  'rain',
+  'unicorn',
+  'axe',
+  'gem',
+  'soap',
+  'drizzle',
+  'building',
+  'fish',
+  'icicles',
+  'water',
+  'tree1',
+  'tree2',
+  'tree3',
+  'battery',
+  'seedle',
+  'greenTea',
+  'oak',
+  'salad',
+  'cloudy',
+  'lemon',
+  'angel',
+  'parasol',
+  'pizza',
+  'thunder',
+  'latte',
+  'island',
+  'shovel',
+  'coffee',
+  'carrot',
+  'cactus',
+  'volcano',
+  'choco',
+  'industry',
+  'gun',
+  'galaxy',
+  'line',
+  'twitter',
+  'amazon',
+  'facebook',
+  'android',
+  'slackBlue',
+  'slackGreen',
+  'slackRed',
+  'slackYellow',
+  'slackBase',
+  'googleBlue',
+  'googleGreen',
+  'googleYellow',
+  'googleRed'
+];

package/src/atoms/FAI/parts.tsx

@@ -0,0 +1,136 @@
+import React from 'react';
+import {
+  Box
+} from '../Various/parts';
+
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+import { faUser } from '@fortawesome/pro-solid-svg-icons/faUser';
+import { faTimes } from '@fortawesome/pro-solid-svg-icons/faTimes';
+import { faAngleRight } from '@fortawesome/pro-solid-svg-icons/faAngleRight';
+import { faAngleLeft } from '@fortawesome/pro-solid-svg-icons/faAngleLeft';
+import { faAngleUp } from '@fortawesome/pro-solid-svg-icons/faAngleUp';
+import { faAngleDown } from '@fortawesome/pro-solid-svg-icons/faAngleDown';
+import { faChevronLeft } from '@fortawesome/pro-solid-svg-icons/faChevronLeft';
+import { faChevronRight } from '@fortawesome/pro-solid-svg-icons/faChevronRight';
+import { faChevronUp } from '@fortawesome/pro-solid-svg-icons/faChevronUp';
+import { faChevronDown } from '@fortawesome/pro-solid-svg-icons/faChevronDown';
+import { faCaretLeft } from '@fortawesome/pro-solid-svg-icons/faCaretLeft';
+import { faCaretRight } from '@fortawesome/pro-solid-svg-icons/faCaretRight';
+import { faCaretUp } from '@fortawesome/pro-solid-svg-icons/faCaretUp';
+import { faCaretDown } from '@fortawesome/pro-solid-svg-icons/faCaretDown';
+import { faArrowLeft } from '@fortawesome/pro-solid-svg-icons/faArrowLeft';
+import { faArrowRight } from '@fortawesome/pro-solid-svg-icons/faArrowRight';
+import { faArrowUp } from '@fortawesome/pro-solid-svg-icons/faArrowUp';
+import { faArrowDown } from '@fortawesome/pro-solid-svg-icons/faArrowDown';
+import { faRotate } from '@fortawesome/pro-solid-svg-icons/faRotate';
+import { faRedo } from '@fortawesome/pro-solid-svg-icons/faRedo';
+import { faCheck } from '@fortawesome/pro-solid-svg-icons/faCheck';
+import { faCheckCircle } from '@fortawesome/pro-solid-svg-icons/faCheckCircle';
+import { faQuestion } from '@fortawesome/pro-solid-svg-icons/faQuestion';
+import { faQuestionCircle } from '@fortawesome/pro-solid-svg-icons/faQuestionCircle';
+import { faExclamation } from '@fortawesome/pro-solid-svg-icons/faExclamation';
+import { faExclamationTriangle } from '@fortawesome/pro-solid-svg-icons/faExclamationTriangle';
+import { faHome } from '@fortawesome/pro-solid-svg-icons/faHome';
+import { faShare } from '@fortawesome/pro-solid-svg-icons/faShare';
+import { faSearch } from '@fortawesome/pro-solid-svg-icons/faSearch';
+import { faYenSign } from '@fortawesome/pro-solid-svg-icons/faYenSign';
+import { faHeart } from '@fortawesome/pro-solid-svg-icons/faHeart';
+import { faStar } from '@fortawesome/pro-solid-svg-icons/faStar';
+import { faEdit } from '@fortawesome/pro-solid-svg-icons/faEdit';
+import { faPen } from '@fortawesome/pro-solid-svg-icons/faPen';
+import { faCopy } from '@fortawesome/pro-solid-svg-icons/faCopy';
+import { faFile } from '@fortawesome/pro-solid-svg-icons/faFile';
+import { faTrashAlt } from '@fortawesome/pro-solid-svg-icons/faTrashAlt';
+import { faBars } from '@fortawesome/pro-solid-svg-icons/faBars';
+import { faDownload } from '@fortawesome/pro-solid-svg-icons/faDownload';
+import { faLink } from '@fortawesome/pro-solid-svg-icons/faLink';
+import { faLinkSlash } from '@fortawesome/pro-solid-svg-icons/faLinkSlash';
+import { faExternalLinkAlt } from '@fortawesome/pro-solid-svg-icons/faExternalLinkAlt';
+import { faGear } from '@fortawesome/pro-solid-svg-icons/faGear';
+import { faPlus } from '@fortawesome/pro-solid-svg-icons/faPlus';
+import { faMinus } from '@fortawesome/pro-solid-svg-icons/faMinus';
+import { faEllipsisH } from '@fortawesome/pro-solid-svg-icons/faEllipsisH';
+import { faEllipsisV } from '@fortawesome/pro-solid-svg-icons/faEllipsisV';
+import { faPaperPlane } from '@fortawesome/pro-solid-svg-icons/faPaperPlane';
+import { faImage } from '@fortawesome/pro-solid-svg-icons/faImage';
+
+const FAIComps: React.FC<amotify.atoms.FAI.FAIParams> = ( params ) => {
+  let {
+    icon,
+    iconParams,
+    ...others
+  } = params;
+
+  return <Box
+    flexCenter
+    { ...others }
+    freeCSS={ {
+      display: 'inline-flex',
+      ...others.freeCSS
+    } }
+  >
+    <Box freeCSS={ { aspectRatio: 1 } }>
+      <FontAwesomeIcon
+        icon={ icon }
+        fixedWidth
+        size='sm'
+        { ...iconParams }
+      />
+    </Box>
+  </Box>;
+}
+
+const FAI: amotify.atoms.FAI.Method = FAIComps as any;
+
+FAI.User = ( params ) => ( <FAI { ...params } icon={ faUser } /> );
+FAI.Times = ( params ) => ( <FAI { ...params } icon={ faTimes } /> );
+FAI.AngleRight = ( params ) => ( <FAI { ...params } icon={ faAngleRight } /> );
+FAI.AngleLeft = ( params ) => ( <FAI { ...params } icon={ faAngleLeft } /> );
+FAI.AngleUp = ( params ) => ( <FAI { ...params } icon={ faAngleUp } /> );
+FAI.AngleDown = ( params ) => ( <FAI { ...params } icon={ faAngleDown } /> );
+FAI.ChevronLeft = ( params ) => ( <FAI { ...params } icon={ faChevronLeft } /> );
+FAI.ChevronRight = ( params ) => ( <FAI { ...params } icon={ faChevronRight } /> );
+FAI.ChevronUp = ( params ) => ( <FAI { ...params } icon={ faChevronUp } /> );
+FAI.ChevronDown = ( params ) => ( <FAI { ...params } icon={ faChevronDown } /> );
+FAI.CaretLeft = ( params ) => ( <FAI { ...params } icon={ faCaretLeft } /> );
+FAI.CaretRight = ( params ) => ( <FAI { ...params } icon={ faCaretRight } /> );
+FAI.CaretUp = ( params ) => ( <FAI { ...params } icon={ faCaretUp } /> );
+FAI.CaretDown = ( params ) => ( <FAI { ...params } icon={ faCaretDown } /> );
+FAI.ArrowLeft = ( params ) => ( <FAI { ...params } icon={ faArrowLeft } /> );
+FAI.ArrowRight = ( params ) => ( <FAI { ...params } icon={ faArrowRight } /> );
+FAI.ArrowUp = ( params ) => ( <FAI { ...params } icon={ faArrowUp } /> );
+FAI.ArrowDown = ( params ) => ( <FAI { ...params } icon={ faArrowDown } /> );
+FAI.Rotate = ( params ) => ( <FAI { ...params } icon={ faRotate } /> );
+FAI.Redo = ( params ) => ( <FAI { ...params } icon={ faRedo } /> );
+FAI.Check = ( params ) => ( <FAI { ...params } icon={ faCheck } /> );
+FAI.CheckCircle = ( params ) => ( <FAI { ...params } icon={ faCheckCircle } /> );
+FAI.Question = ( params ) => ( <FAI { ...params } icon={ faQuestion } /> );
+FAI.QuestionCircle = ( params ) => ( <FAI { ...params } icon={ faQuestionCircle } /> );
+FAI.Exclamation = ( params ) => ( <FAI { ...params } icon={ faExclamation } /> );
+FAI.ExclamationTriangle = ( params ) => ( <FAI { ...params } icon={ faExclamationTriangle } /> );
+FAI.Home = ( params ) => ( <FAI { ...params } icon={ faHome } /> );
+FAI.Share = ( params ) => ( <FAI { ...params } icon={ faShare } /> );
+FAI.Search = ( params ) => ( <FAI { ...params } icon={ faSearch } /> );
+FAI.YenSign = ( params ) => ( <FAI { ...params } icon={ faYenSign } /> );
+FAI.Heart = ( params ) => ( <FAI { ...params } icon={ faHeart } /> );
+FAI.Star = ( params ) => ( <FAI { ...params } icon={ faStar } /> );
+FAI.Edit = ( params ) => ( <FAI { ...params } icon={ faEdit } /> );
+FAI.Pen = ( params ) => ( <FAI { ...params } icon={ faPen } /> );
+FAI.Copy = ( params ) => ( <FAI { ...params } icon={ faCopy } /> );
+FAI.File = ( params ) => ( <FAI { ...params } icon={ faFile } /> );
+FAI.TrashAlt = ( params ) => ( <FAI { ...params } icon={ faTrashAlt } /> );
+FAI.Bars = ( params ) => ( <FAI { ...params } icon={ faBars } /> );
+FAI.Download = ( params ) => ( <FAI { ...params } icon={ faDownload } /> );
+FAI.Link = ( params ) => ( <FAI { ...params } icon={ faLink } /> );
+FAI.LinkSlash = ( params ) => ( <FAI { ...params } icon={ faLinkSlash } /> );
+FAI.ExternalLinkAlt = ( params ) => ( <FAI { ...params } icon={ faExternalLinkAlt } /> );
+FAI.Gear = ( params ) => ( <FAI { ...params } icon={ faGear } /> );
+FAI.Plus = ( params ) => ( <FAI { ...params } icon={ faPlus } /> );
+FAI.Minus = ( params ) => ( <FAI { ...params } icon={ faMinus } /> );
+FAI.EllipsisH = ( params ) => ( <FAI { ...params } icon={ faEllipsisH } /> );
+FAI.EllipsisV = ( params ) => ( <FAI { ...params } icon={ faEllipsisV } /> );
+FAI.PaperPlane = ( params ) => ( <FAI { ...params } icon={ faPaperPlane } /> );
+FAI.Image = ( params ) => ( <FAI { ...params } icon={ faImage } /> );
+
+export { FAI }

package/src/atoms/Logo/style.module.scss

@@ -1,5 +1,4 @@
 @use '@props' as *;
-
 .Size_ {
   &S {
     width: $unit2;
@@ -27,15 +26,17 @@
     font-size: $unit4;
   }
 }
-
 .Icon {
-
+  svg {
+    height: 100%;
+  }
 }
 .Title {
   width: auto;
+  svg {
+    height: 100%;
+  }
 }
-
-
 .ComunIcon {
   path {
     filter: drop-shadow($shadow4);

package/src/atoms/Various/style.module.scss

@@ -1,7 +1,14 @@
 @use '@props' as *;
 @use'@styleSet' as *;
-
 .Img {
+  user-drag: none;
+  -webkit-user-drag: none;
+  -moz-user-select: none;
+  vertical-align: top;
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+  border-radius: inherit;
   &.ShowExpand_true {
     transition: $animation-time-middle;
     &:hover {
@@ -28,14 +35,12 @@
     width: 40%;
     background: linear-gradient(to right,
         transparent,
-        $color-layer5
-        );
+        $color-layer5 );
     animation: 1.5s PlaceholderEffect linear infinite;
     &.Color_white {
       background: linear-gradient(to right,
-        transparent,
-        $color-layer3
-        );
+          transparent,
+          $color-layer3 );
     }
   }
 }

package/src/config.tsx

@@ -27,6 +27,9 @@ export const deviceIdentifier = () => {
   return info;
 }
 
+
+import { ColorKeys } from './@variables';
+
 export const SetThemeColorTag = () => {
   let hex = '#45515c';
   let meta = $( '#ThemeColorMetaTag' );
@@ -34,6 +37,29 @@ export const SetThemeColorTag = () => {
   meta.setAttribute( 'content',hex );
 }
 
+const DarkmodeColors: {
+  light: string
+  dark: string
+  dim: string
+  auto(): string
+} = {
+  light: '#FFF',
+  dark: '#333',
+  dim: '#666',
+  auto: () => {
+    return amotify.config.device.isSystemDarkmode() ? '#333' : '#FFF';
+  }
+}
+
+const ThemeColors: {
+  [ key in amotify.ThemeColorTypes ]: {
+    ( alfa?: number ): string
+  }
+} = {} as any;
+ColorKeys.forEach( ( key ) => {
+  ThemeColors[ key ] = ( alfa?: number ) => ( `hsla( var( --cH_${ key } ),var( --cS_${ key } ),var( --cL_${ key } ),${ alfa ?? 1 } ) ` );
+} );
+
 export const defaultConfig: amotify.config.Methods = {
   version: Version,
   tone: 'default',
@@ -61,11 +87,7 @@ export const defaultConfig: amotify.config.Methods = {
       amotify.global.useRecycle.do( 'RootViewController' );
     },
     themeColor: ( value ) => {
-      if ( ![
-        'comun','leaf','heart','droplet',
-        'brick','flower','lip','wine','theater','bat','poizon','eggplant','ufo','alien','tombstone','ninja','moon','rain','unicorn','axe','gem','soap','drizzle','building','fish','icicles','water','tree1','tree2','tree3','battery','seedle','greenTea','oak','salad','cloudy','lemon','angel','parasol','pizza','thunder','latte','island','shovel','coffee','carrot','cactus','volcano','choco','industry','gun','galaxy',
-        'line','twitter','amazon','facebook','android','slackBlue','slackGreen','slackRed','slackYellow','slackBase','googleBlue','googleGreen','googleYellow','googleRed'
-      ].includes( value ) ) value = 'comun';
+      if ( !ColorKeys.includes( value ) ) value = 'comun';
       if ( value == amotify.config.themeColor ) return;
 
       amotify.config.themeColor = value;
@@ -114,6 +136,10 @@ export const defaultConfig: amotify.config.Methods = {
       valid = true;
     }
     return valid;
+  },
+  variables: {
+    themeColors: ThemeColors,
+    darkmodeColors: DarkmodeColors
   }
 }