
   0 | module CyBy.UI.CSS.Vars
   1 | 
   2 | import public CyBy.UI.CSS.Tailwind
   3 | 
   4 | %default total
   5 | 
   6 | ||| Variables to be used in CSS styling.
   7 | public export
   8 | record Vars where
   9 |   [noHints]
  10 |   constructor V
  11 | 
  12 |   --    Colours
  13 |   gray                : TailwindColor
  14 |   primary             : TailwindColor
  15 |   secondary           : TailwindColor
  16 |   errorColor          : Color
  17 |   warnColor           : Color
  18 |   infoColor           : Color
  19 |   debugColor          : Color
  20 |   traceColor          : Color
  21 | 
  22 |   --    Font Sizes
  23 |   smallFont           : FontSize
  24 |   xsmallFont          : FontSize
  25 |   xxsmallFont         : FontSize
  26 | 
  27 |   --    Logging
  28 |   levelWidth          : Width
  29 | 
  30 |   --    Components
  31 |   titleHeight         : Width        -- height of a component title
  32 |   titleSepWidth       : Width        -- width of a separator component title
  33 | 
  34 |   --    containers
  35 |   bardim              : Length       -- height of a horizontal toolbar
  36 |   formLblWidth        : Width        -- width of a label in a form
  37 |   barSepWidth         : Width        -- width of a separator in a toolbar
  38 |   barSepRadius        : BorderRadius -- radius of toolbar separator
  39 |   barSepMargin        : Length       -- cross-axis margin of a separator in a toolbar
  40 |   formSepWidth        : Width        -- width of field separator in a form
  41 | 
  42 |   --    widgets --
  43 |   widgetHeight        : Width        -- height of a widget
  44 |   padding             : Length
  45 |   smallPadding        : Length
  46 |   largePadding        : Length
  47 | 
  48 | export
  49 | defaultVars : Vars
  50 | defaultVars =
  51 |   V {
  52 |     gray                = twNeutral
  53 |   , primary             = twEmerald
  54 |   , secondary           = twYellow
  55 |   , errorColor          = twRed.c700
  56 |   , warnColor           = twYellow.c700
  57 |   , infoColor           = twEmerald.c700
  58 |   , debugColor          = twSky.c700
  59 |   , traceColor          = twNeutral.c500
  60 | 
  61 |   , smallFont           = 0.875.em  -- 14/16
  62 |   , xsmallFont          = 0.75.em   -- 12/16
  63 |   , xxsmallFont         = 0.625.em  -- 10/16
  64 | 
  65 |   , levelWidth          = 5.em
  66 | 
  67 |   , titleHeight         = 2.5.em
  68 |   , titleSepWidth       = 3.px
  69 | 
  70 |   , bardim              = 1.8.em
  71 |   , formLblWidth        = 8.em
  72 |   , barSepWidth         = 4.px
  73 |   , barSepRadius        = 2.px
  74 |   , barSepMargin        = 0.4.em
  75 |   , formSepWidth        = 1.px
  76 | 
  77 |   , widgetHeight        = 1.8.em
  78 |   , smallPadding        = 0.2.em
  79 |   , padding             = 0.4.em
  80 |   , largePadding        = 0.6.em
  81 |   }
  82 | 
  83 | --------------------------------------------------------------------------------
  84 | -- Semantic Variables
  85 | --------------------------------------------------------------------------------
  86 | 
  87 | parameters {auto v : Vars}
  88 | 
  89 |   ||| Default background colour
  90 |   export %inline
  91 |   bg : Color
  92 |   bg = v.gray.c200
  93 | 
  94 |   ||| Default text colour
  95 |   export %inline
  96 |   fg : Color
  97 |   fg = v.gray.c900
  98 | 
  99 |   export
 100 |   headerFG : Color
 101 |   headerFG = v.gray.c100
 102 | 
 103 |   export
 104 |   headerBG : Color
 105 |   headerBG = v.primary.c900
 106 | 
 107 |   export
 108 |   compBorder : Color
 109 |   compBorder = v.primary.c900
 110 | 
 111 |   export
 112 |   widgetFG : Color
 113 |   widgetFG = v.primary.c900
 114 | 
 115 |   export
 116 |   widgetBG : Color
 117 |   widgetBG = v.gray.c200
 118 | 
 119 |   export
 120 |   widgetInvertFG : Color
 121 |   widgetInvertFG = v.gray.c100
 122 | 
 123 |   export
 124 |   widgetInvertBG : Color
 125 |   widgetInvertBG = v.gray.c800
 126 | 
 127 |   export
 128 |   hoverBG : Color
 129 |   hoverBG = v.gray.c100
 130 | 
 131 |   export
 132 |   hoverInvertBG : Color
 133 |   hoverInvertBG = v.gray.c900
 134 | 
 135 |   export
 136 |   activeFG : Color
 137 |   activeFG = v.gray.c100
 138 | 
 139 |   export
 140 |   activeBG : Color
 141 |   activeBG = v.secondary.c600
 142 | 
 143 |   export
 144 |   disabledFG : Color
 145 |   disabledFG = v.gray.c500
 146 | 
 147 |   export
 148 |   disabledBG : Color
 149 |   disabledBG = v.gray.c300
 150 | 
 151 |   export
 152 |   missingFG : Color
 153 |   missingFG = v.debugColor
 154 | 
 155 |   export
 156 |   bar : Color
 157 |   bar = v.gray.c500
 158 |