@codeleap/styles 5.8.1 → 5.8.3

package/src/tests/colors/lightMode.ts

@@ -0,0 +1,285 @@
+import colors from './baseColors'
+
+export default {
+  ...colors,
+  buttonRegularPrimaryBgDefault: colors.primarySolid800,
+  buttonRegularQuaternaryBgDefault: colors.neutralWhiteTransparent0,
+  buttonRegularPrimaryBgPressed: colors.primarySolid700,
+  buttonRegularPrimaryBgHover: colors.primarySolid700,
+  buttonRegularPrimaryBgDisabled: colors.primarySolid50,
+  buttonRegularQuaternaryLabelDefault: colors.primarySolid800,
+  buttonRegularQuaternaryIconDefault: colors.primarySolid800,
+  buttonRegularQuaternaryIconPressed: colors.primarySolid800,
+  buttonRegularQuaternaryIconHover: colors.primarySolid800,
+  buttonRegularQuaternaryIconDisabled: colors.neutralBlackTransparent200,
+  buttonRegularSecondaryBgDefault: colors.primarySolid100,
+  buttonRegularSecondaryBgPressed: colors.primarySolid200,
+  buttonRegularSecondaryBgHover: colors.primarySolid200,
+  buttonRegularSecondaryBgDisabled: colors.primarySolid50,
+  buttonRegularSecondaryLabelDefault: colors.primarySolid800,
+  buttonRegularSecondaryLabelHover: colors.primarySolid800,
+  buttonRegularSecondaryLabelPressed: colors.primarySolid800,
+  buttonRegularSecondaryLabelDisabled: colors.neutralBlackTransparent200,
+  buttonRegularSecondaryIconDefault: colors.primarySolid800,
+  buttonRegularSecondaryIconPressed: colors.primarySolid800,
+  buttonRegularSecondaryIconHover: colors.primarySolid800,
+  buttonRegularSecondaryIconDisabled: colors.neutralBlackTransparent200,
+  buttonRegularPrimaryLabelDefault: colors.neutralSolid0,
+  buttonRegularPrimaryLabelHover: colors.neutralSolid0,
+  buttonRegularPrimaryLabelPressed: colors.neutralSolid0,
+  buttonRegularPrimaryLabelDisabled: colors.neutralSolid0,
+  buttonRegularPrimaryIconDefault: colors.neutralSolid0,
+  buttonRegularPrimaryIconPressed: colors.neutralSolid0,
+  buttonRegularPrimaryIconHover: colors.neutralSolid0,
+  buttonRegularPrimaryIconDisabled: colors.neutralSolid0,
+  buttonRegularPrimaryStrokePressed: colors.primarySolid500,
+  buttonRegularSecondaryStrokePressed: colors.primarySolid500,
+  buttonRegularTerciaryLabelDefault: colors.primarySolid800,
+  buttonRegularTerciaryLabelHover: colors.primarySolid800,
+  buttonRegularTerciaryLabelPressed: colors.primarySolid800,
+  buttonRegularTerciaryLabelDisabled: colors.neutralBlackTransparent200,
+  buttonRegularTerciaryStrokePressed: colors.primarySolid500,
+  buttonRegularTerciaryBgHover: colors.primarySolid100,
+  buttonRegularTerciaryBgPressed: colors.primarySolid100,
+  buttonRegularTerciaryIconDefault: colors.primarySolid800,
+  buttonRegularTerciaryIconPressed: colors.primarySolid800,
+  buttonRegularTerciaryIconHover: colors.primarySolid800,
+  buttonRegularTerciaryIconDisabled: colors.neutralBlackTransparent200,
+  buttonRegularTerciaryStrokeDefault: colors.neutralSolid400,
+  buttonRegularTerciaryStrokeHover: colors.neutralSolid400,
+  buttonRegularTerciaryStrokeDisabled: colors.neutralSolid300,
+  tagBgDefault: colors.neutralSolid300,
+  tagBgHover: colors.neutralSolid400,
+  tagBgPressed: colors.neutralSolid400,
+  tagBgDisabled: colors.neutralSolid200,
+  tagStrokeFocus: colors.primarySolid500,
+  tagLabelDefault: colors.neutralSolid500,
+  tagLabelHover: colors.neutralSolid500,
+  tagLabelPressed: colors.neutralSolid500,
+  tagLabelDisabled: colors.neutralSolid400,
+  tagIconDefault: colors.neutralSolid500,
+  tagIconHover: colors.neutralSolid500,
+  tagIconPressed: colors.neutralSolid500,
+  tagIconDisabled: colors.neutralSolid400,
+  tagBgFocus: colors.neutralSolid300,
+  tagLabelFocus: colors.neutralSolid500,
+  tagIconFocus: colors.neutralSolid500,
+  buttonRegularQuaternaryLabelHover: colors.primarySolid800,
+  buttonRegularQuaternaryLabelPressed: colors.primarySolid800,
+  buttonRegularQuaternaryLabelDisabled: colors.neutralBlackTransparent200,
+  buttonRegularQuaternaryStrokePressed: colors.primarySolid500,
+  buttonNeutralSecondaryBgDefault: colors.secondarySolid200,
+  buttonNeutralTerciaryBgHover: colors.secondarySolid200,
+  buttonNeutralTerciaryBgPressed: colors.secondarySolid200,
+  buttonNeutralTerciaryIconDefault: colors.neutralSolid800,
+  buttonNeutralTerciaryIconPressed: colors.neutralSolid800,
+  buttonNeutralTerciaryIconHover: colors.neutralSolid800,
+  buttonNeutralTerciaryIconDisabled: colors.neutralSolid400,
+  buttonNeutralTerciaryLabelDefault: colors.neutralSolid800,
+  buttonNeutralTerciaryLabelHover: colors.neutralSolid800,
+  buttonNeutralTerciaryLabelPressed: colors.neutralSolid800,
+  buttonNeutralTerciaryLabelDisabled: colors.neutralSolid400,
+  buttonNeutralTerciaryStrokeDefault: colors.neutralSolid400,
+  buttonNeutralTerciaryStrokeHover: colors.neutralSolid400,
+  buttonNeutralTerciaryStrokePressed: colors.neutralSolid400,
+  buttonNeutralTerciaryStrokeDisabled: colors.neutralSolid300,
+  buttonNeutralQuaternaryBgDefault: colors.neutralWhiteTransparent0,
+  buttonNeutralQuaternaryLabelDefault: colors.neutralSolid800,
+  buttonNeutralQuaternaryLabelHover: colors.neutralSolid800,
+  buttonNeutralQuaternaryLabelPressed: colors.neutralSolid800,
+  buttonNeutralQuaternaryLabelDisabled: colors.neutralSolid400,
+  buttonNeutralQuaternaryIconDefault: colors.neutralSolid800,
+  buttonNeutralQuaternaryStrokePressed: colors.neutralSolid400,
+  buttonNeutralQuaternaryIconHover: colors.neutralSolid800,
+  buttonNeutralQuaternaryIconPressed: colors.neutralSolid800,
+  buttonNeutralQuaternaryIconDisabled: colors.neutralSolid400,
+  buttonNeutralSecondaryIconDefault: colors.neutralSolid800,
+  buttonNeutralSecondaryIconPressed: colors.neutralSolid800,
+  buttonNeutralSecondaryIconHover: colors.neutralSolid800,
+  buttonNeutralSecondaryIconDisabled: colors.neutralSolid400,
+  buttonNeutralSecondaryLabelDefault: colors.neutralSolid800,
+  buttonNeutralSecondaryBgHover: colors.secondarySolid300,
+  buttonNeutralSecondaryStrokePressed: colors.neutralSolid500,
+  buttonNeutralSecondaryLabelHover: colors.neutralSolid800,
+  buttonNeutralSecondaryLabelPressed: colors.neutralSolid800,
+  buttonNeutralSecondaryLabelDisabled: colors.neutralSolid400,
+  buttonNeutralSecondaryBgPressed: colors.secondarySolid300,
+  buttonNeutralSecondaryBgDisabled: colors.secondarySolid200,
+  buttonNegativePrimaryBgDefault: colors.redSolid500,
+  buttonNegativePrimaryIconDefault: colors.neutralSolid0,
+  buttonNegativePrimaryIconPressed: colors.neutralSolid0,
+  buttonNegativePrimaryIconHover: colors.neutralSolid0,
+  buttonNegativePrimaryIconDisabled: colors.neutralSolid0,
+  buttonNegativePrimaryLabelDefault: colors.neutralSolid0,
+  buttonNegativePrimaryLabelHover: colors.neutralSolid0,
+  buttonNegativePrimaryLabelPressed: colors.neutralSolid0,
+  buttonNegativePrimaryLabelDisabled: colors.neutralSolid0,
+  buttonNegativePrimaryBgHover: colors.redSolid300,
+  buttonNegativePrimaryBgPressed: colors.redSolid300,
+  buttonNegativePrimaryBgDisabled: colors.redSolid50,
+  buttonNegativeSecondaryBgDefault: colors.redSolid100,
+  buttonNegativeTerciaryBgHover: colors.redSolid50,
+  buttonNegativeTerciaryBgPressed: colors.redSolid50,
+  buttonNegativeTerciaryIconDefault: colors.redSolid500,
+  buttonNegativeTerciaryIconPressed: colors.redSolid500,
+  buttonNegativeTerciaryIconHover: colors.redSolid500,
+  buttonNegativeTerciaryIconDisabled: colors.redSolid100,
+  buttonNegativeTerciaryLabelDefault: colors.redSolid500,
+  buttonNegativeTerciaryLabelHover: colors.redSolid500,
+  buttonNegativeTerciaryLabelPressed: colors.redSolid500,
+  buttonNegativeTerciaryLabelDisabled: colors.redSolid100,
+  buttonNegativeTerciaryStrokeDefault: colors.redSolid200,
+  buttonNegativeTerciaryStrokeHover: colors.redSolid200,
+  buttonNegativeTerciaryStrokePressed: colors.redSolid500,
+  buttonNegativeTerciaryStrokeDisabled: colors.redSolid50,
+  buttonNegativeQuaternaryBgDefault: colors.neutralWhiteTransparent0,
+  buttonNegativeQuaternaryLabelDefault: colors.redSolid500,
+  buttonNegativeQuaternaryLabelHover: colors.redSolid500,
+  buttonNegativeQuaternaryLabelPressed: colors.redSolid500,
+  buttonNegativeQuaternaryLabelDisabled: colors.redSolid100,
+  buttonNegativeQuaternaryIconDefault: colors.redSolid300,
+  buttonNegativeQuaternaryStrokePressed: colors.redSolid500,
+  buttonNegativeQuaternaryIconHover: colors.redSolid300,
+  buttonNegativeQuaternaryIconPressed: colors.redSolid300,
+  buttonNegativeQuaternaryIconDisabled: colors.redSolid100,
+  buttonNegativeSecondaryIconDefault: colors.redSolid500,
+  buttonNegativeSecondaryIconPressed: colors.redSolid500,
+  buttonNegativeSecondaryIconHover: colors.redSolid500,
+  buttonNegativeSecondaryIconDisabled: colors.redSolid100,
+  buttonNegativeSecondaryLabelDefault: colors.redSolid500,
+  buttonNegativeSecondaryBgHover: colors.redSolid200,
+  buttonNegativeSecondaryStrokePressed: colors.redSolid500,
+  buttonNegativeSecondaryLabelHover: colors.redSolid500,
+  buttonNegativeSecondaryLabelPressed: colors.redSolid500,
+  buttonNegativeSecondaryLabelDisabled: colors.redSolid100,
+  buttonNegativeSecondaryBgPressed: colors.redSolid200,
+  buttonNegativeSecondaryBgDisabled: colors.redSolid50,
+  buttonNegativePrimaryStrokePressed: colors.redSolid500,
+  fieldBgDefault: colors.neutralSolid0,
+  fieldBgHover: colors.neutralSolid0,
+  fieldBgPressed: colors.neutralSolid0,
+  fieldBgFocus: colors.neutralSolid0,
+  fieldBgDisabled: colors.neutralSolid0,
+  fieldLabelRegularDefault: colors.neutralSolid500,
+  fieldLabelRegularHover: colors.neutralSolid500,
+  fieldLabelRegularPressed: colors.neutralSolid500,
+  fieldLabelRegularFocusTyping: colors.neutralSolid800,
+  fieldLabelRegularDisabled: colors.neutralSolid400,
+  fieldIconDefault: colors.neutralSolid400,
+  fieldIconHover: colors.neutralSolid400,
+  fieldIconPressed: colors.neutralSolid400,
+  fieldIconFocusTyping: colors.neutralSolid400,
+  fieldIconDisabled: colors.neutralSolid200,
+  fieldBgFocusTyping: colors.neutralSolid0,
+  fieldBgTyped: colors.neutralSolid0,
+  fieldStrokeRegularDefault: colors.neutralSolid400,
+  fieldStrokeRegularHover: colors.primarySolid600,
+  fieldStrokeRegularPressed: colors.primarySolid600,
+  fieldStrokeRegularFocusTyping: colors.primarySolid600,
+  fieldStrokeRegularTyped: colors.neutralSolid400,
+  fieldStrokeRegularDisabled: colors.neutralSolid300,
+  fieldLabelRegularTyped: colors.neutralSolid800,
+  fieldIconTyped: colors.neutralSolid400,
+  fieldStrokeNegativeDefault: colors.redSolid300,
+  fieldStrokeNegativeHover: colors.redSolid500,
+  fieldStrokeNegativePressed: colors.redSolid500,
+  fieldStrokeNegativeFocusTyping: colors.redSolid500,
+  fieldStrokeNegativeTyped: colors.redSolid300,
+  chipRegularBgDefault: colors.neutralSolid200,
+  chipRegularBgHover: colors.neutralSolid300,
+  chipRegularBgPressed: colors.neutralSolid300,
+  chipRegularBgFocus: colors.neutralSolid200,
+  chipRegularBgDisabled: colors.neutralSolid200,
+  chipRegularStrokeFocus: colors.primarySolid600,
+  chipRegularLabelDefault: colors.neutralSolid400,
+  chipRegularLabelHover: colors.neutralSolid400,
+  chipRegularLabelPressed: colors.neutralSolid400,
+  chipRegularLabelFocus: colors.neutralSolid400,
+  chipRegularLabelDisabled: colors.neutralSolid400,
+  chipRegularIconDefault: colors.neutralSolid500,
+  chipRegularIconHover: colors.neutralSolid500,
+  chipRegularIconPressed: colors.neutralSolid500,
+  chipRegularIconFocus: colors.neutralSolid500,
+  chipRegularIconDisabled: colors.neutralSolid400,
+  textParagraph: colors.neutralSolid600,
+  textCaption: colors.neutralSolid500,
+  textHeadingRegular: colors.neutralSolid800,
+  textHeadingHighlighted: colors.neutralSolid1000,
+  textLink: colors.primarySolid800,
+  textHeadingSubtle: colors.neutralSolid600,
+  rowBgDefault: colors.neutralSolid0,
+  rowBgHover: colors.secondaryTransparent200,
+  rowBgPressed: colors.secondaryTransparent200,
+  rowBgDisabled: colors.neutralWhiteTransparent0,
+  rowStrokeBottom: colors.neutralBlackTransparent100,
+  rowLabelDefault: colors.neutralSolid800,
+  rowLabelHover: colors.neutralSolid800,
+  rowLabelPressed: colors.neutralSolid800,
+  rowLabelDisabled: colors.neutralSolid400,
+  rowIconDefault: colors.neutralSolid500,
+  rowIconHover: colors.neutralSolid500,
+  rowIconPressed: colors.neutralSolid500,
+  rowIconDisabled: colors.neutralSolid300,
+  chipSelectedBgDefault: colors.neutralSolid200,
+  chipSelectedBgHover: colors.neutralSolid300,
+  chipSelectedBgPressed: colors.neutralSolid300,
+  chipSelectedBgFocus: colors.primarySolid100,
+  chipSelectedBgDisabled: colors.neutralSolid200,
+  chipSelectedStrokeFocus: colors.primarySolid600,
+  chipSelectedLabelDefault: colors.neutralSolid400,
+  chipSelectedLabelHover: colors.neutralSolid400,
+  chipSelectedLabelPressed: colors.neutralSolid400,
+  chipSelectedLabelFocus: colors.neutralSolid400,
+  chipSelectedLabelDisabled: colors.neutralSolid400,
+  chipSelectedIconDefault: colors.neutralSolid500,
+  chipSelectedIconHover: colors.neutralSolid500,
+  chipSelectedIconPressed: colors.neutralSolid500,
+  chipSelectedIconFocus: colors.neutralSolid500,
+  chipSelectedIconDisabled: colors.neutralSolid400,
+  bg: colors.secondarySolid100,
+  progressElipseDefault: colors.primarySolid600,
+  progressLineDefault: colors.primarySolid600,
+  progressLabelDefault: colors.neutralSolid400,
+  progressLabelDisabled: colors.neutralSolid400,
+  progressLineDisabled: colors.neutralSolid200,
+  progressElipseDisabled: colors.neutralSolid300,
+  buttonRegularTerciaryBgDefault: colors.neutralWhiteTransparent0,
+  buttonRegularTerciaryBgDisabled: colors.neutralWhiteTransparent0,
+  buttonRegularQuaternaryBgHover: colors.primarySolid100,
+  buttonRegularQuaternaryBgPressed: colors.primarySolid100,
+  buttonRegularQuaternaryBgDisabled: colors.neutralWhiteTransparent0,
+  buttonNeutralTerciaryBgDefault: colors.neutralWhiteTransparent0,
+  buttonNeutralTerciaryBgDisabled: colors.neutralWhiteTransparent0,
+  buttonNeutralQuaternaryBgHover: colors.secondarySolid200,
+  buttonNeutralQuaternaryBgPressed: colors.secondarySolid200,
+  buttonNeutralQuaternaryBgDisabled: colors.neutralWhiteTransparent0,
+  buttonNegativeTerciaryBgDefault: colors.neutralWhiteTransparent0,
+  buttonNegativeTerciaryBgDisabled: colors.neutralWhiteTransparent0,
+  buttonNegativeQuaternaryBgHover: colors.redSolid50,
+  buttonNegativeQuaternaryBgPressed: colors.redSolid50,
+  buttonNegativeQuaternaryBgDisabled: colors.neutralWhiteTransparent0,
+  chipSelectedStrokeDefault: colors.primarySolid600,
+  chipSelectedStrokeHover: colors.primarySolid600,
+  chipSelectedStrokePressed: colors.primarySolid600,
+  chipSelectedNegativeBgDefault: colors.redTransparent100,
+  chipSelectedNegativeBgHover: colors.redTransparent200,
+  chipSelectedNegativeBgPressed: colors.redTransparent200,
+  chipSelectedNegativeBgFocus: colors.redTransparent100,
+  chipSelectedNegativeStrokeDefault: colors.neutralSolid0,
+  chipSelectedNegativeStrokeHover: colors.neutralSolid0,
+  chipSelectedNegativeStrokePressed: colors.neutralSolid0,
+  chipSelectedNegativeStrokeFocus: colors.primarySolid500,
+  chipSelectedNegativeLabelDefault: colors.redSolid500,
+  chipSelectedNegativeLabelHover: colors.redSolid500,
+  chipSelectedNegativeLabelPressed: colors.redSolid500,
+  chipSelectedNegativeLabelFocus: colors.redSolid500,
+  chipSelectedNegativeIconDefault: colors.redSolid300,
+  chipSelectedNegativeIconHover: colors.redSolid300,
+  chipSelectedNegativeIconPressed: colors.redSolid300,
+  chipSelectedNegativeIconFocus: colors.redSolid300,
+  fieldLabelNegativeDefault: colors.redSolid500,
+  fieldLabelNegativeHover: colors.redSolid500,
+  fieldLabelNegativePressed: colors.redSolid500,
+  fieldLabelNegativeFocusTyping: colors.redSolid500,
+  fieldLabelNegativeTyped: colors.redSolid700,
+}

