Skip to content

Commit

Permalink
refactor(schemas): light input group and index file
Browse files Browse the repository at this point in the history
  • Loading branch information
@SisIvanova
SisIvanova committed Jan 9, 2024
1 parent 500ebaf commit bca127f
Show file tree
Hide file tree
Showing 2 changed files with 60 additions and 141 deletions.
52 changes: 26 additions & 26 deletions sass/themes/schemas/components/light/_index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,33 +89,33 @@ $light-material-schema: (
highlight: $material-highlight,
icon: $material-icon,
icon-button: $material-icon-button,
input-group: $light-input-group,
input-group: $material-input-group,
label: $material-label,
list: $light-list,
navbar: $light-navbar,
nav-drawer: $light-navdrawer,
overlay: $light-overlay,
paginator: $light-pagination,
pivot-data-selector: $light-pivot-data-selector,
linear-bar: $light-progress-linear,
circular-bar: $light-progress-circular,
query-builder: $light-query-builder,
radio: $light-radio,
rating: $light-rating,
ripple: $light-ripple,
scrollbar: $light-scrollbar,
select: $light-select,
slider: $light-slider,
snackbar: $light-snackbar,
splitter: $light-splitter,
stepper: $light-stepper,
switch: $light-switch,
tabs: $light-tabs,
time-picker: $light-time-picker,
toast: $light-toast,
tooltip: $light-tooltip,
tree: $light-tree,
watermark: $light-watermark,
list: $material-list,
navbar: $material-navbar,
nav-drawer: $material-navdrawer,
overlay: $material-overlay,
paginator: $material-pagination,
pivot-data-selector: $material-pivot-data-selector,
linear-bar: $material-progress-linear,
circular-bar: $material-progress-circular,
query-builder: $material-query-builder,
radio: $material-radio,
rating: $material-rating,
ripple: $material-ripple,
scrollbar: $material-scrollbar,
select: $material-select,
slider: $material-slider,
snackbar: $material-snackbar,
splitter: $material-splitter,
stepper: $material-stepper,
switch: $material-switch,
tabs: $material-tabs,
time-picker: $material-time-picker,
toast: $material-toast,
tooltip: $material-tooltip,
tree: $material-tree,
watermark: $material-watermark,
_meta: (
theme: 'material',
variant: 'light',
Expand Down
149 changes: 34 additions & 115 deletions sass/themes/schemas/components/light/_input-group.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@

/* stylelint-disable max-line-length */

/// Generates a light input-group schema.
/// Generates a base light input-group schema.
/// @type {Map}
/// @prop {Map} input-prefix-color [color: ('gray', 700)] - The text color of an input prefix of type line, box and border.
/// @prop {Color} input-prefix-background [transparent] - The background color of an input prefix of type line, box and border.
Expand All @@ -29,10 +29,10 @@
/// @prop {Map} focused-bottom-line-color [color: ('primary', 500)] - The bottom line and border colors in the focused state.
/// @prop {Map} interim-bottom-line-color [color: ('primary', 500, .12)] - The bottom line and border colors during the to-focused transition.
/// @prop {Map} disabled-bottom-line-color [color: ('gray', 500)] - The bottom line and border colors in the disabled state.
/// @prop {Map} border-color [color: ('gray', 600)] - The border color for input groups of type border and fluent.
/// @prop {Map} border-color [color: ('gray', 400)] - The border color for input groups of type border and fluent.
/// @prop {Map} hover-border-color [color: ('gray', 900)] - The hover input border for input groups of type border and fluent.
/// @prop {Map} focused-border-color [color: ('primary', 500)] - The focused input border color for input groups of type border and fluent.
/// @prop {Map} disabled-border-color [color: ('gray', 400)] - The disabled border color for input groups of type border and fluent.
/// @prop {Map} disabled-border-color [color: ('gray', 300)] - The disabled border color for input groups of type border and fluent.
/// @prop {Map} box-background [color: ('gray', 100)] - The background color of an input group of type box.
/// @prop {Map} box-background-hover [color: ('gray', 200)] - The background color of an input group of type box on hover.
/// @prop {Map} box-background-focus [color: ('gray', 200)] - The background color of an input group of type box on focus.
Expand Down Expand Up @@ -196,13 +196,13 @@ $light-input-group: extend(
disabled-border-color: (
color: (
'gray',
500,
300,
),
),
border-color: (
color: (
'gray',
600,
400,
),
),
hover-border-color: (
Expand Down Expand Up @@ -328,30 +328,48 @@ $light-input-group: extend(
)
);

/// Generates a material input-group schema.
/// @type {Map}
/// @prop {Map} border-color [color: ('gray', 600)] - The border color for input groups of type border and fluent.
/// @prop {Map} disabled-border-color [color: ('gray', 500)] - The disabled border color for input groups of type border and fluent.
/// @requires {Map} $light-input-group
$material-input-group: extend(
$light-input-group,
(
border-color: (
color: (
'gray',
600,
),
),
disabled-border-color: (
color: (
'gray',
500,
),
),
)
);

/// Generates a fluent input-group schema.
/// @type {Map}
/// @prop {Map} idle-secondary-color [color: ('gray', 900)] - The label color in the idle state.
/// @prop {Map} idle-text-color [color: ('gray', 900)] - The input text color in the idle state.
/// @prop {Map} disabled-text-color [color: ('gray', 500)] - The input text color in the disabled state.
/// @prop {Map} border-color [color: ('gray', 500)] - The border color for input groups of type border and fluent.
/// @prop {Map} hover-border-color [color: ('gray', 700)] - The hover input border for input groups of type border and fluent.
/// @prop {Map} disabled-border-color [color: ('gray', 100)] - The disabled border color for input groups of type border and fluent.
/// @prop {Map} focused-border-color [color: ('primary', 500)] - The focused input border color for input groups of type border and fluent.
/// @prop {Map} border-disabled-background [color: ('gray', 100)] - The background color of an input group of type border in the disabled state.
/// @prop {Map} search-disabled-background [color: ('gray', 100)] - The background color of an input group of type search in the disabled state.
/// @prop {Number} search-resting-elevation [0] - The elevation level, between 0-24, to be used for the resting state of the search input.
/// @prop {Number} search-hover-elevation [0] - The elevation level, between 0-24, to be used for the hover state of the search input.
/// @prop {Number} search-disabled-elevation [0] - The elevation level, between 0-24, to be used for the disabled state of the search input.
/// @prop {List} box-border-radius [(rem(2px), rem(0), rem(20px))] - The border radius used for box input.
/// @prop {List} border-border-radius [(rem(2px), rem(0), rem(20px))] - The border radius used for border input.
/// @prop {List} search-border-radius [(rem(2px), rem(0), rem(20px))] - The border radius used for search input.
/// @prop {Map} input-prefix-color [color: ('gray', 700)] - The text color of an input prefix of type line, box and border.
/// @prop {Map} input-prefix-color--filled [color: ('gray', 700)] - The input prefix color in the filled state.
/// @prop {Map} input-prefix-color--focused [color: ('gray', 700)] - The input prefix color in the focused state.
/// @prop {Map} input-prefix-background [color: ('gray', 100)] - The background color of an input prefix of type line, box, border and fluent.
/// @prop {Map} input-prefix-background--filled [color: ('gray', 100)] - The background color of an input prefix in the filled state.
/// @prop {Map} input-prefix-background--focused [color: ('gray', 100)] - The background color of an input prefix in the focused state.
/// @prop {Map} input-suffix-color [color: ('gray', 700)] - The text color of an input suffix of type line, box and border.
/// @prop {Map} input-suffix-color--filled [color: ('gray', 700)] - The input suffix color in the filled state.
/// @prop {Map} input-suffix-color--focused [color: ('gray', 700)] - The input suffix color in the focused state.
/// @prop {Map} input-suffix-background [color: ('gray', 100)] - The background color of an input suffix of type line, box and border.
Expand All @@ -376,12 +394,6 @@ $fluent-input-group: extend(
900,
),
),
disabled-text-color: (
color: (
'gray',
500,
),
),
border-color: (
color: (
'gray',
Expand All @@ -394,12 +406,6 @@ $fluent-input-group: extend(
700,
),
),
focused-border-color: (
color: (
'primary',
500,
),
),
disabled-border-color: (
color: (
'gray',
Expand All @@ -412,18 +418,6 @@ $fluent-input-group: extend(
100,
),
),
search-disabled-background: (
color: (
'gray',
100,
),
),
input-prefix-color: (
color: (
'gray',
700,
),
),
input-prefix-color--filled: (
color: (
'gray',
Expand Down Expand Up @@ -454,12 +448,6 @@ $fluent-input-group: extend(
100,
),
),
input-suffix-color: (
color: (
'gray',
700,
),
),
input-suffix-color--filled: (
color: (
'gray',
Expand Down Expand Up @@ -524,13 +512,7 @@ $fluent-input-group: extend(
/// Generates a bootstrap input-group schema.
/// @type {Map}
/// @prop {Map} border-disabled-background [color: ('gray', 100)] - The background color of an input group of type border in the disabled state.
/// @prop {Map} border-color [color: ('gray', 400)] - The border color for input groups of type border and fluent.
/// @prop {Map} idle-secondary-color [color: ('gray', 700)] - The label color in the idle state.
/// @prop {Map} disabled-border-color [color: ('gray', 300)] - The disabled border color for input groups of type border and fluent.
/// @prop {Map} focused-secondary-color [color: ('primary', 500, .38)] - The label color in the focused state.
/// @prop {Map} success-secondary-color [color: ('success', 500)] - The success color used in the valid state.
/// @prop {Map} warning-secondary-color [color: ('warn', 500)] - The warning color used in the warning state.
/// @prop {Map} error-secondary-color [color: ('error')] - The error color used in the error state.
/// @prop {Map} disabled-text-color [color: ('gray', 400)] - The input text color in the disabled state.
/// @prop {Map} interim-bottom-line-color [color: ('primary', 500)] - The bottom line and border colors during the to-focused transition.
/// @prop {Map} disabled-placeholder-color [color: ('gray', 400)] - The disabled placeholder color of an input group.
Expand Down Expand Up @@ -570,36 +552,6 @@ $bootstrap-input-group: extend(
0.38,
),
),
success-secondary-color: (
color: (
'success',
500,
),
),
warning-secondary-color: (
color: (
'warn',
500,
),
),
error-secondary-color: (
color: (
'error',
500,
),
),
border-color: (
color: (
'gray',
400,
),
),
idle-secondary-color: (
color: (
'gray',
700,
),
),
input-prefix-color: (
color: (
'gray',
Expand Down Expand Up @@ -654,18 +606,6 @@ $bootstrap-input-group: extend(
400,
),
),
disabled-border-color: (
color: (
'gray',
300,
),
),
box-disabled-background: (
color: (
'gray',
100,
),
),
disabled-placeholder-color: (
color: (
'gray',
Expand All @@ -687,14 +627,11 @@ $bootstrap-input-group: extend(
/// @prop {Map} input-prefix-color [color: ('gray', 600)] - The text color of an input prefix of type line, box and border.
/// @prop {Map} input-suffix-color [color: ('gray', 600)] - The text color of an input suffix of type line, box and border.
/// @prop {Map} helper-text-color [color: ('gray', 600)] - The helper text color.
/// @prop {Map} border-color [color: ('gray', 400)] - The border color for input groups of type border and fluent.
/// @prop {Color} box-background [transparent] - The background color of an input group of type box.
/// @prop {Map} box-background-hover [color: ('gray', 100)] - The background color of an input group of type box on hover.
/// @prop {Map} disabled-border-color [color: ('gray', 300)] - The disabled border color for input groups of type border and fluent.
/// @prop {Map} disabled-bottom-line-color [color: ('gray', 300)] - The bottom line and border colors in the disabled state.
/// @prop {Color} box-disabled-background [transparent] - The background color of an input group in the disabled state.
/// @prop {Map} disabled-text-color [color: ('gray', 300)] - The input text color in the disabled state.
/// @prop {Map} idle-bottom-line-color [color: ('gray', 500)] - The bottom line and border colors in the idle state.
/// @prop {Map} focused-bottom-line-color [color: ('secondary', 500)] - The bottom line and border colors in the focused state.
/// @prop {Map} focused-border-color [color: ('primary', 400)] - The focused input border color for input groups of type border and fluent.
/// @prop {Map} hover-border-color [color: ('gray', 600)] - The hover input border for input groups of type border and fluent.
Expand Down Expand Up @@ -760,12 +697,6 @@ $indigo-input-group: extend(
600,
),
),
border-color: (
color: (
'gray',
400,
),
),
hover-border-color: (
color: (
'gray',
Expand All @@ -778,18 +709,6 @@ $indigo-input-group: extend(
400,
),
),
disabled-border-color: (
color: (
'gray',
300,
),
),
idle-bottom-line-color: (
color: (
'gray',
500,
),
),
focused-bottom-line-color: (
color: (
'secondary',
Expand Down Expand Up @@ -822,6 +741,12 @@ $indigo-input-group: extend(
600,
),
),
idle-secondary-color: (
color: (
'gray',
900,
),
),
disabled-text-color: (
color: (
'gray',
Expand Down Expand Up @@ -861,11 +786,5 @@ $indigo-input-group: extend(
rem(20px),
),
),
idle-secondary-color: (
color: (
'gray',
900,
),
),
)
);

0 comments on commit bca127f

Please sign in to comment.