/******************************************************************************
 * QSkinny - Copyright (C) The authors
 *           SPDX-License-Identifier: BSD-3-Clause
 *****************************************************************************/

/*
    Definitions ( where possible ) taken from
    https://www.figma.com/file/O4H724CKmUVPocw6JoSUrd/Material-3-Design-Kit-(Community)
 */

#include "QskMaterial3Skin.h"
#include "QskMaterial3ProgressBarSkinlet.h"
#include "QskMaterial3SliderSkinlet.h"
#include "QskMaterial3TextFieldSkinlet.h"

#include <QskSkinHintTableEditor.h>

#include <QskBox.h>
#include <QskCheckBox.h>
#include <QskComboBox.h>
#include <QskColorFilter.h>
#include <QskDialogButtonBox.h>
#include <QskDialogSubWindow.h>
#include <QskDrawer.h>
#include <QskFocusIndicator.h>
#include <QskFunctions.h>
#include <QskGraphic.h>
#include <QskGraphicIO.h>
#include <QskInputPanelBox.h>
#include <QskListView.h>
#include <QskMenu.h>
#include <QskPageIndicator.h>
#include <QskPushButton.h>
#include <QskProgressBar.h>
#include <QskProgressRing.h>
#include <QskRadioBox.h>
#include <QskScrollView.h>
#include <QskSegmentedBar.h>
#include <QskSeparator.h>
#include <QskShadowMetrics.h>
#include <QskSlider.h>
#include <QskSpinBox.h>
#include <QskStandardSymbol.h>
#include <QskSubWindow.h>
#include <QskSwitchButton.h>
#include <QskTabBar.h>
#include <QskTabButton.h>
#include <QskTabView.h>
#include <QskTextField.h>
#include <QskTextLabel.h>
#include <QskVirtualKeyboard.h>

#include <QskAnimationHint.h>
#include <QskAspect.h>
#include <QskBoxBorderColors.h>
#include <QskBoxBorderMetrics.h>
#include <QskBoxShapeMetrics.h>
#include <QskMargins.h>
#include <QskHctColor.h>
#include <QskRgbValue.h>
#include <QskFontRole.h>

#include <QskNamespace.h>
#include <QskPlatform.h>

#include <qguiapplication.h>
#include <qfontinfo.h>

static void qskMaterial3InitResources()
{
    Q_INIT_RESOURCE( QskMaterial3Icons );
}

Q_CONSTRUCTOR_FUNCTION( qskMaterial3InitResources )

static const int qskDuration = 150;

namespace
{
    using F = QskFontRole;

    // M3 font roles: https://m3.material.io/styles/typography/type-scale-tokens

    constexpr F LabelSmall     = { F::Caption, F::Low };
    constexpr F LabelMedium    = { F::Caption, F::Normal };
    constexpr F LabelLarge     = { F::Caption, F::High };

    constexpr F BodySmall      = { F::Body, F::Low };
    constexpr F BodyMedium     = { F::Body, F::Normal };
    constexpr F BodyLarge      = { F::Body, F::High };

    constexpr F TitleSmall     = { F::Title, F::Low };
    constexpr F TitleMedium    = { F::Title, F::Normal };
    constexpr F TitleLarge     = { F::Title, F::High };

    constexpr F HeadlineSmall  = { F::Headline, F::Low };
    constexpr F HeadlineMedium = { F::Headline, F::Normal };
    constexpr F HeadlineLarge  = { F::Headline, F::High };

    constexpr F DisplaySmall   = { F::Display, F::Low };
    constexpr F DisplayMedium  = { F::Display, F::Normal };
    constexpr F DisplayLarge   = { F::Display, F::High };
}

namespace
{
    inline constexpr qreal dpToPixels( qreal value )
    {
        /*
            see: https://en.wikipedia.org/wiki/Device-independent_pixel
                 https://developer.android.com/training/multiscreen/screendensities

            One dp is a virtual pixel unit that's roughly equal to one pixel
            on a medium-density screen ( 160 dpi ).

            One logical pixel is equivalent to 1/96th of an inch.
         */

        /*
           For non scalable resources the following density buckets
           are recommended:

                  ldpi: ( 0 -> 140 )  : 120
                  mdpi: ( 140 -> 200 ): 160
                  hdpi: ( 140 -> 280 ): 240
                 xhdpi: ( 280 -> 400 ): 320
                xxhdpi: ( 400 -> 560 ): 480
               xxxhdpi: ( 560 -> ... ): 640

           For some reason the metrics from the Figma model seem to be
           too small on our deskop system. Until this has bee understood
           we use the ldpi bucket as the density of the logical coordinate
           system falls into it.

           Need to find out why TODO ...
         */
        return value * 96.0 / 120.0;
    }

    Q_DECL_UNUSED inline constexpr double operator ""_dp( long double value )
    {
        return dpToPixels( static_cast< qreal >( value ) );
    }

    Q_DECL_UNUSED inline constexpr double operator ""_dp( unsigned long long value )
    {
        return dpToPixels( value );
    }

    class Combination : public QskStateCombination
    {
      public:
        constexpr Combination( const QskAspect::States states )
            : QskStateCombination( CombinationNoState, states )
        {
        }
    };

    class Editor : private QskSkinHintTableEditor
    {
        Q_GADGET

      public:
        Editor( QskSkinHintTable* table, const QskMaterial3Theme& theme )
            : QskSkinHintTableEditor( table )
            , m_pal( theme )
        {
        }

        void setup()
        {
            for ( int i = 0; i < staticMetaObject.methodCount(); i++ )
                staticMetaObject.method( i ).invokeOnGadget( this );
        }

      private:
        Q_INVOKABLE void setupBox();
        Q_INVOKABLE void setupCheckBox();
        Q_INVOKABLE void setupComboBox();
        Q_INVOKABLE void setupDialogButtonBox();
        Q_INVOKABLE void setupDialogSubWindow();
        Q_INVOKABLE void setupDrawer();
        Q_INVOKABLE void setupFocusIndicator();
        Q_INVOKABLE void setupInputPanel();
        Q_INVOKABLE void setupVirtualKeyboard();
        Q_INVOKABLE void setupListView();
        Q_INVOKABLE void setupMenu();
        Q_INVOKABLE void setupPageIndicator();
        Q_INVOKABLE void setupPopup();
        Q_INVOKABLE void setupProgressBar();
        Q_INVOKABLE void setupProgressRing();
        Q_INVOKABLE void setupRadioBox();
        Q_INVOKABLE void setupPushButton();
        Q_INVOKABLE void setupScrollView();
        Q_INVOKABLE void setupSegmentedBar();
        Q_INVOKABLE void setupSeparator();
        Q_INVOKABLE void setupSubWindow();
        Q_INVOKABLE void setupSlider();
        Q_INVOKABLE void setupSpinBox();
        Q_INVOKABLE void setupSwitchButton();
        Q_INVOKABLE void setupTabButton();
        Q_INVOKABLE void setupTabBar();
        Q_INVOKABLE void setupTabView();
        Q_INVOKABLE void setupTextField();
        Q_INVOKABLE void setupTextLabel();

        QskGraphic symbol( const char* name ) const
        {
            const QString path = QStringLiteral( ":m3/icons/qvg/" )
                + name + QStringLiteral( ".qvg" );

            return QskGraphicIO::read( path );
        }

        const QskMaterial3Theme& m_pal;
    };

    inline QRgb flattenedColor(
        QRgb foregroundColor, QRgb backgroundColor, qreal ratio )
    {
        return QskRgb::interpolated( backgroundColor, foregroundColor, ratio );
    }

    inline QRgb stateLayerColor( QRgb rgb, qreal opacity )
    {
        return QskRgb::toTransparentF( rgb, opacity );
    }
}

