diff --git a/README.md b/README.md index 68a30fe..437b719 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ #### A React theme switching library that makes it easy to apply color-blind accessible UI themes. -스크린샷 2025-10-27 오전 9 05 44 +colbrush --- @@ -236,3 +236,4 @@ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. + diff --git a/src/core/constants/regex.ts b/src/core/constants/regex.ts index ac01e9d..6b78c04 100644 --- a/src/core/constants/regex.ts +++ b/src/core/constants/regex.ts @@ -1,3 +1,4 @@ -export const variableRegex = /(--color-[\w-]+):\s*(#[0-9a-fA-F]{3,8})/g; +export const variableRegex = + /(--color-[\w-]+):\s*([#a-fA-F0-9]{3,8}|(?:oklch|lab|rgb|hsl)\([^)]+\))/g; export const variationRegex = /^--(.+?)-(50|100|200|300|400|500|600|700|800|900)$/i; diff --git a/src/core/utils/colorScale.ts b/src/core/utils/colorScale.ts index fa8f758..c30873a 100644 --- a/src/core/utils/colorScale.ts +++ b/src/core/utils/colorScale.ts @@ -6,10 +6,12 @@ const CLAMP01 = (x: number) => Math.max(0, Math.min(1, x)); type ColorCtor = typeof ColorModule; -const Color = ((ColorModule as unknown as { default?: ColorCtor }).default ?? ColorModule) as ColorCtor; +const Color = ((ColorModule as unknown as { default?: ColorCtor }).default ?? + ColorModule) as ColorCtor; -function hexToOKLCH(hex: string) { - const c = new Color(hex); +function hexToOKLCH(color: string) { + const normalizedColor = color.replace(/,(?=\s*\d)/g, ' '); + const c = new Color(normalizedColor); const o = c.to('oklch'); return { l: o.l, c: o.c, h: o.h ?? 0 }; }