Skip to content

Commit

Permalink
feat(tile-manager): indigo light&dark schema
Browse files Browse the repository at this point in the history
  • Loading branch information
@SisIvanova
SisIvanova committed Dec 2, 2024
1 parent f1727f7 commit dc72b22
Show file tree
Hide file tree
Showing 2 changed files with 162 additions and 7 deletions.
92 changes: 86 additions & 6 deletions sass/themes/schemas/components/dark/_tile-manager.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
/// Generates a dark base tile manager schema.
/// @type {Map}
/// @prop {Map} hover-border-color [color: ('gray', 200)] - The border color of the tile component on hover.
/// @prop {Map} resize-idnicator [color: ('gray', 200)] - The color of the tile resize indicator.
/// @prop {Map} placeholder-background [color: ('primary', 700, .15)] - The background color of the ghost element that appears during drag and drop and while resizing.
/// @prop {Map} overlay-background [color: ('primary', 700, .5)] - The background color of the ghost element that appears on top of the tile that will be swapped.
$dark-base-tile-manager: (
Expand Down Expand Up @@ -61,6 +62,7 @@ $dark-fluent-tile-manager: extend($fluent-tile-manager, $dark-base-tile-manager)
/// @prop {Map} tile-manager-background [color: ('gray', 100)] - The background color of the tile manager component.
/// @prop {Map} border-color [color: ('gray', 200)] - The border color of the tile component on hover.
/// @prop {Map} hover-border-color [color: ('gray', 300)] - The border color of the tile component on hover.
/// @prop {Map} resize-idnicator [color: ('gray', 300)] - The color of the tile resize indicator.
/// @prop {Map} placeholder-background [color: ('primary', 700, .15)] - The background color of the ghost element that appears during drag and drop and while resizing.
/// @prop {Map} overlay-background [color: ('primary', 700, .4)] - The background color of the ghost element that appears on top of the tile that will be swapped.
/// @requires {Map} $bootstrap-tile-manager
Expand Down Expand Up @@ -88,6 +90,13 @@ $dark-bootstrap-tile-manager: extend(
),
),

resize-indicator: (
color: (
'gray',
300,
),
),

placeholder-background: (
color: (
'primary',
Expand All @@ -103,17 +112,88 @@ $dark-bootstrap-tile-manager: extend(
0.4,
),
),
)
);

resize-indicator: (
/// Generates a dark indigo tile manager schema.
/// @type {Map}
/// @prop {Map} tile-background [color: ('gray', 50)] - The background color of the tile component inside the tile manager.
/// @prop {Map} title-color [contrast-color: ('gray', 50, .9)] - The title color of the tile component.
/// @prop {Map} content-background [color: ('gray', 50)] - The background color of the tile component content.
/// @prop {Map} border-color [color: ('gray', 100)] - The border color of the tile component.
/// @prop {Map} hover-border-color [color: ('gray', 200)] - The border color of the tile component on hover.
/// @prop {Map} placeholder-background [color: ('primary', 500, .15)] - The background color of the ghost element that appears during drag and drop and while resizing.
/// @prop {Map} overlay-background [color: ('primary', 700, .5)] - The background color of the ghost element that appears on top of the tile that will be swapped.
/// @prop {Map} ghost-border [color: ('primary', 300)] - The border color of the ghost element that appears during drag and drop and while resizing.
/// @prop {Map} resize-idnicator [color: ('gray', 200)] - The color of the tile resize indicator.
/// @requires {Map} $indigo-tile-manager
$dark-indigo-tile-manager: extend(
$indigo-tile-manager,
(
tile-background: (
color: (
'gray',
50,
),
),

title-color: (
contrast-color: (
'gray',
50,
0.9,
),
),

content-background: (
color: (
'gray',
50,
),
),

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

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

resize-idnicator: (
color: (
'gray',
200,
),
),

placeholder-background: (
color: (
'primary',
500,
0.15,
),
),

overlay-background: (
color: (
'primary',
700,
0.5,
),
),

ghost-border: (
color: (
'primary',
300,
),
),
)
);

/// Generates a dark indigo tile manager schema.
/// @type {Map}
/// @requires {Map} $indigo-tile-manager
$dark-indigo-tile-manager: $indigo-tile-manager;
77 changes: 76 additions & 1 deletion sass/themes/schemas/components/light/_tile-manager.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,11 @@
/// @prop {Map} content-color [color: ('gray', 700)] - The text color of the tile component content.
/// @prop {Color} border-color [transparent] - The border color of the tile component.
/// @prop {Map} hover-border-color [color: ('gray', 400)] - The border color of the tile component on hover.
/// @prop {Map} resize-idnicator [color: ('gray', 400)] - The color of the tile resize indicator.
/// @prop {Map} placeholder-background [color: ('primary', 100, .3)] - The background color of the ghost element that appears during drag and drop and while resizing.
/// @prop {Map} overlay-background [color: ('primary', 100, .6)] - The background color of the ghost element that appears on top of the tile that will be swapped.
/// @prop {Map} ghost-border [color: ('primary', 500)] - The border color of the ghost element that appears during drag and drop and while resizing.
/// @prop {Color} divider-color [transparent] - The color of the divider component inside the tile header.
/// @prop {Number} border-radius [rem(4px)] - The border radius of the tile component.
/// @prop {Number} default-size [2] - The default size used for the tile manager component.
/// @requires {Map} $default-elevation-tile
Expand Down Expand Up @@ -100,6 +102,7 @@ $light-tile-manager: extend(
),
),

divider-color: transparent,
border-radius: rem(4px),
default-size: 2,
)
Expand Down Expand Up @@ -185,5 +188,77 @@ $bootstrap-tile-manager: extend(

/// Generates an indigo tile manager schema.
/// @type {Map}
/// @prop {Map} tile-manager-background [color: ('surface', 500)] - The background color of the tile manager component.
/// @prop {Map} tile-background [contrast-color: ('gray', 900)] - The background color of the tile component inside the tile manager.
/// @prop {Map} title-color [color: ('gray', 800)] - The title color of the tile component.
/// @prop {Map} content-background [contrast-color: ('gray', 900)] - The background color of the tile component content.
/// @prop {Map} border-color [color: ('gray', 400)] - The border color of the tile component.
/// @prop {Map} hover-border-color [color: ('gray', 500)] - The border color of the tile component on hover.
/// @prop {Map} placeholder-background [color: ('primary', 100, .2)] - The background color of the ghost element that appears during drag and drop and while resizing.
/// @prop {Map} resize-idnicator [color: ('gray', 500)] - The color of the tile resize indicator.
/// @prop {Number} border-radius [rem(6px)] - The border radius of the tile component.
/// @requires {Map} $light-tile-manager
$indigo-tile-manager: $light-tile-manager;
$indigo-tile-manager: extend(
$light-tile-manager,
$default-elevation-tile,
(
tile-manager-background: (
color: (
'surface',
500,
),
),

tile-background: (
contrast-color: (
'gray',
900,
),
),

title-color: (
color: (
'gray',
800,
),
),

content-background: (
contrast-color: (
'gray',
900,
),
),

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

hover-border-color: (
color: (
'gray',
500,
),
),

placeholder-background: (
color: (
'primary',
100,
0.2,
),
),

resize-idnicator: (
color: (
'gray',
500,
),
),

border-radius: rem(6px),
)
);

0 comments on commit dc72b22

Please sign in to comment.