@korsolutions/ui 0.0.51 → 0.0.52

package/AGENTS.md

@@ -29,6 +29,7 @@ Layer 3: Variants (themed style hooks)
 Headless UI components providing behavior without visual styles.
 
 **Pattern**:
+
 ```typescript
 // primitives/button/button-root.tsx
 export interface ButtonRootProps {
@@ -65,6 +66,7 @@ export const ButtonPrimitive = {
 ```
 
 **Key Rules**:
+
 - ❌ No inline styles or hardcoded colors
 - ❌ No theme access (`useTheme`)
 - ✅ Accept `styles` prop for variant injection
@@ -76,6 +78,7 @@ export const ButtonPrimitive = {
 Styled components using primitives with variant system.
 
 **Pattern**:
+
 ```typescript
 // components/button/components/button-root.tsx
 export interface ButtonRootProps extends ButtonPrimitiveRootProps {
@@ -98,6 +101,7 @@ export const Button = {
 ```
 
 **Key Rules**:
+
 - ✅ Use primitives as base
 - ✅ Apply variants for styling
 - ✅ Default variant is "default"
@@ -109,6 +113,7 @@ export const Button = {
 Theme-aware style hooks providing reactive styles.
 
 **Pattern**:
+
 ```typescript
 // components/button/variants/default.tsx
 import { useThemedStyles } from "@/utils/use-themed-styles";
@@ -131,7 +136,7 @@ export const useButtonVariantDefault = (): ButtonStyles => {
       spinner: {
         color: colors.background,
       },
-    })
+    }),
   );
 };
 
@@ -143,6 +148,7 @@ export const ButtonVariants = {
 ```
 
 **Key Rules**:
+
 - ✅ Always use `useThemedStyles` hook
 - ✅ Return complete style objects
 - ✅ Access theme tokens (colors, radius, fontSize, etc.)
@@ -328,7 +334,7 @@ export const useAlertVariantDefault = (): AlertStyles => {
         color: colors.mutedForeground,
         lineHeight: 20,
       },
-    })
+    }),
   );
 };
 ```
@@ -407,6 +413,7 @@ const composedProps = {
 ### Style Composition Order
 
 Always compose styles in this order:
+
 1. Variant styles (from `styles` prop)
 2. User styles (from `style` prop)
 
@@ -480,16 +487,16 @@ interface Theme {
 
 Always use theme tokens instead of hardcoded values:
 
-| Token | Usage |
-|-------|-------|
-| `colors.background` | Main background color |
-| `colors.foreground` | Main text color |
-| `colors.primary` | Primary action color |
-| `colors.muted` | Subtle background (hover states) |
-| `colors.border` | Border color |
-| `radius` | Border radius value |
-| `fontSize` | Base font size |
-| `fontFamily` | Font family string |
+| Token               | Usage                            |
+| ------------------- | -------------------------------- |
+| `colors.background` | Main background color            |
+| `colors.foreground` | Main text color                  |
+| `colors.primary`    | Primary action color             |
+| `colors.muted`      | Subtle background (hover states) |
+| `colors.border`     | Border color                     |
+| `radius`            | Border radius value              |
+| `fontSize`          | Base font size                   |
+| `fontFamily`        | Font family string               |
 
 ## Anti-Patterns (Avoid)
 
@@ -529,28 +536,28 @@ export const useVariant = (): Styles => {
 
 ```typescript
 // BAD
-backgroundColor: '#007AFF'
+backgroundColor: "#007AFF";
 ```
 
 ### ✅ Theme Colors
 
 ```typescript
 // GOOD
-backgroundColor: theme.colors.primary
+backgroundColor: theme.colors.primary;
 ```
 
 ### ❌ String Values for Spacing
 
 ```typescript
 // BAD
-padding: '16px'
+padding: "16px";
 ```
 
 ### ✅ Number Values
 
 ```typescript
 // GOOD
-padding: 16
+padding: 16;
 ```
 
 ## Type Safety
@@ -596,6 +603,7 @@ bun build
 ```
 
 This runs:
+
 1. `bob build` - Compiles TypeScript with Babel
 2. `tsc-alias` - Resolves path aliases in type definitions
 
@@ -641,18 +649,23 @@ dist/
 ## Common Issues
 
 **Issue**: "Cannot find module @/..."
