@newtonedev/components 0.1.12 → 0.1.14

package/src/composites/layout/ContentCard/ContentCard.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import type { ContentCardProps } from './ContentCard.types';
+import { getContentCardStyles } from './ContentCard.styles';
+import { useTokens } from 'newtone-api';
+import { Frame } from '../../../primitives/Frame/Frame';
+
+/**
+ * ContentCard — A content container with three visual treatments.
+ *
+ * **Variants:**
+ * - `elevated` — raised surface with tinted background (hero cards, featured content)
+ * - `bordered` — outlined container (related items, previews)
+ * - `flat` — bottom-border only (list rows, compact items)
+ *
+ * Delegates to Frame for layout, elevation, appearance, and interactivity.
+ *
+ * @example
+ * ```tsx
+ * // Elevated hero card
+ * <ContentCard variant="elevated" href="/articles/intro">
+ *   <Text role="heading" weight="bold">Featured Article</Text>
+ *   <Text role="body" color="secondary">Article excerpt...</Text>
+ * </ContentCard>
+ *
+ * // Bordered card
+ * <ContentCard variant="bordered" onPress={() => navigate(slug)}>
+ *   <Text role="body" weight="bold">Related Article</Text>
+ * </ContentCard>
+ *
+ * // Flat list item
+ * <ContentCard variant="flat" href={`/articles/${slug}`}>
+ *   <Text role="body" weight="bold">{title}</Text>
+ * </ContentCard>
+ * ```
+ */
+export function ContentCard({
+  children,
+  variant = 'bordered',
+  href,
+  onPress,
+  padding = 20,
+  gap = 8,
+  disabled = false,
+  style,
+}: ContentCardProps) {
+  const tokens = useTokens();
+  const isInteractive = !!(href || onPress);
+
+  const variantStyles = React.useMemo(
+    () => getContentCardStyles(variant, isInteractive, tokens),
+    [variant, isInteractive, tokens]
+  );
+
+  return (
+    <Frame
+      elevation={variant === 'elevated' ? 2 : undefined}
+      appearance={variant === 'elevated' ? 'tinted' : undefined}
+      href={href}
+      onPress={onPress}
+      disabled={disabled}
+      padding={padding}
+      gap={gap}
+      style={[
+        variantStyles,
+        ...(Array.isArray(style) ? style : style ? [style] : []),
+      ]}
+    >
+      {children}
+    </Frame>
+  );
+}

package/src/composites/layout/ContentCard/ContentCard.types.ts

@@ -0,0 +1,60 @@
+import type { ViewStyle } from 'react-native';
+import type { PaddingProp, GapProp } from '../../../primitives/Frame/Frame.types';
+
+/**
+ * Visual variant for the ContentCard component
+ */
+export type ContentCardVariant = 'elevated' | 'bordered' | 'flat';
+
+/**
+ * Props for the ContentCard component
+ */
+export interface ContentCardProps {
+  /**
+   * Card content.
+   */
+  readonly children: React.ReactNode;
+
+  /**
+   * Visual variant:
+   * - `'elevated'` — raised surface with tinted background and elevation shadow
+   * - `'bordered'` — outlined container with border and rounded corners
+   * - `'flat'` — minimal, bottom-border only (for list rows)
+   *
+   * @default 'bordered'
+   */
+  readonly variant?: ContentCardVariant;
+
+  /**
+   * Navigation URL — makes the card a link.
+   */
+  readonly href?: string;
+
+  /**
+   * Press handler — makes the card interactive.
+   */
+  readonly onPress?: () => void;
+
+  /**
+   * Padding inside the card.
+   * @default 20
+   */
+  readonly padding?: PaddingProp;
+
+  /**
+   * Gap between children.
+   * @default 8
+   */
+  readonly gap?: GapProp;
+
+  /**
+   * Disabled state
+   * @default false
+   */
+  readonly disabled?: boolean;
+
+  /**
+   * Custom style overrides
+   */
+  readonly style?: ViewStyle | ViewStyle[];
+}

package/src/composites/layout/ContentCard/index.ts

@@ -0,0 +1,2 @@
+export { ContentCard } from './ContentCard';
+export type { ContentCardProps, ContentCardVariant } from './ContentCard.types';

package/src/composites/layout/Divider/Divider.styles.ts

