amotify 0.3.32 → 0.3.34

package/UI_MAP.md

@@ -17,7 +17,7 @@ import { Button, Input, Sheet, ... } from 'amotify'
 
 | 型 | 値 |
 |---|---|
-| `Themecolor` | `'comun' \| 'leaf' \| 'heart' \| 'droplet' \| 'brick' \| 'flower' \| 'lip' \| 'wine' \| 'theater' \| 'bat' \| 'poizon' \| 'ufo' \| 'moon' \| 'rain' \| 'gem' \| 'drizzle' \| 'lemon' \| 'pizza' \| 'coffee' \| 'galaxy' \| ...60+` |
+| `$themecolor.Theme` | `'comun' \| 'leaf' \| 'heart' \| 'droplet' \| 'brick' \| 'flower' \| 'lip' \| 'wine' \| 'theater' \| 'bat' \| 'poizon' \| 'ufo' \| 'moon' \| 'rain' \| 'gem' \| 'drizzle' \| 'lemon' \| 'pizza' \| 'coffee' \| 'galaxy' \| ...60+` |
 | `Darkmode` | `'light' \| 'auto' \| 'dark' \| 'dim'` |
 | `Roundness` | `0 \| 1 \| 2 \| 3 \| 4 \| 5` |
 | `Device` | `'' \| 'windows' \| 'android' \| 'iPhone' \| 'iPad' \| 'macOSX'` |
@@ -41,7 +41,7 @@ import { Button, Input, Sheet, ... } from 'amotify'
 
 **単位 (Pargins.Unit):** `0 \| '1/12' \| '1/6' \| '1/4' \| '1/3' \| '1/2' \| '2/3' \| '3/4' \| 1 \| 1.5 \| 2 \| 2.5 \| 3 \| 4 \| 6 \| 'auto' \| number`
 
-**色 (UniColors):** `'inherit' \| 'theme' \| 'posi' \| 'nega' \| 'warn' \| 'white' \| 'black' \| 'dark' \| Themecolor`
+**色 (UniColors):** `'inherit' \| 'theme' \| 'posi' \| 'nega' \| 'warn' \| 'white' \| 'black' \| 'dark' \| $themecolor.Theme`
 
 **レイヤー色:** `'layer.0' 〜 'layer.6'`
 
@@ -497,11 +497,13 @@ dragEffect.Start('itemType', { startEvent, dragElement }, ({ idx, end }) => {})
 dragEffect.AutoScroll(event)
 ```
 
-### ThemeColors / ColorRecords
+### $themecolor
 ```ts
