@weni/unnnic-system 3.25.7 → 3.26.0

package/src/components/Input/Input.scss

@@ -1,7 +1,7 @@
 @use '@/assets/scss/unnnic' as *;
 
 @mixin input-base {
-  background: $unnnic-color-white;
+  background: $unnnic-color-bg-base;
   border: 1px solid $unnnic-color-border-base;
   outline: none;
   border-radius: $unnnic-radius-2;
@@ -13,7 +13,7 @@
 
   &:focus:not(.use-focus-prop),
   &.focus {
-    border-color: $unnnic-color-border-active;
+    border-color: $unnnic-color-border-accent-strong;
   }
 
   &::placeholder {

package/src/components/Input/TextInput.vue

@@ -33,7 +33,7 @@
       <UnnnicIcon
         v-if="showClear"
         class="icon-clear"
-        scheme="gray-7"
+        scheme="fg-base"
         icon="close"
         size="ant"
         clickable

package/src/components/SelectTime/index.vue

@@ -207,7 +207,7 @@ export default {
     }
 
     &::-webkit-scrollbar-thumb {
-      background: $unnnic-color-gray-7;
+      background: $unnnic-color-border-emphasized;
       border-radius: $unnnic-border-radius-pill;
     }
 

package/src/components/Sidebar/index.vue

@@ -113,7 +113,7 @@ const handleNavigate = ({ item, child }) => {
     }
 
     &::-webkit-scrollbar-thumb {
-      background: $unnnic-color-gray-7;
+      background: $unnnic-color-border-emphasized;
       border-radius: $unnnic-border-radius-pill;
     }
 

package/src/components/SkeletonLoading/skeletonTheme.vue

@@ -12,11 +12,9 @@
 
 <script>
 import { ref, provide } from 'vue';
-import colorsTokens from '@/assets/tokens/colors.json';
 
-const { gray } = colorsTokens.color;
-export const DEFAULT_BACKGROUND = gray[3].value;
-export const DEFAULT_HIGHLIGHT = gray[1].value;
+export const DEFAULT_BACKGROUND = 'var(--unnnic-color-bg-muted)';
+export const DEFAULT_HIGHLIGHT = 'var(--unnnic-color-bg-base-soft)';
 export const SkeletonStyle = {
   '--skeleton-bg': DEFAULT_BACKGROUND,
   '--skeleton-highlight': DEFAULT_HIGHLIGHT,

package/src/components/Table/Table.vue

@@ -65,7 +65,7 @@ $scroll-size: 4px;
   }
 
   &::-webkit-scrollbar-thumb {
-    background: $unnnic-color-gray-7;
+    background: $unnnic-color-border-emphasized;
     border-radius: $unnnic-border-radius-pill;
   }
 

package/src/components/Tag/DefaultTag.vue

@@ -17,8 +17,6 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 
-import { color as colors } from '@/assets/tokens/colors.json';
-
 import UnnnicIcon from '../Icon.vue';
 
 import type { DefaultTagProps } from './types';
@@ -31,14 +29,14 @@ const props = withDefaults(defineProps<DefaultTagProps>(), {
 });
 
 const COLOR_MAPPING = [
-  { keywords: ['green'], color: colors.green['2'].value },
-  { keywords: ['blue'], color: colors.blue['2'].value },
-  { keywords: ['purple'], color: colors.purple['3'].value },
-  { keywords: ['red', 'pink'], color: colors.red['3'].value },
-  { keywords: ['orange'], color: colors.orange['3'].value },
-  { keywords: ['yellow'], color: colors.yellow['2'].value },
-  { keywords: ['gray'], color: colors.gray['2'].value },
-  { keywords: ['teal', 'weni'], color: colors.teal['2'].value },
+  { keywords: ['green'], color: 'var(--unnnic-color-bg-green-plain)' },
+  { keywords: ['blue'], color: 'var(--unnnic-color-bg-blue-plain)' },
+  { keywords: ['purple'], color: 'var(--unnnic-color-bg-purple-plain)' },
+  { keywords: ['red', 'pink'], color: 'var(--unnnic-color-bg-red-plain)' },
+  { keywords: ['orange'], color: 'var(--unnnic-color-bg-orange-plain)' },
+  { keywords: ['yellow'], color: 'var(--unnnic-color-bg-yellow-plain)' },
+  { keywords: ['gray'], color: 'var(--unnnic-color-bg-muted)' },
+  { keywords: ['teal', 'weni'], color: 'var(--unnnic-color-bg-teal-plain)' },
 ];
 
 const color = computed(() => {
@@ -48,7 +46,7 @@ const color = computed(() => {
     keywords.some((keyword) => scheme.includes(keyword)),
   );
 
-  return match?.color ?? colors.gray['2'].value;
+  return match?.color ?? 'var(--unnnic-color-bg-muted)';
 });
 </script>
 

package/src/components/TemplatePreview/TemplatePreview.vue

@@ -87,7 +87,7 @@
         <UnnnicIcon
           class="unnnic-template-preview__buttons__button__icon"
           :icon="getButtonIcon(button.type)"
-          scheme="aux-blue-500"
+          scheme="fg-info"
           size="ant"
         />
         <p class="unnnic-template-preview__buttons__button__text">

package/src/components/Toast/Toast.vue

@@ -99,10 +99,10 @@ let timeoutId: number | null = null;
 
 const typeConfig = computed(() => {
   const configMap = {
-    informational: { icon: 'info', scheme: 'blue-500' },
-    attention: { icon: 'error', scheme: 'yellow-500' },
-    success: { icon: 'check_circle', scheme: 'green-500' },
-    error: { icon: 'cancel', scheme: 'red-500' },
+    informational: { icon: 'info', scheme: 'fg-info' },
+    attention: { icon: 'error', scheme: 'fg-warning' },
+    success: { icon: 'check_circle', scheme: 'fg-success' },
+    error: { icon: 'cancel', scheme: 'fg-critical' },
   };
 
   return configMap[props.type || 'informational'] as {

package/src/components/Toast/__tests__/Toast.spec.js

@@ -53,7 +53,7 @@ describe('UnnnicToast', () => {
 
       expect(typeIcon().exists()).toBe(true);
       expect(typeIcon().props('icon')).toBe('info');
-      expect(typeIcon().props('scheme')).toBe('blue-500');
+      expect(typeIcon().props('scheme')).toBe('fg-info');
       expect(typeIcon().props('size')).toBe('ant');
 
       expect(title().exists()).toBe(true);
@@ -120,10 +120,10 @@ describe('UnnnicToast', () => {
 
     test('displays correct scheme color for each type', async () => {
       const typeConfigs = [
-        { type: 'informational', expectedScheme: 'blue-500' },
-        { type: 'attention', expectedScheme: 'yellow-500' },
-        { type: 'success', expectedScheme: 'green-500' },
-        { type: 'error', expectedScheme: 'red-500' },
+        { type: 'informational', expectedScheme: 'fg-info' },
+        { type: 'attention', expectedScheme: 'fg-warning' },
+        { type: 'success', expectedScheme: 'fg-success' },
+        { type: 'error', expectedScheme: 'fg-critical' },
       ];
 
       for (const { type, expectedScheme } of typeConfigs) {

package/src/components/ToolTip/ToolTip.vue

@@ -44,7 +44,7 @@
         size="sm"
         clickable
         filled
-        scheme="white"
+        scheme="fg-inverted"
         @click="$emit('click:close')"
       />
     </TooltipContent>

package/src/components/Tour/TourMask.vue

@@ -129,7 +129,7 @@ export default {
   }
 
   &__overlay {
-    fill: rgba($unnnic-color-gray-12, $unnnic-opacity-level-overlay);
+    fill: rgba($unnnic-color-bg-inverted, $unnnic-opacity-level-overlay);
   }
 }
 </style>

package/src/components/ui/dialog/DialogContent.vue

@@ -128,7 +128,7 @@ const ConditionalWrapper: Component = (_, { slots }) => {
     }
 
     &::-webkit-scrollbar-thumb {
-      background: $unnnic-color-gray-7;
+      background: $unnnic-color-border-emphasized;
       border-radius: $unnnic-border-radius-pill;
     }
 

package/src/components/ui/popover/PopoverContent.vue

@@ -119,7 +119,7 @@ $popover-space: $unnnic-space-4;
   }
 
   &::-webkit-scrollbar-thumb {
-    background: $unnnic-color-gray-7;
+    background: $unnnic-color-border-emphasized;
     border-radius: $unnnic-border-radius-pill;
   }
 

package/src/components/ui/popover/PopoverOption.vue

@@ -56,7 +56,7 @@ const props = withDefaults(defineProps<PopoverOptionProps>(), {
 
 const schemeColor = computed(() => {
   if (props.active) {
-    return 'fg-inverted';
+    return 'fg-on-primary';
   }
   if (props.disabled) {
     return 'fg-muted';
@@ -113,7 +113,7 @@ const schemeColor = computed(() => {
     }
 
     &--active {
-      color: $unnnic-color-fg-inverted;
+      color: $unnnic-color-fg-on-primary;
     }
   }
 }

package/src/components/ui/tooltip/TooltipContent.vue

@@ -58,8 +58,8 @@ const portalTarget = useTeleportTarget();
 
 .tooltip__content {
   display: flex;
-  background-color: $unnnic-color-gray-900;
-  color: $unnnic-color-white;
+  background-color: $unnnic-color-bg-inverted;
+  color: $unnnic-color-fg-inverted;
   border-radius: $unnnic-radius-1;
   padding: $unnnic-space-2;
   box-shadow: $unnnic-shadow-1;
@@ -76,8 +76,9 @@ const portalTarget = useTeleportTarget();
 .tooltip__arrow {
   width: 10px;
   height: 10px;
-  background-color: $unnnic-color-gray-900;
-  fill: $unnnic-color-gray-900;
+  background-color: $unnnic-color-bg-inverted;
+  fill: $unnnic-color-bg-inverted;
+  border-radius: calc($unnnic-radius-1 / 2);
   transform: rotate(45deg) translate(-50%, -50%);
 }
 </style>

package/src/composables/useTheme.ts

@@ -0,0 +1,67 @@
+import { computed, ref, watch, type Ref } from 'vue';
+import { usePreferredColorScheme } from '@vueuse/core';
+
+export type Theme = 'light' | 'dark';
+export type ThemePreference = Theme | 'system';
+
+const STORAGE_KEY = 'unnnic-theme';
+const DARK_CLASS = 'dark';
+
+function readStoredPreference(): ThemePreference {
+  try {
+    const stored = localStorage.getItem(STORAGE_KEY);
+    if (stored === 'light' || stored === 'dark' || stored === 'system') {
+      return stored;
+    }
+  } catch {
+    /* localStorage may be unavailable (SSR / iframe sandbox) */
+  }
+  return 'system';
+}
+
+function persistPreference(preference: ThemePreference): void {
+  try {
+    localStorage.setItem(STORAGE_KEY, preference);
+  } catch {
+    /* silent fail */
+  }
+}
+
+function applyTheme(theme: Theme): void {
+  document.documentElement.classList.toggle(DARK_CLASS, theme === 'dark');
+}
+
+const preference: Ref<ThemePreference> = ref(readStoredPreference());
+
+export function useTheme() {
+  const osScheme = usePreferredColorScheme();
+
+  const resolvedTheme = computed<Theme>(() => {
+    if (preference.value !== 'system') return preference.value;
+    return osScheme.value === 'dark' ? 'dark' : 'light';
+  });
+
+  watch(
+    resolvedTheme,
+    (theme) => {
+      applyTheme(theme);
+    },
+    { immediate: true },
+  );
+
+  function setTheme(value: ThemePreference): void {
+    preference.value = value;
+    persistPreference(value);
+  }
+
+  function toggleTheme(): void {
+    setTheme(resolvedTheme.value === 'dark' ? 'light' : 'dark');
+  }
+
+  return {
+    preference,
+    resolvedTheme,
+    setTheme,
+    toggleTheme,
+  };
+}

package/src/index.ts

@@ -25,3 +25,5 @@ const Unnnic: UnnnicPlugin = {
 
 export default Unnnic;
 export * from '@/components';
+export { useTheme } from '@/composables/useTheme';
+export type { Theme, ThemePreference } from '@/composables/useTheme';

package/src/stories/Colors.stories.js

@@ -2,7 +2,12 @@
  * Colors stories. use tags: ['!dev']
  * so they only appear in Colors.mdx via <Story of={...} />, not in the sidebar.
  */
-import colors from '@/assets/tokens/colors.json';
+import primitives from '@/assets/tokens/colors-primitives.json';
+import semantic from '@/assets/tokens/colors-semantic.json';
+
+const colors = {
+  color: { ...primitives.color, ...semantic.color },
+};
 
 function resolveReference(ref, root) {
   const path = ref.replace(/^\{|\}$/g, '').split('.');

package/src/stories/Icon.stories.js

@@ -18,6 +18,7 @@ const schemes = [
   'fg-emphasized',
   'fg-muted',
   'fg-inverted',
+  'fg-on-primary',
   'fg-info',
   'fg-success',
   'fg-warning',

package/src/stories/IconLoading.stories.js

@@ -15,6 +15,7 @@ export default {
         'fg-muted',
         'fg-emphasized',
         'fg-inverted',
+        'fg-on-primary',
         'fg-active',
         'fg-info',
         'fg-success',

package/src/types/scheme-colors.d.ts

@@ -97,10 +97,12 @@ export type SchemeColor =
   | 'bg-success'
   | 'bg-warning'
   | 'bg-critical'
+  | 'bg-inverted'
   | 'fg-base'
   | 'fg-muted'
   | 'fg-emphasized'
   | 'fg-inverted'
+  | 'fg-on-primary'
   | 'fg-active'
   | 'fg-info'
   | 'fg-success'