package/src/tests/measures.ts

@@ -0,0 +1,31 @@
+export default {
+  'radius': {
+    'none': 0,
+    'small': 4,
+    'base': 8,
+    'medium': 16,
+    'large': 24,
+    'xlarge': 32,
+    'infinite': 100000000
+  },
+  'size': {
+    'xxsmall': 12,
+    'xsmall': 16,
+    'small': 24,
+    'medium': 32,
+    'large': 48,
+    'xlarge': 56
+  },
+  'stroke': {
+    'default': 1,
+    'medium': 2,
+    'large': 3,
+    'xlarge': 4
+  },
+  'letterSpacing': {
+    'negative': -1,
+    'none': 0,
+    'tiny': 1,
+    'small': 2
+  }
+}

package/src/tests/theme.ts

@@ -0,0 +1,58 @@
+
+import measures from './measures'
+import baseColors from './colors/baseColors'
+import lightMode from './colors/lightMode'
+import darkMode from './colors/darkMode'
+import { createTheme } from '../lib'
+import { validateTheme } from '../theme'
+
+export const mockTheme = () => {
+  return createTheme(
+    validateTheme({
+      baseColors,
+      colors: lightMode,
+      alternateColors: {
+        dark: { ...lightMode, ...darkMode },
+      },
+      baseSpacing: 8,
+      radius: measures.radius,
+      stroke: measures.stroke,
+      size: measures.size,
+      effects: {},
+      typography: {
+        fonts: {
+          Inter: {
+            normal: {
+              '100': 'Inter-Thin',
+              '200': 'Inter-ExtraLight',
+              '300': 'Inter-Light',
+              '400': 'Inter-Regular',
+              '500': 'Inter-Medium',
+              '600': 'Inter-SemiBold',
+              '700': 'Inter-Bold',
+              '800': 'Inter-ExtraBold',
+            },
+          },
+        },
+        defaults: {
+          fontWeight: '400',
+          fontFamily: 'Inter',
+          fontStyle: 'normal',
+          fontSize: 16,
+          lineHeight: 24,
+          letterSpacing: 0.5,
+        } as unknown,
+      },
+      icons: {},
+      presets: {},
+      values: {},
+      isBrowser: true,
+    }),
+    {
+      set: (name, colorSchema) => {},
+      get: (name) => null,
+    },
+  )
+}
+
+export type MockedTheme = ReturnType<typeof mockTheme>