+
 - **Fix**: Check `tsconfig.json` has path alias: `"@/*": ["./src/*"]`
 
 **Issue**: Styles not applying
+
 - **Fix**: Ensure variant styles passed to primitive via `styles` prop
 
 **Issue**: Theme not updating
+
 - **Fix**: Use `useThemedStyles` hook, not plain `useMemo`
 
 **Issue**: Type errors with compound exports
+
 - **Fix**: Export both types and components from index files
 
 **Issue**: Build fails
+
 - **Fix**: Run `bun build` from library directory, check for TypeScript errors
 
 ## Resources

package/dist/module/components/button/components/button-label.js.map

@@ -1 +1 @@
-{"version":3,"names":["calculateComposedStyles","React","Text","useButton","jsx","_jsx","ButtonLabel","props","button","calculatedStyle","styles","state","style","isSelectable","selectable","children"],"sourceRoot":"../../../../../src","sources":["components/button/components/button-label.tsx"],"mappings":";;AAAA,SAASA,uBAAuB;AAChC,OAAOC,KAAK,MAAM,OAAO;AACzB,SAAyBC,IAAI,QAAwB,cAAc;AACnE,SAASC,SAAS;AAAqB,SAAAC,GAAA,IAAAC,IAAA;AAQvC,OAAO,SAASC,WAAWA,CAACC,KAAuB,EAAE;EACnD,MAAMC,MAAM,GAAGL,SAAS,CAAC,CAAC;EAE1B,MAAMM,eAAe,GAAGT,uBAAuB,CAACQ,MAAM,CAACE,MAAM,EAAEF,MAAM,CAACG,KAAK,EAAE,OAAO,EAAEJ,KAAK,CAACK,KAAK,CAAC;EAElG,MAAMC,YAAY,GAAGL,MAAM,CAACG,KAAK,KAAK,UAAU,IAAIH,MAAM,CAACG,KAAK,KAAK,SAAS;EAE9E,oBACEN,IAAA,CAACH,IAAI;IAACY,UAAU,EAAED,YAAa;IAACD,KAAK,EAAEH,eAAgB;IAAAM,QAAA,EACpDR,KAAK,CAACQ;EAAQ,CACX,CAAC;AAEX","ignoreList":[]}
+{"version":3,"names":["calculateComposedStyles","React","Text","useButton","jsx","_jsx","ButtonLabel","props","button","calculatedStyle","styles","state","style","isSelectable","selectable","children"],"sourceRoot":"../../../../../src","sources":["components/button/components/button-label.tsx"],"mappings":";;AACA,SAASA,uBAAuB;AAChC,OAAOC,KAAK,MAAM,OAAO;AACzB,SAAyBC,IAAI,QAAwB,cAAc;AACnE,SAASC,SAAS;AAAqB,SAAAC,GAAA,IAAAC,IAAA;AAQvC,OAAO,SAASC,WAAWA,CAACC,KAAuB,EAAE;EACnD,MAAMC,MAAM,GAAGL,SAAS,CAAC,CAAC;EAE1B,MAAMM,eAAe,GAAGT,uBAAuB,CAACQ,MAAM,CAACE,MAAM,EAAEF,MAAM,CAACG,KAAK,EAAE,OAAO,EAAEJ,KAAK,CAACK,KAAK,CAAC;EAElG,MAAMC,YAAY,GAAGL,MAAM,CAACG,KAAK,KAAK,UAAU,IAAIH,MAAM,CAACG,KAAK,KAAK,SAAS;EAE9E,oBACEN,IAAA,CAACH,IAAI;IAACY,UAAU,EAAED,YAAa;IAACD,KAAK,EAAEH,eAAgB;IAAAM,QAAA,EACpDR,KAAK,CAACQ;EAAQ,CACX,CAAC;AAEX","ignoreList":[]}

package/dist/module/themes/default/colors.js