-ThemeColors.comun.hex          // '#...'
-ThemeColors.heart.alfa(0.5)    // 'rgba(..., 0.5)'
-ColorRecords                   // { name: Themecolor, hex: string, isBrand: boolean }[]
+$themecolor.themes.comun.hex          // '#...'
+$themecolor.themes.heart.alfa(0.5)    // 'hsla(..., 0.5)'
+$themecolor.themes                    // { [key in $themecolor.Theme]: { hex: string, alfa(alfa?: number): string, isBrand?: boolean } }
+$themecolor.setContentTag(hex?, id?) // <meta>タグの content を更新
+type X = $themecolor.Theme           // 色名のユニオン型 ('comun' | 'leaf' | ...)
 ```
 
 ### LaunchReactApp

package/demo/esbuild/designBook.tsx

@@ -6,11 +6,10 @@ import React,{
 } from 'react'
 
 import {
-  Themecolor,
+  $themecolor,
   ReactElement,
   Config,
   LaunchReactApp,
-  ThemeColors,
   Box,
   Span,
   Grid,
@@ -2586,7 +2585,7 @@ const Cropping = () => {
 }
 
 const UserConfig = () => {
-  let [ val_theme,set_theme ] = useState<Themecolor>( Config.get().themeColor )
+  let [ val_theme,set_theme ] = useState<$themecolor.Theme>( Config.get().themeColor )
   useEffect( () => {
     $$.scope( () => {
       if ( val_theme === Config.get().themeColor ) return
@@ -2654,7 +2653,7 @@ const UserConfig = () => {
     <Row.Left>
       <Literal.Paragraph>Color</Literal.Paragraph>
       <Row.Left gap={ '1/6' }>
-        { Object.entries( ThemeColors ).map( ( [ key,themeColor ] ) => {
+        { Object.entries( $themecolor.themes ).map( ( [ key,themeColor ] ) => {
           let isSelected = key === val_theme
 
           return <Button.Clear
@@ -2666,18 +2665,18 @@ const UserConfig = () => {
             isActive={ isSelected }
             isActiveStyles={ {
               boxShadow: '2.remark',
-              backgroundColor: key as Themecolor,
+              backgroundColor: key as $themecolor.Theme,
               fontColor: 'white'
             } }
             onClick={ () => {
-              set_theme( key as Themecolor )
+              set_theme( key as $themecolor.Theme )
             } }
           >
             <Column gap={ '1/2' } textAlign='center'>
               <Box
                 position={ 'relative' }
                 margin={ 'auto' }
-                backgroundColor={ key as Themecolor }
+                backgroundColor={ key as $themecolor.Theme }
                 ssSquare={ 2 }
                 borderRadius={ '1.tone.primary' }
               >

package/demo/next/package.json

@@ -12,7 +12,7 @@
     "cross-env": "^7.0.3",
     "dotenv": "^16.4.5",
     "express": "^4.19.2",
-    "jmini": "^0.0.123",
+    "jmini": "^0.0.129",
     "next": "^16.2.1",
     "node-cron": "^4.1.1",
     "nodemon": "^3.1.4",
@@ -35,4 +35,4 @@
     "react-dom": "^19.2.3",
     "typescript": "^5"
   }
-}
+}

package/dist/@declares/index.d.ts

@@ -4,14 +4,11 @@ export type Device = '' | 'windows' | 'android' | 'iPhone' | 'iPad' | 'macOSX' |
 export type Browser = '' | 'chrome' | 'firefox' | 'safari' | 'opera' | 'ie' | 'edge' | 'undefined';
 export type ReactElement = React.ReactNode | React.ReactNode[];
 export type Roundness = 0 | 1 | 2 | 3 | 4 | 5;
-/** @deprecated Use Darkmode instead of DarkMode */
-export type DarkMode = 'light' | 'auto' | 'dark' | 'dim';
 export type Darkmode = 'light' | 'auto' | 'dark' | 'dim';
-/** @deprecated Use Themecolor instead of ThemeColor */
-export type ThemeColor = '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';
-export type Themecolor = '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';
 import * as _StyleTags from './property';
 /** @deprecated Use StyleProps instead of StyleTags */
 export type StyleTags = typeof _StyleTags;
+/** @deprecated Use Darkmode instead of DarkMode */
+export type DarkMode = Darkmode;
 import * as StyleProps from './property';
 export type { StyleProps };

package/dist/@declares/property.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 /// <reference types="react" />
-import { Themecolor } from '.';
+import { $themecolor } from '../@utils/$themecolor';
 export type BasicElement = BasicTag & States;
 export type BasicTag = {
     className?: string;
@@ -124,7 +124,7 @@ export type gapUnit = 0 | '1/12' | '1/6' | '1/4' | '1/3' | '1/2' | '2/3' | '3/4'
 export type gap = gapUnit | [gapUnit, gapUnit];
 export type overflowUnit = 'auto' | 'hidden' | 'scroll' | 'visible' | 'unset';
 export type overflow = overflowUnit | [overflowUnit, overflowUnit];
-export type UniColors = 'inherit' | 'theme' | 'posi' | 'nega' | 'warn' | 'white' | 'black' | 'dark' | Themecolor;
+export type UniColors = 'inherit' | 'theme' | 'posi' | 'nega' | 'warn' | 'white' | 'black' | 'dark' | $themecolor.Theme;
 export type LayerColors = 'layer.0' | 'layer.1' | 'layer.2' | 'layer.3' | 'layer.4' | 'layer.5' | 'layer.6';
 export type BackgroundColor = UniColors | LayerColors | 'layer.0.opa.few' | 'layer.0.opa.low' | 'layer.0.opa.middle' | 'layer.0.opa.high' | 'layer.1.opa.few' | 'layer.1.opa.low' | 'layer.1.opa.middle' | 'layer.1.opa.high' | 'layer.4.opa.few' | 'layer.4.opa.low' | 'layer.4.opa.middle' | 'layer.4.opa.high' | 'theme.opa.few' | 'theme.opa.low' | 'theme.opa.middle' | 'theme.opa.high' | 'theme.lighten' | 'theme.lighter' | 'theme.lightest' | 'theme.darken' | 'theme.darker' | 'theme.darkest' | 'dark.opa.few' | 'dark.opa.low' | 'dark.opa.middle' | 'dark.opa.high' | 'nega.opa.low' | 'nega.opa.middle' | 'posi.opa.low' | 'posi.opa.middle' | 'mono.positive' | 'mono.negative' | 'cloud' | 'gray' | 'trans' | 'none';
 export type TRBL = 0 | '1/12' | '1/6' | '1/4' | '1/3' | '1/2' | '2/3' | '3/4' | 1 | 2 | 3 | 4 | '50%' | '100%';