igniteui-theming 1.4.2 → 1.4.3-beta.2

package/sass/themes/schemas/components/light/_tabs.scss

@@ -0,0 +1,402 @@
+@use '../../../../utils/map' as *;
+@use '../../../../typography/functions' as *;
+
+////
+/// @package theming
+/// @group schemas
+/// @access public
+////
+
+/* stylelint-disable max-line-length */
+
+/// Generates a light tabs schema.
+/// @type {Map}
+/// @prop {Map} item-text-color [color: ('gray', 700)] - The color used for the tab text color.
+/// @prop {Color} item-background [color: ('surface')] - The background color used for the tabs header.
+/// @prop {Map} item-hover-background [color: ('gray', 200)] - The background used for the tabs on hover.
+/// @prop {Map} item-hover-color [color: ('gray', 700)] - The text color used for the tabs on hover.
+/// @prop {Map} item-icon-color [color: ('gray', 700)] - The color used for the tab icon.
+/// @prop {Map} item-active-icon-color [color: ('primary', 500)] - The color used for the active tab icon.
+/// @prop {Map} item-hover-icon-color [color: ('gray', 700)] - The color used for the tab icon on hover.
+/// @prop {Map} item-disabled-icon-color [color: ('gray', 500)] - The color used for the disabled tab icon.
+/// @prop {Map} item-active-color [color: ('primary', 500)] - The color used for the active tabs text.
+/// @prop {Map} item-active-background [color: ('gray', 200)] - The color used for the active/focused tab background.
+/// @prop {Map} item-disabled-color [color: ('gray', 500)] - The color used for the disabled tabs text.
+/// @prop {Map} indicator-color [color: ('primary', 500)] - The color used for the active tab indicator.
+/// @prop {Map} button-color [color: ('gray', 700)] - The color used for the button icon/text color.
+/// @prop {Map} button-hover-color [color: ('gray', 900)] - The color used for the button icon/text color on hover.
+/// @prop {Map} button-disabled-color [color: ('gray', 500)] - The color used for the disabled button icon/text.
+/// @prop {Color} button-background [color: ('surface')] - The color used for the button background.
+/// @prop {Map} button-hover-background [color: ('gray', 100)] - The color used for the button background on hover.
+/// @prop {Map} border-color [transparent] - The color used for the tab items bottom border.
+/// @prop {Map} border-color--hover [transparent] - The color used for the tab items bottom border on hover.
+/// @prop {Map} tab-ripple-color [color: ('gray', 100)] - The color used for the button background.
+/// @prop {Map} button-ripple-color [color: ('gray', 100)] - The color used for the button background on hover.
+/// @prop {Number} border-radius [0] - The border radius used for tabs. Can be a fraction between 0 and 1, pixels, or percent.
+$light-tabs: extend(
+    (
+        item-text-color: (
+            color: (
+                'gray',
+                700,
+            ),
+        ),
+        item-background: (
+            color: (
+                'surface',
+            ),
+        ),
+        item-hover-background: (
+            color: (
+                'gray',
+                200,
+            ),
+        ),
+        item-hover-color: (
+            color: (
+                'gray',
+                700,
+            ),
+        ),
+        item-active-color: (
+            color: (
+                'primary',
+                500,
+            ),
+        ),
+        item-icon-color: (
+            color: (
+                'gray',
+                700,
+            ),
+        ),
+        item-active-icon-color: (
+            color: (
+                'primary',
+                500,
+            ),
+        ),
+        item-hover-icon-color: (
+            color: (
+                'gray',
+                700,
+            ),
+        ),
+        item-disabled-icon-color: (
+            color: (
+                'gray',
+                500,
+            ),
+        ),
+        item-active-background: (
+            color: (
+                'gray',
+                200,
+            ),
+        ),
+        item-disabled-color: (
+            color: (
+                'gray',
+                500,
+            ),
+        ),
+        indicator-color: (
+            color: (
+                'primary',
+                500,
+            ),
+        ),
+        button-color: (
+            color: (
+                'gray',
+                700,
+            ),
+        ),
+        button-background: (
+            color: (
+                'surface',
+            ),
+        ),
+        button-hover-background: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+        button-hover-color: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
+        button-disabled-color: (
+            color: (
+                'gray',
+                500,
+            ),
+        ),
+        tab-ripple-color: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+        button-ripple-color: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+        border-color: transparent,
+        border-color--hover: transparent,
+        border-radius: rem(0),
+    )
+);
+
+/// Generates a fluent tabs schema.
+/// @type {Map}
+/// @prop {Map} item-text-color [color: ('gray', 900)] - The color used for the tab text color.
+/// @prop {Map} item-hover-color [color: ('gray', 900)] - The text color used for the tabs on hover.
+/// @prop {Map} item-disabled-color [color: ('gray', 400)] - The color used for the disabled tabs text.
+/// @prop {Map} item-disabled-icon-color [color: ('gray', 400)] - The color used for the disabled tab icon.
+/// @prop {Map} button-color [color: ('gray', 500)] - The color used for the button icon/text color.
+/// @prop {Map} button-hover-color [color: ('gray', 600)] - The color used for the button icon/text color on hover.
+/// @prop {Map} button-disabled-color [color: ('gray', 400)] - The color used for the disabled button icon/text.
+/// @requires {Map} $light-tabs
+$fluent-tabs: extend(
+    $light-tabs,
+    (
+        item-text-color: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
+        item-hover-color: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
+        item-disabled-color: (
+            color: (
+                'gray',
+                400,
+            ),
+        ),
+        item-disabled-icon-color: (
+            color: (
+                'gray',
+                400,
+            ),
+        ),
+        button-color: (
+            color: (
+                'gray',
+                500,
+            ),
+        ),
+        button-hover-color: (
+            color: (
+                'gray',
+                600,
+            ),
+        ),
+        button-disabled-color: (
+            color: (
+                'gray',
+                400,
+            ),
+        ),
+    )
+);
+
+/// Generates a bootstrap tabs schema.
+/// @type {Map}
+/// @prop {map} item-text-color [color: ('primary', 500)] - The color used for the tab text color.
+/// @prop {map} item-icon-color [color: ('primary', 500)] - The color used for the tab icon.
+/// @prop {map} item-hover-color [color: ('primary', 700)] - The text color used for the tabs on hover.
+/// @prop {Map} item-hover-icon-color [color: ('primary', 700)] - The color used for the tab icon on hover.
+/// @prop {map} item-active-color [color: ('gray', 800)] - The color used for the active tabs text.
+/// @prop {map} item-active-icon-color [color: ('gray', 800)] - The color used for the active tabs icon.
+/// @prop {Map} item-disabled-color [color: ('primary', 500, .5)] - The color used for the disabled tabs text.
+/// @prop {Map} item-disabled-icon-color [color: ('primary', 500, .5)] - The color used for the disabled tab icon.
+/// @prop {map} item-background [color: ('surface')] - The background color used for the tabs header.
+/// @prop {map} button-background [color: ('surface')] - The color used for the button background.
+/// @prop {Map} button-color [color: ('gray', 500)] - The color used for the button icon/text color.
+/// @prop {Map} button-hover-color [color: ('gray', 600)] - The color used for the button icon/text color on hover.
+/// @prop {Map} button-disabled-color [color: ('primary', 500, .5)] - The color used for the disabled button icon/text.
+/// @prop {map} item-hover-background [color: ('surface')] - The background used for the tabs on hover.
+/// @prop {map} item-active-background [color: ('surface')] - The color used for the active/focused tab background.
+/// @prop {map} border-color [color: ('gray', 300)] - The color used for the tab items border.
+/// @prop {map} border-color--hover [color: ('gray', 200)] - The color used for the tab items border on hover.
+/// @prop {Number} border-radius [4px] - The border radius used for tabs. Can be a fraction between 0 and 1, pixels, or percent.
+/// @requires {Map} $light-tabs
+$bootstrap-tabs: extend(
+    $light-tabs,
+    (
+        item-background: (
+            color: (
+                'surface',
+            ),
+        ),
+        button-background: (
+            color: (
+                'surface',
+            ),
+        ),
+        button-color: (
+            color: (
+                'gray',
+                500,
+            ),
+        ),
+        button-hover-color: (
+            color: (
+                'gray',
+                600,
+            ),
+        ),
+        item-hover-background: (
+            color: (
+                'surface',
+            ),
+        ),
+        button-disabled-color: (
+            color: (
+                'primary',
+                500,
+                0.5,
+            ),
+        ),
+        item-active-background: (
+            color: (
+                'surface',
+            ),
+        ),
+        border-color: (
+            color: (
+                'gray',
+                300,
+            ),
+        ),
+        border-color--hover: (
+            color: (
+                'gray',
+                200,
+            ),
+        ),
+        item-text-color: (
+            color: (
+                'primary',
+                500,
+            ),
+        ),
+        item-icon-color: (
+            color: (
+                'primary',
+                500,
+            ),
+        ),
+        item-hover-color: (
+            color: (
+                'primary',
+                700,
+            ),
+        ),
+        item-hover-icon-color: (
+            color: (
+                'primary',
+                700,
+            ),
+        ),
+        item-active-color: (
+            color: (
+                'gray',
+                800,
+            ),
+        ),
+        item-active-icon-color: (
+            color: (
+                'gray',
+                800,
+            ),
+        ),
+        item-disabled-color: (
+            color: (
+                'primary',
+                500,
+                0.5,
+            ),
+        ),
+        item-disabled-icon-color: (
+            color: (
+                'primary',
+                500,
+                0.5,
+            ),
+        ),
+        border-radius: rem(4px),
+    )
+);
+
+/// Generates an indigo tabs schema.
+/// @type {Map}
+/// @prop {Color} item-background [transparent] - The background color used for the tabs header.
+/// @prop {Color} item-hover-background [transparent] - The background used for the tabs on hover.
+/// @prop {Color} item-active-background [transparent] - The color used for the active/focused tab background.
+/// @prop {Map} item-hover-color [color: ('gray', 900)] - The text color used for the tabs on hover.
+/// @prop {Map} item-hover-icon-color [color: ('gray', 900)] - The color used for the tab icon on hover.
+/// @prop {Map} item-active-color [color: ('gray', 900)] - The color used for the active tabs text.
+/// @prop {Map} item-active-icon-color [color: ('primary', 400)] - The color used for the active tabs icon.
+/// @prop {Map} indicator-color [color: ('primary', 400)] - The color used for the tabs borders.
+/// @prop {Map} button-disabled-color [color: ('gray', 500)] - The color used for the disabled button icon/text.
+/// @prop {Color} button-background [transparent] - The color used for the button background.
+/// @prop {Color} button-hover-background [transparent] - The color used for the button background on hover.
+/// @requires {Map} $light-tabs
+$indigo-tabs: extend(
+    $light-tabs,
+    (
+        item-background: transparent,
+        item-hover-background: transparent,
+        item-active-background: transparent,
+        item-hover-color: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
+        item-hover-icon-color: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
+        item-active-color: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
+        item-active-icon-color: (
+            color: (
+                'primary',
+                400,
+            ),
+        ),
+        indicator-color: (
+            color: (
+                'primary',
+                400,
+            ),
+        ),
+        button-disabled-color: (
+            color: (
+                'gray',
+                500,
+            ),
+        ),
+        button-background: transparent,
+        button-hover-background: transparent,
+    )
+);

