amateras 0.1.1 → 0.3.0

package/README.md

@@ -23,7 +23,9 @@ const paragraphStyle = $.css({
 
 $('p').css(paragraphStyle).content([
     'Amateras is a ', 
-    $('span').css({ color: 'blue', fontWeight: 700 }).content('DOM Utility Library.')
+    $('span')
+        .css({ color: 'blue', fontWeight: 700 })
+        .content('DOM Utility Library.')
 ])
 ```
 
@@ -34,7 +36,8 @@ import 'amateras';
 const count$ = $.signal(0);
 
 $(document.body).content([
-    $('button').content('Click me')
+    $('button')
+        .content('Click me')
         .class('class1', 'class2')
         .on('click', () => count$(oldValue => oldValue + 1)),
     $('p').content($`Clicked ${count$} times.`)
@@ -43,7 +46,7 @@ $(document.body).content([
 
 ## State Management
 ```ts
-import 'amateras'
+import 'amateras';
 
 const count$ = $.signal(0);
 const doubleCount$ = $.compute(() => count() * 2);
@@ -56,6 +59,19 @@ $(document.body).content([
 ])
 ```
 
+## HTMLElement Methods Import
+```ts
+import 'amateras';
+import 'amateras/html';
+
+// without html package
+$('a').attr({ href: '/user' });
+$('img').attr({ src: '/profile.jpg' });
+// with html package
+$('a').href('/user');
+$('img').src('/profile.jpg');
+```
+
 ## Custom Components
 ```ts
 import 'amateras';
@@ -83,8 +99,9 @@ $(document.body).content([
 ```
 
 ## Packages
-|-|-|
-|Package name|Size|Size(gzip)|Description|
-|amateras|5.56 kB|2.35 kB|Core
-|amateras/html|0.66 kB|0.28 kB|Import HTMLElement types and methods|
-|[amateras/css](./ext/css/README.md)|3.74 kB|1.40 kB|Style in JS|
+| Package name | Size | Size(gzip) | Description |
+| --- | --- | --- | --- |
+| amateras | 5.50 kB | 2.26 kB | Core |
+| amateras/html | 0.97 kB | 0.26 kB | Import HTMLElement types and methods |
+| [amateras/css](./ext/css/README.md) | 3.45 kB | 1.29 kB | Style in JS |
+| [amateras/router](./ext/router/README.md) | 2.92 kB | 1.27 kB | Amateras Router |

package/ext/css/src/index.ts

@@ -1,4 +1,4 @@
-import { _instanceof, _Object_assign, _Object_entries, _Object_fromEntries, isObject, isUndefined } from "amateras/lib/native";
+import { _Array_from, _instanceof, _JSON_stringify, _Object_assign, _Object_entries, _Object_fromEntries, forEach, isObject, isUndefined } from "amateras/lib/native";
 import { randomId } from "amateras/lib/randomId";
 import { $Element } from "amateras/node/$Element";
 import { $CSSDeclaration } from "#structure/$CSSDeclaration";
@@ -7,18 +7,16 @@ import { $CSSRule } from "#structure/$CSSRule";
 import { $CSSStyleRule } from "#structure/$CSSStyleRule";
 import { $CSSKeyframesRule } from "#structure/$CSSKeyframesRule";
 import { $CSSVariable } from "#structure/$CSSVariable";
-import { $CSSKeyframeRule } from "#structure/$CSSKeyframeRule";
 
 declare module 'amateras/core' {
     export namespace $ {
         export function css(options: $CSSOptions): $CSSStyleRule
-        export function CSS(options: $CSSSelectorType | $CSSMediaSelectorType<false> | $CSSKeyframesSelectorType): void
+        export function CSS(options: $CSSMediaSelectorType<false> | $CSSSelectorType | $CSSKeyframesSelectorType): void
 
         export namespace css {
             export function variables(value: string): $CSSVariable;
             export function variables<T extends $CSSVariableType>(options: T, conditions?: $CSSVariableConditionType<T>): { [key in keyof T]: $CSSVariable }
             export function keyframes<T extends { [key: string]: $CSSKeyframesType }>(options: T): { [key in keyof T]: $CSSKeyframesRule };
-            export const stylesheet: CSSStyleSheet;
         }
     }
 }
@@ -30,25 +28,26 @@ declare module 'amateras/node/$Element' {
 }
 
 const generatedIds = new Set<string>();
-function generateId(lettercase?: 'any' | 'lower' | 'upper'): string { 
+function generateId(lettercase: 'any' | 'lower' | 'upper' = 'any'): string { 
     const id = randomId({lettercase: lettercase});
     if (generatedIds.has(id)) return generateId(lettercase);
     generatedIds.add(id);
     return id;
 }
 
-const stylesheet = new CSSStyleSheet();
-document.adoptedStyleSheets.push(stylesheet);
+const stylesheet = $.stylesheet;
+const cssTextMap = new Map<string, $CSSOptions>
 
-function processCSSOptions<T extends $CSSStyleRule | $CSSKeyframeRule>(
+function processCSSOptions<T extends $CSSStyleRule>(
     rule: T, 
-    options: $CSSDeclarationType | $CSSSelectorType | $CSSMediaSelectorType<boolean>, 
-    context: string[] = [],
+    options: $CSSOptions, 
 ): T {
     for (const [key, value] of _Object_entries(options)) {
         if (isUndefined(value)) continue;
-        if (isObject(value) && !_instanceof(value, $CSSKeyframesRule) && !_instanceof(value, $CSSVariable)) 
-            rule.addRule( createRule(key, value, context) );
+        else if (_instanceof(value, $CSSStyleRule)) rule.rules.add( value.clone(key) );
+        else if (_instanceof(value, $CSSDeclaration)) rule.declarations.set(value.key, value);
+        else if (isObject(value) && !_instanceof(value, $CSSKeyframesRule, $CSSVariable)) 
+            rule.rules.add( createRule(key, value, rule.selector) );
         else {
             const declaration = new $CSSDeclaration(key, `${value}`);
             rule.declarations.set(declaration.key, declaration);
@@ -57,62 +56,95 @@ function processCSSOptions<T extends $CSSStyleRule | $CSSKeyframeRule>(
     return rule;
 }
 
-function createRule(selector: string, options: $CSSOptions, context: string[] = [], global = false) {
-    if (selector.startsWith('@media')) return createMediaRule(selector.replace('@media ', ''), options, context, global);
+/** Create rule with several type depend on selector content.
+ * @param context - for media rule creation, it should be style rule selector same as nested parent of media rule.
+ */
+function createRule(selector: string, options: $CSSOptions, context?: string) {
+    if (selector.startsWith('@media')) return createMediaRule(selector, options, context);
     if (selector.startsWith('@keyframes')) return createKeyframesRule(selector.replace('@keyframes ', ''), options as $CSSKeyframesType)
-    return createStyleRule(options, [...context, selector]);
+    return createStyleRule(selector, options);
 }
 
-function createStyleRule<T extends $CSSRule>(options: T, context?: string[]): T;
-function createStyleRule<T extends $CSSOptions>(options: T, context?: string[]): $CSSStyleRule;
-function createStyleRule<T extends $CSSOptions>(options: T, context: string[] = []) {
-    if (_instanceof(options, $CSSRule)) return options;
-    return processCSSOptions(new $CSSStyleRule(context), options, context);
+function createStyleRule<T extends $CSSRule>(selector: string, options: T): T;
+function createStyleRule<T extends $CSSOptions>(selector: string, options: T): $CSSStyleRule;
+function createStyleRule<T extends $CSSOptions>(selector: string, options: T) {
+    return processCSSOptions(new $CSSStyleRule(selector), options);
 }
 
-function createMediaRule(condition: string, options: $CSSOptions, context: string[] = [], global: boolean) {
-    const rule = new $CSSMediaRule(condition);
+function createMediaRule(selector: string, options: $CSSOptions, context?: string) {
+    const rule = new $CSSMediaRule(selector);
     // create media rule from $.CSS
-    if (global) _Object_entries(options).forEach(([key, value]) => rule.addRule( createRule(key, value, context) ))
+    if (!context) forEach(_Object_entries(options), ([key, value]) => rule.rules.add( createRule(key, value) ))
     // create from $.css
-    else rule.addRule( createStyleRule(options, context) );
+    else rule.rules.add( createStyleRule(context, options) );
     return rule;
 }
 
 function createKeyframesRule(name: string, options: $CSSKeyframesType) {
     const rule = new $CSSKeyframesRule(name);
-    _Object_entries(options).forEach(([key, value]) => {
-        rule.addRule( processCSSOptions(new $CSSKeyframeRule(key), value) );
+    forEach(_Object_entries(options), ([key, value]) => {
+        rule.rules.add( processCSSOptions(new $CSSStyleRule(key), value) );
     })
     return rule;
 }
 
-function insertRule(rule: $CSSRule, recursive = false) {
-    if (_instanceof(rule, $CSSStyleRule) && !CSS.supports(`selector(${rule.selector})`)) return rule;
-    stylesheet.insertRule(rule.css, stylesheet.cssRules.length);
-    if (_instanceof(rule, $CSSKeyframesRule)) return rule;
-    if (!_instanceof(rule, $CSSMediaRule)) rule.rules.forEach(rule => insertRule(rule));
-    else if (!recursive) rule.mediaRules.forEach(rule => insertRule(rule, true));
-    return rule;
+function insertRule(rule: $CSSRule) {
+    cssText(rule).forEach(text => {
+        const selector = text.match(/^(.+?) {/)?.[1];
+        if (!selector) return;
+        if (!selector.startsWith('@') && selector.split(',').find(str => !CSS.supports(`selector(${str})`))) return;
+        stylesheet.insertRule(text, stylesheet.cssRules.length);
+    })
+    return rule
+}
+
+function cssText(rule: $CSSRule, context: string = '', mediaContext: string[] = []): string[] {
+    if (_instanceof(rule, $CSSStyleRule)) {
+        const split = (str: string) => str.split(',');
+        const selectors = split(rule.selector);
+        const selector = split(context).map(ctx => selectors.map(selector => `${ctx ? ctx + ' ' : ''}${selector}`)).join(', ').replaceAll(' &', '');
+        const text = `${selector} { ${_Array_from(rule.declarations).map(([_, dec]) => `${dec}`).join(' ')} }`
+        return [text, ..._Array_from(rule.rules).map(childRule => cssText(childRule, selector)).flat()]
+    }
+    if (_instanceof(rule, $CSSMediaRule)) {
+        const condition = [...mediaContext, rule.condition];
+        const media: string[] = [], style: string[] = []
+        forEach(
+            _Array_from(rule.rules)
+                .map(childRule => {
+                    return cssText(childRule, '', condition)
+                })
+                .flat(),
+            (childText => childText.startsWith('@media') ? media.push(childText) : style.push(childText))
+        );
+        const text = `@media ${condition.join(' and ')} { ${style.join('\n')} }`
+        return [text, ...media]
+    }
+    if (_instanceof(rule, $CSSKeyframesRule)) {
+        return [`@keyframes ${rule.name} { ${_Array_from(rule.rules).map(childRule => cssText(childRule, context)).join('\n')} }`]
+    }
+    throw '$CSS RULE TYPE ERROR'
 }
 
 _Object_assign($, {
     css(options: $CSSOptions) {
         if (_instanceof(options, $CSSRule)) return options;
+        const cssText = _JSON_stringify(options);
+        const cacheRule = cssTextMap.get(cssText);
+        if (cacheRule) return cacheRule;
         const className = `.${generateId()}`;
-        const rule = createStyleRule(options, [className]);
-        rule.className = className;
+        const rule = createStyleRule(className, options);
+        cssTextMap.set(_JSON_stringify(options), rule);
         return insertRule( rule );
     },
     CSS(options: $CSSSelectorType | $CSSMediaRule) {
         return _Object_entries(options).map(([selector, declarations]) => {
-            return insertRule( createRule(selector, declarations, [], true) );
+            return insertRule( createRule(selector, declarations) );
         })
     }
 })
 
 _Object_assign($.css, {
-    stylesheet: stylesheet,
     variables<T extends $CSSVariableType | string>(options: T, conditions?: $CSSVariableConditionType<T>) {
         if (isObject(options)) {
             const variables = _Object_fromEntries(_Object_entries(options).map(([key, value]) => [
@@ -146,31 +178,30 @@ _Object_assign($.css, {
 
 _Object_assign($Element.prototype, {
     css(this: $Element, ...options: $CSSOptions[]) {
-        options.forEach(options => {
+        forEach(options, options => {
             const rule = $.css(options);
-            this.addClass(rule.context[0]?.slice(1) as string);
+            this.addClass(rule.selector.replace(/^./, ''));
         })
         return this;
     }
 })
 
 export * from "#structure/$CSSDeclaration";
-export * from "#structure/$CSSKeyframeRule";
 export * from "#structure/$CSSKeyframesRule";
 export * from "#structure/$CSSMediaRule";
 export * from "#structure/$CSSRule";
 export * from "#structure/$CSSStyleRule";
 export * from "#structure/$CSSVariable";
 
-type $CSSOptions = $CSSDeclarationType | $CSSSelectorType | $CSSStyleRule | $CSSMediaSelectorType<true>;
-type $CSSValueType = '' | 'unset' | 'initial' | 'inherit' | string & {} | number | $CSSVariable
-type $CSSDeclarationType = { [key in keyof $CSSDeclarationMap]?: $CSSDeclarationMap[key] }
-type $CSSSelectorType = { [key: string & {}]: $CSSOptions }
-type $CSSMediaSelectorType<Nested extends boolean> = { [key: `@media ${string}`]: Nested extends true ? $CSSOptions : $CSSSelectorType | $CSSMediaSelectorType<Nested> }
-type $CSSVariableType<T = any> = { [key in keyof T]: $CSSValueType }
-type $CSSVariableConditionType<T extends $CSSVariableType | string> = T extends string ? { [key: string]: $CSSValueType } : { [key: string]: $CSSVariableType<T> }
-type $CSSKeyframesSelectorType = { [key: `@keyframes ${string}`]: $CSSKeyframesType }
-type $CSSKeyframesType = { [key: `${number}%`]: $CSSDeclarationType } | { from?: $CSSDeclarationType, to?: $CSSDeclarationType }
+export type $CSSOptions = $CSSDeclarationType | $CSSSelectorType | $CSSStyleRule | $CSSMediaSelectorType<true>;
+export type $CSSValueType = '' | 'unset' | 'initial' | 'inherit' | string & {} | number | $CSSVariable
+export type $CSSDeclarationType = { [key in keyof $CSSDeclarationMap]?: $CSSDeclarationMap[key] } | { [key: string]: $CSSValueType }
+export type $CSSSelectorType = { [key: string & {}]: $CSSOptions }
+export type $CSSMediaSelectorType<Nested extends boolean> = { [key: `@media ${string}`]: Nested extends true ? $CSSOptions : $CSSSelectorType | $CSSMediaSelectorType<Nested> }
+export type $CSSVariableType<T = any> = { [key in keyof T]: $CSSValueType }
+export type $CSSVariableConditionType<T extends $CSSVariableType | string> = T extends string ? { [key: string]: $CSSValueType } : { [key: string]: Partial<$CSSVariableType<T>> }
+export type $CSSKeyframesSelectorType = { [key: `@keyframes ${string}`]: $CSSKeyframesType }
+export type $CSSKeyframesType = { [key: `${number}%`]: $CSSDeclarationType } | { from?: $CSSDeclarationType, to?: $CSSDeclarationType }
 
 type $CSSDeclarationMap = {
     [key in keyof CSSStyleDeclaration]: $CSSValueType;
@@ -328,6 +359,12 @@ type $CSSDeclarationMap = {
     marginLeft?: string;
     marginRight?: string;
     marginTop?: string;
+    marginBlock?: string;
+    marginBlockStart?: string;
+    marginBlockEnd?: string;
+    marginInline?: string;
+    marginInlineStart?: string;
+    marginInlineEnd?: string;
     mask?: string;
     maskClip?: string;
     maskComposite?: string;
@@ -364,6 +401,12 @@ type $CSSDeclarationMap = {
     paddingLeft?: string;
     paddingRight?: string;
     paddingTop?: string;
+    paddingBlock?: string;
+    paddingBlockStart?: string;
+    paddingBlockEnd?: string;
+    paddingInline?: string;
+    paddingInlineStart?: string;
+    paddingInlineEnd?: string;
     pageBreakAfter?: 'auto' | 'always' | 'avoid' | 'left' | 'right';
     pageBreakBefore?: 'auto' | 'always' | 'avoid' | 'left' | 'right';
     pageBreakInside?: 'auto' | 'avoid';
@@ -382,6 +425,17 @@ type $CSSDeclarationMap = {
     rowGap?: string;
     scale?: string;
     scrollBehavior?: 'auto' | 'smooth';
+    scrollMargin?: string;
+    scrollMarginBottom?: string;
+    scrollMarginLeft?: string;
+    scrollMarginRight?: string;
+    scrollMarginTop?: string;
+    scrollMarginBlock?: string;
+    scrollMarginBlockStart?: string;
+    scrollMarginBlockEnd?: string;
+    scrollMarginInline?: string;
+    scrollMarginInlineStart?: string;
+    scrollMarginInlineEnd?: string;
     shapeRendering?: 'auto' | 'optimizeSpeed' | 'crispEdges' | 'geometricPrecision';
     stopColor?: string;
     stopOpacity?: string;

package/ext/css/src/lib/colorAssign.ts

@@ -0,0 +1,6 @@
+import { _Object_assign } from "../../../../src/lib/native";
+
+export function colorAssign(key: string, colors: {[key: number]: string}) {
+    if (!$.color) _Object_assign($, {color: {}});
+    _Object_assign($.color, {[key]: colors})
+}

package/ext/css/src/lib/colors/amber.ts

@@ -0,0 +1,25 @@
+import { colorAssign } from "../colorAssign";
+
+const _amber = {
+    50: '#fffbeb',
+    100: '#fef3c7',
+    200: '#fde68a',
+    300: '#fcd34d',
+    400: '#fbbf24',
+    500: '#f59e0b',
+    600: '#d97706',
+    700: '#b45309',
+    800: '#92400e',
+    900: '#78350f',
+    950: '#451a03',
+} as const;
+
+colorAssign('amber', _amber);
+
+declare module 'amateras/core' {
+    export namespace $ {
+        export namespace color {
+            export const amber: typeof _amber;
+        }
+    }
+}

package/ext/css/src/lib/colors/blackwhite.ts

@@ -0,0 +1,13 @@
+import { colorAssign } from "../colorAssign";
+
+colorAssign('black', '#000000');
+colorAssign('white', '#ffffff');
+
+declare module 'amateras/core' {
+    export namespace $ {
+        export namespace color {
+            export const black: '#000000';
+            export const white: '#ffffff';
+        }
+    }
+}

package/ext/css/src/lib/colors/blue.ts

@@ -0,0 +1,25 @@
+import { colorAssign } from "../colorAssign";
+
+const _blue = {
+    50: '#eff6ff',
+    100: '#dbeafe',
+    200: '#bfdbfe',
+    300: '#93c5fd',
+    400: '#60a5fa',
+    500: '#3b82f6',
+    600: '#2563eb',
+    700: '#1d4ed8',
+    800: '#1e40af',
+    900: '#1e3a8a',
+    950: '#172554',
+} as const;
+
+colorAssign('blue', _blue);
+
+declare module 'amateras/core' {
+    export namespace $ {
+        export namespace color {
+            export const blue: typeof _blue;
+        }
+    }
+}

package/ext/css/src/lib/colors/cyan.ts

@@ -0,0 +1,25 @@
+import { colorAssign } from "../colorAssign";
+
+const _cyan = {
+    50: '#ecfeff',
+    100: '#cffafe',
+    200: '#a5f3fc',
+    300: '#67e8f9',
+    400: '#22d3ee',
+    500: '#06b6d4',
+    600: '#0891b2',
+    700: '#0e7490',
+    800: '#155e75',
+    900: '#164e63',
+    950: '#083344',
+} as const;
+
+colorAssign('cyan', _cyan);
+
+declare module 'amateras/core' {
+    export namespace $ {
+        export namespace color {
+            export const cyan: typeof _cyan;
+        }
+    }
+}

package/ext/css/src/lib/colors/emerald.ts

@@ -0,0 +1,25 @@
+import { colorAssign } from "../colorAssign";
+
+const _emerald = {
+    50: '#ecfdf5',
+    100: '#d1fae5',
+    200: '#a7f3d0',
+    300: '#6ee7b7',
+    400: '#34d399',
+    500: '#10b981',
+    600: '#059669',
+    700: '#047857',
+    800: '#065f46',
+    900: '#064e3b',
+    950: '#022c22',
+} as const;
+
+colorAssign('emerald', _emerald);
+
+declare module 'amateras/core' {
+    export namespace $ {
+        export namespace color {
+            export const emerald: typeof _emerald;
+        }
+    }
+}

package/ext/css/src/lib/colors/fuchsia.ts

@@ -0,0 +1,25 @@
+import { colorAssign } from "../colorAssign";
+
+const _fuchsia = {
+    50: '#fdf4ff',
+    100: '#fae8ff',
+    200: '#f5d0fe',
+    300: '#f0abfc',
+    400: '#e879f9',
+    500: '#d946ef',
+    600: '#c026d3',
+    700: '#a21caf',
+    800: '#86198f',
+    900: '#701a75',
+    950: '#4a044e',
+} as const;
+
+colorAssign('fuchsia', _fuchsia);
+
+declare module 'amateras/core' {
+    export namespace $ {
+        export namespace color {
+            export const fuchsia: typeof _fuchsia;
+        }
+    }
+}

package/ext/css/src/lib/colors/gray.ts

@@ -0,0 +1,25 @@
+import { colorAssign } from "../colorAssign";
+
+const _gray = {
+    50: '#f9fafb',
+    100: '#f3f4f6',
+    200: '#e5e7eb',
+    300: '#d1d5db',
+    400: '#9ca3af',
+    500: '#6b7280',
+    600: '#4b5563',
+    700: '#374151',
+    800: '#1f2937',
+    900: '#111827',
+    950: '#030712',
+} as const;
+
+colorAssign('gray', _gray);
+
+declare module 'amateras/core' {
+    export namespace $ {
+        export namespace color {
+            export const gray: typeof _gray;
+        }
+    }
+}

package/ext/css/src/lib/colors/green.ts

@@ -0,0 +1,25 @@
+import { colorAssign } from "../colorAssign";
+
+const _green = {
+    50: '#f0fdf4',
+    100: '#dcfce7',
+    200: '#bbf7d0',
+    300: '#86efac',
+    400: '#4ade80',
+    500: '#22c55e',
+    600: '#16a34a',
+    700: '#15803d',
+    800: '#166534',
+    900: '#14532d',
+    950: '#052e16',
+} as const;
+
+colorAssign('green', _green);
+
+declare module 'amateras/core' {
+    export namespace $ {
+        export namespace color {
+            export const green: typeof _green;
+        }
+    }
+}

package/ext/css/src/lib/colors/indigo.ts

@@ -0,0 +1,25 @@
+import { colorAssign } from "../colorAssign";
+
+const _indigo = {
+    50: '#eef2ff',
+    100: '#e0e7ff',
+    200: '#c7d2fe',
+    300: '#a5b4fc',
+    400: '#818cf8',
+    500: '#6366f1',
+    600: '#4f46e5',
+    700: '#4338ca',
+    800: '#3730a3',
+    900: '#312e81',
+    950: '#1e1b4b',
+} as const;
+
+colorAssign('indigo', _indigo);
+
+declare module 'amateras/core' {
+    export namespace $ {
+        export namespace color {
+            export const indigo: typeof _indigo;
+        }
+    }
+}

package/ext/css/src/lib/colors/lime.ts

@@ -0,0 +1,25 @@
+import { colorAssign } from "../colorAssign";
+
+const _lime = {
+    50: '#f7fee7',
+    100: '#ecfccb',
+    200: '#d9f99d',
+    300: '#bef264',
+    400: '#a3e635',
+    500: '#84cc16',
+    600: '#65a30d',
+    700: '#4d7c0f',
+    800: '#3f6212',
+    900: '#365314',
+    950: '#1a2e05',
+} as const;
+
+colorAssign('lime', _lime);
+
+declare module 'amateras/core' {
+    export namespace $ {
+        export namespace color {
+            export const lime: typeof _lime;
+        }
+    }
+}

package/ext/css/src/lib/colors/neutral.ts

@@ -0,0 +1,25 @@
+import { colorAssign } from "../colorAssign";
+
+const _neutral = {
+    50: '#fafafa',
+    100: '#f5f5f5',
+    200: '#e5e5e5',
+    300: '#d4d4d4',
+    400: '#a3a3a3',
+    500: '#737373',
+    600: '#525252',
+    700: '#404040',
+    800: '#262626',
+    900: '#171717',
+    950: '#0a0a0a',
+} as const;
+
+colorAssign('neutral', _neutral);
+
+declare module 'amateras/core' {
+    export namespace $ {
+        export namespace color {
+            export const neutral: typeof _neutral;
+        }
+    }
+}

package/ext/css/src/lib/colors/orange.ts

@@ -0,0 +1,25 @@
+import { colorAssign } from "../colorAssign";
+
+const _orange = {
+    50: '#fff7ed',
+    100: '#ffedd5',
+    200: '#fed7aa',
+    300: '#fdba74',
+    400: '#fb923c',
+    500: '#f97316',
+    600: '#ea580c',
+    700: '#c2410c',
+    800: '#9a3412',
+    900: '#7c2d12',
+    950: '#431407',
+} as const;
+
+colorAssign('orange', _orange);
+
+declare module 'amateras/core' {
+    export namespace $ {
+        export namespace color {
+            export const orange: typeof _orange;
+        }
+    }
+}

package/ext/css/src/lib/colors/pink.ts

@@ -0,0 +1,25 @@
+import { colorAssign } from "../colorAssign";
+
+const _pink = {
+    50: '#fdf2f8',
+    100: '#fce7f3',
+    200: '#fbcfe8',
+    300: '#f9a8d4',
+    400: '#f472b6',
+    500: '#ec4899',
+    600: '#db2777',
+    700: '#be185d',
+    800: '#9d174d',
+    900: '#831843',
+    950: '#500724',
+} as const;
+
+colorAssign('pink', _pink);
+
+declare module 'amateras/core' {
+    export namespace $ {
+        export namespace color {
+            export const pink: typeof _pink;
+        }
+    }
+}