void Editor::setupCheckBox()
{
    using Q = QskCheckBox;
    using A = QskAspect;

    // == metrics

    setSpacing( Q::Panel, 40_dp );

    {
        setStrutSize( Q::Box, 18_dp, 18_dp );
        setBoxBorderMetrics( Q::Box, 2_dp );
        setBoxShape( Q::Box, 2_dp );
        setPadding( Q::Box, 3_dp ); // "icon size"

        QskShadowMetrics shadowMetrics( 12_dp, 0.0 );
        shadowMetrics.setShapeMode( QskShadowMetrics::Ellipse );
        setShadowMetrics( Q::Box, shadowMetrics );
    }

    {
        setGraphicRole( Q::Indicator, QskMaterial3Skin::GraphicRoleOnPrimary );
        setGraphicRole( Q::Indicator | Q::Error, QskMaterial3Skin::GraphicRoleOnError );
        setGraphicRole( Q::Indicator | Q::Disabled | Q::Checked,
            QskMaterial3Skin::GraphicRoleSurface );

        const auto checkMark = symbol( "check_small" );
        for ( auto state : { A::NoState, Q::Disabled } )
        {
            const auto aspect = Q::Indicator | Q::Checked | state;
            setSymbol( aspect, checkMark );
            setSymbol( aspect | Q::Error, checkMark );
        }
    }

    // === colors

    setColor( Q::Text, m_pal.onBackground ); // not mentioned in the specs

    for ( auto state1 : { Q::Hovered, Q::Focused, Q::Pressed } )
    {
        const auto opacity = m_pal.stateOpacity( state1 );

        for ( auto state2 : { A::NoState, Q::Checked } )
        {
            const auto aspect = Q::Box | state1 | state2;

            const auto rgb = ( state2 == Q::Checked ) ? m_pal.primary : m_pal.onSurface;
            setShadowColor( aspect, stateLayerColor( rgb, opacity ) );

            setShadowColor( aspect | Q::Error, stateLayerColor( m_pal.error, opacity ) );
        }
    }

    for ( auto state1 : { A::NoState, Q::Disabled, Q::Hovered, Q::Focused, Q::Pressed } )
    {
        for ( auto state2 : { A::NoState, Q::Checked } )
        {
            const auto aspect = Q::Box | state1 | state2;

            QRgb rgb, rgbError;

            if ( state1 == A::NoState )
            {
                rgb = ( state2 == Q::Checked )
                    ? m_pal.primary : m_pal.onSurfaceVariant;

                rgbError = m_pal.error;
            }
            else if ( state1 == Q::Disabled )
            {
                rgb = rgbError = m_pal.onSurface38;
            }
            else
            {
                rgb = ( state2 == Q::Checked )
                    ? m_pal.primary : m_pal.onSurfaceVariant;

                rgbError = m_pal.error;
            }

            setBoxBorderColors( aspect, rgb );
            setBoxBorderColors( aspect | Q::Error, rgbError );

            if ( state2 == Q::Checked )
            {
                setGradient( aspect, rgb );
                setGradient( aspect | Q::Error, rgbError );
            }
        }
    }
}

void Editor::setupComboBox()
{
    using Q = QskComboBox;

    setStrutSize( Q::Panel,  -1.0, 56_dp );
    setPadding( Q::Panel, { 12_dp, 8_dp, 12_dp, 8_dp } );
    setGradient( Q::Panel, m_pal.surfaceVariant );
    setBoxShape( Q::Panel, m_pal.shapeExtraSmallTop );
    setBoxBorderMetrics( Q::Panel, { 0, 0, 0, 1_dp } );
    setBoxBorderColors( Q::Panel, m_pal.onSurfaceVariant );
    setSpacing( Q::Panel, 8_dp );

    const auto hoverColor = flattenedColor( m_pal.onSurfaceVariant,
        m_pal.surfaceVariant, m_pal.hoverOpacity );
    setGradient( Q::Panel | Q::Hovered, hoverColor );

    const auto focusColor = flattenedColor( m_pal.onSurfaceVariant,
        m_pal.surfaceVariant, m_pal.focusOpacity );
    setGradient( Q::Panel | Q::Focused, focusColor );

    const auto pressedColor = flattenedColor( m_pal.onSurfaceVariant,
        m_pal.surfaceVariant, m_pal.pressedOpacity );
    setGradient( Q::Panel | Q::Pressed, pressedColor );

    const auto activeColor = flattenedColor( m_pal.onSurfaceVariant,
        m_pal.surfaceVariant, m_pal.pressedOpacity );
    setGradient( Q::Panel | Q::PopupOpen, activeColor );

    setStrutSize( Q::Icon, 24_dp, 24_dp );
    setGraphicRole( Q::Icon, QskMaterial3Skin::GraphicRoleOnSurface );

    setColor( Q::Text, m_pal.onSurface );
    setFontRole( Q::Text, BodyMedium );

    setStrutSize( Q::StatusIndicator, 12_dp, 12_dp );
    setGraphicRole( Q::StatusIndicator, QskMaterial3Skin::GraphicRoleOnSurface );
    setAlignment( Q::StatusIndicator, Qt::AlignRight | Qt::AlignVCenter );


    const auto disabledPanelColor = QskRgb::toTransparentF( m_pal.onSurface, 0.04 );
    setGradient( Q::Panel | Q::Disabled, disabledPanelColor );
    setBoxBorderColors( Q::Panel | Q::Disabled, m_pal.onSurface38 );

    setGraphicRole( Q::Icon, QskMaterial3Skin::GraphicRoleOnSurface38 );

    setColor( Q::Text | Q::Disabled, m_pal.onSurface38 );

    setGraphicRole( Q::StatusIndicator, QskMaterial3Skin::GraphicRoleOnSurface38 );

    setSymbol( Q::StatusIndicator, symbol( "combo-box-arrow-closed" ) );
    setSymbol( Q::StatusIndicator | Q::PopupOpen, symbol( "combo-box-arrow-open" ) );
}

void Editor::setupBox()
{
    using Q = QskBox;
    using A = QskAspect;

    setGradient( Q::Panel, m_pal.background );
    setGradient( Q::Panel | A::Header, m_pal.surface2 );
    setGradient( Q::Panel | A::Footer, m_pal.surface2 );
}

void Editor::setupPopup()
{
    using A = QskAspect;
    using Q = QskPopup;

    setHint( Q::Overlay | A::Style, true );
    setGradient( Q::Overlay, stateLayerColor( m_pal.outline, 0.8 ) );
}

void Editor::setupMenu()
{
    using A = QskAspect;
    using Q = QskMenu;

    setHint( Q::Overlay | A::Style, false );
    setGradient( Q::Overlay, stateLayerColor( m_pal.outline, 0.8 ) );

    setBoxShape( Q::Panel, 4_dp );
    setBoxBorderMetrics( Q::Panel, 0 );
    setPadding( Q::Panel, 0 );

    // The color here is primary with an opacity of 8% - we blend that
    // with the background, because we don't want the menu to have transparency:
    const auto panelColor = flattenedColor( m_pal.primary, m_pal.background, 0.08 );
    setGradient( Q::Panel, panelColor );

    setShadowMetrics( Q::Panel, m_pal.elevation2 );
    setShadowColor( Q::Panel, m_pal.shadow );

    setMetric( Q::Separator | A::Size, 1_dp );
    setBoxShape( Q::Separator, 0 );
    setBoxBorderMetrics( Q::Separator, 0 );
    setGradient( Q::Separator, m_pal.primary12 );

    setPadding( Q::Segment, 6_dp );
    setSpacing( Q::Segment, 5_dp );
    setGradient( Q::Segment, Qt::transparent );

    const auto hoverColor = flattenedColor( m_pal.onSurface, panelColor, m_pal.hoverOpacity );
    setGradient( Q::Segment | Q::Hovered, hoverColor );

    setGradient( Q::Segment | Q::Selected, m_pal.primary12 );
    const auto hoverSelectedColor = flattenedColor( m_pal.onSurface, m_pal.primary12, m_pal.hoverOpacity );
    setGradient( Q::Segment | Q::Selected | Q::Hovered, hoverSelectedColor );
    const auto pressedSelectedColor = flattenedColor( m_pal.onSurface, m_pal.primary12, m_pal.pressedOpacity );
    setGradient( Q::Segment | Q::Pressed | Q::Selected, pressedSelectedColor );

    setPadding( Q::Icon, 7_dp );
    setStrutSize( Q::Icon, 24_dp, 24_dp );
    setGraphicRole( Q::Icon, QskMaterial3Skin::GraphicRoleOnSurface );

    setColor( Q::Text, m_pal.onSurface );
    setFontRole( Q::Text, BodyMedium );

    setAnimation( Q::Cursor | A::Position | A::Metric, 75, QEasingCurve::OutCubic );

    setAnimation( Q::Panel | A::Position, 75 );
}

void Editor::setupTextLabel()
{
    using Q = QskTextLabel;

    setColor( Q::Text, m_pal.onSurface );
    setPadding( Q::Panel, 5_dp );
}


