src/sigil/web/styles/palette.sgl

1;;; (sigil web styles palette) - Color palettes for Sigil web apps.

2;;;

3;;; A palette is a record of named colors used by all component styles.

4;;; The default palette is black and gold. Apps can create custom palettes

5;;; with `make-palette` and pass them to component style functions.

7(define-library (sigil web styles palette)

8 (import (sigil core)

9 (sigil string)

10 (sigil css))

12 (export make-palette

13 default-palette

14 palette-background

15 palette-surface

16 palette-surface-hover

17 palette-primary

18 palette-primary-hover

19 palette-text

20 palette-text-muted

21 palette-border

22 palette-success

23 palette-warning

24 palette-error

25 palette->css-vars)

27 (begin

29 ;; A palette is a simple alist of named colors.

30 ;; Using an alist allows easy extension and customization.

32 (define (make-palette (keys: background surface surface-hover

33 primary primary-hover

34 text text-muted border

35 success warning error))

36 (list (cons 'background background)

37 (cons 'surface surface)

38 (cons 'surface-hover surface-hover)

39 (cons 'primary primary)

40 (cons 'primary-hover primary-hover)

41 (cons 'text text)

42 (cons 'text-muted text-muted)

43 (cons 'border border)

44 (cons 'success success)

45 (cons 'warning warning)

46 (cons 'error error)))

48 (define default-palette

49 (make-palette

50 background: "#0a0a0a"

51 surface: "#141414"

52 surface-hover: "#1e1e1e"

53 primary: "#f0c040"

54 primary-hover: "#b89830"

55 text: "#e0e0e0"

56 text-muted: "#888888"

57 border: "#2a2a2a"

58 success: "#22c55e"

59 warning: "#f59e0b"

60 error: "#ef4444"))

62 ;; Accessors

63 (define (palette-ref p key)

64 (let ((pair (assoc key p)))

65 (if pair (cdr pair) #f)))

67 (define (palette-background p) (palette-ref p 'background))

68 (define (palette-surface p) (palette-ref p 'surface))

69 (define (palette-surface-hover p) (palette-ref p 'surface-hover))

70 (define (palette-primary p) (palette-ref p 'primary))

71 (define (palette-primary-hover p) (palette-ref p 'primary-hover))

72 (define (palette-text p) (palette-ref p 'text))

73 (define (palette-text-muted p) (palette-ref p 'text-muted))

74 (define (palette-border p) (palette-ref p 'border))

75 (define (palette-success p) (palette-ref p 'success))

76 (define (palette-warning p) (palette-ref p 'warning))

77 (define (palette-error p) (palette-ref p 'error))

79 ;; Convert palette to CSS custom properties (:root block)

80 (define (palette->css-vars p)

81 (css-vars

82 (--color-bg (palette-background p))

83 (--color-surface (palette-surface p))

84 (--color-surface-hover (palette-surface-hover p))

85 (--color-primary (palette-primary p))

86 (--color-primary-hover (palette-primary-hover p))

87 (--color-text (palette-text p))

88 (--color-text-muted (palette-text-muted p))

89 (--color-border (palette-border p))

90 (--color-success (palette-success p))

91 (--color-warning (palette-warning p))

92 (--color-error (palette-error p))))

94 ))