Skip to content

Commit

Permalink
Merge branch 'master' into simeonoff/1.80.x-related-updates
Browse files Browse the repository at this point in the history
  • Loading branch information
@simeonoff
simeonoff authored Nov 12, 2024
2 parents f2d182c + 1228c30 commit 72ff984
Show file tree
Hide file tree
Showing 8 changed files with 333 additions and 150 deletions.
4 changes: 2 additions & 2 deletions sass/color/_functions.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -192,10 +192,10 @@ $_enhanced-accessibility: false;
$_hsl-alpha: hsl(from $s h s l / $_alpha);
$_mix-alpha: color-mix(in oklch, $s #{$_alpha * 100%}, transparent);

@if $palette and not($contrast) {
@if $palette {
$s: map.get($palette, $color);
$base: map.get($s, $variant);
$raw: map.get($s, #{$variant}-raw);
$raw: if($contrast, map.get($s, #{$variant}-contrast), map.get($s, #{$variant}-raw));

@return if($raw and $variant != 500, rgba($raw, $_alpha), rgba($base, $_alpha));
}
Expand Down
79 changes: 67 additions & 12 deletions sass/themes/schemas/components/dark/_tabs.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,32 +33,87 @@ $base-dark-tabs: (

/// Generates a dark material tabs schema.
/// @type {Map}
/// @prop {Map} item-hover-background [color: ('gray', 100)] - The background used for the tabs on hover.
/// @prop {Map} item-active-background [color: ('gray', 100)] - The color used for the active/focused tab background.
/// @requires $material-tabs
/// @requires $base-dark-tabs
$dark-material-tabs: extend($material-tabs, $base-dark-tabs);
$dark-material-tabs: extend(
$material-tabs,
(
item-hover-background: (
color: (
'gray',
100,
),
),
item-active-background: (
color: (
'gray',
100,
),
),
)
);

/// Generates a dark fluent tabs schema.
/// @prop {Map} item-disabled-color [color: ('gray', 300)] - The color used for the disabled tabs text.
/// @prop {Map} item-disabled-icon-color [color: ('gray', 300)] - The color used for the disabled tab icon.
/// @prop {Map} item-hover-background [color: ('gray', 50)] - The background used for the tabs on hover.
/// @prop {Map} item-active-background [color: ('gray', 50)] - The color used for the active/focused tab background.
/// @prop {Map} button-disabled-color [color: ('gray', 200)] - The color used for the disabled button icon/text.
/// @prop {Map} indicator-color [color: ('primary', 300)] - The color used for the active tab indicator.
/// @type {Map}
/// @requires $fluent-tabs
/// @requires $base-dark-tabs
$dark-fluent-tabs: extend($fluent-tabs, $base-dark-tabs);

/// Generates a dark bootstrap tabs schema.
/// @type {Map}
/// @prop {Map} item-background [color: ('primary', 400)] - The background color used for the tabs header.
/// @requires $bootstrap-tabs
$dark-bootstrap-tabs: extend(
$bootstrap-tabs,
$dark-fluent-tabs: extend(
$fluent-tabs,
$base-dark-tabs,
(
item-hover-color: (
item-disabled-color: (
color: (
'gray',
300,
),
),
item-disabled-icon-color: (
color: (
'gray',
300,
),
),

item-hover-background: (
color: (
'gray',
50,
),
),
item-active-background: (
color: (
'gray',
50,
),
),
button-disabled-color: (
color: (
'gray',
200,
),
),
indicator-color: (
color: (
'primary',
400,
300,
),
),
)
);

/// Generates a dark bootstrap tabs schema.
/// @type {Map}
/// @requires $bootstrap-tabs
$dark-bootstrap-tabs: extend($bootstrap-tabs);

/// 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.
Expand All @@ -74,7 +129,7 @@ $dark-bootstrap-tabs: extend(
/// @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.
/// @prop {Map} button-hover-background [contrast-color: ('gray', 50, .10)] - The color used for the button background on hover.
/// @requires $indigo-tabs
$dark-indigo-tabs: extend(
$indigo-tabs,
Expand Down
105 changes: 94 additions & 11 deletions sass/themes/schemas/components/dark/_time-picker.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,27 @@

/// Generates a dark material time-picker schema.
/// @type {Map}
/// @prop {Map} hover-text-color [color: ('secondary', 200)] - The hover text color of an open time picker.
/// @prop {Map} selected-text-color [color: ('secondary', 200)] - The text color of a selected item in time picker.
/// @prop {Map} divider-color [color: ('gray', 100)] - The divider color of the time picker.
/// @requires $material-time-picker
$dark-material-time-picker: extend(
$material-time-picker,
(
hover-text-color: (
color: (
'secondary',
200,
),
),

selected-text-color: (
color: (
'secondary',
200,
),
),

divider-color: (
color: (
'gray',
Expand All @@ -26,11 +42,59 @@ $dark-material-time-picker: extend(

/// Generates a dark fluent time-picker schema.
/// @type {Map}
/// @prop {Map} hover-text-color [color: ('primary', 200)] - The hover text color of an open time picker.
/// @prop {Map} selected-text-color [color: ('primary', 200)] - The text color of a selected item in time picker.
/// @prop {Map} header-background [color: ('primary', 200)] - The header background color of a time picker.
/// @prop {Map} header-hour-text-color [contrast-color: ('primary', 200)] - The header hour text color of a time picker.
/// @prop {Map} active-item-foreground [contrast-color: ('primary', 200)] - The foreground color for current item in focused column inside the time picker.
/// @prop {Map} active-item-background [color: ('primary', 200)] - The background color for current item in focused column inside the time picker.
/// @prop {Map} divider-color [color: ('gray', 100)] - The divider color of the time picker.
/// @requires $fluent-time-picker
$dark-fluent-time-picker: extend(
$fluent-time-picker,
(
hover-text-color: (
color: (
'primary',
200,
),
),

selected-text-color: (
color: (
'primary',
200,
),
),

header-background: (
color: (
'primary',
200,
),
),

header-hour-text-color: (
contrast-color: (
'primary',
200,
),
),

active-item-foreground: (
contrast-color: (
'primary',
200,
),
),

active-item-background: (
color: (
'primary',
200,
),
),

divider-color: (
color: (
'gray',
Expand All @@ -42,8 +106,35 @@ $dark-fluent-time-picker: extend(

/// Generates a dark bootstrap time-picker schema.
/// @type {Map}
/// @prop {Map} hover-text-color [color: ('primary', 300)] - The hover text color of an open time picker.
/// @prop {Map} active-item-background [color: ('primary', 500)] - The background color for current item in focused column inside the time picker.
/// @prop {Map} selected-text-color [color: ('primary', 300)] - The text color of a selected item in time picker.
/// @requires $bootstrap-time-picker
$dark-bootstrap-time-picker: $bootstrap-time-picker;
$dark-bootstrap-time-picker: extend(
$bootstrap-time-picker,
(
hover-text-color: (
color: (
'primary',
300,
),
),

active-item-background: (
color: (
'primary',
500,
),
),

selected-text-color: (
color: (
'primary',
300,
),
),
)
);

/// Generates a dark indigo time-picker schema.
/// @type {Map}
Expand All @@ -52,10 +143,9 @@ $dark-bootstrap-time-picker: $bootstrap-time-picker;
/// @prop {Map} header-background [color: ('gray', 50)] - The header background color of a time picker.
/// @prop {Map} selected-text-color [color: ('primary', 200)] - The text color of a selected item in time picker.
/// @prop {Map} hover-text-color [color: ('primary', 200)] - The hover text color of an open time picker.
/// @prop {Color} border-color [color: ('gray', 100)] - The border-color of the time picker.
/// @prop {Color} divider-color [color: ('gray', 100)] - The divider color of the time picker.
/// @prop {Map} border-color [color: ('gray', 100)] - The border-color of the time picker.
/// @prop {Map} divider-color [color: ('gray', 100)] - The divider color of the time picker.
/// @prop {Map} header-hour-text-color [contrast-color: ('gray', 50)] - The header hour text color of a time picker.
/// @prop {Map} header-time-period-color [contrast-color: ('gray', 50)] - The header AM/PM text color of a time picker.
/// @requires $indigo-time-picker
$dark-indigo-time-picker: extend(
$indigo-time-picker,
Expand Down Expand Up @@ -96,13 +186,6 @@ $dark-indigo-time-picker: extend(
),
),

header-time-period-color: (
contrast-color: (
'gray',
50,
),
),

selected-text-color: (
color: (
'primary',
Expand Down
4 changes: 2 additions & 2 deletions sass/themes/schemas/components/elevation/_time-picker.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,10 @@

/// @type Map
/// @prop {Number} modal-elevation [24] - The elevation level, between 0-24, to be used for the time picker in modal mode.
/// @prop {Number} dropdown-elevation [8] - The elevation level, between 0-24, to be used for the time picker in dropdown mode.
/// @prop {Number} dropdown-elevation [3] - The elevation level, between 0-24, to be used for the time picker in dropdown mode.
$default-elevation-time-picker: (
modal-elevation: 24,
dropdown-elevation: 8,
dropdown-elevation: 3,
);
$indigo-elevation-time-picker: (
modal-elevation: 5,
Expand Down
5 changes: 2 additions & 3 deletions sass/themes/schemas/components/light/_card.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,6 @@ $light-card: extend(
/// Generates a material card schema.
/// @type {Map}
/// @prop {Map} outline-color [color: ('gray', 400, .54)] - The outline color of an outlined type card.
/// @prop {List} border-radius [(rem(2px), rem(0), rem(24px))] - The border radius used for card.
/// @requires {Map} $light-card
$material-card: extend(
$light-card,
Expand All @@ -87,7 +86,7 @@ $material-card: extend(
/// Generates a fluent card schema.
/// @type {Map}
/// @prop {Map} outline-color [color: ('gray', 200)] - The outline color of an outlined type card.
/// @prop {List} border-radius [(rem(2px), rem(0), rem(24px))] - The border radius used for card.
/// @prop {List} border-radius [(rem(0px), rem(0), rem(24px))] - The border radius used for card.
/// @requires {Map} $light-card
$fluent-card: extend(
$light-card,
Expand All @@ -101,7 +100,7 @@ $fluent-card: extend(

border-radius: (
border-radius: (
rem(2px),
rem(0),
rem(0),
rem(24px),
),
Expand Down
Loading

0 comments on commit 72ff984

Please sign in to comment.