void Editor::setupTextField()
{
    using Q = QskTextField;
    using SK = QskTextFieldSkinlet;

    setStrutSize( Q::Panel,  -1.0, 56_dp );
    setPadding( Q::Panel, { 12_dp, 8_dp, 12_dp, 8_dp } );
    setGradient( Q::Panel, m_pal.surfaceVariant );
    setColor( Q::Panel | SK::Selected, m_pal.primary12 );
    setBoxShape( Q::Panel, m_pal.shapeExtraSmallTop );
    setBoxBorderMetrics( Q::Panel, { 0, 0, 0, 1_dp } );
    setBoxBorderColors( Q::Panel, m_pal.onSurfaceVariant );
    setSpacing( Q::Panel, 8_dp );

    const auto hoverColor = flattenedColor( m_pal.onSurfaceVariant,
        m_pal.surfaceVariant, m_pal.hoverOpacity );
    setGradient( Q::Panel | Q::Hovered, hoverColor );

    const auto focusColor = flattenedColor( m_pal.onSurfaceVariant,
        m_pal.surfaceVariant, m_pal.focusOpacity );
    setGradient( Q::Panel | Q::Focused, focusColor );

    // ### Also add a pressed state

    setColor( Q::Text, m_pal.onSurface );
    setFontRole( Q::Text, BodyMedium );
    setAlignment( Q::Text, Qt::AlignLeft | Qt::AlignVCenter );

    setAlignment( Q::PlaceholderText, Qt::AlignLeft | Qt::AlignVCenter );

    const auto disabledPanelColor = QskRgb::toTransparentF( m_pal.onSurface, 0.04 );
    setGradient( Q::Panel | Q::Disabled, disabledPanelColor );
    setBoxBorderColors( Q::Panel | Q::Disabled, m_pal.onSurface38 );

    setColor( Q::Text | Q::Disabled, m_pal.onSurface38 );

    // PlaceholderText

    setColor( Q::PlaceholderText, color( Q::Text ) );
    setFontRole( Q::PlaceholderText, fontRole( Q::Text ) );
    setAlignment( Q::PlaceholderText, alignment( Q::Text ) );
}

void Editor::setupProgressBar()
{
    using A = QskAspect;
    using Q = QskProgressBar;

    for ( auto subControl : { Q::Groove, Q::Fill } )
    {
        setBoxShape( subControl, { 100, Qt::RelativeSize } );
        setMetric( subControl | A::Size, 4_dp );
    }

    setGradient( Q::Groove, m_pal.surfaceContainerHighest );
    setGradient( Q::Groove | Q::Disabled, m_pal.onSurface12 );

    setGradient( Q::Fill, m_pal.primary );
    setGradient( Q::Fill | Q::Disabled, m_pal.onSurface38 );
}

void Editor::setupProgressRing()
{
    using Q = QskProgressRing;

    setArcMetrics( Q::Groove, 90, -360, 4_dp );
    setGradient( Q::Groove, m_pal.surfaceContainerHighest );
    setGradient( Q::Groove | Q::Disabled, m_pal.onSurface12 );

    setSpacing( Q::Fill, 10 );
    setStrutSize( Q::Fill, { 48_dp, 48_dp } );
    setArcMetrics( Q::Fill, 90, -360, 4_dp );
    setGradient( Q::Fill, m_pal.primary );
    setGradient( Q::Fill | Q::Disabled, m_pal.onSurface38 );
}

void Editor::setupRadioBox()
{
    using Q = QskRadioBox;
    using A = QskAspect;

    setSpacing( Q::Panel, 10_dp );
    setSpacing( Q::Button, 10_dp );

    setStrutSize( Q::CheckIndicatorPanel, 20_dp, 20_dp );

    for ( auto subControl : { Q::CheckIndicatorPanel, Q::CheckIndicator } )
        setBoxShape( subControl, 100, Qt::RelativeSize ); // circular

    setBoxBorderMetrics( Q::CheckIndicatorPanel, 2_dp );
    setBoxBorderColors( Q::CheckIndicatorPanel, m_pal.onBackground );
    setPadding( Q::CheckIndicatorPanel, 5_dp );

    setGradient( Q::Button, QskGradient() );

    setColor( Q::Text, m_pal.onBackground );
    setColor( Q::Text | Q::Disabled, m_pal.onSurface38 );

    for ( const auto state1 : { Q::Hovered, Q::Focused, Q::Pressed } )
    {
        for ( const auto state2 : { A::NoState, Q::Selected } )
        {
            const auto aspect = Q::CheckIndicatorPanel | state1 | state2;

            setShadowMetrics( aspect, { 10_dp, 0 } );

            auto rgb = ( state2 == Q::Selected ) ? m_pal.primary : m_pal.onSurface;
            rgb = stateLayerColor( rgb, m_pal.stateOpacity( state1 ) );

            setShadowColor( aspect, rgb );
        }
    }

    setColor( Q::CheckIndicator, Qt::transparent );
    setColor( Q::CheckIndicator | Q::Selected, m_pal.primary );
    setColor( Q::CheckIndicator | Q::Selected | Q::Disabled, m_pal.onSurface38 );

    // Selected

    setBoxBorderColors( Q::CheckIndicatorPanel | Q::Selected, m_pal.primary );
    setBoxBorderColors( Q::CheckIndicatorPanel | Q::Disabled, m_pal.onSurface38 );
    setBoxBorderColors(
        Q::CheckIndicatorPanel | Q::Disabled | Q::Selected, m_pal.onSurface38 );

    setAnimation( Q::CheckIndicator | A::Metric | A::Position, qskDuration );
}

void Editor::setupFocusIndicator()
{
    using Q = QskFocusIndicator;
    setGradient( Q::Panel, QskGradient() );
}

void Editor::setupSegmentedBar()
{
    using A = QskAspect;
    using Q = QskSegmentedBar;

    const QSizeF panelStrutSize( -1, 48_dp );
    const QSizeF segmentStrutSize( 48_dp, 40_dp );

    {
        // Container

        setGradient( Q::Panel, Qt::transparent );
        setPadding( Q::Panel, 0 );
        setSpacing( Q::Panel, 8_dp );

        setBoxShape( Q::Panel, 100, Qt::RelativeSize );

        setBoxBorderMetrics( Q::Panel, 1_dp );
        setBoxBorderColors( Q::Panel, m_pal.outline );

        setBoxBorderColors( Q::Panel | Q::Disabled, m_pal.onSurface12 );

        setStrutSize( Q::Panel | A::Horizontal, panelStrutSize );
        setStrutSize( Q::Panel | A::Vertical, panelStrutSize.transposed() );

        setFlag( Q::Panel | A::Option, true ); // adjust segments to the panel radius
    }

    {
        // Segment / Splash

        setStrutSize( Q::Segment | A::Horizontal, segmentStrutSize );
        setStrutSize( Q::Segment | A::Vertical, segmentStrutSize.transposed() );

        setGradient( Q::Segment | Q::Hovered, m_pal.onSurface8 );
        setGradient( Q::Segment | Q::Focused, m_pal.onSurface12 );
        setGradient( Q::Segment | Q::Selected, m_pal.secondaryContainer );

        setGradient( Q::Segment | Q::Selected | Q::Hovered,
            flattenedColor( m_pal.onSurface, m_pal.secondaryContainer, m_pal.hoverOpacity ) );

        setGradient( Q::Segment | Q::Selected | Q::Focused,
            flattenedColor( m_pal.onSurface, m_pal.secondaryContainer, m_pal.focusOpacity ) );

        setGradient( Q::Segment | Q::Selected | Q::Disabled, m_pal.onSurface12 );

        setPadding( Q::Segment | A::Horizontal, 12_dp, 0, 12_dp, 0 );
        setPadding( Q::Segment | A::Vertical, 0, 12_dp, 0, 12_dp );
    }

    {
        // Separator

        setStrutSize( Q::Separator | A::Horizontal, 1_dp, segmentStrutSize.height() );
        setStrutSize( Q::Separator | A::Vertical, segmentStrutSize.height(), 1_dp );
        setPadding( Q::Separator, 0 );
        setGradient( Q::Separator, m_pal.outline );
        setColor( Q::Separator | Q::Disabled, m_pal.onSurface12 );
    }

    {
        // Splash

        setGradient( Q::Splash, stateLayerColor( m_pal.onSecondaryContainer, m_pal.pressedOpacity ) );
        setAnimation( Q::Splash | A::Color, qskDuration );
    }

    {
        // Text

        setFontRole( Q::Text, LabelLarge );
        setTextOptions( Q::Text, Qt::ElideMiddle, QskTextOptions::NoWrap );

        setColor( Q::Text, m_pal.onSurface );
        setColor( Q::Text | Q::Selected, m_pal.onSecondaryContainer );

        setColor( Q::Text | Q::Disabled, m_pal.onSurface38 );

    }

    {
        // Icon

        setSymbol( Q::Icon, symbol( "check" ) );
        setStrutSize( Q::Icon, 18_dp, 18_dp );

        setGraphicRole( Q::Icon, QskMaterial3Skin::GraphicRoleOnSurface );
        setGraphicRole( Q::Icon | Q::Selected,
            QskMaterial3Skin::GraphicRoleOnSecondaryContainer );
        setGraphicRole( Q::Icon | Q::Disabled, QskMaterial3Skin::GraphicRoleOnSurface38 );
    }
}