@@ -1,35 +1,35 @@
 "use strict";
 
 export const lightColors = {
-  background: "hsla(224, 0%, 100%, 1)",
-  foreground: "hsla(224, 0%, 4%, 1)",
-  primary: "hsla(224, 0%, 9%, 1)",
-  primaryForeground: "hsla(224, 0%, 98%, 1)",
-  secondary: "hsla(224, 0%, 96%, 1)",
-  secondaryForeground: "hsla(224, 0%, 9%, 1)",
-  muted: "hsla(224, 0%, 96%, 1)",
-  mutedForeground: "hsla(224, 0%, 45%, 1)",
-  border: "hsla(224, 0%, 90%, 1)",
-  surface: "hsla(224, 0%, 100%, 1)",
-  danger: "hsla(360, 100%, 45%, 1)",
-  success: "hsla(140, 100%, 40%, 1)",
-  warning: "hsla(31, 92%, 45%, 1)",
-  info: "hsla(210, 92%, 45%, 1)"
+  background: "hsl(224, 0%, 100%)",
+  foreground: "hsl(224, 0%, 4%)",
+  primary: "hsl(224, 0%, 9%)",
+  primaryForeground: "hsl(224, 0%, 98%)",
+  secondary: "hsl(224, 0%, 96%)",
+  secondaryForeground: "hsl(224, 0%, 9%)",
+  muted: "hsl(224, 0%, 96%)",
+  mutedForeground: "hsl(224, 0%, 45%)",
+  border: "hsl(224, 0%, 90%)",
+  surface: "hsl(224, 0%, 100%)",
+  danger: "hsl(360, 100%, 45%)",
+  success: "hsl(140, 100%, 40%)",
+  warning: "hsl(31, 92%, 45%)",
+  info: "hsl(210, 92%, 45%)"
 };
 export const darkColors = {
-  background: "hsla(224, 0%, 4%, 1)",
-  foreground: "hsla(224, 0%, 98%, 1)",
-  primary: "hsla(224, 0%, 90%, 1)",
-  primaryForeground: "hsla(224, 0%, 9%, 1)",
-  secondary: "hsla(224, 0%, 15%, 1)",
-  secondaryForeground: "hsla(224, 0%, 98%, 1)",
-  muted: "hsla(224, 0%, 15%, 1)",
-  mutedForeground: "hsla(224, 0%, 63%, 1)",
-  border: "hsla(224, 0%, 16%, 1)",
-  surface: "hsla(224, 0%, 9%, 1)",
-  danger: "hsla(360, 100%, 45%, 1)",
-  success: "hsla(140, 100%, 40%, 1)",
-  warning: "hsla(31, 92%, 45%, 1)",
-  info: "hsla(210, 92%, 45%, 1)"
+  background: "hsl(224, 0%, 4%)",
+  foreground: "hsl(224, 0%, 98%)",
+  primary: "hsl(224, 0%, 90%)",
+  primaryForeground: "hsl(224, 0%, 9%)",
+  secondary: "hsl(224, 0%, 15%)",
+  secondaryForeground: "hsl(224, 0%, 98%)",
+  muted: "hsl(224, 0%, 15%)",
+  mutedForeground: "hsl(224, 0%, 63%)",
+  border: "hsl(224, 0%, 16%)",
+  surface: "hsl(224, 0%, 9%)",
+  danger: "hsl(360, 100%, 45%)",
+  success: "hsl(140, 100%, 40%)",
+  warning: "hsl(31, 92%, 45%)",
+  info: "hsl(210, 92%, 45%)"
 };
 //# sourceMappingURL=colors.js.map

package/dist/module/themes/default/colors.js.map

