logo

pleroma-fe

My custom branche(s) on git.pleroma.social/pleroma/pleroma-fe git clone https://hacktivis.me/git/pleroma-fe.git

pleromafe.js (17211B)

    

  1. import { invertLightness, brightness } from 'chromatism'
  2. import { alphaBlend, mixrgb } from '../color_convert/color_convert.js'
  3. /* This is a definition of all layer combinations
  4.  * each key is a topmost layer, each value represents layer underneath
  5.  * this is essentially a simplified tree
  6.  */
  7. export const LAYERS = {
  8.   undelay: null, // root
  9.   topBar: null, // no transparency support
  10.   badge: null, //  no transparency support
  11.   profileTint: null, // doesn't matter
  12.   fg: null,
  13.   bg: 'underlay',
  14.   highlight: 'bg',
  15.   panel: 'bg',
  16.   popover: 'bg',
  17.   selectedMenu: 'popover',
  18.   btn: 'bg',
  19.   btnPanel: 'panel',
  20.   btnTopBar: 'topBar',
  21.   input: 'bg',
  22.   inputPanel: 'panel',
  23.   inputTopBar: 'topBar',
  24.   alert: 'bg',
  25.   alertPanel: 'panel',
  26.   poll: 'bg',
  27.   chatBg: 'underlay',
  28.   chatMessage: 'chatBg'
  29. }
  31. /* By default opacity slots have 1 as default opacity
  32.  * this allows redefining it to something else
  33.  */
  34. export const DEFAULT_OPACITY = {
  35.   profileTint: 0.5,
  36.   alert: 0.5,
  37.   input: 0.5,
  38.   faint: 0.5,
  39.   underlay: 0.15,
  40.   alertPopup: 0.95
  41. }
  43. /**  SUBJECT TO CHANGE IN THE FUTURE, this is all beta
  44.  * Color and opacity slots definitions. Each key represents a slot.
  45.  *
  46.  * Short-hands:
  47.  * String beginning with `--` - value after dashes treated as sole
  48.  *     dependency - i.e. `--value` equivalent to { depends: ['value']}
  49.  * String beginning with `#` - value would be treated as solid color
  50.  *     defined in hexadecimal representation (i.e. #FFFFFF) and will be
  51.  *     used as default. `#FFFFFF` is equivalent to { default: '#FFFFFF'}
  52.  *
  53.  * Full definition:
  54.  * @property {String[]} depends - color slot names this color depends ones.
  55.  *   cyclic dependencies are supported to some extent but not recommended.
  56.  * @property {String} [opacity] - opacity slot used by this color slot.
  57.  *   opacity is inherited from parents. To break inheritance graph use null
  58.  * @property {Number} [priority] - EXPERIMENTAL. used to pre-sort slots so
  59.  *   that slots with higher priority come earlier
  60.  * @property {Function(mod, ...colors)} [color] - function that will be
  61.  *   used to determine the color. By default it just copies first color in
  62.  *   dependency list.
  63.  * @argument {Number} mod - `1` (light-on-dark) or `-1` (dark-on-light)
  64.  *   depending on background color (for textColor)/given color.
  65.  * @argument {...Object} deps - each argument after mod represents each
  66.  *   color from `depends` array. All colors take user customizations into
  67.  *   account and represented by { r, g, b } objects.
  68.  * @returns {Object} resulting color, should be in { r, g, b } form
  69.  *
  70.  * @property {Boolean|String} [textColor] - true to mark color slot as text
  71.  *   color. This enables automatic text color generation for the slot. Use
  72.  *   'preserve' string if you don't want text color to fall back to
  73.  *   black/white. Use 'bw' to only ever use black or white. This also makes
  74.  *   following properties required:
  75.  * @property {String} [layer] - which layer the text sit on top on - used
  76.  *   to account for transparency in text color calculation
  77.  *   layer is inherited from parents. To break inheritance graph use null
  78.  * @property {String} [variant] - which color slot is background (same as
  79.  *   above, used to account for transparency)
  80.  */
  81. export const SLOT_INHERITANCE = {
  82.   bg: {
  83.     depends: [],
  84.     opacity: 'bg',
  85.     priority: 1
  86.   },
  87.   wallpaper: {
  88.     depends: ['bg'],
  89.     color: (mod, bg) => brightness(-2 * mod, bg).rgb
  90.   },
  91.   fg: {
  92.     depends: [],
  93.     priority: 1
  94.   },
  95.   text: {
  96.     depends: [],
  97.     layer: 'bg',
  98.     opacity: null,
  99.     priority: 1
  100.   },
  101.   underlay: {
  102.     default: '#000000',
  103.     opacity: 'underlay'
  104.   },
  105.   link: {
  106.     depends: ['accent'],
  107.     priority: 1
  108.   },
  109.   accent: {
  110.     depends: ['link'],
  111.     priority: 1
  112.   },
  113.   faint: {
  114.     depends: ['text'],
  115.     opacity: 'faint'
  116.   },
  117.   faintLink: {
  118.     depends: ['link'],
  119.     opacity: 'faint'
  120.   },
  121.   postFaintLink: {
  122.     depends: ['postLink'],
  123.     opacity: 'faint'
  124.   },
  126.   cBlue: '#0000ff',
  127.   cRed: '#FF0000',
  128.   cGreen: '#00FF00',
  129.   cOrange: '#E3FF00',
  131.   profileBg: {
  132.     depends: ['bg'],
  133.     color: (mod, bg) => ({
  134.       r: Math.floor(bg.r * 0.53),
  135.       g: Math.floor(bg.g * 0.56),
  136.       b: Math.floor(bg.b * 0.59)
  137.     })
  138.   },
  139.   profileTint: {
  140.     depends: ['bg'],
  141.     layer: 'profileTint',
  142.     opacity: 'profileTint'
  143.   },
  145.   highlight: {
  146.     depends: ['bg'],
  147.     color: (mod, bg) => brightness(5 * mod, bg).rgb
  148.   },
  149.   highlightLightText: {
  150.     depends: ['lightText'],
  151.     layer: 'highlight',
  152.     textColor: true
  153.   },
  154.   highlightPostLink: {
  155.     depends: ['postLink'],
  156.     layer: 'highlight',
  157.     textColor: 'preserve'
  158.   },
  159.   highlightFaintText: {
  160.     depends: ['faint'],
  161.     layer: 'highlight',
  162.     textColor: true
  163.   },
  164.   highlightFaintLink: {
  165.     depends: ['faintLink'],
  166.     layer: 'highlight',
  167.     textColor: 'preserve'
  168.   },
  169.   highlightPostFaintLink: {
  170.     depends: ['postFaintLink'],
  171.     layer: 'highlight',
  172.     textColor: 'preserve'
  173.   },
  174.   highlightText: {
  175.     depends: ['text'],
  176.     layer: 'highlight',
  177.     textColor: true
  178.   },
  179.   highlightLink: {
  180.     depends: ['link'],
  181.     layer: 'highlight',
  182.     textColor: 'preserve'
  183.   },
  184.   highlightIcon: {
  185.     depends: ['highlight', 'highlightText'],
  186.     color: (mod, bg, text) => mixrgb(bg, text)
  187.   },
  189.   popover: {
  190.     depends: ['bg'],
  191.     opacity: 'popover'
  192.   },
  193.   popoverLightText: {
  194.     depends: ['lightText'],
  195.     layer: 'popover',
  196.     textColor: true
  197.   },
  198.   popoverPostLink: {
  199.     depends: ['postLink'],
  200.     layer: 'popover',
  201.     textColor: 'preserve'
  202.   },
  203.   popoverFaintText: {
  204.     depends: ['faint'],
  205.     layer: 'popover',
  206.     textColor: true
  207.   },
  208.   popoverFaintLink: {
  209.     depends: ['faintLink'],
  210.     layer: 'popover',
  211.     textColor: 'preserve'
  212.   },
  213.   popoverPostFaintLink: {
  214.     depends: ['postFaintLink'],
  215.     layer: 'popover',
  216.     textColor: 'preserve'
  217.   },
  218.   popoverText: {
  219.     depends: ['text'],
  220.     layer: 'popover',
  221.     textColor: true
  222.   },
  223.   popoverLink: {
  224.     depends: ['link'],
  225.     layer: 'popover',
  226.     textColor: 'preserve'
  227.   },
  228.   popoverIcon: {
  229.     depends: ['popover', 'popoverText'],
  230.     color: (mod, bg, text) => mixrgb(bg, text)
  231.   },
  233.   selectedPost: '--highlight',
  234.   selectedPostFaintText: {
  235.     depends: ['highlightFaintText'],
  236.     layer: 'highlight',
  237.     variant: 'selectedPost',
  238.     textColor: true
  239.   },
  240.   selectedPostLightText: {
  241.     depends: ['highlightLightText'],
  242.     layer: 'highlight',
  243.     variant: 'selectedPost',
  244.     textColor: true
  245.   },
  246.   selectedPostPostLink: {
  247.     depends: ['highlightPostLink'],
  248.     layer: 'highlight',
  249.     variant: 'selectedPost',
  250.     textColor: 'preserve'
  251.   },
  252.   selectedPostFaintLink: {
  253.     depends: ['highlightFaintLink'],
  254.     layer: 'highlight',
  255.     variant: 'selectedPost',
  256.     textColor: 'preserve'
  257.   },
  258.   selectedPostText: {
  259.     depends: ['highlightText'],
  260.     layer: 'highlight',
  261.     variant: 'selectedPost',
  262.     textColor: true
  263.   },
  264.   selectedPostLink: {
  265.     depends: ['highlightLink'],
  266.     layer: 'highlight',
  267.     variant: 'selectedPost',
  268.     textColor: 'preserve'
  269.   },
  270.   selectedPostIcon: {
  271.     depends: ['selectedPost', 'selectedPostText'],
  272.     color: (mod, bg, text) => mixrgb(bg, text)
  273.   },
  275.   selectedMenu: {
  276.     depends: ['bg'],
  277.     color: (mod, bg) => brightness(5 * mod, bg).rgb
  278.   },
  279.   selectedMenuLightText: {
  280.     depends: ['highlightLightText'],
  281.     layer: 'selectedMenu',
  282.     variant: 'selectedMenu',
  283.     textColor: true
  284.   },
  285.   selectedMenuFaintText: {
  286.     depends: ['highlightFaintText'],
  287.     layer: 'selectedMenu',
  288.     variant: 'selectedMenu',
  289.     textColor: true
  290.   },
  291.   selectedMenuFaintLink: {
  292.     depends: ['highlightFaintLink'],
  293.     layer: 'selectedMenu',
  294.     variant: 'selectedMenu',
  295.     textColor: 'preserve'
  296.   },
  297.   selectedMenuText: {
  298.     depends: ['highlightText'],
  299.     layer: 'selectedMenu',
  300.     variant: 'selectedMenu',
  301.     textColor: true
  302.   },
  303.   selectedMenuLink: {
  304.     depends: ['highlightLink'],
  305.     layer: 'selectedMenu',
  306.     variant: 'selectedMenu',
  307.     textColor: 'preserve'
  308.   },
  309.   selectedMenuIcon: {
  310.     depends: ['selectedMenu', 'selectedMenuText'],
  311.     color: (mod, bg, text) => mixrgb(bg, text)
  312.   },
  314.   selectedMenuPopover: {
  315.     depends: ['popover'],
  316.     color: (mod, bg) => brightness(5 * mod, bg).rgb
  317.   },
  318.   selectedMenuPopoverLightText: {
  319.     depends: ['selectedMenuLightText'],
  320.     layer: 'selectedMenuPopover',
  321.     variant: 'selectedMenuPopover',
  322.     textColor: true
  323.   },
  324.   selectedMenuPopoverFaintText: {
  325.     depends: ['selectedMenuFaintText'],
  326.     layer: 'selectedMenuPopover',
  327.     variant: 'selectedMenuPopover',
  328.     textColor: true
  329.   },
  330.   selectedMenuPopoverFaintLink: {
  331.     depends: ['selectedMenuFaintLink'],
  332.     layer: 'selectedMenuPopover',
  333.     variant: 'selectedMenuPopover',
  334.     textColor: 'preserve'
  335.   },
  336.   selectedMenuPopoverText: {
  337.     depends: ['selectedMenuText'],
  338.     layer: 'selectedMenuPopover',
  339.     variant: 'selectedMenuPopover',
  340.     textColor: true
  341.   },
  342.   selectedMenuPopoverLink: {
  343.     depends: ['selectedMenuLink'],
  344.     layer: 'selectedMenuPopover',
  345.     variant: 'selectedMenuPopover',
  346.     textColor: 'preserve'
  347.   },
  348.   selectedMenuPopoverIcon: {
  349.     depends: ['selectedMenuPopover', 'selectedMenuText'],
  350.     color: (mod, bg, text) => mixrgb(bg, text)
  351.   },
  353.   lightText: {
  354.     depends: ['text'],
  355.     layer: 'bg',
  356.     textColor: 'preserve',
  357.     color: (mod, text) => brightness(20 * mod, text).rgb
  358.   },
  360.   postLink: {
  361.     depends: ['link'],
  362.     layer: 'bg',
  363.     textColor: 'preserve'
  364.   },
  366.   postGreentext: {
  367.     depends: ['cGreen'],
  368.     layer: 'bg',
  369.     textColor: 'preserve'
  370.   },
  372.   postCyantext: {
  373.     depends: ['cBlue'],
  374.     layer: 'bg',
  375.     textColor: 'preserve'
  376.   },
  378.   border: {
  379.     depends: ['fg'],
  380.     opacity: 'border',
  381.     color: (mod, fg) => brightness(2 * mod, fg).rgb
  382.   },
  384.   poll: {
  385.     depends: ['accent', 'bg'],
  386.     copacity: 'poll',
  387.     color: (mod, accent, bg) => alphaBlend(accent, 0.4, bg)
  388.   },
  389.   pollText: {
  390.     depends: ['text'],
  391.     layer: 'poll',
  392.     textColor: true
  393.   },
  395.   icon: {
  396.     depends: ['bg', 'text'],
  397.     inheritsOpacity: false,
  398.     color: (mod, bg, text) => mixrgb(bg, text)
  399.   },
  401.   // Foreground
  402.   fgText: {
  403.     depends: ['text'],
  404.     layer: 'fg',
  405.     textColor: true
  406.   },
  407.   fgLink: {
  408.     depends: ['link'],
  409.     layer: 'fg',
  410.     textColor: 'preserve'
  411.   },
  413.   // Panel header
  414.   panel: {
  415.     depends: ['fg'],
  416.     opacity: 'panel'
  417.   },
  418.   panelText: {
  419.     depends: ['text'],
  420.     layer: 'panel',
  421.     textColor: true
  422.   },
  423.   panelFaint: {
  424.     depends: ['fgText'],
  425.     layer: 'panel',
  426.     opacity: 'faint',
  427.     textColor: true
  428.   },
  429.   panelLink: {
  430.     depends: ['fgLink'],
  431.     layer: 'panel',
  432.     textColor: 'preserve'
  433.   },
  435.   // Top bar
  436.   topBar: '--fg',
  437.   topBarText: {
  438.     depends: ['fgText'],
  439.     layer: 'topBar',
  440.     textColor: true
  441.   },
  442.   topBarLink: {
  443.     depends: ['fgLink'],
  444.     layer: 'topBar',
  445.     textColor: 'preserve'
  446.   },
  448.   // Tabs
  449.   tab: {
  450.     depends: ['btn']
  451.   },
  452.   tabText: {
  453.     depends: ['btnText'],
  454.     layer: 'btn',
  455.     textColor: true
  456.   },
  457.   tabActiveText: {
  458.     depends: ['text'],
  459.     layer: 'bg',
  460.     textColor: true
  461.   },
  463.   // Buttons
  464.   btn: {
  465.     depends: ['fg'],
  466.     variant: 'btn',
  467.     opacity: 'btn'
  468.   },
  469.   btnText: {
  470.     depends: ['fgText'],
  471.     layer: 'btn',
  472.     textColor: true
  473.   },
  474.   btnPanelText: {
  475.     depends: ['btnText'],
  476.     layer: 'btnPanel',
  477.     variant: 'btn',
  478.     textColor: true
  479.   },
  480.   btnTopBarText: {
  481.     depends: ['btnText'],
  482.     layer: 'btnTopBar',
  483.     variant: 'btn',
  484.     textColor: true
  485.   },
  487.   // Buttons: pressed
  488.   btnPressed: {
  489.     depends: ['btn'],
  490.     layer: 'btn'
  491.   },
  492.   btnPressedText: {
  493.     depends: ['btnText'],
  494.     layer: 'btn',
  495.     variant: 'btnPressed',
  496.     textColor: true
  497.   },
  498.   btnPressedPanel: {
  499.     depends: ['btnPressed'],
  500.     layer: 'btn'
  501.   },
  502.   btnPressedPanelText: {
  503.     depends: ['btnPanelText'],
  504.     layer: 'btnPanel',
  505.     variant: 'btnPressed',
  506.     textColor: true
  507.   },
  508.   btnPressedTopBar: {
  509.     depends: ['btnPressed'],
  510.     layer: 'btn'
  511.   },
  512.   btnPressedTopBarText: {
  513.     depends: ['btnTopBarText'],
  514.     layer: 'btnTopBar',
  515.     variant: 'btnPressed',
  516.     textColor: true
  517.   },
  519.   // Buttons: toggled
  520.   btnToggled: {
  521.     depends: ['btn'],
  522.     layer: 'btn',
  523.     color: (mod, btn) => brightness(mod * 20, btn).rgb
  524.   },
  525.   btnToggledText: {
  526.     depends: ['btnText'],
  527.     layer: 'btn',
  528.     variant: 'btnToggled',
  529.     textColor: true
  530.   },
  531.   btnToggledPanelText: {
  532.     depends: ['btnPanelText'],
  533.     layer: 'btnPanel',
  534.     variant: 'btnToggled',
  535.     textColor: true
  536.   },
  537.   btnToggledTopBarText: {
  538.     depends: ['btnTopBarText'],
  539.     layer: 'btnTopBar',
  540.     variant: 'btnToggled',
  541.     textColor: true
  542.   },
  544.   // Buttons: disabled
  545.   btnDisabled: {
  546.     depends: ['btn', 'bg'],
  547.     color: (mod, btn, bg) => alphaBlend(btn, 0.25, bg)
  548.   },
  549.   btnDisabledText: {
  550.     depends: ['btnText', 'btnDisabled'],
  551.     layer: 'btn',
  552.     variant: 'btnDisabled',
  553.     color: (mod, text, btn) => alphaBlend(text, 0.25, btn)
  554.   },
  555.   btnDisabledPanelText: {
  556.     depends: ['btnPanelText', 'btnDisabled'],
  557.     layer: 'btnPanel',
  558.     variant: 'btnDisabled',
  559.     color: (mod, text, btn) => alphaBlend(text, 0.25, btn)
  560.   },
  561.   btnDisabledTopBarText: {
  562.     depends: ['btnTopBarText', 'btnDisabled'],
  563.     layer: 'btnTopBar',
  564.     variant: 'btnDisabled',
  565.     color: (mod, text, btn) => alphaBlend(text, 0.25, btn)
  566.   },
  568.   // Input fields
  569.   input: {
  570.     depends: ['fg'],
  571.     opacity: 'input'
  572.   },
  573.   inputText: {
  574.     depends: ['text'],
  575.     layer: 'input',
  576.     textColor: true
  577.   },
  578.   inputPanelText: {
  579.     depends: ['panelText'],
  580.     layer: 'inputPanel',
  581.     variant: 'input',
  582.     textColor: true
  583.   },
  584.   inputTopbarText: {
  585.     depends: ['topBarText'],
  586.     layer: 'inputTopBar',
  587.     variant: 'input',
  588.     textColor: true
  589.   },
  591.   alertError: {
  592.     depends: ['cRed'],
  593.     opacity: 'alert'
  594.   },
  595.   alertErrorText: {
  596.     depends: ['text'],
  597.     layer: 'alert',
  598.     variant: 'alertError',
  599.     textColor: true
  600.   },
  601.   alertErrorPanelText: {
  602.     depends: ['panelText'],
  603.     layer: 'alertPanel',
  604.     variant: 'alertError',
  605.     textColor: true
  606.   },
  608.   alertWarning: {
  609.     depends: ['cOrange'],
  610.     opacity: 'alert'
  611.   },
  612.   alertWarningText: {
  613.     depends: ['text'],
  614.     layer: 'alert',
  615.     variant: 'alertWarning',
  616.     textColor: true
  617.   },
  618.   alertWarningPanelText: {
  619.     depends: ['panelText'],
  620.     layer: 'alertPanel',
  621.     variant: 'alertWarning',
  622.     textColor: true
  623.   },
  625.   alertSuccess: {
  626.     depends: ['cGreen'],
  627.     opacity: 'alert'
  628.   },
  629.   alertSuccessText: {
  630.     depends: ['text'],
  631.     layer: 'alert',
  632.     variant: 'alertSuccess',
  633.     textColor: true
  634.   },
  635.   alertSuccessPanelText: {
  636.     depends: ['panelText'],
  637.     layer: 'alertPanel',
  638.     variant: 'alertSuccess',
  639.     textColor: true
  640.   },
  642.   alertNeutral: {
  643.     depends: ['text'],
  644.     opacity: 'alert'
  645.   },
  646.   alertNeutralText: {
  647.     depends: ['text'],
  648.     layer: 'alert',
  649.     variant: 'alertNeutral',
  650.     color: (mod, text) => invertLightness(text).rgb,
  651.     textColor: true
  652.   },
  653.   alertNeutralPanelText: {
  654.     depends: ['panelText'],
  655.     layer: 'alertPanel',
  656.     variant: 'alertNeutral',
  657.     textColor: true
  658.   },
  660.   alertPopupError: {
  661.     depends: ['alertError'],
  662.     opacity: 'alertPopup'
  663.   },
  664.   alertPopupErrorText: {
  665.     depends: ['alertErrorText'],
  666.     layer: 'popover',
  667.     variant: 'alertPopupError',
  668.     textColor: true
  669.   },
  671.   alertPopupWarning: {
  672.     depends: ['alertWarning'],
  673.     opacity: 'alertPopup'
  674.   },
  675.   alertPopupWarningText: {
  676.     depends: ['alertWarningText'],
  677.     layer: 'popover',
  678.     variant: 'alertPopupWarning',
  679.     textColor: true
  680.   },
  682.   alertPopupSuccess: {
  683.     depends: ['alertSuccess'],
  684.     opacity: 'alertPopup'
  685.   },
  686.   alertPopupSuccessText: {
  687.     depends: ['alertSuccessText'],
  688.     layer: 'popover',
  689.     variant: 'alertPopupSuccess',
  690.     textColor: true
  691.   },
  693.   alertPopupNeutral: {
  694.     depends: ['alertNeutral'],
  695.     opacity: 'alertPopup'
  696.   },
  697.   alertPopupNeutralText: {
  698.     depends: ['alertNeutralText'],
  699.     layer: 'popover',
  700.     variant: 'alertPopupNeutral',
  701.     textColor: true
  702.   },
  704.   badgeNotification: '--cRed',
  705.   badgeNotificationText: {
  706.     depends: ['text', 'badgeNotification'],
  707.     layer: 'badge',
  708.     variant: 'badgeNotification',
  709.     textColor: 'bw'
  710.   },
  712.   badgeNeutral: '--cGreen',
  713.   badgeNeutralText: {
  714.     depends: ['text', 'badgeNeutral'],
  715.     layer: 'badge',
  716.     variant: 'badgeNeutral',
  717.     textColor: 'bw'
  718.   },
  720.   chatBg: {
  721.     depends: ['bg']
  722.   },
  724.   chatMessageIncomingBg: {
  725.     depends: ['chatBg']
  726.   },
  728.   chatMessageIncomingText: {
  729.     depends: ['text'],
  730.     layer: 'chatMessage',
  731.     variant: 'chatMessageIncomingBg',
  732.     textColor: true
  733.   },
  735.   chatMessageIncomingLink: {
  736.     depends: ['link'],
  737.     layer: 'chatMessage',
  738.     variant: 'chatMessageIncomingBg',
  739.     textColor: 'preserve'
  740.   },
  742.   chatMessageIncomingBorder: {
  743.     depends: ['border'],
  744.     opacity: 'border',
  745.     color: (mod, border) => brightness(2 * mod, border).rgb
  746.   },
  748.   chatMessageOutgoingBg: {
  749.     depends: ['chatMessageIncomingBg'],
  750.     color: (mod, chatMessage) => brightness(5 * mod, chatMessage).rgb
  751.   },
  753.   chatMessageOutgoingText: {
  754.     depends: ['text'],
  755.     layer: 'chatMessage',
  756.     variant: 'chatMessageOutgoingBg',
  757.     textColor: true
  758.   },
  760.   chatMessageOutgoingLink: {
  761.     depends: ['link'],
  762.     layer: 'chatMessage',
  763.     variant: 'chatMessageOutgoingBg',
  764.     textColor: 'preserve'
  765.   },
  767.   chatMessageOutgoingBorder: {
  768.     depends: ['chatMessageOutgoingBg'],
  769.     opacity: 'border',
  770.     color: (mod, border) => brightness(2 * mod, border).rgb
  771.   }
  772. }