void Editor::setupSeparator()
{
    using A = QskAspect;
    using Q = QskSeparator;

    for ( auto variation : { A::Horizontal, A::Vertical } )
    {
        const auto aspect = Q::Panel | variation;

        setMetric( aspect | A::Size, 1_dp );
        setBoxShape( Q::Panel, 0 );
        setBoxBorderMetrics( Q::Panel, 0 );
        setGradient( aspect, m_pal.outlineVariant );
    }
}

void Editor::setupPageIndicator()
{
    using Q = QskPageIndicator;

    const auto extent = 9_dp;
    setStrutSize( Q::Bullet, extent, extent );

    // circles, without border
    setBoxShape( Q::Bullet, 100, Qt::RelativeSize );
    setBoxBorderMetrics( Q::Bullet, 0 );

    setGradient( Q::Bullet, m_pal.primaryContainer );
    setGradient( Q::Bullet | Q::Selected, m_pal.primary );

    setGradient( Q::Bullet | Q::Disabled, m_pal.onSurface12 );
    setGradient( Q::Bullet | Q::Selected | Q::Disabled, m_pal.onSurface38 );

    setSpacing( Q::Panel, 3_dp );
    setPadding( Q::Panel, 0 );
    setGradient( Q::Panel, QskGradient() ); // invisible
}

void Editor::setupPushButton()
{
    using Q = QskPushButton;
    using M3 = QskMaterial3Skin;

    setHint( Q::Panel | QskAspect::Direction, Qsk::LeftToRight );
    setStrutSize( Q::Panel, -1, 40_dp );
    setSpacing( Q::Panel, 8_dp );
    setPadding( Q::Panel, { 24_dp, 0, 24_dp, 0 } );
    setBoxShape( Q::Panel, 100, Qt::RelativeSize );
    setShadowColor( Q::Panel, m_pal.shadow );

    setStrutSize( Q::Icon, 18_dp, 18_dp );
    setPadding( Q::Icon, { 0, 0, 8_dp, 0 } );
    setGraphicRole( Q::Icon, QskMaterial3Skin::GraphicRoleOnPrimary );

    setFontRole( Q::Text, LabelLarge );
    setPadding( Q::Text, 0 );

    setBoxShape( Q::Splash, 40_dp );
    setAnimation( Q::Splash | QskAspect::Color, qskDuration );

    const auto checkedOpacity = m_pal.focusOpacity + m_pal.pressedOpacity;

    // elevated buttons:

    setGradient( Q::Panel | M3::Elevated, m_pal.surface1 );
    setShadowMetrics( Q::Panel | M3::Elevated, m_pal.elevation1 );
    setColor( Q::Text | M3::Elevated, m_pal.primary );
    setGraphicRole( Q::Icon | M3::Elevated, QskMaterial3Skin::GraphicRolePrimary );
    setGradient( Q::Splash | M3::Elevated,
        stateLayerColor( m_pal.primary, m_pal.pressedOpacity ) );

    setGradient( Q::Panel | M3::Elevated | Q::Disabled, m_pal.onSurface12 );
    setShadowMetrics( Q::Panel | M3::Elevated | Q::Disabled, m_pal.elevation0 );
    setColor( Q::Text | M3::Elevated | Q::Disabled, m_pal.onSurface38 );
    setGraphicRole( Q::Icon | M3::Elevated | Q::Disabled,
        QskMaterial3Skin::GraphicRoleOnSurface38 );

    const auto elevatedHoverColor =
        flattenedColor( m_pal.primary, m_pal.surface, m_pal.hoverOpacity );
    setGradient( Q::Panel | M3::Elevated | Q::Hovered, elevatedHoverColor );
    setShadowMetrics( Q::Panel | M3::Elevated | Q::Hovered, m_pal.elevation2 );

    const auto elevatedPressedColor =
        flattenedColor( m_pal.primary, m_pal.surface, m_pal.pressedOpacity );
    setGradient( Q::Panel | M3::Elevated | Q::Focused, elevatedPressedColor );
    setShadowMetrics( Q::Panel | M3::Elevated | Q::Focused, m_pal.elevation1 );

    for( const auto state: { Q::Pressed, Q::Checked } )
    {
        setGradient( Q::Panel | M3::Elevated | state, elevatedPressedColor );
        setShadowMetrics( Q::Panel | M3::Elevated | state, m_pal.elevation1 );
    }


    // normal buttons (i.e. Filled):

    setGradient( Q::Panel, m_pal.primary );
    setGradient( Q::Panel | Q::Disabled, m_pal.onSurface12 );

    const auto hoverColor = flattenedColor( m_pal.onPrimary, m_pal.primary, m_pal.hoverOpacity );

    setGradient( Q::Panel | Q::Hovered, hoverColor );
    setShadowMetrics( Q::Panel | Q::Hovered, m_pal.elevation1 );

    const auto focusColor = flattenedColor( m_pal.onPrimary, m_pal.primary, m_pal.focusOpacity );
    setGradient( Q::Panel | Q::Focused, focusColor );

    setGradient( Q::Panel | Q::Pressed, focusColor );
    setGradient( Q::Panel | Q::Checked,
        flattenedColor( m_pal.onPrimary, m_pal.primary, checkedOpacity ) );

    setGradient( Q::Splash, stateLayerColor( m_pal.onPrimary, m_pal.hoverOpacity ) );

    setColor( Q::Text, m_pal.onPrimary );
    setColor( Q::Text | Q::Disabled, m_pal.onSurface38 );
    setGraphicRole( Q::Icon | Q::Disabled, QskMaterial3Skin::GraphicRoleOnSurface38 );

    setTextOptions( Q::Text, Qt::ElideMiddle, QskTextOptions::NoWrap );


    // filled tonal buttons:

    setGradient( Q::Panel | M3::Tonal, m_pal.secondaryContainer );
    setShadowMetrics( Q::Panel | M3::Tonal, m_pal.elevation0 );
    setColor( Q::Text | M3::Tonal, m_pal.onSecondaryContainer );
    setGraphicRole( Q::Icon | M3::Tonal, QskMaterial3Skin::GraphicRoleOnSecondaryContainer );
    setGradient( Q::Splash | M3::Tonal,
        stateLayerColor( m_pal.onSecondaryContainer, m_pal.pressedOpacity ) );

    setGradient( Q::Panel | M3::Tonal | Q::Disabled, m_pal.onSurface12 );
    setColor( Q::Text | M3::Tonal | Q::Disabled, m_pal.onSurface38 );
    setGraphicRole( Q::Icon | M3::Tonal | Q::Disabled,
        QskMaterial3Skin::GraphicRoleOnSurface38 );

    const auto tonalHoverColor = flattenedColor( m_pal.onSecondaryContainer,
        m_pal.secondaryContainer, m_pal.hoverOpacity );
    setGradient( Q::Panel | M3::Tonal | Q::Hovered, tonalHoverColor );
    setShadowMetrics( Q::Panel | M3::Tonal | Q::Hovered, m_pal.elevation1 );

    const auto tonalPressedColor = flattenedColor( m_pal.onSecondaryContainer,
        m_pal.secondaryContainer, m_pal.pressedOpacity );
    setGradient( Q::Panel | M3::Tonal | Q::Focused, tonalPressedColor );
    setShadowMetrics( Q::Panel | M3::Tonal | Q::Focused, m_pal.elevation0 );

    setGradient( Q::Panel | M3::Tonal | Q::Pressed, tonalPressedColor );
    setShadowMetrics( Q::Panel | M3::Tonal | Q::Pressed, m_pal.elevation0 );

    const auto tonalCheckedColor = flattenedColor( m_pal.onSecondaryContainer,
        m_pal.secondaryContainer, checkedOpacity );
    setGradient( Q::Panel | M3::Tonal | Q::Checked, tonalCheckedColor );


    // outlined buttons:

    setGradient( Q::Panel | M3::Outlined, m_pal.surface );
    setBoxBorderColors( Q::Panel | M3::Outlined, m_pal.outline );
    setBoxBorderMetrics( Q::Panel | M3::Outlined, 1_dp );
    setShadowMetrics( Q::Panel | M3::Outlined, m_pal.elevation0 );

    setColor( Q::Text | M3::Outlined, m_pal.primary );
    setGraphicRole( Q::Icon | M3::Outlined, QskMaterial3Skin::GraphicRolePrimary );
    setGradient( Q::Splash | M3::Outlined,
        stateLayerColor( m_pal.outline, m_pal.pressedOpacity ) );

    setBoxBorderColors( Q::Panel | M3::Outlined | Q::Disabled, m_pal.onSurface12 );
    setColor( Q::Text | M3::Outlined | Q::Disabled, m_pal.onSurface38 );
    setGraphicRole( Q::Icon | M3::Outlined | Q::Disabled,
        QskMaterial3Skin::GraphicRoleOnSurface38 );

    setBoxBorderColors( Q::Panel | M3::Outlined | Q::Hovered, m_pal.outline );
    setGradient( Q::Panel | M3::Outlined | Q::Hovered, m_pal.primary8 );

    setGradient( Q::Panel | M3::Outlined | Q::Focused, m_pal.primary12 );

    setGradient( Q::Panel | M3::Outlined | Q::Pressed, m_pal.primary12 );

    setGradient( Q::Panel | M3::Outlined | Q::Checked, m_pal.primary12 );

    /*
        text buttons:

        trick: Use a transparent color that changes between skins;
        otherwise we would fall back to the filled button color
        during skin change:
     */
    QColor c( m_pal.background );
    c.setAlpha( 255 );
    setGradient( Q::Panel | M3::Text, c );

    setShadowMetrics( Q::Panel | M3::Text, m_pal.elevation0 );
    setColor( Q::Text | M3::Text, m_pal.primary );
    setGraphicRole( Q::Icon | M3::Text, QskMaterial3Skin::GraphicRolePrimary );
    setGradient( Q::Splash | M3::Text,
        stateLayerColor( m_pal.primary, m_pal.pressedOpacity ) );

    setColor( Q::Text | M3::Text | Q::Disabled, m_pal.onSurface38 );
    setGraphicRole( Q::Icon | M3::Text | Q::Disabled, QskMaterial3Skin::GraphicRoleOnSurface38 );

    setGradient( Q::Panel | M3::Text | Q::Hovered, m_pal.primary8 );

    setGradient( Q::Panel | M3::Text | Q::Focused, m_pal.primary12 );

    setGradient( Q::Panel | M3::Text | Q::Pressed, m_pal.primary12 );

    setGradient( Q::Panel | M3::Text | Q::Checked, m_pal.primary12 );
}

