igniteui-theming 1.4.2 → 1.4.3-beta.1

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

@@ -0,0 +1,229 @@
+@use '../../../../utils/map' as *;
+@use '../../../../typography/functions' as *;
+
+////
+/// @package theming
+/// @group schemas
+/// @access public
+////
+
+/* stylelint-disable max-line-length */
+
+/// Generates a light slider schema.
+/// @type {Map}
+/// @prop {Map} track-color [color: ('secondary', 500)] - The color of the track.
+/// @prop {Color} track-step-color [color: ('secondary', 200)] - The color of the track steps.
+/// @prop {Number} track-step-size [rem(3px)] - The size of the track steps.
+/// @prop {Map} track-hover-color [color: ('secondary', 400)] - The color of the track on hover.
+/// @prop {Map} thumb-color [color: ('secondary', 500)] - The color of the thumb.
+/// @prop {Color} thumb-focus-color [transparent] - The focus outline color of the thumb.
+/// @prop {Map} thumb-border-color [color: ('secondary', 500)] - The thumb border color.
+/// @prop {Map} thumb-border-focus-color [color: ('secondary', 500)] - The thumb border color when focused.
+/// @prop {Map} thumb-disabled-border-color [color: ('gray', 400)] - The thumb border color when it's disabled.
+/// @prop {Map} disabled-thumb-color [color: ('gray', 400)] - The thumb color when its disabled.
+/// @prop {Map} label-background-color [color: ('gray', 700)] - The background color of the bubble label.
+/// @prop {Map} label-text-color [contrast-color: ('gray', 700)] - The text color of the bubble label.
+/// @prop {Map} base-track-color [color: ('secondary', 500, .24)] - The base background color of the track.
+/// @prop {Map} base-track-hover-color [color: ('secondary', 500, .24)] - The base background color of the track on hover.
+/// @prop {Map} disabled-base-track-color [color: ('gray', 200)] - The base background color of the track when is disabled.
+/// @prop {Map} disabled-fill-track-color [color: ('gray', 400)] - The background color of the fill track when is disabled.
+/// @prop {Map} tick-label-color [color: ('gray', 500)] - The color of the tick label.
+/// @prop {Map} tick-color [color: ('gray', 500)] - The background-color of the tick.
+$light-slider: (
+    variant: 'material',
+    track-color: (
+        color: ('secondary', 500)
+    ),
+    track-step-color: (
+        color: ('secondary', 200)
+    ),
+    track-step-size: rem(3px),
+    track-hover-color: (
+        color: ('secondary', 400)
+    ),
+    thumb-color: (
+        color: ('secondary', 500)
+    ),
+    thumb-focus-color: transparent,
+    thumb-border-color: (
+        color: ('secondary', 500)
+    ),
+    thumb-border-focus-color: (
+        color: ('secondary', 500)
+    ),
+    thumb-disabled-border-color: (
+        color: ('gray', 400)
+    ),
+    disabled-thumb-color: (
+        color: ('gray', 400),
+    ),
+    label-background-color: (
+        color: ('gray', 700),
+    ),
+    label-text-color: (
+        contrast-color: ('gray', 700)
+    ),
+    base-track-color: (
+        color: ('secondary', 500, .24),
+    ),
+    base-track-hover-color:  (
+        color: ('secondary', 500, .24),
+    ),
+    disabled-base-track-color: (
+        color: ('gray', 200)
+    ),
+    disabled-fill-track-color: (
+        color: ('gray', 400)
+    ),
+    tick-color:  (
+        color: ('gray', 500)
+    ),
+    tick-label-color:  (
+        color: ('gray', 500)
+    )
+);
+
+/// Generates a fluent slider schema.
+/// @type {Map}
+/// @prop {Map} track-color [color: ('gray', 800)] - The color of the track.
+/// @prop {Color} track-step-color [white] - The color of the track steps.
+/// @prop {Map} track-hover-color [color: ('primary', 500)] - The color of the track on hover.
+/// @prop {Map} thumb-color [color: ('surface', 500)] - The color of the thumb.
+/// @prop {Map} thumb-border-color [color: ('gray', 700)] - The thumb border color.
+/// @prop {Map} thumb-border-focus-color [color: ('gray', 700)] - The thumb border color when focused.
+/// @prop {Map} thumb-focus-color [color: ('primary', 700)] - The focus outline color of the thumb.
+/// @prop {Map} thumb-disabled-border-color [color: ('gray', 400)] - The thumb border color when it's disabled.
+/// @prop {Map} disabled-thumb-color [color: ('surface', 500)] - The thumb color when its disabled.
+/// @prop {Map} label-background-color [color: ('primary', 500)] - The background color of the bubble label.
+/// @prop {Map} base-track-color [color: ('gray', 600)] - The base background color of the track.
+/// @prop {Map} base-track-hover-color [color: ('gray', 600)] - The base background color of the track on hover.
+/// @prop {Map} disabled-base-track-color [color: ('gray', 100)] - The base background color of the track when is disabled.
+/// @prop {Map} disabled-fill-track-color [color: ('gray', 500)] - The background color of the fill track when is disabled.
+///
+/// @requires {Map} $light-slider
+$fluent-slider: extend(
+    $light-slider,
+    (
+        variant: 'fluent',
+        track-color: (
+            color: ('gray', 800),
+        ),
+        track-step-color: white,
+        track-hover-color: (
+            color: ('primary', 500)
+        ),
+        thumb-color: (
+            color: ('surface', 500)
+        ),
+        thumb-border-color: (
+            color: ('gray', 700)
+        ),
+        thumb-border-focus-color: (
+            color: ('gray', 700)
+        ),
+        thumb-focus-color: (
+            color: ('primary', 700)
+        ),
+        thumb-disabled-border-color: (
+            color: ('gray', 400),
+        ),
+        disabled-thumb-color: (
+            color: ('surface', 500),
+        ),
+        base-track-color: (
+            color: ('gray', 600),
+        ),
+        base-track-hover-color:  (
+            color: ('gray', 600)
+        ),
+        disabled-base-track-color: (
+            color: ('gray', 100)
+        ),
+        disabled-fill-track-color: (
+            color: ('gray', 500)
+        ),
+        label-background-color: (
+            color: ('primary', 500),
+        ),
+    )
+);
+
+/// Generates a bootstrap slider schema.
+/// @type {Map}
+/// @prop {Map} base-track-color [color: ('secondary', 500, .24)] - The base background color of the track.
+/// @prop {Map} base-track-hover-color [color: ('secondary', 500, .24)] - The base background color of the track on hover.
+/// @prop {Map} thumb-color [color: ('primary', 500)] - The color of the thumb.
+/// @prop {Map} thumb-border-color [color: ('primary', 500)] - The thumb border color.
+/// @prop {Map} thumb-border-focus-color [color: ('surface', 500)] - The thumb border color when focused.
+/// @prop {Map} thumb-focus-color [color: ('primary', 200)] - The focus outline color of the thumb.
+/// @prop {Map} disabled-thumb-color [color: ('gray', 400)] - The thumb color when its disabled.
+///
+/// @requires {Map} $light-slider
+$bootstrap-slider: extend(
+    $fluent-slider,
+    (
+        variant: 'bootstrap',
+        base-track-color: (
+            color: ('secondary', 500, .24)
+        ),
+        base-track-hover-color:  (
+            color: ('secondary', 500, .24)
+        ),
+        thumb-color: (
+            color: ('primary', 500)
+        ),
+        thumb-border-color: (
+            color: ('primary', 500)
+        ),
+        thumb-border-focus-color: (
+            color: ('surface', 500)
+        ),
+        thumb-focus-color: (
+            color: ('primary', 200)
+        ),
+        disabled-thumb-color: (
+            color: ('gray', 400),
+        ),
+    )
+);
+
+/// Generates an indigo slider schema.
+/// @type {Map}
+/// @prop {Color} track-step-color [white] - The color of the track steps.
+/// @prop {Map} track-hover-color [color: ('primary', 400)] - The color of the track on hover.
+/// @prop {Map} base-track-color [color: ('gray', 400)] - The base background color of the track.
+/// @prop {Map} base-track-hover-color [color: ('gray', 500)] - The base background color of the track on hover.
+/// @prop {Map} thumb-focus-color [color: ('primary', 200)] - The focus outline color of the thumb.
+/// @prop {Map} disabled-thumb-color [color: ('gray', 300)] - The thumb color when its disabled.
+/// @prop {Map} disabled-base-track-color [color: ('gray', 300)] - The base background color of the track when is disabled.
+/// @prop {Map} disabled-fill-track-color [color: ('gray', 300)] - The background color of the fill track when is disabled.
+///
+/// @requires {Map} $light-slider
+$indigo-slider: extend(
+    $light-slider,
+    (
+        variant: 'indigo-design',
+        track-step-color: white,
+        track-hover-color: (
+            color: ('primary', 400)
+        ),
+        base-track-color: (
+            color: ('gray', 400)
+        ),
+        base-track-hover-color: (
+            color: ('gray', 500)
+        ),
+        thumb-focus-color: (
+            color: ('primary', 200)
+        ),
+        disabled-thumb-color: (
+            color: ('gray', 300),
+        ),
+        disabled-base-track-color: (
+            color: ('gray', 300),
+        ),
+        disabled-fill-track-color: (
+            color: ('gray', 300)
+        ),
+    )
+);

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