package/src/theme/generateColorScheme.ts

@@ -0,0 +1,53 @@
+import { colorTools } from '../tools'
+import { ColorMap } from '../types'
+
+const lightnesses = [95, 85, 75, 60, 45, 30, 27, 21, 16, 10]
+
+const defaultLightnessMap = Object.fromEntries(
+  lightnesses.map((l, i) => {
+    const step = ((i + 1) * 100).toString()
+    return [step, l]
+  }),
+)
+
+const alphas = [0.05, 0.10, 0.20, 0.30, 0.40, 0.50, 0.60, 0.70, 0.80, 0.90]
+
+const defaultAlphasMap = Object.fromEntries(
+  alphas.map((a, i) => {
+    const step = ((i + 1) * 100).toString()
+    return [step, a]
+  }),
+)
+
+/**
+ * Generates a complete color scheme from an anchor color.
+ * Creates solid variants with different lightness and transparent variants.
+ * 
+ * @param {string} anchorHex - Base hex color for the scheme
+ * @param {string} prefix - Prefix for generated color names
+ * @param {object} lightnesses - Custom lightness mapping
+ * @param {object} alphas - Custom alpha mapping
+ * @returns {ColorMap} Complete color scheme object
+ */
+export function generateColorScheme(
+  anchorHex: string,
+  prefix = 'primary',
+  lightnesses:typeof defaultLightnessMap = defaultLightnessMap,
+  alphas: typeof defaultAlphasMap = defaultAlphasMap,
+): ColorMap {
+  const { h, s } = colorTools.hexToHSL(anchorHex)
+  const baseRGB = colorTools.hexToRGB(anchorHex)
+
+  const scheme: ColorMap = {}
+
+  Object.entries(lightnesses).forEach(([step, lightness]) => {
+    const rgb = colorTools.hslToRGB(h, s, lightness)
+    scheme[`${prefix}Solid${step}`] = `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 1.00)`
+  })
+
+  Object.entries(alphas).forEach(([step, alpha]) => {
+    scheme[`${prefix}Transparent${step}`] = `rgba(${baseRGB.r}, ${baseRGB.g}, ${baseRGB.b}, ${alpha.toFixed(2)})`
+  })
+
+  return scheme
+}