@@ -1 +1 @@
-{"version":3,"names":["lightColors","background","foreground","primary","primaryForeground","secondary","secondaryForeground","muted","mutedForeground","border","surface","danger","success","warning","info","darkColors"],"sourceRoot":"../../../../src","sources":["themes/default/colors.ts"],"mappings":";;AAEA,OAAO,MAAMA,WAAmB,GAAG;EACjCC,UAAU,EAAE,wBAAwB;EACpCC,UAAU,EAAE,sBAAsB;EAElCC,OAAO,EAAE,sBAAsB;EAC/BC,iBAAiB,EAAE,uBAAuB;EAE1CC,SAAS,EAAE,uBAAuB;EAClCC,mBAAmB,EAAE,sBAAsB;EAE3CC,KAAK,EAAE,uBAAuB;EAC9BC,eAAe,EAAE,uBAAuB;EAExCC,MAAM,EAAE,uBAAuB;EAC/BC,OAAO,EAAE,wBAAwB;EAEjCC,MAAM,EAAE,yBAAyB;EACjCC,OAAO,EAAE,yBAAyB;EAClCC,OAAO,EAAE,uBAAuB;EAChCC,IAAI,EAAE;AACR,CAAC;AAED,OAAO,MAAMC,UAAkB,GAAG;EAChCd,UAAU,EAAE,sBAAsB;EAClCC,UAAU,EAAE,uBAAuB;EAEnCC,OAAO,EAAE,uBAAuB;EAChCC,iBAAiB,EAAE,sBAAsB;EAEzCC,SAAS,EAAE,uBAAuB;EAClCC,mBAAmB,EAAE,uBAAuB;EAE5CC,KAAK,EAAE,uBAAuB;EAC9BC,eAAe,EAAE,uBAAuB;EAExCC,MAAM,EAAE,uBAAuB;EAC/BC,OAAO,EAAE,sBAAsB;EAE/BC,MAAM,EAAE,yBAAyB;EACjCC,OAAO,EAAE,yBAAyB;EAClCC,OAAO,EAAE,uBAAuB;EAChCC,IAAI,EAAE;AACR,CAAC","ignoreList":[]}
+{"version":3,"names":["lightColors","background","foreground","primary","primaryForeground","secondary","secondaryForeground","muted","mutedForeground","border","surface","danger","success","warning","info","darkColors"],"sourceRoot":"../../../../src","sources":["themes/default/colors.ts"],"mappings":";;AAEA,OAAO,MAAMA,WAAmB,GAAG;EACjCC,UAAU,EAAE,oBAAoB;EAChCC,UAAU,EAAE,kBAAkB;EAE9BC,OAAO,EAAE,kBAAkB;EAC3BC,iBAAiB,EAAE,mBAAmB;EAEtCC,SAAS,EAAE,mBAAmB;EAC9BC,mBAAmB,EAAE,kBAAkB;EAEvCC,KAAK,EAAE,mBAAmB;EAC1BC,eAAe,EAAE,mBAAmB;EAEpCC,MAAM,EAAE,mBAAmB;EAC3BC,OAAO,EAAE,oBAAoB;EAE7BC,MAAM,EAAE,qBAAqB;EAC7BC,OAAO,EAAE,qBAAqB;EAC9BC,OAAO,EAAE,mBAAmB;EAC5BC,IAAI,EAAE;AACR,CAAC;AAED,OAAO,MAAMC,UAAkB,GAAG;EAChCd,UAAU,EAAE,kBAAkB;EAC9BC,UAAU,EAAE,mBAAmB;EAE/BC,OAAO,EAAE,mBAAmB;EAC5BC,iBAAiB,EAAE,kBAAkB;EAErCC,SAAS,EAAE,mBAAmB;EAC9BC,mBAAmB,EAAE,mBAAmB;EAExCC,KAAK,EAAE,mBAAmB;EAC1BC,eAAe,EAAE,mBAAmB;EAEpCC,MAAM,EAAE,mBAAmB;EAC3BC,OAAO,EAAE,kBAAkB;EAE3BC,MAAM,EAAE,qBAAqB;EAC7BC,OAAO,EAAE,qBAAqB;EAC9BC,OAAO,EAAE,mBAAmB;EAC5BC,IAAI,EAAE;AACR,CAAC","ignoreList":[]}

package/dist/typescript/src/components/button/components/button-label.d.ts

@@ -1,7 +1,8 @@
+import type { TextChildren } from "../../../types/element.types";
 import React from "react";
 import { type StyleProp, type TextStyle } from "react-native";
 export interface ButtonLabelProps {
-    children?: string;
+    children?: TextChildren;
     style?: StyleProp<TextStyle>;
 }
 export declare function ButtonLabel(props: ButtonLabelProps): React.JSX.Element;