@@ -0,0 +1,311 @@
+@use '../../../../utils/map' as *;
+@use '../../../../typography/functions' as *;
+@use '../elevation/switch' as *;
+
+////
+/// @package theming
+/// @group schemas
+/// @access public
+////
+
+/* stylelint-disable max-line-length */
+
+/// Generates a light switch schema.
+/// @type {Map}
+/// @prop {Map} thumb-on-color [color: ('secondary', 500)] - The color of the thumb when the switch is on.
+/// @prop {Map} track-on-color [color: ('secondary', 200)] - The color of the track when the switch is on.
+/// @prop {Map} thumb-off-color [color: ('gray', 50)] - The color of the thumb when the switch is off.
+/// @prop {Map} track-off-color [color: ('gray', 500)] - The color of the track when the switch is off.
+/// @prop {Map} thumb-disabled-color [color: ('gray', 200)] - The color of the thumb when the switch is disabled.
+/// @prop {Map} thumb-on-disabled-color [color: ('secondary', 100)] - The color of the thumb when the switch is on and disabled.
+/// @prop {Map} track-disabled-color [color: ('gray', 300)] - The color of the track when the switch is disabled.
+/// @prop {Map} track-on-disabled-color [color: ('secondary', 50)] - The color of the track when the switch is on and disabled.
+/// @prop {Map} label-color [color: ('gray', 900)] - The color of the switch label
+/// @prop {Map} label-disabled-color [color: ('gray', 500)] - The color of the switch label when the switch is disabled
+/// @prop {Number} resting-elevation [2] - The elevation level, between 0-24, to be used for the resting state.
+/// @prop {Number} hover-elevation [3] - The elevation level, between 0-24, to be used for the hover state.
+/// @prop {Number} disabled-elevation [1] - The elevation level, between 0-24, to be used for the disabled state.
+/// @prop {Number} border-radius-track [7px] - The border radius used for switch track. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {Number} border-radius-thumb [10px] - The border radius used for switch thumb. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {Number} border-radius-ripple [24px] - The border radius used for switch ripple. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {Color} border-color [transparent] - The border color of the switch.
+/// @prop {Color} border-hover-color [transparent] - The border color of the switch on hover.
+/// @prop {Color} border-disabled-color [transparent] - The border color of the disabled switch.
+/// @prop {Color} border-on-color [transparent] - The border color of the on-switch.
+/// @prop {Color} border-on-hover-color [transparent] - The border color of the  on-switch.
+/// @prop {Map} label-invalid-color [color: ('gray', 900)] - The color of the switch label in invalid state.
+/// @prop {Map} track-error-color [color: ('gray', 500)] - The color of the track in invalid state when the switch is off.
+/// @prop {Map} error-color [color: ('gray', 50)] - The color of the thumb in invalid state.
+/// @prop {Map} error-color-hover [color: ('gray', 500)] - The border color in invalid state on hover.
+/// @requires {Map} $default-elevation-switch
+$light-switch: extend(
+    $default-elevation-switch,
+    (
+        border-color: transparent,
+        border-hover-color: transparent,
+        border-disabled-color: transparent,
+        border-on-color: transparent,
+        border-on-hover-color: transparent,
+        thumb-on-color: (
+            color: ('secondary', 500)
+        ),
+        track-on-color: (
+            color: ('secondary', 200),
+        ),
+        thumb-off-color: (
+            color: ('gray', 50)
+        ),
+        track-disabled-color: (
+            color: ('gray', 300)
+        ),
+        track-on-disabled-color: (
+            color: ('secondary', 50)
+        ),
+        track-off-color: (
+            color: ('gray', 500)
+        ),
+        thumb-disabled-color: (
+            color: ('gray', 200),
+        ),
+        thumb-on-disabled-color: (
+            color: ('secondary', 100),
+        ),
+        label-color: (
+            color: ('gray', 900)
+        ),
+        label-disabled-color: (
+            color: ('gray', 500)
+        ),
+        label-invalid-color: (
+            color: ('gray', 900)
+        ),
+        track-error-color: (
+            color: ('gray', 500)
+        ),
+        error-color: (
+            color: ('gray', 50)
+        ),
+        error-color-hover: (
+            color: ('gray', 500)
+        ),
+        border-radius-track: rem(7px),
+        border-radius-thumb: rem(10px),
+        border-radius-ripple: rem(24px)
+    )
+);
+
+/// Generates a fluent switch schema.
+/// @type {Map}
+///
+/// @prop {Map} border-color [color('gray', 700)] - The border color of the switch.
+/// @prop {Map} border-hover-color [color('gray', 800)] - The border color of the switch on hover.
+/// @prop {Map} border-disabled-color [color('gray', 400)] - The border color of the disabled switch.
+/// @prop {Map} border-on-color [color('primary', 500)] - The border color of the on-switch.
+/// @prop {Map} border-on-hover-color [color('primary', 800)] - The border color of the on-switch.
+///
+/// @prop {Map} thumb-on-color [color: ('gray', 50)] - The color of the thumb when the switch is on.
+/// @prop {Map} thumb-off-color [color: ('gray', 700)] - The color of the thumb when the switch is off.
+/// @prop {Map} track-on-color [color: ('primary', 500)] - The color of the track when the switch is on.
+/// @prop {Color} track-off-color [transparent] - The color of the track when the switch is off.
+/// @prop {Map} track-on-hover-color [color: ('primary', 800)] - The color of the track when the switch is on and hovered.
+/// @prop {Map} track-on-disabled-color [color: ('gray', 400)] - The color of the track when the switch is on and disabled.
+/// @prop {Color} track-disabled-color [transparent] - The color of the track when the switch is disabled.
+/// @prop {Map} thumb-disabled-color [color: ('gray', 400)] - The color of the thumb when the switch is disabled.
+/// @prop {Map} thumb-on-disabled-color [color: ('gray', 100)] - The color of the thumb when the switch is on and disabled.
+/// @prop {Map} focus-outline-color [color: ('gray', 700)] - The focus outlined color.
+/// @prop {Map} error-color [color: ('gray', 700)] - The border and thumb color in invalid state.
+/// @prop {Map} error-color-hover [color: ('gray', 800)] - The border and thumb color in invalid state on hover.
+///
+/// @prop {Number} border-radius-track [10px] - The border radius used for switch track. Can be a fraction between 0 and 1, pixels, or percent.
+///
+///
+/// @requires {Map} $light-switch
+$fluent-switch: extend(
+    $light-switch,
+    (
+        focus-outline-color: (
+            color: ('gray', 700)
+        ),
+        border-color: (
+            color: ('gray', 700),
+        ),
+        thumb-off-color: (
+            color: ('gray', 700),
+        ),
+        track-off-color: transparent,
+        border-hover-color:(
+            color: ('gray', 800),
+        ),
+        track-on-color: (
+            color: ('primary', 500),
+        ),
+        border-on-color:(
+            color: ('primary', 500)
+        ),
+        track-on-hover-color:(
+            color: ('primary', 800)
+        ),
+        border-on-hover-color:(
+            color: ('primary', 800)
+        ),
+        thumb-on-color: (
+            color: ('gray', 50)
+        ),
+        track-on-disabled-color:(
+            color: ('gray', 400)
+        ),
+        thumb-disabled-color:(
+            color: ('gray', 400)
+        ),
+        thumb-on-disabled-color:(
+            color: ('gray', 100)
+        ),
+        border-disabled-color:(
+            color: ('gray', 400),
+        ),
+        error-color: (
+            color: ('gray', 700)
+        ),
+        error-color-hover: (
+            color: ('gray', 800)
+        ),
+        track-disabled-color: transparent,
+        border-radius-track: rem(10px),
+    )
+);
+
+/// Generates a bootstrap switch schema.
+/// @type {Map}
+/// @prop {Map} focus-outline-color [color: ('primary', 100)] - The focus outlined color.
+/// @prop {Map} focus-fill-color [color: ('primary', 200)] - The focus fill color.
+/// @prop {Map} border-color [color('gray', 400)] - The border color of the switch.
+/// @prop {Map} border-disabled-color [color: ('gray', 300)] - The border color of the disabled switch.
+/// @prop {Map} thumb-off-color [color: ('gray', 400)] - The color of the thumb when the switch is off.
+/// @prop {Map} thumb-disabled-color [color: ('gray', 300)] - The color of the thumb when the switch is disabled.
+/// @prop {Map} track-on-color [color: ('primary', 500)] - The color of the track when the switch is on.
+/// @prop {Map} track-on-disabled-color [color: ('primary', 200)] - The color of the track when the switch is on and disabled.
+/// @prop {Map} thumb-on-disabled-color [color: ('gray', 50)] - The color of the thumb when the switch is on and disabled.
+/// @prop {Color} track-disabled-color [transparent] - The color of the track when the switch is disabled.
+/// @prop {Map} error-color [color: ('gray', 400)] - The border and thumb color in invalid state.
+/// @prop {Map} error-color-hover [color: ('primary', 200)] - The border and thumb color in invalid state on hover.
+/// @prop {Number} border-radius-track [32px] - The border radius used for switch track. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {Number} border-radius-thumb [32px] - The border radius used for switch thumb. Can be a fraction between 0 and 1, pixels, or percent.
+///
+///
+/// @requires {Map} $fluent-switch
+$bootstrap-switch: extend(
+    $fluent-switch,
+    (
+        focus-outline-color: (
+            color: ('primary', 100),
+        ),
+        focus-fill-color: (
+            color: ('primary', 200),
+        ),
+        border-color: (
+            color: ('gray', 400),
+        ),
+        border-disabled-color: (
+            color: ('gray', 300),
+        ),
+        thumb-off-color: (
+            color: ('gray', 400),
+        ),
+        thumb-disabled-color: (
+            color: ('gray', 300),
+        ),
+        thumb-on-disabled-color: (
+            color: ('gray', 50)
+        ),
+        track-on-color: (
+            color: ('primary', 500),
+        ),
+        track-on-disabled-color:(
+            color: ('primary', 200)
+        ),
+        error-color: (
+            color: ('gray', 400)
+        ),
+        error-color-hover: (
+            color: ('primary', 200)
+        ),
+        border-radius-track: rem(32px),
+        border-radius-thumb: rem(32px),
+    )
+);
+
+/// Generates an indigo switch schema.
+/// @type {Map}
+///
+/// @prop {Map} thumb-on-color [color: ('gray', 50)] - The color of the thumb when the switch is on.
+/// @prop {Map} track-on-color [color: ('primary', 500)] - The color of the track when the switch is on.
+/// @prop {Map} thumb-off-color [color: ('gray', 600)] - The color of the thumb when the switch is off.
+/// @prop {Color} track-off-color [transparent] - The color of the track when the switch is off.
+/// @prop {Map} thumb-disabled-color [color: ('gray', 300)] - The color of the thumb when the switch is disabled.
+/// @prop {Color} track-disabled-color [transparent] - The color of the track when the switch is disabled.
+///
+/// @prop {Map} border-color [color: ('gray', 600)] - The border color of the switch.
+/// @prop {Map} border-hover-color [color: ('gray', 600)] - The border color of the switch on hover.
+/// @prop {Map} border-disabled-color [color: ('gray', 300)] - The border color of the disabled switch.
+/// @prop {Map} border-on-color [color: ('primary', 500)] - The border color of the on-switch.
+/// @prop {Map} border-on-hover-color [color: ('primary', 500)] - The border color of the  on-switch.
+/// @prop {Map} label-disabled-color [color: ('gray', 300)] - The color of the switch label when the switch is disabled
+/// @prop {Map} error-color [color: ('gray', 500)] - The border and thumb color in invalid state.
+/// @prop {Map} error-color-hover [color: ('gray', 300)] - The border and thumb color in invalid state on hover.
+/// @prop {Number} border-radius-track [8px] - The border radius used for switch track. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {Number} border-radius-thumb [10px] - The border radius used for switch thumb. Can be a fraction between 0 and 1, pixels, or percent.
+/// @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.
+///
+///
+/// @requires $light-switch
+$indigo-switch: extend(
+    $light-switch,
+    (
+        focus-outline-color: (
+            color: ('gray', 300)
+        ),
+        focus-outline-color-focused: (
+            color: ('primary', 200)
+        ),
+        border-color: (
+            color: ('gray', 500)
+        ),
+        border-hover-color:(
+            color: ('gray', 500)
+        ),
+        border-disabled-color:(
+            color: ('gray', 300)
+        ),
+        border-on-color:(
+            color: ('primary', 500)
+        ),
+        border-on-hover-color:(
+            color: ('primary', 500)
+        ),
+        thumb-on-color: (
+            color: ('gray', 50)
+        ),
+        thumb-off-color: (
+            color: ('gray', 600)
+        ),
+        track-on-color: (
+            color: ('primary', 500),
+        ),
+        error-color: (
+            color: ('gray', 500)
+        ),
+        error-color-hover: (
+            color: ('gray', 300)
+        ),
+        track-off-color: transparent,
+        track-disabled-color: transparent,
+        thumb-disabled-color: (
+            color: ('gray', 300)
+        ),
+        label-disabled-color: (
+            color: ('gray', 300)
+        ),
+        border-radius-track: rem(8px)
+    )
+);