igniteui-theming 1.4.2 → 1.4.3-beta.2

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

@@ -0,0 +1,285 @@
+@use '../../../../utils/map' as *;
+@use '../../../../typography/functions' as *;
+
+////
+/// @package theming
+/// @group schemas
+/// @access public
+////
+
+/* stylelint-disable max-line-length */
+
+/// Generates a light checkbox schema.
+/// @type {Map}
+/// @prop {Map} tick-color [color: ('gray', 50)] - The checked mark color.
+/// @prop {Map} tick-color-hover [color: ('gray', 50)] - The checked mark color on hover.
+/// @prop {Map} label-color [color: ('gray', 900)]- The text color used for the label text.
+/// @prop {Map} empty-color [color: ('gray', 600)] - The unchecked border color.
+/// @prop {Map} fill-color [color: ('secondary', 500)] - The checked border and fill colors.
+/// @prop {Map} fill-color-hover [color: ('secondary', 500)] - The checked border and fill colors on hover.
+/// @prop {Map} disabled-color [color: ('gray', 400)] - The disabled border and fill colors.
+/// @prop {Map} disabled-indeterminate-color [color: ('secondary', 200)] - The disabled border and fill colors in indeterminate state.
+/// @prop {Map} disabled-color-label [color: ('gray', 500)] - The disabled color of the label.
+/// @prop {Map} error-color [color: ('error', 500)] - The border and fill colors in invalid state.
+/// @prop {Map} error-color-hover [color: ('error', 500)] - The border and fill colors in invalid state on hover.
+/// @prop {Number} border-radius [2px] - The border radius used for checkbox. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {Number} border-radius-ripple [24px] - The border radius used for checkbox ripple. Can be a fraction between 0 and 1, pixels, or percent.
+$light-checkbox: extend(
+    (
+        tick-color: (
+            color: (
+                'gray',
+                50,
+            ),
+        ),
+        tick-color-hover: (
+            color: (
+                'gray',
+                50,
+            ),
+        ),
+        label-color: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
+        empty-color: (
+            color: (
+                'gray',
+                600,
+            ),
+        ),
+        fill-color: (
+            color: (
+                'secondary',
+                500,
+            ),
+        ),
+        fill-color-hover: (
+            color: (
+                'secondary',
+                500,
+            ),
+        ),
+        disabled-color: (
+            color: (
+                'gray',
+                400,
+            ),
+        ),
+        disabled-indeterminate-color: (
+            color: (
+                'secondary',
+                100,
+            ),
+        ),
+        disabled-color-label: (
+            color: (
+                'gray',
+                500,
+            ),
+        ),
+        error-color: (
+            color: (
+                'error',
+                500,
+            ),
+        ),
+        error-color-hover: (
+            color: (
+                'error',
+                500,
+            ),
+        ),
+        border-radius: rem(2px),
+        border-radius-ripple: rem(24px),
+    )
+);
+
+/// Generates a fluent checkbox schema.
+/// @type {Map}
+/// @prop {Map} tick-color-hover [color: ('gray', 700)] - The checked mark color on hover when the control in unchecked.
+/// @prop {Map} empty-color [color: ('gray', 900)] - The unchecked border color.
+/// @prop {Map} fill-color [color: ('primary', 500)] - The checked border and fill colors.
+/// @prop {Map} fill-color-hover [color: ('primary', 900)] - The checked border and fill colors on hover.
+/// @prop {Map} disabled-color [color: ('gray', 400)] - The disabled border and fill colors.
+/// @prop {Map} focus-outline-color [color: ('gray', 800)] - The focus outlined color.
+/// @prop {Map} error-color-hover [color: ('error', 900)] - The border and fill colors in invalid state on hover.
+/// @prop {Number} border-radius [2px] - The border radius used for checkbox. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {Number} border-radius-ripple [2px] - The border radius used for checkbox ripple. Can be a fraction between 0 and 1, pixels, or percent.
+/// @requires {Map} $light-checkbox
+$fluent-checkbox: extend(
+    $light-checkbox,
+    (
+        tick-color-hover: (
+            color: (
+                'gray',
+                700,
+            ),
+        ),
+        focus-outline-color: (
+            color: (
+                'gray',
+                800,
+            ),
+        ),
+        empty-color: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
+        fill-color: (
+            color: (
+                'primary',
+                500,
+            ),
+        ),
+        fill-color-hover: (
+            color: (
+                'primary',
+                900,
+            ),
+        ),
+        disabled-color: (
+            color: (
+                'gray',
+                400,
+            ),
+        ),
+        error-color-hover: (
+            color: (
+                'error',
+                900,
+            ),
+        ),
+        border-radius: rem(2px),
+        border-radius-ripple: rem(2px),
+    )
+);
+
+/// Generates a bootstrap checkbox schema.
+/// @type {Map}
+/// @prop {Map} fill-color [color: ('primary', 500)] - The checked border and fill colors.
+/// @prop {Map} empty-color [color: ('gray', 500)] - The unchecked border color.
+/// @prop {Map} disabled-color [color: ('primary', 200)] - The disabled border and fill colors.
+/// @prop {Map} disabled-color-label [color: ('gray', 400)] - The disabled color of the label.
+/// @prop {Map} focus-outline-color [color: ('primary', 200)] - The focus outlined color.
+/// @prop {Map} error-color-hover [color: ('error', 100)] - The focus outlined color in invalid state.
+/// @prop {Number} border-radius [4px] - The border radius used for checkbox. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {Number} border-radius-ripple [4px] - The border radius used for checkbox ripple. Can be a fraction between 0 and 1, pixels, or percent.
+/// @requires {Map} $light-checkbox
+$bootstrap-checkbox: extend(
+    $light-checkbox,
+    (
+        focus-outline-color: (
+            color: (
+                'primary',
+                200,
+            ),
+        ),
+        fill-color: (
+            color: (
+                'primary',
+                500,
+            ),
+        ),
+        empty-color: (
+            color: (
+                'gray',
+                500,
+            ),
+        ),
+        disabled-color: (
+            color: (
+                'primary',
+                200,
+            ),
+        ),
+        disabled-color-label: (
+            color: (
+                'gray',
+                400,
+            ),
+        ),
+        error-color-hover: (
+            color: (
+                'error',
+                100,
+            ),
+        ),
+        border-radius: rem(4px),
+        border-radius-ripple: rem(4px),
+    )
+);
+
+/// Generates an indigo checkbox schema.
+/// @type {Map}
+/// @prop {Color} tick-color [color: 'surface'] - The checked mark color.
+/// @prop {Color} tick-color-hover [color: 'surface'] - The checked mark color on hover.
+/// @prop {Map} fill-color [color: ('primary', 500)] - The checked border and fill colors.
+/// @prop {Map} empty-color [color: ('gray', 500)] - The unchecked border color.
+/// @prop {Map} disabled-color [color: ('gray', 300)] - The disabled border and fill colors.
+/// @prop {Map} disabled-color-label [color: ('gray', 300)] - The disabled label color.
+/// @prop {Map} focus-outline-color [color: ('gray', 300)] - The focus outlined color.
+/// @prop {Map} focus-outline-color-focused [color: ('primary', 200)] - The focus outlined color for focused state.
+/// @prop {Map} error-color-hover [color: ('error', 200)] - The focus outlined color in invalid state.
+/// @prop {Number} border-radius [3px] - The border radius used for checkbox. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {Number} border-radius-ripple [3px] - The border radius used for checkbox ripple. Can be a fraction between 0 and 1, pixels, or percent.
+/// @requires {Map} $light-checkbox
+$indigo-checkbox: extend(
+    $light-checkbox,
+    (
+        focus-outline-color: (
+            color: (
+                'gray',
+                300,
+            ),
+        ),
+        focus-outline-color-focused: (
+            color: (
+                'primary',
+                200,
+            ),
+        ),
+        tick-color: (
+            color: 'surface',
+        ),
+        tick-color-hover: (
+            color: 'surface',
+        ),
+        fill-color: (
+            color: (
+                'primary',
+                500,
+            ),
+        ),
+        empty-color: (
+            color: (
+                'gray',
+                500,
+            ),
+        ),
+        disabled-color: (
+            color: (
+                'gray',
+                300,
+            ),
+        ),
+        disabled-color-label: (
+            color: (
+                'gray',
+                300,
+            ),
+        ),
+        error-color-hover: (
+            color: (
+                'error',
+                200,
+            ),
+        ),
+        border-radius: rem(3px),
+        border-radius-ripple: rem(3px),
+    )
+);

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

