igniteui-theming 1.4.2 → 1.4.3-beta.2

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

@@ -0,0 +1,473 @@
+@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),
+    )
+);