@@ -0,0 +1,30 @@
+import type { ViewStyle } from 'react-native';
+import type { UseTokensResult } from 'newtone-api';
+import type { DividerOrientation } from './Divider.types';
+
+/**
+ * Compute divider styles based on orientation, spacing, and tokens.
+ */
+export function getDividerStyles(
+  orientation: DividerOrientation,
+  spacing: number | undefined,
+  tokens: UseTokensResult
+): ViewStyle {
+  const color = tokens.colors.primary.main.divider;
+
+  if (orientation === 'vertical') {
+    return {
+      width: 1,
+      height: '100%' as any,
+      backgroundColor: color,
+      ...(spacing != null && { marginLeft: spacing, marginRight: spacing }),
+    };
+  }
+
+  return {
+    height: 1,
+    width: '100%' as any,
+    backgroundColor: color,
+    ...(spacing != null && { marginTop: spacing, marginBottom: spacing }),
+  };
+}

package/src/composites/layout/Divider/Divider.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { View } from 'react-native';
+import type { DividerProps } from './Divider.types';
+import { getDividerStyles } from './Divider.styles';
+import { useTokens } from 'newtone-api';
+
+/**
+ * Divider — A horizontal or vertical separator line.
+ *
+ * Uses the theme's divider color from tokens automatically.
+ *
+ * @example
+ * ```tsx
+ * // Horizontal divider
+ * <Divider />
+ *
+ * // With spacing
+ * <Divider spacing={16} />
+ *
+ * // Vertical divider (inside a horizontal Wrapper)
+ * <Wrapper direction="horizontal" align="center">
+ *   <Text>Left</Text>
+ *   <Divider orientation="vertical" spacing={12} />
+ *   <Text>Right</Text>
+ * </Wrapper>
+ * ```
+ */
+export function Divider({
+  orientation = 'horizontal',
+  spacing,
+  style,
+}: DividerProps) {
+  const tokens = useTokens();
+
+  const dividerStyle = React.useMemo(
+    () => getDividerStyles(orientation, spacing, tokens),
+    [orientation, spacing, tokens]
+  );
+
+  return (
+    <View
+      style={[dividerStyle, ...(Array.isArray(style) ? style : style ? [style] : [])]}
+      accessibilityRole="none"
+    />
+  );
+}

package/src/composites/layout/Divider/Divider.types.ts

@@ -0,0 +1,28 @@
+import type { ViewStyle } from 'react-native';
+
+/**
+ * Orientation of the divider line
+ */
+export type DividerOrientation = 'horizontal' | 'vertical';
+
+/**
+ * Props for the Divider component
+ */
+export interface DividerProps {
+  /**
+   * Orientation of the divider line.
+   * @default 'horizontal'
+   */
+  readonly orientation?: DividerOrientation;
+
+  /**
+   * Spacing around the divider (margin above+below for horizontal, left+right for vertical).
+   * Accepts a pixel number.
+   */
+  readonly spacing?: number;
+
+  /**
+   * Custom style overrides
+   */
+  readonly style?: ViewStyle | ViewStyle[];
+}

package/src/composites/layout/Divider/index.ts

@@ -0,0 +1,2 @@
+export { Divider } from './Divider';
+export type { DividerProps, DividerOrientation } from './Divider.types';

package/src/composites/layout/Navbar/Navbar.styles.ts

@@ -1,15 +1,17 @@
 import { StyleSheet } from 'react-native';
-import { srgbToHex } from 'newtone';
-import type { ResolvedTokens } from '../../../tokens/types';
+import type { ResolvedTokens, AppearanceTokens, ThemeName, AppearanceName } from 'newtone-api';
 
 interface NavbarStyleInput {
   readonly tokens: ResolvedTokens;
   readonly height: number;
   readonly bordered: boolean;
+  readonly theme?: ThemeName;
+  readonly appearance?: AppearanceName;
 }
 