package/sass/themes/schemas/components/light/_tree.scss

@@ -0,0 +1,288 @@
+@use '../../../../utils/map' as *;
+@use '../../../../typography/functions' as *;
+
+////
+/// @package theming
+/// @group schemas
+/// @access public
+////
+
+/* stylelint-disable max-line-length */
+
+/// Generates a light tree schema.
+/// @type {Map}
+/// @prop {Map} background [ color: ('surface')] - The background color used for the tree node.
+/// @prop {Map} background-selected [color: ('secondary', 200)] - The background color used for the selected tree node.
+/// @prop {Map} background-active [color: ('gray', 200)] - The background color used for the active tree node.
+/// @prop {Map} background-active-selected [color: ('secondary', 300)] - The background color used for the active selected tree node.
+/// @prop {Map} background-disabled [color: ('surface')] - The background color used for the tree node in disabled state.
+/// @prop {Map} foreground [contrast-color: ('surface')] - The color used for the tree node content.
+/// @prop {Map} foreground-selected [contrast-color: ('secondary', 200)] - The color used for the content of the selected tree node.
+/// @prop {Map} foreground-active [contrast-color: ('gray', 200)] - The color used for the content in active state of the tree node.
+/// @prop {Map} foreground-active-selected [contrast-color: ('secondary', 300)] - The color used for the content of the active selected tree node.
+/// @prop {Map} foreground-disabled [color: ('gray', 500)] - The color used for the content of the disabled tree node.
+/// @prop {Map} drop-area-color [color: ('secondary'] - The background color used for the tree node drop aria.
+/// @prop {Map} border-color [color: ('secondary')] - The outline shadow color used for tree node in focus state.
+$light-tree: (
+    background: (
+        color: (
+            'surface',
+        ),
+    ),
+    foreground: (
+        contrast-color: (
+            'surface',
+        ),
+    ),
+    background-selected: (
+        color: (
+            'secondary',
+            200,
+        ),
+    ),
+    foreground-selected: (
+        contrast-color: (
+            'secondary',
+            200,
+        ),
+    ),
+    background-active: (
+        color: (
+            'gray',
+            200,
+        ),
+    ),
+    foreground-active: (
+        contrast-color: (
+            'gray',
+            200,
+        ),
+    ),
+    background-active-selected: (
+        color: (
+            'secondary',
+            300,
+        ),
+    ),
+    foreground-active-selected: (
+        contrast-color: (
+            'secondary',
+            300,
+        ),
+    ),
+    border-color: (
+        color: (
+            'secondary',
+        ),
+    ),
+    // Same for all themes
+    background-disabled:
+        (
+            color: (
+                'surface',
+            ),
+        ),
+    foreground-disabled: (
+        color: (
+            'gray',
+            500,
+        ),
+    ),
+    drop-area-color: (
+        color: (
+            'secondary',
+        ),
+    ),
+    hover-color: (
+        color: (
+            'gray',
+            900,
+            0.1,
+        ),
+    ),
+);
+
+/// Generates a light fluent tree schema.
+/// @type {Map}
+/// @prop {Map} background [ color: ('surface')] - The background color used for the tree node.
+/// @prop {Map} foreground [contrast-color: ('surface')] - The color used for the tree node content.
+/// @prop {Map} background-selected [color: ('gray', 200)] - The background color used for the selected tree node.
+/// @prop {Map} foreground-selected [contrast-color: ('gray', 200)] - The color used for the content of the selected tree node.
+/// @prop {Map} background-active [color: ('gray', 200)] - The background color used for the active tree node.
+/// @prop {Map} foreground-active [contrast-color: ('gray', 200)] - The color used for the content in active state of the tree node.
+/// @prop {Map} background-active-selected [color: ('gray', 300)] - The background color used for the active selected tree node.
+/// @prop {Map} foreground-active-selected [contrast-color: ('gray', 300)] - The color used for the content of the active selected tree node.
+/// @prop {Map} border-color [color: ('gray', 800)] - The outline shadow color used for tree node in focus state.
+/// @requires {Map} $light-tree
+$fluent-tree: extend(
+    $light-tree,
+    (
+        background: (
+            color: (
+                'surface',
+            ),
+        ),
+        foreground: (
+            contrast-color: (
+                'surface',
+            ),
+        ),
+        background-selected: (
+            color: (
+                'gray',
+                200,
+            ),
+        ),
+        foreground-selected: (
+            contrast-color: (
+                'gray',
+                200,
+            ),
+        ),
+        background-active: (
+            color: (
+                'gray',
+                200,
+            ),
+        ),
+        foreground-active: (
+            contrast-color: (
+                'gray',
+                200,
+            ),
+        ),
+        background-active-selected: (
+            color: (
+                'gray',
+                300,
+            ),
+        ),
+        foreground-active-selected: (
+            contrast-color: (
+                'gray',
+                300,
+            ),
+        ),
+        border-color: (
+            color: (
+                'gray',
+                800,
+            ),
+        ),
+    )
+);
+
+/// Generates a bootstrap tree schema.
+/// @type {Map}
+/// @prop {Map} foreground-active [contrast-color: ('primary')] - The color used for the content in active state of the tree node.
+/// @prop {Map} background-selected [color: ('primary')] - The background color used for the selected tree node.
+/// @prop {Map} foreground-selected [contrast-color: ('primary', 600)] - The color used for the content of the selected tree node.
+/// @prop {Map} background-active-selected [color: ('primary', 600)] - The background color used for the active selected tree node.
+/// @prop {Map} foreground-active-selected [contrast-color: ('primary', 600)] - The color used for the content of the active selected tree node.
+/// @prop {Map} border-color [color: ('primary', 200)] - The outline shadow color used for tree node in focus state.
+/// @requires $light-tree
+$bootstrap-tree: extend(
+    $light-tree,
+    (
+        foreground-active: (
+            color: (
+                'primary',
+            ),
+        ),
+        background-selected: (
+            color: (
+                'primary',
+            ),
+        ),
+        foreground-selected: (
+            contrast-color: (
+                'primary',
+                600,
+            ),
+        ),
+        background-active-selected: (
+            color: (
+                'primary',
+                600,
+            ),
+        ),
+        foreground-active-selected: (
+            contrast-color: (
+                'primary',
+                600,
+            ),
+        ),
+        border-color: (
+            color: (
+                'primary' 200,
+            ),
+        ),
+        hover-color: (
+            color: (
+                'gray',
+                900,
+                0.1,
+            ),
+        ),
+    )
+);
+
+/// Generates an indigo tree schema.
+/// @type {Map}
+/// @prop {Map} background-active [color: ('surface')] - The background color used for the active tree node.
+/// @prop {Map} foreground-active [contrast-color: ('primary')] - The color used for the content in active state of the tree node.
+/// @prop {Map} background-selected [color: ('primary')] - The background color used for the selected tree node.
+/// @prop {Map} foreground-selected [contrast-color: ('primary')] - The color used for the content of the selected tree node.
+/// @prop {Map} background-active-selected [color: ('primary', 400)] - The background color used for the active selected tree node.
+/// @prop {Map} foreground-active-selected [contrast-color: ('primary', 400)] - The color used for the content of the active selected tree node.
+/// @prop {Map} border-color [color: ('primary', 300)] - The outline shadow color used for tree node in focus state.
+/// @requires {Map} $light-tree
+$indigo-tree: extend(
+    $light-tree,
+    (
+        background-active: (
+            color: (
+                'surface',
+            ),
+        ),
+        foreground-active: (
+            color: (
+                'primary',
+            ),
+        ),
+        background-selected: (
+            color: (
+                'primary',
+            ),
+        ),
+        foreground-selected: (
+            contrast-color: (
+                'primary',
+            ),
+        ),
+        background-active-selected: (
+            color: (
+                'primary',
+                400,
+            ),
+        ),
+        foreground-active-selected: (
+            contrast-color: (
+                'primary',
+                400,
+            ),
+        ),
+        border-color: (
+            color: (
+                'primary',
+                300,
+            ),
+        ),
+        hover-color: (
+            color: (
+                'primary',
+                100,
+            ),
+        ),
+    )
+);