void Editor::setupDialogButtonBox()
{
    using Q = QskDialogButtonBox;

    setGradient( Q::Panel, m_pal.secondaryContainer );
    setBoxShape( Q::Panel, 0 );
    setBoxBorderMetrics( Q::Panel, 0 );
}

void Editor::setupDialogSubWindow()
{
    using Q = QskDialogSubWindow;

#if 1
    setFontRole( Q::DialogTitle, BodyLarge );
#endif
    setAlignment( Q::DialogTitle, Qt::AlignLeft | Qt::AlignVCenter );
    setTextOptions( Q::DialogTitle, Qt::ElideRight, QskTextOptions::WordWrap );
}

void Editor::setupDrawer()
{
    using Q = QskDrawer;
    using A = QskAspect;

    setGradient( Q::Panel, m_pal.background );
    setAnimation( Q::Panel | A::Position, 300, QEasingCurve::OutCubic );
}

void Editor::setupSlider()
{
    using A = QskAspect;
    using Q = QskSlider;
    using SK = QskSliderSkinlet;

    const auto extentGroove = 16_dp;
    const auto extentPanel = 44_dp;

    setStrutSize( Q::Panel | A::Horizontal, 3 * extentGroove, extentPanel );
    setStrutSize( Q::Panel | A::Vertical, extentPanel, 3 * extentGroove );

    setMetric( Q::Groove | A::Size, extentGroove );
    setMetric( Q::Fill | A::Size, extentGroove );

    setGradient( Q::Groove, m_pal.primaryContainer );
    setGradient( Q::Groove | Q::Disabled, m_pal.onSurface12 );

    setGradient( Q::Fill, m_pal.primary );
    setGradient( Q::Fill | Q::Disabled, m_pal.onSurface38 );

    setBoxShape( Q::Handle, 100, Qt::RelativeSize );
    setBoxShape( Q::Groove, 100, Qt::RelativeSize );
    setBoxShape( Q::Fill, 100, Qt::RelativeSize );

    setStrutSize( Q::Tick, { 4_dp, 4_dp } );
    setBoxShape( Q::Tick, 100, Qt::RelativeSize );

    setGradient( Q::Tick, m_pal.primary );
    setGradient( Q::Tick | Q::Disabled, m_pal.onSurface );

    setGradient( Q::Tick | SK::Filled, m_pal.secondaryContainer,
        { QskStateCombination::CombinationNoState, Q::Focused | Q::Pressed } );
    setGradient( Q::Tick | SK::Filled | Q::Disabled, m_pal.inverseOnSurface );

    setFlag( Q::Fill | A::Option, Qsk::Maybe );
    setFlag( Q::Tick | A::Option, Qsk::Maybe );

    for ( const auto variation : { A::Horizontal, A::Vertical } )
    {
        QSizeF handleSize( extentGroove, extentPanel );
        QskMargins margin1{ 6_dp, 0_dp };
        QskMargins margin2{ 7_dp, 0_dp };

        if ( variation == A::Vertical )
        {
            handleSize = handleSize.transposed();
            margin1 = margin1.rotated();
            margin2 = margin2.rotated();
        }

        const auto aspect = Q::Handle | variation;

        setStrutSize( aspect, handleSize );
        setMargin( aspect, margin1 );
        setMargin( aspect, margin2,
            { QskStateCombination::Combination, Q::Focused | Q::Pressed } );
    }

    setGradient( Q::Handle, m_pal.primary );
    setGradient( Q::Handle | Q::Pressed, m_pal.primary );

    const auto disabledColor = flattenedColor( m_pal.onSurface, m_pal.background, 0.38 );
    setGradient( Q::Handle | Q::Disabled, disabledColor );

    setAnimation( Q::Handle | A::Metric | A::Position, 2 * qskDuration );
}

void Editor::setupSpinBox()
{
    using Q = QskSpinBox;

    setHint( Q::Panel | QskAspect::Style, Q::ButtonsLeftAndRight );

    setStrutSize( Q::Panel, -1.0, 48_dp );
    setBoxShape( Q::Panel, 4_dp );
    setBoxBorderMetrics( Q::Panel, 1_dp );

    setBoxBorderColors( Q::Panel, m_pal.outline );
    setBoxBorderColors( Q::Panel | Q::Focused, m_pal.primary,
        Combination( { Q::Increasing, Q::Decreasing } ) );

    setPadding( Q::Panel, 4_dp );
    setSpacing( Q::Panel, 4_dp );

    setStrutSize( Q::TextPanel, 80_dp, 40_dp );
    setStrutSize( Q::UpPanel, 40_dp, 40_dp );
    setStrutSize( Q::DownPanel, 40_dp, 40_dp );

    setAlignment( Q::Text, Qt::AlignCenter );

    for( const auto subControl : { Q::DownPanel, Q::UpPanel, Q::TextPanel } )
    {
        setBoxBorderMetrics( subControl, 1_dp );
    }

    setBoxShape( Q::TextPanel, 4_dp );

    setBoxShape( Q::DownPanel, 100, Qt::RelativeSize );
    setBoxShape( Q::UpPanel, 100, Qt::RelativeSize );

    for( const auto subControl : { Q::DownPanel, Q::UpPanel } )
    {
        setGradient( subControl | Q::Hovered, m_pal.primary8 );
        setPadding( subControl, 11_dp );
    }

    {
        setGradient( Q::DownPanel | Q::Decreasing, m_pal.primary12 );
        setGradient( Q::UpPanel | Q::Increasing, m_pal.primary12 );
    }

    setSymbol( Q::UpIndicator, symbol( "add" ) );
    setSymbol( Q::DownIndicator, symbol( "remove" ) );

    for( const auto subControl : { Q::DownIndicator, Q::UpIndicator } )
    {
        setAlignment( subControl, Qt::AlignCenter );
#if 0
        setGraphicRole( subControl, QskMaterial3Skin::GraphicRoleOnPrimary );
        setGraphicRole( subControl | Q::Disabled, QskMaterial3Skin::GraphicRoleOnSurface38 );
#endif
    }

    setColor( Q::Text, m_pal.onBackground );
    setColor( Q::Text | Q::Disabled, m_pal.onSurface38 );

#if 0
    setPadding( Q::TextPanel, 5_dp );
    setBoxShape( Q::TextPanel, 4_dp, 4_dp, 0, 0 );
    setBoxBorderMetrics( Q::TextPanel, 0, 0, 0, 1_dp );
    setBoxBorderColors( Q::TextPanel, m_pal.onSurface );

    setBoxBorderMetrics( Q::TextPanel | Q::Focused, 0, 0, 0, 2_dp );
    setBoxBorderColors( Q::TextPanel | Q::Focused, m_pal.primary );

    setGradient( Q::TextPanel, m_pal.surfaceVariant );

    const auto c1 = QskRgb::toTransparentF( m_pal.onSurface, 0.04 );
    setGradient( Q::TextPanel | Q::Disabled, c1 );
    setBoxBorderMetrics( Q::TextPanel | Q::Disabled, 0, 0, 0, 1_dp );

    setColor( Q::TextPanel | Q::Disabled, m_pal.onSurface38 );
    setBoxBorderColors( Q::TextPanel | Q::Disabled, m_pal.onSurface38 );
#endif
}

