Skip to content

Commit

Permalink
Merge branch 'master' into query-builder-schemas
Browse files Browse the repository at this point in the history
  • Loading branch information
@simeonoff
simeonoff authored Oct 1, 2024
2 parents a10c7aa + 4170c86 commit e8d18dd
Show file tree
Hide file tree
Showing 5 changed files with 370 additions and 76 deletions.
98 changes: 72 additions & 26 deletions sass/themes/schemas/components/dark/_chip.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,85 +24,131 @@ $dark-bootstrap-chip: $bootstrap-chip;

/// Generates a dark indigo chip schema.
/// @type {Map}
/// @prop {Map} text-color [color: ('gray', 700)] - The chip text color.
/// @prop {Map} hover-text-color [color: ('gray', 700)] - The chip text hover color.
/// @prop {Map} focus-text-color [color: ('gray', 700)] The focused chip text color.
/// @prop {Map} background [color: ('surface')] - The chip background color.
/// @prop {Map} hover-background [color: ('gray', 200] - The chip hover background color.
/// @prop {Map} focus-background [color: ('surface')] The focused chip background color.
/// @prop {Map} ghost-background [color: ('gray', 200)] - The chip ghost background color.
/// @prop {Map} border-color [color: ('gray', 400)] - The chip border color.
/// @prop {Map} hover-border-color [color: ('gray', 400)] - The chip hover border color.
/// @prop {Color} focus-border-color [color: ('gray', 400)] - The chip focus border color.
/// @prop {Map} text-color [contrast-color: ('gray', 50, .8)] - The chip text color.
/// @prop {Map} hover-text-color [contrast-color: ('gray', 50)] - The chip text hover color.
/// @prop {Map} focus-text-color [contrast-color: ('gray', 50, .8)] The focused chip text color.
///
/// @prop {Map} background [contrast-color: ('gray', 50, .05)] - The chip background color.
/// @prop {Map} hover-background [contrast-color: ('gray', 50, .1)] - The chip hover background color.
/// @prop {Map} focus-background [contrast-color: ('gray', 50, .05)] The focused chip background color.
///
/// @prop {Map} border-color [color: ('gray', 100)] - The chip border color.
/// @prop {Map} hover-border-color [color: ('gray', 200)] - The chip hover border color.
/// @prop {Map} focus-border-color [color: ('gray', 100)] - The chip focus border color.
/// @prop {Map} focus-outline-color [contrast-color: ('gray', 50, .2)] - The chip focus outline color.
///
/// @prop {Map} ghost-background [color: ('gray', 100)] - The chip ghost background color.
///
/// @prop {Map} disabled-text-color [contrast-color: ('gray', 50, .2)] - The disabled chip text color.
/// @prop {Map} disabled-background [contrast-color: ('gray', 50, .05)] - The disabled chip background color.
/// @prop {Map} disabled-border-color [ color: ('gray', 50)] - The disabled chip border color.
/// @requires $indigo-chip
$dark-indigo-chip: extend(
$indigo-chip,
(
text-color: (
color: (
contrast-color: (
'gray',
700,
50,
0.8,
),
),

hover-text-color: (
color: (
contrast-color: (
'gray',
700,
50,
),
),

focus-text-color: (
color: (
contrast-color: (
'gray',
700,
50,
0.8,
),
),

background: (
color: (
'surface',
contrast-color: (
'gray',
50,
0.05,
),
),

hover-background: (
color: (
contrast-color: (
'gray',
200,
50,
0.1,
),
),

focus-background: (
color: (
'surface',
contrast-color: (
'gray',
50,
0.05,
),
),

ghost-background: (
color: (
'gray',
200,
100,
),
),

border-color: (
color: (
'gray',
400,
100,
),
),

hover-border-color: (
color: (
'gray',
400,
200,
),
),

focus-border-color: (
color: (
'gray',
200,
100,
),
),

focus-outline-color: (
contrast-color: (
'gray',
50,
0.2,
),
),

disabled-text-color: (
contrast-color: (
'gray',
50,
0.2,
),
),

disabled-background: (
contrast-color: (
'gray',
50,
0.05,
),
),

disabled-border-color: (
color: (
'gray',
50,
),
),
)
Expand Down
115 changes: 114 additions & 1 deletion sass/themes/schemas/components/dark/_tabs.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,5 +61,118 @@ $dark-bootstrap-tabs: extend(

/// Generates a dark indigo tabs schema.
/// @type {Map}
/// @prop {Map} item-hover-background [contrast-color: ('gray', 50, .1)] - The background used for the tabs on hover.
/// @prop {Map} item-text-color [contrast-color: ('gray', 50, .8)] - The color used for the tab text color.
/// @prop {Map} item-hover-color [contrast-color: ('gray', 50)] - The text color used for the tabs on hover.
/// @prop {Map} item-active-color [contrast-color: ('gray', 50)] - The color used for the active tabs text.
/// @prop {Map} item-disabled-color [contrast-color: ('gray', 50, .2)] - The color used for the disabled tabs text.
/// @prop {Map} item-icon-color [contrast-color: ('gray', 50, .6)] - The color used for the tab icon.
/// @prop {Map} item-hover-icon-color [contrast-color: ('gray', 50, .8)] - The color used for the tab icon on hover.
/// @prop {Map} item-active-icon-color [contrast-color: ('gray', 50, .8)] - The color used for the active tab icon.
/// @prop {Map} item-disabled-icon-color [contrast-color: ('gray', 50, .2)] - The color used for the disabled tab icon.
/// @prop {Map} border-color [contrast-color: ('gray', 50, .15)] - The color used for the tab items bottom border.
/// @prop {Map} button-color [contrast-color: ('gray', 50, .8)] - The color used for the button icon/text color.
/// @prop {Map} button-hover-color [contrast-color: ('gray', 50)] - The color used for the button icon/text color on hover.
/// @prop {Map} button-disabled-color [contrast-color: ('gray', 50, .2)] - The color used for the disabled button icon/text.
/// @prop {Map} button-hover-background [contrast-color: ('gray', 50, .1)] - The color used for the button background on hover.
/// @requires $indigo-tabs
$dark-indigo-tabs: $indigo-tabs;
$dark-indigo-tabs: extend(
$indigo-tabs,
(
item-hover-background: (
contrast-color: (
'gray',
50,
0.1,
),
),
item-text-color: (
contrast-color: (
'gray',
50,
0.8,
),
),
item-hover-color: (
contrast-color: (
'gray',
50,
),
),
item-active-color: (
contrast-color: (
'gray',
50,
),
),
item-disabled-color: (
contrast-color: (
'gray',
50,
0.2,
),
),
item-icon-color: (
contrast-color: (
'gray',
50,
0.6,
),
),
item-hover-icon-color: (
contrast-color: (
'gray',
50,
0.8,
),
),
item-active-icon-color: (
contrast-color: (
'gray',
50,
0.8,
),
),
item-disabled-icon-color: (
contrast-color: (
'gray',
50,
0.2,
),
),
border-color: (
contrast-color: (
'gray',
50,
0.15,
),
),
button-color: (
contrast-color: (
'gray',
50,
0.8,
),
),
button-hover-color: (
contrast-color: (
'gray',
50,
),
),
button-disabled-color: (
contrast-color: (
'gray',
50,
0.2,
),
),
button-hover-background: (
contrast-color: (
'gray',
50,
0.1,
),
),
)
);
8 changes: 4 additions & 4 deletions sass/themes/schemas/components/elevation/_drop-down.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,15 @@
////

/// @type Map
/// @prop {Number} elevation [8] - The elevation level, between 0-24, to be used for the drop-down shadow.
/// @prop {Number} elevation [3] - The elevation level, between 0-24, to be used for the drop-down shadow.
$default-elevation-drop-down: (
elevation: 8,
elevation: 3,
);

/// @type Map
/// @prop {Number} elevation [4] - The elevation level, between 0-24, to be used for the drop-down shadow.
/// @prop {Number} elevation [3] - The elevation level, between 0-24, to be used for the drop-down shadow.
$fluent-elevation-drop-down: (
elevation: 4,
elevation: 3,
);

/// @type Map
Expand Down
Loading

0 comments on commit e8d18dd

Please sign in to comment.