package/src/theme/index.ts

@@ -0,0 +1,3 @@
+export * from './themeStore'
+export * from './validateTheme'
+export * from './generateColorScheme'

package/src/theme/tests/generateColorScheme.spec.ts

@@ -0,0 +1,118 @@
+import { describe, expect, test } from 'bun:test'
+import { generateColorScheme } from '../generateColorScheme'
+import { colorTools } from '../../tools'
+
+describe('generateColorScheme', () => {
+  test('should generate solid and transparent variants from anchor color', () => {
+    const result = generateColorScheme('#4080c0', 'primary')
+
+    expect(Object.keys(result)).toHaveLength(20)
+
+    for (let i = 1; i <= 10; i++) {
+      const step = i * 100
+      expect(result).toHaveProperty(`primarySolid${step}`)
+      expect(result[`primarySolid${step}`]).toMatch(/^rgba\(\d+, \d+, \d+, 1\.00\)$/)
+    }
+
+    for (let i = 1; i <= 10; i++) {
+      const step = i * 100
+      expect(result).toHaveProperty(`primaryTransparent${step}`)
+      expect(result[`primaryTransparent${step}`]).toMatch(/^rgba\(\d+, \d+, \d+, 0\.\d{2}\)$/)
+    }
+  })
+
+  test('should use custom prefix', () => {
+    const result = generateColorScheme('#4080c0', 'accent')
+
+    expect(result).toHaveProperty('accentSolid100')
+    expect(result).toHaveProperty('accentTransparent100')
+    expect(result).not.toHaveProperty('primarySolid100')
+  })
+
+  test('should use custom lightness and alpha mappings', () => {
+    const customLightnesses = { '100': 90, '200': 80 }
+    const customAlphas = { '100': 0.1, '200': 0.2 }
+
+    const result = generateColorScheme('#4080c0', 'primary', customLightnesses, customAlphas)
+
+    expect(Object.keys(result)).toHaveLength(4)
+    expect(result).toHaveProperty('primarySolid100')
+    expect(result).toHaveProperty('primarySolid200')
+    expect(result).toHaveProperty('primaryTransparent100')
+    expect(result).toHaveProperty('primaryTransparent200')
+  })
+
+  test('should generate correct color values for known input', () => {
+    const result = generateColorScheme('#ff0000', 'red') // Vermelho puro
+
+    const hsl = colorTools.hexToHSL('#ff0000')
+    expect(hsl.h).toBe(0)
+    expect(hsl.s).toBe(100)
+
+    const solidColor = result['redSolid100']
+    expect(solidColor).toMatch(/^rgba\(\d+, \d+, \d+, 1\.00\)$/)
+  })
+
+  test('should handle edge cases with black color', () => {
+    const result = generateColorScheme('#000000', 'black')
+
+    for (let i = 1; i <= 10; i++) {
+      const step = i * 100
+      const color = result[`blackSolid${step}`]
+      expect(color).toMatch(/^rgba\(\d+, \d+, \d+, 1\.00\)$/)
+
+      const [r, g, b] = color.match(/\d+/g)!.map(Number)
+
+      expect(r).toBe(g)
+      expect(g).toBe(b)
+    }
+  })
+
+  test('should handle edge cases with white color', () => {
+    const result = generateColorScheme('#ffffff', 'white')
+
+    for (let i = 1; i <= 10; i++) {
+      const step = i * 100
+      const color = result[`whiteSolid${step}`]
+      expect(color).toMatch(/^rgba\(\d+, \d+, \d+, 1\.00\)$/)
+
+      const [r, g, b] = color.match(/\d+/g)!.map(Number)
+
+      expect(r).toBe(g)
+      expect(g).toBe(b)
+    }
+  })
+
+  test('should generate alpha values in correct order', () => {
+    const result = generateColorScheme('#4080c0', 'test')
+
+    const alphaValues = []
+    for (let i = 1; i <= 10; i++) {
+      const step = i * 100
+      const color = result[`testTransparent${step}`]
+      const alpha = parseFloat(color.match(/[\d.]+\)$/)?.[0]?.replace(')', '') || '0')
+      alphaValues.push(alpha)
+    }
+
+    for (let i = 0; i < alphaValues.length - 1; i++) {
+      expect(alphaValues[i]).toBeLessThan(alphaValues[i + 1])
+    }
+  })
+
+  test('should generate lightness values in correct order', () => {
+    const result = generateColorScheme('#4080c0', 'test')
+
+    const lightnessValues = []
+    for (let i = 1; i <= 10; i++) {
+      const step = i * 100
+      const color = result[`testSolid${step}`]
+      const [r, g, b] = color.match(/\d+/g)!.map(Number)
+      const hsl = colorTools.rgbToHSL({ r, g, b })
+      lightnessValues.push(hsl.l)
+    }
+
+    for (let i = 0; i < lightnessValues.length - 1; i++) {
+      expect(lightnessValues[i]).toBeGreaterThan(lightnessValues[i + 1])
+    }
+  })
+})