void Editor::setupSwitchButton()
{
    using A = QskAspect;
    using Q = QskSwitchButton;


    setBoxShape( Q::Groove, 100, Qt::RelativeSize );
    const QSizeF strutSize( 52_dp, 32_dp );
    setStrutSize( Q::Groove | A::Horizontal, strutSize );
    setStrutSize( Q::Groove | A::Vertical, strutSize.transposed() );
    setGradient( Q::Groove, m_pal.surfaceVariant );

    setGradient( Q::Groove | Q::Disabled, m_pal.surfaceVariant12 );
    setGradient( Q::Groove | Q::Checked, m_pal.primary );

    setGradient( Q::Groove | Q::Checked | Q::Disabled, m_pal.onSurface12 );
    setBoxBorderMetrics( Q::Groove, 2_dp );
    setBoxBorderColors( Q::Groove, m_pal.outline );
    setBoxBorderColors( Q::Groove | Q::Disabled, m_pal.onSurface12 );

    setBoxBorderMetrics( Q::Groove | Q::Checked, 0 );

    setBoxShape( Q::Handle, 100, Qt::RelativeSize );
    setStrutSize( Q::Handle, { 30_dp, 30_dp } );
    setMargin( Q::Handle, 7_dp );
    setShadowMetrics( Q::Handle, { 17_dp, 0 } );
    setShadowColor( Q::Handle, QskRgb::Transparent );

    setGradient( Q::Handle, m_pal.outline );
    setGradient( Q::Handle | Q::Checked, m_pal.onPrimary );

    setStrutSize( Q::Icon, { 16_dp, 16_dp } );
    setPadding( Q::Icon, 6_dp );
    setSymbol( Q::Icon, symbol( "switchbutton-unchecked" ) );
    setSymbol( Q::Icon | Q::Checked, symbol( "switchbutton-checked" ) );

    setGraphicRole( Q::Icon, QskMaterial3Skin::GraphicRoleSurfaceContainerHighest );

    setGraphicRole( Q::Icon | Q::Checked, QskMaterial3Skin::GraphicRoleOnPrimaryContainer );
    setGraphicRole( Q::Icon | Q::Disabled, QskMaterial3Skin::GraphicRoleSurfaceContainerHighest38 );
    setGraphicRole( Q::Icon | Q::Checked | Q::Disabled, QskMaterial3Skin::GraphicRoleOnSurface38 );

    for ( auto state1 : { A::NoState, Q::Hovered, Q::Focused, Q::Pressed } )
    {
        const qreal opacity = m_pal.stateOpacity( state1 );

        for ( const auto state2 : { A::NoState, Q::Checked } )
        {
            const auto aspect = Q::Handle | state1 | state2;

            if ( state1 == Q::Pressed )
            {
                setShadowMetrics( aspect, { 10_dp, 0 } );
                setMargin( aspect, 0.0 );
            }
            else if ( state2 == Q::Checked )
            {
                setShadowMetrics( aspect, { 13_dp, 0 } );
                setMargin( aspect, 3_dp );
            }

            if ( state1 )
            {
                if ( state2 == Q::Checked )
                {
                    setGradient( aspect, m_pal.primaryContainer );
                    setShadowColor( aspect, stateLayerColor( m_pal.primary, opacity ) );
                }
                else
                {
                    setGradient( aspect, m_pal.onSurfaceVariant );
                    setShadowColor( aspect, stateLayerColor( m_pal.onSurface, opacity ) );
                }
            }
        }
    }

    setGradient( Q::Handle | Q::Disabled, m_pal.onSurface38 );
    setGradient( Q::Handle | Q::Disabled | Q::Checked, m_pal.surface );

    setBoxBorderColors( Q::Handle, m_pal.outline );
    setBoxBorderColors( Q::Handle | Q::Checked, m_pal.primary );

    for ( auto state : { A::NoState, Q::Disabled } )
    {
        auto aspect = Q::Handle | state;

        setPosition( aspect, 0.10 );
        setPosition( aspect | Q::Checked, 0.9 );
    }

    setAnimation( Q::Handle | A::Color, qskDuration );
    setAnimation( Q::Handle | A::Metric, qskDuration );
    setAnimation( Q::Groove | A::Color, qskDuration );
}

void Editor::setupTabButton()
{
    using A = QskAspect;
    using Q = QskTabButton;

    setStrutSize( Q::Panel, 48_dp, 64_dp );
#if 1
    // couldn't find a value in the specs
    setPadding( Q::Panel, 8, 0, 8, 0 );
#endif

    setGradient( Q::Panel, m_pal.surface );

    setColor( Q::Text, m_pal.onSurfaceVariant );
    setColor( Q::Text | A::Footer, m_pal.onSecondaryContainer );
    setColor( Q::Text | Q::Disabled, m_pal.onSurface38 );

    setColor( Q::Text | Q::Checked, m_pal.primary );
    setColor( Q::Text | Q::Hovered, m_pal.primary );

    QskBoxBorderMetrics border;
    border.setWidthAt( Qt::BottomEdge, 3_dp );
    setBoxBorderMetrics( Q::Panel, border );

    QskBoxBorderColors borderColors( m_pal.surface );
    setBoxBorderColors( Q::Panel, borderColors );

    borderColors.setGradientAt( Qt::BottomEdge, m_pal.primary );
    setBoxBorderColors( Q::Panel | Q::Checked, borderColors );

    setGradient( Q::Panel | Q::Hovered,
        QskRgb::toTransparentF( m_pal.surface, m_pal.hoverOpacity ) );

    setGradient( Q::Panel | Q::Focused,
        QskRgb::toTransparentF( m_pal.surface, m_pal.focusOpacity ) );

    setGradient( Q::Panel | Q::Pressed,
        QskRgb::toTransparentF( m_pal.surface, m_pal.pressedOpacity ) );

    setGradient( Q::Panel | A::Footer, m_pal.surface2 );
    setGradient( Q::Panel | A::Footer | Q::Checked, m_pal.secondaryContainer );
    setGradient( Q::Panel | A::Footer | Q::Hovered,
        stateLayerColor( m_pal.onSurfaceVariant, m_pal.hoverOpacity ) );
    setGradient( Q::Panel | A::Footer | Q::Hovered | Q::Checked,
        stateLayerColor( m_pal.onSurface, m_pal.hoverOpacity ) );
    setGradient( Q::Panel | A::Footer | Q::Focused,
        stateLayerColor( m_pal.onSurfaceVariant, m_pal.focusOpacity ) );
    setGradient( Q::Panel | A::Footer | Q::Focused | Q::Checked,
        stateLayerColor( m_pal.onSurface, m_pal.focusOpacity ) );
    setGradient( Q::Panel | A::Footer | Q::Pressed,
        stateLayerColor( m_pal.onSurfaceVariant, m_pal.pressedOpacity ) );
    setGradient( Q::Panel | A::Footer | Q::Pressed | Q::Checked,
        stateLayerColor( m_pal.onSurface, m_pal.pressedOpacity ) );

    setAnimation( Q::Panel | A::Color, qskDuration );

    setFontRole( Q::Text, LabelLarge );
    setAlignment( Q::Text, Qt::AlignCenter );
}

void Editor::setupTabBar()
{
    using A = QskAspect;
    using Q = QskTabBar;

    setBoxShape( Q::Panel, 0 );
    setBoxBorderMetrics( Q::Panel, 0 );

    setGradient( Q::Panel, m_pal.secondaryContainer );
    setPadding( Q::Panel, 0 );

    setHint( Q::Panel | A::Style, Qt::BottomEdge );

    // when flicking
    setAnimation( Q::Panel | A::Metric, QskAnimationHint( 200, QEasingCurve::InCubic ) );
}

void Editor::setupTabView()
{
    using Q = QskTabView;

    setGradient( Q::Page, m_pal.background );
    setAnimation( Q::Page, qskDuration );
}

void Editor::setupInputPanel()
{
    using Q = QskInputPanelBox;

    setBoxShape( Q::Panel, 0 );
    setBoxBorderMetrics( Q::Panel, 0 );
    setGradient( Q::Panel, m_pal.secondaryContainer );
    setBoxBorderColors( Q::Panel, m_pal.background );
}

