carry input to the end

packages/core/engine/primitives/attach.ts

@@ -10,19 +10,21 @@ export type Alias = {
 }
 
 const defaultAliases = {
-  //FG/BG
   background: 'base',
   'background-10': 'base-10',
   'background-20': 'base-20',
   'background-30': 'base-30',
+  'background-40': 'base-40',
 
-  'midground-40': 'base-40',
-  'midground-50': 'base-50',
-  'foreground-60': 'base-60',
+  'midground-50': 'base-40',
+  'midground-60': 'base-50',
+  'midground-70': 'base-60',
+  'midground-80': 'base-70',
 
-  'foreground-70': 'base-40',
-  'foreground-80': 'base-50',
-  'foreground-90': 'base-60',
+  'foreground-90': 'base-70',
+  'foreground-100': 'base-80',
+  'foreground-110': 'base-90',
+  'foreground-120': 'base-100',
   foreground: 'base-contrast'
 }
 
@@ -71,8 +73,6 @@ interface Attach {
 
 //main
 export function attach({ input, outputs, element, alias }: Attach) {
-  if (!document) return outputs
-
   setColors(outputs.flattened, element)
   setAliases(alias || input.settings.aliases, element)
 

packages/core/engine/primitives/format.ts

@@ -20,6 +20,7 @@ export interface UmbraOutputs {
   flattened: FlattenColor[]
   formated: FormatedRange[]
   output: RawRange[]
+  input: UmbraInput
 }
 
 export const format = ({
@@ -53,14 +54,16 @@ export const format = ({
   const outputs: UmbraOutputs = {
     flattened,
     formated,
-    output
+    output,
+    input
   }
 
   return {
-    input,
     ...outputs,
-    attach: (element?: HTMLElement, alias?: Alias | boolean) =>
-      attach({ input, outputs, element, alias })
+    attach: (element?: HTMLElement, alias?: Alias | boolean) => {
+      if (!document) return outputs
+      return attach({ input, outputs, element, alias })
+    }
   }
 }
 

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umbrajs/core",
-  "version": "0.0.333",
+  "version": "0.0.3332",
   "description": "Umbra is a theme managment library that allows you to create semantic color themes that are easy to dynamically customize, change retroactively and scale progressively",
   "author": "Samuel M. Bednarz<https://github.com/CarelessCourage>",
   "repository": {

packages/playground/src/App.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref } from 'vue'
-import { umbra, dehydrateOutput, hydrateOutput, umbraHydrate } from '@umbrajs/core'
+import { umbra } from '@umbrajs/core'
 import UmbraRange from './components/UmbraRange.vue'
 import LabelsGroups from './components/ToneLabels.vue'
 import ActionLabels from './components/ActionLabels.vue'
@@ -54,15 +54,14 @@ const theme = umbra({
   background: '#000000',
   foreground: '#ffffff',
   accents: [radixBlue, radixRed, radixYellow, success, royal, brown, something, accent]
-})
+}).apply({ alias: true })
 
-const t = ref(theme)
-const output = t.value.apply({ alias: true })
+const t = ref(theme.input)
+const formated = ref(theme.formated)
 
 function inverse() {
-  const inv = t.value.inverse()
-  t.value = inv
-  inv.apply({ alias: true })
+  const newTheme = umbra(t.value.scheme).inverse().apply({ alias: true })
+  t.value = newTheme.input
 }
 
 const width = ref('6rem')
@@ -76,10 +75,9 @@ const height = ref('8rem')
     <div class="ranges">
       <LabelsGroups />
       <UmbraRange
-        v-for="range in output.formated"
+        v-for="range in formated"
         :key="range.name"
         :range="range"
-        :umbra="output"
         :width="width"
         :height="height"
       />

packages/playground/src/components/UmbraPallet.vue

@@ -2,15 +2,13 @@
 import { colord } from 'colord'
 import { computed } from 'vue'
 import { mostReadable } from '@umbrajs/core'
-import type { UmbraOutputs } from '@umbrajs/core'
 
 export interface Props {
   variable?: string
   color?: string
   name?: string
   index?: number
   prefix?: string
-  umbra?: UmbraOutputs
   meta?: boolean
   width?: string
   height?: string
@@ -73,7 +71,6 @@ const size = computed(() => ({
   overflow: hidden;
   padding: 0.2rem 0.5rem;
   height: v-bind('size.height');
-  //min-width: v-bind('size.width');
   background-color: v-bind(cssVariable);
 }
 

packages/playground/src/components/UmbraRange.vue

@@ -1,10 +1,9 @@
 <script setup lang="ts">
-import type { FormatedRange, UmbraOutputs } from '@umbrajs/core'
+import type { FormatedRange } from '@umbrajs/core'
 import UmbraPallet from './UmbraPallet.vue'
 
 interface Props {
   range: FormatedRange
-  umbra: UmbraOutputs
   width?: string
   height?: string
 }
@@ -25,7 +24,6 @@ withDefaults(defineProps<Props>(), {
       :name="range.name"
       :color="color"
       :index="index"
-      :umbra="umbra"
       :width="width"
       :height="height"
       :meta="true"