package/dist/typescript/src/components/button/components/button-label.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button-label.d.ts","sourceRoot":"","sources":["../../../../../../src/components/button/components/button-label.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,KAAK,SAAS,EAAQ,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAGpE,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,qBAYlD"}
+{"version":3,"file":"button-label.d.ts","sourceRoot":"","sources":["../../../../../../src/components/button/components/button-label.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAE1D,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,KAAK,SAAS,EAAQ,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAGpE,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,EAAE,YAAY,CAAC;IAExB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,qBAYlD"}

package/dist/typescript/src/themes/types.d.ts

@@ -1,5 +1,5 @@
 export type ColorScheme = "light" | "dark";
-type Color = `hsla(${number}, ${number}%, ${number}%, ${number})`;
+type Color = `hsl(${number}, ${number}%, ${number}%)`;
 export interface Colors {
     background: Color;
     foreground: Color;

package/dist/typescript/src/themes/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/themes/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,MAAM,CAAC;AAE3C,KAAK,KAAK,GAAG,QAAQ,MAAM,KAAK,MAAM,MAAM,MAAM,MAAM,MAAM,GAAG,CAAC;AAElE,MAAM,WAAW,MAAM;IACrB,UAAU,EAAE,KAAK,CAAC;IAClB,UAAU,EAAE,KAAK,CAAC;IAClB,OAAO,EAAE,KAAK,CAAC;IACf,iBAAiB,EAAE,KAAK,CAAC;IACzB,SAAS,EAAE,KAAK,CAAC;IACjB,mBAAmB,EAAE,KAAK,CAAC;IAC3B,KAAK,EAAE,KAAK,CAAC;IACb,eAAe,EAAE,KAAK,CAAC;IACvB,MAAM,EAAE,KAAK,CAAC;IACd,OAAO,EAAE,KAAK,CAAC;IACf,OAAO,EAAE,KAAK,CAAC;IACf,OAAO,EAAE,KAAK,CAAC;IACf,MAAM,EAAE,KAAK,CAAC;IACd,IAAI,EAAE,KAAK,CAAC;CACb;AAED,MAAM,MAAM,MAAM,GAAG,MAAM,CAAC;AAC5B,MAAM,MAAM,UAAU,GAAG,MAAM,CAAC;AAChC,MAAM,MAAM,aAAa,GAAG,MAAM,CAAC;AACnC,MAAM,MAAM,QAAQ,GAAG,MAAM,CAAC;AAE9B,MAAM,WAAW,WAAW;IAC1B,MAAM,EAAE,MAAM,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC;IACpC,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,UAAU,CAAC;IACvB,aAAa,EAAE,aAAa,CAAC;IAC7B,QAAQ,EAAE,QAAQ,CAAC;CACpB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/themes/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,MAAM,CAAC;AAE3C,KAAK,KAAK,GAAG,OAAO,MAAM,KAAK,MAAM,MAAM,MAAM,IAAI,CAAC;AAEtD,MAAM,WAAW,MAAM;IACrB,UAAU,EAAE,KAAK,CAAC;IAClB,UAAU,EAAE,KAAK,CAAC;IAClB,OAAO,EAAE,KAAK,CAAC;IACf,iBAAiB,EAAE,KAAK,CAAC;IACzB,SAAS,EAAE,KAAK,CAAC;IACjB,mBAAmB,EAAE,KAAK,CAAC;IAC3B,KAAK,EAAE,KAAK,CAAC;IACb,eAAe,EAAE,KAAK,CAAC;IACvB,MAAM,EAAE,KAAK,CAAC;IACd,OAAO,EAAE,KAAK,CAAC;IACf,OAAO,EAAE,KAAK,CAAC;IACf,OAAO,EAAE,KAAK,CAAC;IACf,MAAM,EAAE,KAAK,CAAC;IACd,IAAI,EAAE,KAAK,CAAC;CACb;AAED,MAAM,MAAM,MAAM,GAAG,MAAM,CAAC;AAC5B,MAAM,MAAM,UAAU,GAAG,MAAM,CAAC;AAChC,MAAM,MAAM,aAAa,GAAG,MAAM,CAAC;AACnC,MAAM,MAAM,QAAQ,GAAG,MAAM,CAAC;AAE9B,MAAM,WAAW,WAAW;IAC1B,MAAM,EAAE,MAAM,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC;IACpC,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,UAAU,CAAC;IACvB,aAAa,EAAE,aAAa,CAAC;IAC7B,QAAQ,EAAE,QAAQ,CAAC;CACpB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@korsolutions/ui",
-  "version": "0.0.51",
+  "version": "0.0.52",
   "license": "MIT",
   "repository": {
     "type": "git",

package/src/components/button/components/button-label.tsx

@@ -1,10 +1,11 @@
+import type { TextChildren } from "@/types/element.types";
 import { calculateComposedStyles } from "@/utils/calculate-styles";
 import React from "react";
 import { type StyleProp, Text, type TextStyle } from "react-native";
 import { useButton } from "../context";
 
 export interface ButtonLabelProps {
-  children?: string;
+  children?: TextChildren;
 
   style?: StyleProp<TextStyle>;
 }

package/src/themes/default/colors.ts

@@ -1,45 +1,45 @@
 import type { Colors } from "../types";
 
 export const lightColors: Colors = {
-  background: "hsla(224, 0%, 100%, 1)",
-  foreground: "hsla(224, 0%, 4%, 1)",
+  background: "hsl(224, 0%, 100%)",
+  foreground: "hsl(224, 0%, 4%)",
 
-  primary: "hsla(224, 0%, 9%, 1)",
-  primaryForeground: "hsla(224, 0%, 98%, 1)",
+  primary: "hsl(224, 0%, 9%)",
+  primaryForeground: "hsl(224, 0%, 98%)",
 
-  secondary: "hsla(224, 0%, 96%, 1)",
-  secondaryForeground: "hsla(224, 0%, 9%, 1)",
+  secondary: "hsl(224, 0%, 96%)",
+  secondaryForeground: "hsl(224, 0%, 9%)",
 
-  muted: "hsla(224, 0%, 96%, 1)",
-  mutedForeground: "hsla(224, 0%, 45%, 1)",
+  muted: "hsl(224, 0%, 96%)",
+  mutedForeground: "hsl(224, 0%, 45%)",
 
-  border: "hsla(224, 0%, 90%, 1)",
-  surface: "hsla(224, 0%, 100%, 1)",
+  border: "hsl(224, 0%, 90%)",
+  surface: "hsl(224, 0%, 100%)",
 
-  danger: "hsla(360, 100%, 45%, 1)",
-  success: "hsla(140, 100%, 40%, 1)",
-  warning: "hsla(31, 92%, 45%, 1)",
-  info: "hsla(210, 92%, 45%, 1)",
+  danger: "hsl(360, 100%, 45%)",
+  success: "hsl(140, 100%, 40%)",
+  warning: "hsl(31, 92%, 45%)",
+  info: "hsl(210, 92%, 45%)",
 };
 
 export const darkColors: Colors = {
-  background: "hsla(224, 0%, 4%, 1)",
-  foreground: "hsla(224, 0%, 98%, 1)",
+  background: "hsl(224, 0%, 4%)",
+  foreground: "hsl(224, 0%, 98%)",
 
-  primary: "hsla(224, 0%, 90%, 1)",
-  primaryForeground: "hsla(224, 0%, 9%, 1)",
+  primary: "hsl(224, 0%, 90%)",
+  primaryForeground: "hsl(224, 0%, 9%)",
 
-  secondary: "hsla(224, 0%, 15%, 1)",
-  secondaryForeground: "hsla(224, 0%, 98%, 1)",
+  secondary: "hsl(224, 0%, 15%)",
+  secondaryForeground: "hsl(224, 0%, 98%)",
 
-  muted: "hsla(224, 0%, 15%, 1)",
-  mutedForeground: "hsla(224, 0%, 63%, 1)",
+  muted: "hsl(224, 0%, 15%)",
+  mutedForeground: "hsl(224, 0%, 63%)",
 
-  border: "hsla(224, 0%, 16%, 1)",
-  surface: "hsla(224, 0%, 9%, 1)",
+  border: "hsl(224, 0%, 16%)",
+  surface: "hsl(224, 0%, 9%)",
 
-  danger: "hsla(360, 100%, 45%, 1)",
-  success: "hsla(140, 100%, 40%, 1)",
-  warning: "hsla(31, 92%, 45%, 1)",
-  info: "hsla(210, 92%, 45%, 1)",
+  danger: "hsl(360, 100%, 45%)",
+  success: "hsl(140, 100%, 40%)",
+  warning: "hsl(31, 92%, 45%)",
+  info: "hsl(210, 92%, 45%)",
 };

package/src/themes/types.ts

@@ -1,6 +1,6 @@
 export type ColorScheme = "light" | "dark";
 
-type Color = `hsla(${number}, ${number}%, ${number}%, ${number})`;
+type Color = `hsl(${number}, ${number}%, ${number}%)`;
 
 export interface Colors {
   background: Color;