void Editor::setupVirtualKeyboard()
{
    using A = QskAspect;
    using Q = QskVirtualKeyboard;

    // key panel
    setMargin( Q::ButtonPanel, 5_dp );
    setGradient( Q::ButtonPanel, m_pal.surface2 );
    setGradient( Q::ButtonPanel | QskPushButton::Pressed, m_pal.surface );
    setColor( Q::ButtonText | QskPushButton::Pressed, m_pal.outlineVariant );
    setBoxShape( Q::ButtonPanel, 6_dp );

    setBoxShape( Q::ButtonPanel | A::Huge, 100, Qt::RelativeSize );
    setGradient( Q::ButtonPanel | A::Huge, m_pal.primary );
    setColor( Q::ButtonText | A::Huge, m_pal.onPrimary );

    setGradient( Q::ButtonPanel | A::Large, m_pal.outlineVariant );

    setBoxShape( Q::ButtonPanel | A::Small, 100, Qt::RelativeSize );
    setGradient( Q::ButtonPanel | A::Small, m_pal.secondary );
    setColor( Q::ButtonText | A::Small, m_pal.onSecondary );

    setGradient( Q::ButtonPanel | A::Tiny, m_pal.outlineVariant );

    for ( auto state : { A::NoState, Q::Focused } )
        setBoxBorderColors( Q::ButtonPanel | QskPushButton::Pressed | state,
            m_pal.secondary );

    setAnimation( Q::ButtonPanel | A::Color, qskDuration );
    setAnimation( Q::ButtonPanel | A::Metric, qskDuration );

    setColor( Q::ButtonText, m_pal.onBackground );
    setFontRole( Q::ButtonText, HeadlineSmall );

    // panel
    setGradient( Q::Panel, m_pal.background );
    setPadding( Q::Panel, { 3_dp, 25_dp, 3_dp, 5_dp } );
}

void Editor::setupScrollView()
{
    using A = QskAspect;
    using Q = QskScrollView;

    setGradient( Q::Panel, m_pal.background );
    setGradient( Q::Viewport, m_pal.secondaryContainer );

    for ( auto subControl : { Q::HorizontalScrollBar, Q::VerticalScrollBar } )
    {
        setMetric( subControl | A::Size, 6_dp );
        setPadding( subControl, 0 );
    }

    const auto handleExtent = 40_dp;
    setStrutSize( Q::HorizontalScrollHandle, handleExtent, 0.0 );
    setStrutSize( Q::VerticalScrollHandle, 0.0, handleExtent );

    for ( auto subControl : { Q::HorizontalScrollHandle, Q::VerticalScrollHandle } )
    {
        setBoxShape( subControl, { 100, Qt::RelativeSize } );
        setBoxBorderMetrics( subControl, 0 );
        setGradient( subControl, m_pal.secondary );
        setAnimation( subControl | A::Color, qskDuration );
    }

    // when changing the position by QskScrollView::scrollTo
    setAnimation( Q::Viewport | A::Metric, QskAnimationHint( 200, QEasingCurve::InCubic ) );
}

void Editor::setupListView()
{
    using Q = QskListView;
    using A = QskAspect;

    setStrutSize( Q::Cell, { -1, 56_dp } );
    setPadding( Q::Cell, { 16_dp, 8_dp, 24_dp, 8_dp } );

    setBoxBorderColors( Q::Cell, m_pal.outline );

    for ( const auto state1 : { A::NoState, Q::Hovered, Q::Focused, Q::Pressed, Q::Disabled } )
    {
        for ( const auto state2 : { A::NoState, Q::Selected } )
        {
            QRgb cellColor;

            if ( state2 == A::NoState )
            {
                if ( state1 == Q::Hovered )
                {
                    cellColor = flattenedColor( m_pal.onSurface,
                        m_pal.surface, m_pal.hoverOpacity );
                }
                else if ( state1 == Q::Pressed )
                {
                    cellColor = flattenedColor( m_pal.onSurface,
                        m_pal.primary12, m_pal.pressedOpacity );
                }
                else
                {
                    cellColor = m_pal.surface;
                }
            }
            else
            {
                if ( state1 == Q::Hovered )
                {
                    cellColor = flattenedColor( m_pal.onSurface,
                        m_pal.primary12, m_pal.focusOpacity );
                }
                else if ( state1 == Q::Focused )
                {
                    cellColor = flattenedColor( m_pal.onSurface,
                        m_pal.primary12, m_pal.focusOpacity );
                }
                else if ( state1 == Q::Disabled )
                {
                    cellColor = m_pal.surfaceVariant;
                }
                else
                {
                    cellColor = m_pal.primary12;
                }
            }

            setGradient( Q::Cell | state1 | state2, cellColor );
        }
    }

    setFontRole( Q::Text, BodyMedium );

    setColor( Q::Text, m_pal.onSurface );
    setColor( Q::Text | Q::Disabled, m_pal.onSurface38 );

#if 1
    setAnimation( Q::Cell | A::Color, 100 );
    setAnimation( Q::Text | A::Color, 100 );
#endif
}

void Editor::setupSubWindow()
{
    using A = QskAspect;
    using Q = QskSubWindow;

    // Panel

    setPadding( Q::Panel, { 24_dp, 0, 24_dp, 24_dp } );
    setStrutSize( Q::Panel, { 280_dp, -1 } );
    setBoxShape( Q::Panel, 28_dp );
    setBoxBorderMetrics( Q::Panel, 0 );
    setGradient( Q::Panel, m_pal.secondaryContainer );
    setShadowMetrics( Q::Panel, m_pal.elevation3 );
    setShadowColor( Q::Panel, m_pal.shadow );

    // TitleBarPanel
    setBoxShape( Q::TitleBarPanel, { 28_dp, 28_dp, 0, 0 } );
    setPadding( Q::TitleBarPanel, { 24_dp, 24_dp, 24_dp, 16_dp } );
    setHint( Q::TitleBarPanel | QskAspect::Style, Q::NoDecoration );

    setGradient( Q::TitleBarPanel, m_pal.secondaryContainer );

    // TitleBarText
    setFontRole( Q::TitleBarText, HeadlineSmall );
    setColor( Q::TitleBarText, m_pal.onSurface );
    setAlignment( Q::TitleBarText, Qt::AlignCenter );

    setTextOptions( Q::TitleBarText, Qt::ElideRight, QskTextOptions::NoWrap );

    for ( auto subControl : { Q::Panel, Q::TitleBarPanel, Q::TitleBarText } )
        setAnimation( subControl | A::Color, qskDuration );

    setAnimation( Q::Panel | A::Position, qskDuration, QEasingCurve::OutCubic );
}

QskMaterial3Theme::QskMaterial3Theme( QskSkin::ColorScheme colorScheme )
    : QskMaterial3Theme( colorScheme, BaseColors() )
{
}