-export function getNavbarStyles({ tokens, height, bordered }: NavbarStyleInput) {
-  const borderColor = srgbToHex(tokens.border.srgb);
+export function getNavbarStyles({ tokens, height, bordered, theme = 'primary', appearance = 'main' }: NavbarStyleInput) {
+  const at: AppearanceTokens = tokens.colors[theme][appearance];
+  const borderColor = at.fontSecondary;
 
   return StyleSheet.create({
     container: {
@@ -18,7 +20,7 @@ export function getNavbarStyles({ tokens, height, bordered }: NavbarStyleInput)
       height,
       flexShrink: 0,
       paddingHorizontal: 24,
-      backgroundColor: srgbToHex(tokens.background.srgb),
+      backgroundColor: at.background,
       borderBottomWidth: bordered ? 1 : 0,
       borderBottomColor: borderColor,
     },

package/src/composites/layout/Navbar/Navbar.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { View } from 'react-native';
 import type { NavbarProps } from './Navbar.types';
-import { useTokens } from '../../../tokens/useTokens';
+import { useTokens, useFrameContext } from 'newtone-api';
 import { getNavbarStyles } from './Navbar.styles';
 
 export function Navbar({
@@ -12,9 +12,10 @@ export function Navbar({
   bordered = true,
 }: NavbarProps) {
   const tokens = useTokens();
+  const frameCtx = useFrameContext();
   const styles = React.useMemo(
-    () => getNavbarStyles({ tokens, height, bordered }),
-    [tokens, height, bordered]
+    () => getNavbarStyles({ tokens, height, bordered, theme: frameCtx?.theme, appearance: frameCtx?.appearance }),
+    [tokens, height, bordered, frameCtx?.theme, frameCtx?.appearance]
   );
 
   return (

package/src/composites/layout/Sidebar/Sidebar.styles.ts

@@ -1,22 +1,24 @@
 import { StyleSheet } from 'react-native';
-import { srgbToHex } from 'newtone';
-import type { ResolvedTokens } from '../../../tokens/types';
+import type { ResolvedTokens, AppearanceTokens, ThemeName, AppearanceName } from 'newtone-api';
 
 interface SidebarStyleInput {
   readonly tokens: ResolvedTokens;
   readonly width: number;
   readonly bordered: boolean;
+  readonly theme?: ThemeName;
+  readonly appearance?: AppearanceName;
 }
 
-export function getSidebarStyles({ tokens, width, bordered }: SidebarStyleInput) {
-  const borderColor = srgbToHex(tokens.border.srgb);
+export function getSidebarStyles({ tokens, width, bordered, theme = 'primary', appearance = 'main' }: SidebarStyleInput) {
+  const at: AppearanceTokens = tokens.colors[theme][appearance];
+  const borderColor = at.fontSecondary;
 
   return StyleSheet.create({
     container: {
       width,
       flexShrink: 0,
       flexDirection: 'column',
-      backgroundColor: srgbToHex(tokens.background.srgb),
+      backgroundColor: at.background,
       borderRightWidth: bordered ? 1 : 0,
       borderRightColor: borderColor,
     },

package/src/composites/layout/Sidebar/Sidebar.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { View, ScrollView } from 'react-native';
 import type { SidebarProps } from './Sidebar.types';
-import { useTokens } from '../../../tokens/useTokens';
+import { useTokens, useFrameContext } from 'newtone-api';
 import { getSidebarStyles } from './Sidebar.styles';
 
 export function Sidebar({
@@ -12,9 +12,10 @@ export function Sidebar({
   bordered = true,
 }: SidebarProps) {
   const tokens = useTokens();
+  const frameCtx = useFrameContext();
   const styles = React.useMemo(
-    () => getSidebarStyles({ tokens, width, bordered }),
-    [tokens, width, bordered]
+    () => getSidebarStyles({ tokens, width, bordered, theme: frameCtx?.theme, appearance: frameCtx?.appearance }),
+    [tokens, width, bordered, frameCtx?.theme, frameCtx?.appearance]
   );
 
   return (

package/src/composites/overlays/Popover/Popover.styles.ts

@@ -1,6 +1,5 @@
 import { StyleSheet } from 'react-native';
-import { srgbToHex } from 'newtone';
-import type { ResolvedTokens } from '../../../tokens/types';
+import type { ResolvedTokens, AppearanceTokens, ThemeName, AppearanceName } from 'newtone-api';
 
 export function getPopoverStyles(
   tokens: ResolvedTokens,
@@ -8,8 +7,11 @@ export function getPopoverStyles(
   offset: number,
   maxHeight: number,
   width: 'trigger' | 'auto' | number,
-  isOpen: boolean
+  isOpen: boolean,
+  theme: ThemeName = 'primary',
+  appearance: AppearanceName = 'main',
 ) {
+  const at: AppearanceTokens = tokens.colors[theme][appearance];
   const widthStyle =
     width === 'trigger'
       ? { left: 0 as const, right: 0 as const }
@@ -26,9 +28,9 @@ export function getPopoverStyles(
       position: 'absolute',
       top: triggerHeight + offset,
       ...widthStyle,
-      backgroundColor: srgbToHex(tokens.backgroundElevated.srgb),
+      backgroundColor: at.fontPrimary,
       borderWidth: 1,
-      borderColor: srgbToHex(tokens.border.srgb),
+      borderColor: at.fontSecondary,
       borderRadius: tokens.radius.md,
       maxHeight,
       zIndex: 1000,

package/src/composites/overlays/Popover/Popover.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { View } from 'react-native';
 import type { PopoverProps } from './Popover.types';
-import { useTokens } from '../../../tokens/useTokens';
+import { useTokens, useFrameContext } from 'newtone-api';
 import { getPopoverStyles } from './Popover.styles';
 
 // Module-level: set of close callbacks for all open Popovers.
@@ -21,6 +21,7 @@ export function Popover({
   contentStyle,
 }: PopoverProps) {
   const tokens = useTokens(1);
+  const frameCtx = useFrameContext();
   const containerRef = useRef<View>(null);
   const [triggerHeight, setTriggerHeight] = useState(0);
 
@@ -68,8 +69,8 @@ export function Popover({
   );
 
   const styles = useMemo(
-    () => getPopoverStyles(tokens, triggerHeight, offset, maxHeight, width, isOpen),
-    [tokens, triggerHeight, offset, maxHeight, width, isOpen]
+    () => getPopoverStyles(tokens, triggerHeight, offset, maxHeight, width, isOpen, frameCtx?.theme, frameCtx?.appearance),
+    [tokens, triggerHeight, offset, maxHeight, width, isOpen, frameCtx?.theme, frameCtx?.appearance]
   );
 
   const containerStyles = useMemo(

package/src/composites/range-inputs/ColorScaleSlider/ColorScaleSlider.styles.ts

@@ -1,6 +1,5 @@
 import { StyleSheet } from 'react-native';
-import { srgbToHex } from 'newtone';
-import type { ResolvedTokens } from '../../../tokens/types';
+import type { ResolvedTokens } from 'newtone-api';
 
 const TRACK_HEIGHT = 22;
 export const THUMB_SIZE = 18;
@@ -20,7 +19,7 @@ export function getColorScaleSliderStyles(tokens: ResolvedTokens, disabled: bool
       fontFamily: tokens.typography.fonts.main.family,
       fontSize: tokens.typography.fontSizes['04'],
       fontWeight: tokens.typography.fonts.main.weights.medium as any,
-      color: srgbToHex(tokens.textSecondary.srgb),
+      color: tokens.colors.primary.main.fontTertiary,
     },
     trackContainer: {
       height: TRACK_HEIGHT + THUMB_SIZE,
@@ -46,13 +45,13 @@ export function getColorScaleSliderStyles(tokens: ResolvedTokens, disabled: bool
       borderRadius: THUMB_SIZE / 2,
       backgroundColor: '#ffffff',
       borderWidth: 2,
-      borderColor: srgbToHex(tokens.border.srgb),
+      borderColor: tokens.colors.primary.main.fontSecondary,
     },
     warning: {
       fontFamily: tokens.typography.fonts.main.family,
       fontSize: tokens.typography.fontSizes['01'],
       fontWeight: tokens.typography.fonts.main.weights.medium as any,
-      color: srgbToHex(tokens.error.fill.srgb),
+      color: tokens.colors.error.emphasis.divider,
     },
   });
 }

package/src/composites/range-inputs/ColorScaleSlider/ColorScaleSlider.tsx

@@ -1,8 +1,10 @@
 import React from 'react';
 import { View, Text, PanResponder, Animated } from 'react-native';
 import { srgbToHex } from 'newtone';
+import { oklchToP3Css } from '@newtonedev/colors';
+import type { Oklch } from '@newtonedev/colors';
 import type { ColorScaleSliderProps } from './ColorScaleSlider.types';
-import { useTokens } from '../../../tokens/useTokens';
+import { useTokens, useNewtoneTheme } from 'newtone-api';
 import { getColorScaleSliderStyles, THUMB_SIZE } from './ColorScaleSlider.styles';
 
 /**
@@ -24,9 +26,11 @@ export function ColorScaleSlider({
   snap = false,
   disabled = false,
   animateValue = false,
+  useP3: _useP3,
   style,
 }: ColorScaleSliderProps) {
   const tokens = useTokens(1);
+  const { gamut } = useNewtoneTheme();
 
   const styles = React.useMemo(
     () => getColorScaleSliderStyles(tokens, disabled),
@@ -143,7 +147,7 @@ export function ColorScaleSlider({
       >
         <View style={styles.gradientTrack}>
           {visibleColors.map((color, i) => (
-            <View key={i} style={[styles.segment, { backgroundColor: srgbToHex(color.srgb) }]} />
+            <View key={i} style={[styles.segment, { backgroundColor: gamut === 'p3' ? oklchToP3Css(color.oklch) : srgbToHex(color.srgb) }]} />
           ))}
         </View>
         <Animated.View style={[styles.thumb, { left: thumbAnim }]} />

package/src/composites/range-inputs/ColorScaleSlider/ColorScaleSlider.types.ts

@@ -20,6 +20,8 @@ export interface ColorScaleSliderProps {
   readonly disabled?: boolean;
   /** Animate thumb position on prop-driven value changes (e.g., mode switch). Default: false */
   readonly animateValue?: boolean;
+  /** @deprecated Gamut is now read from context via `useTokens().gamut`. This prop is ignored. */
+  readonly useP3?: boolean;
   /** Optional style override */
   readonly style?: ViewStyle | ViewStyle[];
 }

package/src/composites/range-inputs/HueSlider/HueSlider.styles.ts

@@ -1,24 +1,17 @@
 import { StyleSheet } from 'react-native';
-import { srgbToHex } from 'newtone';
-import type { ResolvedTokens } from '../../../tokens/types';
+import { srgbToHex, gamutMapToSrgb } from 'newtone';
+import type { ResolvedTokens } from 'newtone-api';
 
 const TRACK_HEIGHT = 22;
 export const THUMB_SIZE = 18;
 const SEGMENT_COUNT = 48;
+const OKLCH_L = 0.7;
+const OKLCH_C = 0.4;
 
-/** Convert an HSL hue (S=100%, L=50%) to a hex string. */
-export function hueToHex(hue: number): string {
-  const h = ((hue % 360) + 360) % 360;
-  const x = 1 - Math.abs((h / 60) % 2 - 1);
-  let r: number, g: number, b: number;
-  if (h < 60) { r = 1; g = x; b = 0; }
-  else if (h < 120) { r = x; g = 1; b = 0; }
-  else if (h < 180) { r = 0; g = 1; b = x; }
-  else if (h < 240) { r = 0; g = x; b = 1; }
-  else if (h < 300) { r = x; g = 0; b = 1; }
-  else { r = 1; g = 0; b = x; }
-  const toHex = (v: number) => Math.round(v * 255).toString(16).padStart(2, '0');
-  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+/** Convert an OKLCH hue [0, 360) to a hex string via gamut-mapped rendering. */
+export function hueToHex(oklchHue: number): string {
+  const { color } = gamutMapToSrgb({ L: OKLCH_L, C: OKLCH_C, h: oklchHue });
+  return srgbToHex(color);
 }
 
 /** Build an array of hex colors for the gradient track segments. */
@@ -44,23 +37,23 @@ export function getHueSliderStyles(tokens: ResolvedTokens, disabled: boolean) {
       fontFamily: tokens.typography.fonts.main.family,
       fontSize: tokens.typography.fontSizes['04'],
       fontWeight: tokens.typography.fonts.main.weights.medium as any,
-      color: srgbToHex(tokens.textSecondary.srgb),
+      color: tokens.colors.primary.main.fontTertiary,
     },
     value: {
       fontFamily: tokens.typography.fonts.main.family,
       fontSize: tokens.typography.fontSizes['04'],
       fontWeight: tokens.typography.fonts.main.weights.medium as any,
-      color: srgbToHex(tokens.textPrimary.srgb),
+      color: tokens.colors.primary.main.divider,
     },
     valueInput: {
       width: 48,
       paddingVertical: 0,
       paddingHorizontal: 4,
       borderWidth: 1,
-      borderColor: srgbToHex(tokens.border.srgb),
+      borderColor: tokens.colors.primary.main.fontSecondary,
       borderRadius: 4,
       backgroundColor: 'transparent',
-      color: srgbToHex(tokens.textPrimary.srgb),
+      color: tokens.colors.primary.main.divider,
       fontFamily: tokens.typography.fonts.main.family,
       fontSize: tokens.typography.fontSizes['04'],
       fontWeight: tokens.typography.fonts.main.weights.medium as any,
@@ -90,7 +83,7 @@ export function getHueSliderStyles(tokens: ResolvedTokens, disabled: boolean) {
       borderRadius: THUMB_SIZE / 2,
       backgroundColor: '#ffffff',
       borderWidth: 2,
-      borderColor: srgbToHex(tokens.border.srgb),
+      borderColor: tokens.colors.primary.main.fontSecondary,
     },
   });
 }

package/src/composites/range-inputs/HueSlider/HueSlider.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { View, Text, TextInput, PanResponder } from 'react-native';
 import type { HueSliderProps } from './HueSlider.types';
-import { useTokens } from '../../../tokens/useTokens';
+import { useTokens } from 'newtone-api';
 import {
   getHueSliderStyles,
   buildHueSegments,
@@ -11,18 +11,17 @@ import {
 /**
  * Hue slider with rainbow gradient track.
  *
- * Value range: 0-359 (traditional color wheel hue).
- * 0=red, 60=yellow, 120=green, 180=cyan, 240=blue, 300=magenta.
+ * Value range: OKLCH hue [0, 360).
  *
  * Optional min/max constrain the selectable range.
- * For wrapping ranges (e.g. red: min=345 max=375), max may exceed 359;
- * the returned value is always normalized to [0, 359].
+ * For wrapping ranges, max may exceed 360;
+ * the returned value is always normalized to [0, 360).
  */
 export function HueSlider({
   value,
   onValueChange,
   min = 0,
-  max = 359,
+  max = 360,
   label,
   showValue = false,
   editableValue = false,
@@ -78,8 +77,8 @@ export function HueSlider({
     })
   ).current;
 
-  // For wrapping ranges (max > 359), convert stored value to slider range
-  const sliderValue = max > 359 && value < min ? value + 360 : value;
+  // For wrapping ranges (max > 360), convert stored value to slider range
+  const sliderValue = max > 360 && value < min ? value + 360 : value;
   const ratio = max > min ? (sliderValue - min) / (max - min) : 0;
   const usableWidth = Math.max(0, layoutWidth - THUMB_SIZE);
   const thumbLeft = ratio * usableWidth;

package/src/composites/range-inputs/Slider/Slider.styles.ts

@@ -1,6 +1,5 @@
 import { StyleSheet } from 'react-native';
-import { srgbToHex } from 'newtone';
-import type { ResolvedTokens } from '../../../tokens/types';
+import type { ResolvedTokens } from 'newtone-api';
 
 const TRACK_HEIGHT = 6;
 export const THUMB_SIZE = 16;
@@ -20,23 +19,23 @@ export function getSliderStyles(tokens: ResolvedTokens, disabled: boolean) {
       fontFamily: tokens.typography.fonts.main.family,
       fontSize: tokens.typography.fontSizes['04'],
       fontWeight: tokens.typography.fonts.main.weights.medium as any,
-      color: srgbToHex(tokens.textSecondary.srgb),
+      color: tokens.colors.primary.main.fontTertiary,
     },
     value: {
       fontFamily: tokens.typography.fonts.main.family,
       fontSize: tokens.typography.fontSizes['04'],
       fontWeight: tokens.typography.fonts.main.weights.medium as any,
-      color: srgbToHex(tokens.textPrimary.srgb),
+      color: tokens.colors.primary.main.divider,
     },
     valueInput: {
       width: 48,
       paddingVertical: 0,
       paddingHorizontal: 4,
       borderWidth: 1,
-      borderColor: srgbToHex(tokens.border.srgb),
+      borderColor: tokens.colors.primary.main.fontSecondary,
       borderRadius: 4,
       backgroundColor: 'transparent',
-      color: srgbToHex(tokens.textPrimary.srgb),
+      color: tokens.colors.primary.main.divider,
       fontFamily: tokens.typography.fonts.main.family,
       fontSize: tokens.typography.fontSizes['04'],
       fontWeight: tokens.typography.fonts.main.weights.medium as any,
@@ -53,21 +52,21 @@ export function getSliderStyles(tokens: ResolvedTokens, disabled: boolean) {
       right: 0,
       height: TRACK_HEIGHT,
       borderRadius: TRACK_HEIGHT / 2,
-      backgroundColor: srgbToHex(tokens.border.srgb),
+      backgroundColor: tokens.colors.primary.main.fontSecondary,
     },
     trackFill: {
       position: 'absolute',
       left: 0,
       height: TRACK_HEIGHT,
       borderRadius: TRACK_HEIGHT / 2,
-      backgroundColor: srgbToHex(tokens.accent.fill.srgb),
+      backgroundColor: tokens.colors.primary.emphasis.divider,
     },
     thumb: {
       position: 'absolute',
       width: THUMB_SIZE,
       height: THUMB_SIZE,
       borderRadius: THUMB_SIZE / 2,
-      backgroundColor: srgbToHex(tokens.accent.fill.srgb),
+      backgroundColor: tokens.colors.primary.emphasis.divider,
     },
   });
 }