@@ -0,0 +1,317 @@
+@use '../../../../utils/map' as *;
+@use '../../../../typography/functions' as *;
+
+////
+/// @package theming
+/// @group schemas
+/// @access public
+////
+
+/* stylelint-disable max-line-length */
+
+/// Generates a light combo schema.
+/// @type {Map}
+/// @prop {Map} empty-list-background [color: 'surface'] - The combo list background color.
+/// @prop {Map} search-separator-border-color [color: ('gray', 500)] - The combo search box separator color.
+/// @prop {Map} empty-list-placeholder-color [color: ('gray', 700)] - The combo placeholder text color.
+/// @prop {Map} toggle-button-background [color: ('gray', 300)] - The combo toggle button background color.
+/// @prop {Map} toggle-button-background-focus [color: ('gray', 400, .3)] - The combo toggle button background color when the combo is focused.
+/// @prop {Map} toggle-button-foreground [color: ('gray', 700)] - The combo toggle button foreground color.
+/// @prop {Map} toggle-button-foreground-focus [color: ('gray', 700)] - The combo toggle button foreground color when the combo is focused.
+/// @prop {Map} toggle-button-foreground-filled [color: ('gray', 900)] - The combo toggle button foreground color when the combo is focused.
+/// @prop {Map} toggle-button-background-disabled [color: ('gray', 300)] - The combo toggle button background color when the combo is disabled.
+/// @prop {Map} toggle-button-foreground-disabled [color: ('gray', 700)] - The combo toggle button foreground color when the combo is disabled.
+/// @prop {Color} clear-button-background [transparent] - The combo clear button background color.
+/// @prop {Color} clear-button-background-focus [transparent] - The combo clear button background color when the combo is focused.
+/// @prop {Map} clear-button-foreground [contrast-color: ('gray', 100)] - The combo toggle clear foreground color.
+/// @prop {Map} clear-button-foreground-focus [contrast-color: ('gray', 100)] - The combo clear button foreground color when the combo is focused.
+/// @prop {Map} case-icon-color [color: ('gray', 400)] - The case sensitive icon color in inactive state for combo search input
+/// @prop {Map} case-icon-color--active [color: ('primary', 500)] - The case sensitive icon color in active state for combo search input
+$light-combo: (
+    case-icon-color: (
+        color: (
+            'gray',
+            400,
+        ),
+    ),
+    case-icon-color--active: (
+        color: (
+            'primary',
+            500,
+        ),
+    ),
+    empty-list-background: (
+        color: 'surface',
+    ),
+    search-separator-border-color: (
+        color: (
+            'gray',
+            500,
+        ),
+    ),
+    empty-list-placeholder-color: (
+        color: (
+            'gray',
+            700,
+        ),
+    ),
+    toggle-button-background: (
+        color: (
+            'gray',
+            300,
+        ),
+    ),
+    toggle-button-background-focus: (
+        color: (
+            'gray',
+            400,
+            0.3,
+        ),
+    ),
+    toggle-button-foreground: (
+        color: (
+            'gray',
+            700,
+        ),
+    ),
+    toggle-button-foreground-focus: (
+        color: (
+            'gray',
+            700,
+        ),
+    ),
+    toggle-button-foreground-filled: (
+        color: (
+            'gray',
+            900,
+        ),
+    ),
+    clear-button-background: transparent,
+    clear-button-background-focus: transparent,
+    clear-button-foreground: (
+        contrast-color: (
+            'gray',
+            100,
+        ),
+    ),
+    clear-button-foreground-focus: (
+        contrast-color: (
+            'gray',
+            100,
+        ),
+    ),
+    toggle-button-background-disabled: (
+        color: (
+            'gray',
+            300,
+        ),
+    ),
+    toggle-button-foreground-disabled: (
+        color: (
+            'gray',
+            500,
+        ),
+    ),
+);
+
+/// Generates a fluent combo schema.
+/// @type {Map}
+/// @prop {Map} toggle-button-background [color: ('gray', 100)] - The combo toggle button background color.
+/// @prop {Map} toggle-button-background-focus [color: ('gray', 100)] - The combo toggle button background color when the combo is focused.
+/// @prop {Color} clear-button-background [color: ('gray', 100)] - The combo clear button background color.
+/// @prop {Color} clear-button-background-focus [color: ('gray', 100)] - The combo clear button background color when the combo is focused.
+/// @prop {Map} toggle-button-foreground-filled [color: ('gray', 700)] - The combo toggle button foreground color when the combo is focused.
+/// @prop {Map} toggle-button-background-disabled [color: ('gray', 100)] - The combo toggle button background color when the combo is disabled.
+/// @prop {Map} toggle-button-foreground-disabled [color: ('gray', 400)] - The combo toggle button foreground color when the combo is disabled.
+/// @requires {Map} $light-combo
+$fluent-combo: extend(
+    $light-combo,
+    (
+        toggle-button-background: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+        toggle-button-background-focus: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+        toggle-button-foreground-filled: (
+            color: (
+                'gray',
+                700,
+            ),
+        ),
+        clear-button-background: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+        clear-button-background-focus: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+        toggle-button-background-disabled: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+        toggle-button-foreground-disabled: (
+            color: (
+                'gray',
+                400,
+            ),
+        ),
+    )
+);
+
+/// Generates a bootstrap combo schema.
+/// @type {Map}
+/// @prop {Map} toggle-button-foreground [color: ('gray', 800)] - The combo toggle button foreground color.
+/// @prop {Map} toggle-button-foreground-filled [color: ('gray', 800)] - The combo toggle button foreground color when the combo is focused.
+/// @prop {Map} empty-list-background [color: ('surface')] - The combo list background color.
+/// @prop {Map} search-separator-border-color [color: ('gray', 400)] - The combo search box separator color.
+/// @prop {Map} empty-list-placeholder-color [color: ('gray', 600)] - The combo placeholder text color.
+/// @prop {Map} clear-button-background [color: ('gray', 300)] - The combo clear button background color.
+/// @prop {Map} clear-button-background-focus [color: ('gray', 300)] - The combo clear button background color when the combo is focused.
+/// @prop {Map} clear-button-foreground [color: ('gray', 800)] - The combo toggle clear foreground color.
+/// @prop {Map} clear-button-foreground-focus [color: ('gray', 800)] - The combo clear button foreground color when the combo is focused.
+/// @prop {Map} toggle-button-background-disabled [color: ('gray', 300)] - The combo toggle button background color when the combo is disabled.
+/// @prop {Map} toggle-button-foreground-disabled [color: ('gray', 400)] - The combo toggle button foreground color when the combo is disabled.
+/// @prop {Map} toggle-button-background-focus [color: ('gray', 300)] - The combo toggle button background color when the combo is focused.
+/// @requires {Map} $light-combo
+$bootstrap-combo: extend(
+    $light-combo,
+    (
+        empty-list-background: (
+            color: (
+                'surface',
+            ),
+        ),
+        search-separator-border-color: (
+            color: (
+                'gray',
+                400,
+            ),
+        ),
+        empty-list-placeholder-color: (
+            color: (
+                'gray',
+                600,
+            ),
+        ),
+        clear-button-foreground: (
+            color: (
+                'gray',
+                800,
+            ),
+        ),
+        clear-button-foreground-focus: (
+            color: (
+                'gray',
+                800,
+            ),
+        ),
+        clear-button-background: (
+            color: (
+                'gray',
+                300,
+            ),
+        ),
+        clear-button-background-focus: (
+            color: (
+                'gray',
+                300,
+            ),
+        ),
+        toggle-button-foreground: (
+            color: (
+                'gray',
+                800,
+            ),
+        ),
+        toggle-button-foreground--focus: (
+            color: (
+                'gray',
+                800,
+            ),
+        ),
+        toggle-button-foreground-filled: (
+            color: (
+                'gray',
+                800,
+            ),
+        ),
+        toggle-button-background-focus: (
+            color: (
+                'gray',
+                300,
+            ),
+        ),
+        toggle-button-background-disabled: (
+            color: (
+                'gray',
+                300,
+            ),
+        ),
+        toggle-button-foreground-disabled: (
+            color: (
+                'gray',
+                400,
+            ),
+        ),
+    )
+);
+
+/// Generates an indigo combo schema.
+/// @type {Map}
+/// @prop {Color} clear-button-background-focus [transparent] - The combo clear button background color when the combo is focused.
+/// @prop {Map} clear-button-foreground [color: ('gray', 600)] - The combo toggle clear foreground color.
+/// @prop {Map} clear-button-foreground-focus [color: ('gray', 600)] - The combo clear button foreground color when the combo is focused.
+/// @prop {Map} toggle-button-background-disabled [color: ('gray', 100)] - The combo toggle button background color when the combo is disabled.
+/// @prop {Map} toggle-button-foreground-disabled [color: ('gray', 300)] - The combo toggle button foreground color when the combo is disabled.
+/// @prop {Map} toggle-button-background-focus [color: ('gray', 300)] - The combo toggle button background color when the combo is focused.
+/// @requires {Map} $light-combo
+$indigo-combo: extend(
+    $light-combo,
+    (
+        clear-button-background-focus: transparent,
+        clear-button-foreground: (
+            color: (
+                'gray',
+                600,
+            ),
+        ),
+        toggle-button-background-focus: (
+            color: (
+                'gray',
+                300,
+            ),
+        ),
+        clear-button-foreground-focus: (
+            color: (
+                'gray',
+                600,
+            ),
+        ),
+        toggle-button-background-disabled: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+        toggle-button-foreground-disabled: (
+            color: (
+                'gray',
+                300,
+            ),
+        ),
+    )
+);