QskMaterial3Theme::QskMaterial3Theme( QskSkin::ColorScheme colorScheme,
    const BaseColors& baseColors )
{
    if ( colorScheme == QskSkin::LightScheme )
    {
        {
            const QskHctColor color( baseColors.primary );

            primary = color.toned( 40 ).rgb();
            onPrimary = color.toned( 100 ).rgb();
            primaryContainer = color.toned( 90 ).rgb();
            onPrimaryContainer = color.toned( 10 ).rgb();
            inversePrimary = color.toned( 80 ).rgb();
        }

        {
            const QskHctColor color( baseColors.secondary );

            secondary = color.toned( 40 ).rgb();
            onSecondary = color.toned( 100 ).rgb();
            secondaryContainer = color.toned( 90 ).rgb();
            onSecondaryContainer = color.toned( 10 ).rgb();
        }

        {
            const QskHctColor color( baseColors.tertiary );

            tertiary = color.toned( 40 ).rgb();
            onTertiary = color.toned( 100 ).rgb();
            tertiaryContainer = color.toned( 90 ).rgb();
            onTertiaryContainer = color.toned( 10 ).rgb();
        }

        {
            const QskHctColor color( baseColors.error );

            error = color.toned( 40 ).rgb();
            onError = color.toned( 100 ).rgb();
            errorContainer = color.toned( 90 ).rgb();
            onErrorContainer = color.toned( 10 ).rgb();
        }

        {
            const QskHctColor color( baseColors.neutral );

            background = color.toned( 99 ).rgb();
            onBackground = color.toned( 10 ).rgb();
            surface = color.toned( 99 ).rgb();
            onSurface = color.toned( 10 ).rgb();
            inverseSurface = color.toned( 20 ).rgb();
            inverseOnSurface = color.toned( 95 ).rgb();
            scrim = color.toned( 0 ).rgb();
            shadow = color.toned( 0 ).rgb();
        }

        {
            const QskHctColor color( baseColors.neutralVariant );

            surfaceVariant = color.toned( 90 ).rgb();
            onSurfaceVariant = color.toned( 30 ).rgb();
            outline = color.toned( 50 ).rgb();
            outlineVariant = color.toned( 80 ).rgb();
            surfaceContainerHighest = color.toned( 90 ).rgb();
        }

    }
    else if ( colorScheme == QskSkin::DarkScheme )
    {
        {
            const QskHctColor color( baseColors.primary );

            primary = color.toned( 80 ).rgb();
            onPrimary = color.toned( 20 ).rgb();
            primaryContainer = color.toned( 30 ).rgb();
            onPrimaryContainer = color.toned( 90 ).rgb();
            inversePrimary = color.toned( 40 ).rgb();
        }

        {
            const QskHctColor color( baseColors.secondary );

            secondary = color.toned( 80 ).rgb();
            onSecondary = color.toned( 20 ).rgb();
            secondaryContainer = color.toned( 30 ).rgb();
            onSecondaryContainer = color.toned( 90 ).rgb();
        }

        {
            const QskHctColor color( baseColors.tertiary );

            tertiary = color.toned( 80 ).rgb();
            onTertiary = color.toned( 20 ).rgb();
            tertiaryContainer = color.toned( 30 ).rgb();
            onTertiaryContainer = color.toned( 90 ).rgb();
        }

        {
            const QskHctColor color( baseColors.error );

            error = color.toned( 80 ).rgb();
            onError = color.toned( 20 ).rgb();
            errorContainer = color.toned( 30 ).rgb();
            onErrorContainer = color.toned( 90 ).rgb();
        }

        {
            const QskHctColor color( baseColors.neutral );

            background = color.toned( 10 ).rgb();
            onBackground = color.toned( 90 ).rgb();
            surface = color.toned( 10 ).rgb();
            onSurface = color.toned( 80 ).rgb();
            inverseSurface = color.toned( 90 ).rgb();
            inverseOnSurface = color.toned( 20 ).rgb();
            scrim = color.toned( 0 ).rgb();
            shadow = color.toned( 0 ).rgb();
        }

        {
            const QskHctColor color( baseColors.neutralVariant );

            surfaceVariant = color.toned( 30 ).rgb();
            onSurfaceVariant = color.toned( 80 ).rgb();
            outline = color.toned( 60 ).rgb();
            outlineVariant = color.toned( 30 ).rgb();
            surfaceContainerHighest = color.toned( 22 ).rgb();
        }
    }

    primary8 = QskRgb::toTransparentF( primary, 0.08 );
    primary12 = QskRgb::toTransparentF( primary, 0.12 );

    onSecondaryContainer8 = QskRgb::toTransparentF( onSecondaryContainer, 0.08 );
    onSecondaryContainer12 = QskRgb::toTransparentF( onSecondaryContainer, 0.12 );

    error8 = QskRgb::toTransparentF( error, 0.08 );
    error12 = QskRgb::toTransparentF( error, 0.12 );

    surface1 = flattenedColor( primary, background, 0.05 );
    surface2 = flattenedColor( primary, background, 0.08 );
    surface3 = flattenedColor( primary, background, 0.11 );
    surface4 = flattenedColor( primary, background, 0.12 );
    surface5 = flattenedColor( primary, background, 0.14 );

    onSurface8 = QskRgb::toTransparentF( onSurface, 0.08 );
    onSurface12 = QskRgb::toTransparentF( onSurface, 0.12 );
    onSurface38 = QskRgb::toTransparentF( onSurface, 0.38 );

    surfaceVariant12 = QskRgb::toTransparentF( surfaceVariant, 0.12 );

    surfaceContainerHighest38 = QskRgb::toTransparentF( surfaceContainerHighest, 0.38 );

    elevation0 = QskShadowMetrics( 0, 0 );
    elevation1 = QskShadowMetrics( -2, 9, { 0, 1 } );
    elevation2 = QskShadowMetrics( -2, 8, { 0, 2 } );
    elevation3 = QskShadowMetrics( -1, 11, { 0, 2 } );

    shapeExtraSmallTop = QskBoxShapeMetrics( 4_dp, 4_dp, 0, 0 );
}

qreal QskMaterial3Theme::stateOpacity( int state ) const
{
    if ( state == QskControl::Hovered )
        return hoverOpacity;

    if ( state == QskControl::Focused )
        return focusOpacity;

    if ( state == QskControl::Disabled )
        return disabledOpacity;

    return state ? pressedOpacity : 0.0;
}

QskMaterial3Skin::QskMaterial3Skin( QObject* parent )
    : Inherited( parent )
{
    declareSkinlet< QskProgressBar, QskMaterial3ProgressBarSkinlet >();
    declareSkinlet< QskSlider, QskMaterial3SliderSkinlet >();
    declareSkinlet< QskTextField, QskMaterial3TextFieldSkinlet >();
}

QskMaterial3Skin::~QskMaterial3Skin()
{
}

static inline QFont createFont( qreal size, int lineHeight,
    qreal spacing, QFont::Weight weight )
{
    Q_UNUSED( lineHeight );

    QFont font( QStringLiteral( "Roboto" ), -1, weight );

    static bool checkFont = true;
    if ( checkFont )
    {
        const QFontInfo info( font );
        if ( info.family() != font.family() )
        {
            qWarning() << font.family() <<
                "not found, using" << info.family() << "instead.";
        }
        checkFont = false;
    }

    // px: 1/96 inch, pt: 1/72 inch
    font.setPointSize( size * 72.0 / 96.0 );

    if ( spacing > 0.0 )
        font.setLetterSpacing( QFont::AbsoluteSpacing, spacing );

    return font;
}

void QskMaterial3Skin::setupFonts()
{
    /*
        Not sure what units are used for the font sizes in the specs.
        From the results on our desktop system we guess they are in pt
        - corresponding to the QFont point size.
     */
    setFont( LabelSmall, createFont( 11, 16_dp, 0.5, QFont::Medium ) );
    setFont( LabelMedium, createFont( 12, 16_dp, 0.5, QFont::Medium ) );
    setFont( LabelLarge, createFont( 14, 20_dp, 0.1, QFont::Medium ) );

    setFont( BodySmall, createFont( 12, 16_dp, 0.4, QFont::Normal ) );
    setFont( BodyMedium, createFont( 14, 20_dp, 0.25, QFont::Normal ) );
    setFont( BodyLarge, createFont( 16, 24_dp, 0.5, QFont::Normal ) );

    setFont( TitleSmall, createFont( 14, 20_dp, 0.1, QFont::Medium ) );
    setFont( TitleMedium, createFont( 16, 24_dp, 0.15, QFont::Medium ) );
    setFont( TitleLarge, createFont( 22, 28_dp, 0.0, QFont::Normal ) );

    setFont( HeadlineSmall, createFont( 24, 32_dp, 0.0, QFont::Normal ) );
    setFont( HeadlineMedium, createFont( 28, 36_dp, 0.0, QFont::Medium ) );
    setFont( HeadlineLarge, createFont( 32, 40_dp, 0.0, QFont::Medium ) );

    setFont( DisplaySmall, createFont( 36, 44_dp, 0.0, QFont::Normal ) );
    setFont( DisplayMedium, createFont( 45, 52_dp, 0.0, QFont::Normal ) );
    setFont( DisplayLarge, createFont( 57, 64_dp, 0.0, QFont::Normal ) );

    // to have something for the unused roles

    setFont( { QskFontRole::Subtitle, QskFontRole::Normal },
        createFont( 16, 24_dp, 0.0, QFont::Normal ) );

    QskSkin::completeFontTable();
}

void QskMaterial3Skin::setGraphicColor( GraphicRole role, QRgb rgb )
{
    QskColorFilter colorFilter;
    colorFilter.setMask( QskRgb::RGBAMask );
    colorFilter.addColorSubstitution( QskRgb::Black, rgb );

    setGraphicFilter( role, colorFilter );
}

void QskMaterial3Skin::setupGraphicFilters( const QskMaterial3Theme& theme )
{
    setGraphicColor( GraphicRoleOnPrimary, theme.onPrimary );
    setGraphicColor( GraphicRoleOnPrimaryContainer, theme.onPrimaryContainer );
    setGraphicColor( GraphicRoleOnSecondaryContainer, theme.onSecondaryContainer );
    setGraphicColor( GraphicRoleOnError, theme.onError );
    setGraphicColor( GraphicRoleOnSurface, theme.onSurface );
    setGraphicColor( GraphicRoleOnSurface38, theme.onSurface38 );
    setGraphicColor( GraphicRoleOnSurfaceVariant, theme.onSurfaceVariant );
    setGraphicColor( GraphicRolePrimary, theme.primary );
    setGraphicColor( GraphicRoleSurface, theme.surface );
    setGraphicColor( GraphicRoleSurfaceContainerHighest, theme.surfaceContainerHighest );
    setGraphicColor( GraphicRoleSurfaceContainerHighest38, theme.surfaceContainerHighest38 );
}

void QskMaterial3Skin::initHints()
{
    const QskMaterial3Theme theme( colorScheme() );

    setupFonts();
    setupGraphicFilters( theme );

    Editor editor( &hintTable(), theme );
    editor.setup();
}

#include "moc_QskMaterial3Skin.cpp"
#include "QskMaterial3Skin.moc"