From 2a19e9e8b8405380a3be505d9cd5372f2ad9b63c Mon Sep 17 00:00:00 2001 From: Eduardo de Cesaro <44036260+cesaroeduardo@users.noreply.github.com> Date: Fri, 13 Mar 2026 00:19:29 -0300 Subject: [PATCH] fix: theme semantic tokens fix MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit fix nos nomes e alguns valores de semantic tokens para não conflitarem com outros padrões do tailwind e estarem mais próximos da abordagem de mercado e escala de design system --- packages/theme/src/tokens/build/preset.js | 45 ++++++++----------- .../theme/src/tokens/semantic/backgrounds.js | 16 +++---- packages/theme/src/tokens/semantic/borders.js | 22 +++++---- packages/theme/src/tokens/semantic/text.js | 40 +++-------------- 4 files changed, 40 insertions(+), 83 deletions(-) diff --git a/packages/theme/src/tokens/build/preset.js b/packages/theme/src/tokens/build/preset.js index 758eadc1..3588e55e 100644 --- a/packages/theme/src/tokens/build/preset.js +++ b/packages/theme/src/tokens/build/preset.js @@ -7,19 +7,15 @@ export const preset = { extend: { colors: { text: { - base: 'var(--text-textColorBase)', - muted: 'var(--text-textColorMuted)', - link: 'var(--text-textColorLink)', - code: 'var(--text-textColorCode)', - mutedHover: 'var(--text-textColorMutedHover)', - linkHover: 'var(--text-textColorLinkHover)', - baseHover: 'var(--text-textColorBaseHover)', - primary: 'var(--text-textColorPrimary)', - primaryHover: 'var(--text-textColorPrimaryHover)', - accent: 'var(--text-textColorAccent)', - accentHover: 'var(--text-textColorAccentHover)', - secondary: 'var(--text-textColorSecondary)', - secondaryHover: 'var(--text-textColorSecondaryHover)', + default: 'var(--text-textDefault)', + muted: 'var(--text-textMuted)', + link: 'var(--text-textLink)', + linkHover: 'var(--text-textLinkHover)', + code: 'var(--text-textCode)', + primary: 'var(--text-textPrimary)', + primaryHover: 'var(--text-textPrimaryHover)', + accent: 'var(--text-textAccent)', + accentHover: 'var(--text-textAccentHover)', danger: 'var(--text-textDanger)', dangerHover: 'var(--text-textDangerHover)', warning: 'var(--text-textWarning)', @@ -28,12 +24,10 @@ export const preset = { successHover: 'var(--text-textSuccessHover)', }, background: { - layer1: 'var(--background-bgLayer1)', - layer2: 'var(--background-bgLayer2)', - base: 'var(--background-bgBase)', + surfaceRaised: 'var(--background-bgSurfaceRaised)', + surfaceOverlay: 'var(--background-bgSurfaceOverlay)', + surface: 'var(--background-bgSurface)', canvas: 'var(--background-bgCanvas)', - layer1Hover: 'var(--background-bgLayer1Hover)', - layer2Hover: 'var(--background-bgLayer2Hover)', danger: 'var(--background-bgDanger)', dangerHover: 'var(--background-bgDangerHover)', warning: 'var(--background-bgWarning)', @@ -45,19 +39,18 @@ export const preset = { primaryHover: 'var(--background-bgPrimaryHover)', }, border: { - base: 'var(--border-borderBase)', - baseHover: 'var(--border-borderBaseHover)', + default: 'var(--border-borderDefault)', + strong: 'var(--border-borderStrong)', + subtle: 'var(--border-borderSubtle)', warning: 'var(--border-borderWarning)', - success: 'var(--border-borderSuccess)', - danger: 'var(--border-borderDanger)', - primary: 'var(--border-borderPrimary)', - secondary: 'var(--border-borderSecondary)', - accent: 'var(--border-borderAccent)', warningHover: 'var(--border-borderWarningHover)', + success: 'var(--border-borderSuccess)', successHover: 'var(--border-borderSuccessHover)', + danger: 'var(--border-borderDanger)', dangerHover: 'var(--border-borderDangerHover)', + primary: 'var(--border-borderPrimary)', primaryHover: 'var(--border-borderPrimaryHover)', - secondaryHover: 'var(--border-borderSecondaryHover)', + accent: 'var(--border-borderAccent)', accentHover: 'var(--border-borderAccentHover)', }, }, diff --git a/packages/theme/src/tokens/semantic/backgrounds.js b/packages/theme/src/tokens/semantic/backgrounds.js index e7dd0814..0cb8c939 100644 --- a/packages/theme/src/tokens/semantic/backgrounds.js +++ b/packages/theme/src/tokens/semantic/backgrounds.js @@ -8,12 +8,10 @@ import { tokenRef } from '../build/refs.js'; export const backgroundSemantic = { light: { - bgLayer1: tokenRef('brand.surfaces.surface-0'), - bgLayer2: tokenRef('brand.surfaces.surface-50'), - bgBase: tokenRef('brand.surfaces.surface-0'), + bgSurfaceRaised: tokenRef('brand.surfaces.surface-0'), + bgSurfaceOverlay: tokenRef('brand.surfaces.surface-50'), + bgSurface: tokenRef('brand.surfaces.surface-0'), bgCanvas: tokenRef('brand.surfaces.surface-100'), - bgLayer1Hover: tokenRef('brand.surfaces.surface-50'), - bgLayer2Hover: tokenRef('brand.surfaces.surface-100'), bgDangerHover: tokenRef('primitives.red.400'), bgWarningHover: tokenRef('primitives.yellow.400'), bgSuccessHover: tokenRef('primitives.green.400'), @@ -25,12 +23,10 @@ export const backgroundSemantic = { bgPrimary: tokenRef('brand.primary.primary-500') }, dark: { - bgLayer1: tokenRef('brand.surfaces.surface-800'), - bgLayer2: tokenRef('brand.surfaces.surface-700'), - bgBase: tokenRef('brand.surfaces.surface-900'), + bgSurfaceRaised: tokenRef('brand.surfaces.surface-800'), + bgSurfaceOverlay: tokenRef('brand.surfaces.surface-700'), + bgSurface: tokenRef('brand.surfaces.surface-900'), bgCanvas: tokenRef('brand.surfaces.surface-950'), - bgLayer1Hover: tokenRef('brand.surfaces.surface-700'), - bgLayer2Hover: tokenRef('brand.surfaces.surface-600'), bgDangerHover: tokenRef('primitives.red.600'), bgWarningHover: tokenRef('primitives.yellow.600'), bgSuccessHover: tokenRef('primitives.green.600'), diff --git a/packages/theme/src/tokens/semantic/borders.js b/packages/theme/src/tokens/semantic/borders.js index 19066715..1dfdafed 100644 --- a/packages/theme/src/tokens/semantic/borders.js +++ b/packages/theme/src/tokens/semantic/borders.js @@ -8,36 +8,34 @@ import { tokenRef } from '../build/refs.js'; export const borderSemantic = { light: { - borderBase: tokenRef('brand.surfaces.surface-200'), - borderBaseHover: tokenRef('primitives.base.black'), + borderDefault: tokenRef('brand.surfaces.surface-100'), + borderStrong: tokenRef('primitives.base.black'), borderWarning: tokenRef('primitives.yellow.600'), borderSuccess: tokenRef('primitives.green.600'), borderDanger: tokenRef('primitives.red.600'), borderPrimary: tokenRef('brand.primary.primary-500'), - borderSecondary: tokenRef('primitives.violet.500'), + borderAccent: tokenRef('brand.accent.accent-500'), borderWarningHover: tokenRef('primitives.yellow.500'), borderSuccessHover: tokenRef('primitives.green.500'), borderDangerHover: tokenRef('primitives.red.500'), borderPrimaryHover: tokenRef('brand.primary.primary-600'), - borderSecondaryHover: tokenRef('primitives.violet.600'), - borderAccent: tokenRef('brand.accent.accent-500'), - borderAccentHover: tokenRef('brand.accent.accent-600') + borderAccentHover: tokenRef('brand.accent.accent-600'), + borderSubtle: tokenRef('brand.surfaces.surface-200') }, dark: { - borderBase: tokenRef('brand.surfaces.surface-700'), - borderBaseHover: tokenRef('primitives.base.white'), + borderDefault: tokenRef('brand.surfaces.surface-800'), + borderStrong: tokenRef('primitives.base.white'), borderWarning: tokenRef('primitives.yellow.400'), borderSuccess: tokenRef('primitives.green.400'), borderDanger: tokenRef('primitives.red.400'), borderPrimary: tokenRef('brand.primary.primary-500'), - borderSecondary: tokenRef('primitives.violet.500'), + borderAccent: tokenRef('brand.accent.accent-500'), borderWarningHover: tokenRef('primitives.yellow.500'), borderSuccessHover: tokenRef('primitives.green.500'), borderDangerHover: tokenRef('primitives.red.500'), borderPrimaryHover: tokenRef('brand.primary.primary-400'), - borderSecondaryHover: tokenRef('primitives.violet.400'), - borderAccent: tokenRef('brand.accent.accent-500'), - borderAccentHover: tokenRef('brand.accent.accent-400') + borderAccentHover: tokenRef('brand.accent.accent-400'), + borderSubtle: tokenRef('brand.surfaces.surface-700') }, }; diff --git a/packages/theme/src/tokens/semantic/text.js b/packages/theme/src/tokens/semantic/text.js index d4e5d1d3..eefa56a7 100644 --- a/packages/theme/src/tokens/semantic/text.js +++ b/packages/theme/src/tokens/semantic/text.js @@ -8,26 +8,11 @@ import { tokenRef } from '../build/refs.js'; export const textSemantic = { light: { - textColorBase: tokenRef('primitives.neutral.900'), - textColorMuted: tokenRef('primitives.neutral.600'), - textColorLink: tokenRef('primitives.blue.600'), - textColorCode: tokenRef('primitives.neutral.600'), - textColorMutedHover: tokenRef('primitives.neutral.500'), - textColorLinkHover: tokenRef('primitives.blue.700'), - textColorBaseHover: tokenRef('primitives.neutral.800'), - textColorPrimary: tokenRef('brand.primary.primary-500'), - textColorPrimaryHover: tokenRef('brand.primary.primary-600'), - textColorSecondary: tokenRef('primitives.violet.500'), - textColorSecondaryHover: tokenRef('primitives.violet.600'), - textColorAccent: tokenRef('brand.accent.accent-500'), - textColorAccentHover: tokenRef('brand.accent.accent-600'), - textBase: tokenRef('primitives.neutral.900'), + textDefault: tokenRef('primitives.neutral.900'), textMuted: tokenRef('primitives.neutral.600'), textLink: tokenRef('primitives.blue.600'), textCode: tokenRef('primitives.neutral.600'), - textMutedHover: tokenRef('primitives.neutral.500'), textLinkHover: tokenRef('primitives.blue.700'), - textBaseHover: tokenRef('primitives.neutral.800'), textPrimary: tokenRef('brand.primary.primary-500'), textPrimaryHover: tokenRef('brand.primary.primary-600'), textAccent: tokenRef('brand.accent.accent-500'), @@ -40,26 +25,11 @@ export const textSemantic = { textWarning: tokenRef('primitives.yellow.600') }, dark: { - textColorBase: tokenRef('primitives.neutral.50'), - textColorMuted: tokenRef('primitives.neutral.400'), - textColorLink: tokenRef('primitives.blue.300'), - textColorCode: tokenRef('primitives.neutral.400'), - textColorMutedHover: tokenRef('primitives.neutral.500'), - textColorLinkHover: tokenRef('primitives.blue.300'), - textColorBaseHover: tokenRef('primitives.neutral.200'), - textColorPrimary: tokenRef('brand.primary.primary-500'), - textColorPrimaryHover: tokenRef('brand.primary.primary-400'), - textColorSecondary: tokenRef('primitives.violet.500'), - textColorSecondaryHover: tokenRef('primitives.violet.400'), - textColorAccent: tokenRef('brand.accent.accent-500'), - textColorAccentHover: tokenRef('brand.accent.accent-400'), - textBase: tokenRef('primitives.neutral.50'), + textDefault: tokenRef('primitives.neutral.50'), textMuted: tokenRef('primitives.neutral.400'), - textLink: tokenRef('primitives.blue.300'), + textLink: tokenRef('primitives.blue.400'), textCode: tokenRef('primitives.neutral.400'), - textMutedHover: tokenRef('primitives.neutral.500'), textLinkHover: tokenRef('primitives.blue.300'), - textBaseHover: tokenRef('primitives.neutral.200'), textPrimary: tokenRef('brand.primary.primary-500'), textPrimaryHover: tokenRef('brand.primary.primary-400'), textAccent: tokenRef('brand.accent.accent-500'), @@ -69,8 +39,8 @@ export const textSemantic = { textSuccessHover: tokenRef('primitives.green.500'), textSuccess: tokenRef('primitives.green.400'), textDanger: tokenRef('primitives.red.400'), - textWarning: tokenRef('primitives.yellow.400') - }, + textWarning: tokenRef('primitives.yellow.400'), + } }; export default {