igniteui-theming 4.3.0 → 4.4.1-patch
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/json/typography/presets/typescales.json +1 -1
- package/package.json +11 -5
- package/sass/themes/schemas/components/dark/_button.scss +220 -139
- package/sass/themes/schemas/components/dark/_icon-button.scss +124 -23
- package/sass/themes/schemas/components/light/_button.scss +257 -322
- package/sass/themes/schemas/components/light/_icon-button.scss +131 -52
- package/sass/typography/presets/_fluent.scss +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"bootstrap":{"typeface":"-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'","h1":{"font-size":"2.5rem","font-weight":"500","letter-spacing":"-0.09375rem","line-height":"3rem","text-transform":"none","margin-top":"0","margin-bottom":"0.5rem"},"h2":{"font-size":"2rem","font-weight":"500","letter-spacing":"-0.03125rem","line-height":"2.4rem","text-transform":"none","margin-top":"0","margin-bottom":"0.5rem"},"h3":{"font-size":"1.75rem","font-weight":"500","letter-spacing":"0","line-height":"2.1rem","text-transform":"none","margin-top":"0","margin-bottom":"0.5rem"},"h4":{"font-size":"1.5rem","font-weight":"500","letter-spacing":"0.015625rem","line-height":"1.8rem","text-transform":"none","margin-top":"0","margin-bottom":"0.5rem"},"h5":{"font-size":"1.25rem","font-weight":"500","letter-spacing":"0","line-height":"1.5rem","text-transform":"none","margin-top":"0","margin-bottom":"0.5rem"},"h6":{"font-size":"1rem","font-weight":"500","letter-spacing":"0.009375rem","line-height":"1.2rem","text-transform":"none","margin-top":"0","margin-bottom":"0.5rem"},"body-1":{"font-size":"1rem","font-weight":"400","letter-spacing":"0.03125rem","line-height":"1.5rem","text-transform":"none","margin-top":"0","margin-bottom":"0"},"body-2":{"font-size":"0.9rem","font-weight":"400","letter-spacing":"0.015625rem","line-height":"1.5rem","text-transform":"none","margin-top":"0","margin-bottom":"0"},"subtitle-1":{"font-size":"0.875rem","font-weight":"400","letter-spacing":"0.009375rem","line-height":"1.5rem","text-transform":"none","margin-top":"0","margin-bottom":"0"},"subtitle-2":{"font-size":"0.9rem","font-weight":"400","letter-spacing":"0.00625rem","line-height":"1.35rem","text-transform":"none","margin-top":"0","margin-bottom":"0"},"button":{"font-size":"1rem","font-weight":"500","letter-spacing":"0.046875rem","line-height":"1.5rem","text-transform":"none","margin-top":"0","margin-bottom":"0"},"caption":{"font-size":"0.75rem","font-weight":"400","letter-spacing":"0.025rem","line-height":"1rem","text-transform":"none"},"overline":{"font-size":"0.625rem","font-weight":"400","letter-spacing":"0.09375rem","line-height":"1rem","text-transform":"uppercase"},"bootstrap_weekday":{"font-size":"0.8125rem","font-weight":"400","line-height":"normal","text-transform":"none","margin-top":"0","margin-bottom":"0"}},"fluent":{"typeface":"'Open Sans', Helvetica, Arial, sans-serif","h1":{"font-size":"4.25rem","font-weight":"700","letter-spacing":"-0.09375rem","line-height":"4.75rem","text-transform":"none","margin-top":"0","margin-bottom":"0"},"h2":{"font-size":"2.625rem","font-weight":"700","letter-spacing":"-0.03125rem","line-height":"3.25rem","text-transform":"none","margin-top":"0","margin-bottom":"0"},"h3":{"font-size":"2rem","font-weight":"600","letter-spacing":"0","line-height":"2.5rem","text-transform":"none","margin-top":"0","margin-bottom":"0"},"h4":{"font-size":"1.75rem","font-weight":"400","letter-spacing":"0.015625rem","line-height":"2.25rem","text-transform":"none","margin-top":"0","margin-bottom":"0"},"h5":{"font-size":"1.5rem","font-weight":"400","letter-spacing":"0","line-height":"2rem","text-transform":"none","margin-top":"0","margin-bottom":"0"},"h6":{"font-size":"1.25rem","font-weight":"400","letter-spacing":"0.009375rem","line-height":"1.75rem","text-transform":"none","margin-top":"0","margin-bottom":"0"},"body-1":{"font-size":"1rem","font-weight":"400","letter-spacing":"0.03125rem","line-height":"1.375rem","text-transform":"none","margin-top":"0","margin-bottom":"0"},"body-2":{"font-size":"0.875rem","font-weight":"400","letter-spacing":"0.015625rem","line-height":"1.25rem","text-transform":"none","margin-top":"0","margin-bottom":"0"},"subtitle-1":{"font-size":"1.125rem","font-weight":"400","letter-spacing":"0.009375rem","line-height":"1.5rem","text-transform":"none","margin-top":"0","margin-bottom":"0"},"subtitle-2":{"font-size":"0.875rem","font-weight":"600","letter-spacing":"0.00625rem","line-height":"1.25rem","text-transform":"none","margin-top":"0","margin-bottom":"0"},"button":{"font-size":"0.875rem","font-weight":"
|
|
1
|
+
{"bootstrap":{"typeface":"-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'","h1":{"font-size":"2.5rem","font-weight":"500","letter-spacing":"-0.09375rem","line-height":"3rem","text-transform":"none","margin-top":"0","margin-bottom":"0.5rem"},"h2":{"font-size":"2rem","font-weight":"500","letter-spacing":"-0.03125rem","line-height":"2.4rem","text-transform":"none","margin-top":"0","margin-bottom":"0.5rem"},"h3":{"font-size":"1.75rem","font-weight":"500","letter-spacing":"0","line-height":"2.1rem","text-transform":"none","margin-top":"0","margin-bottom":"0.5rem"},"h4":{"font-size":"1.5rem","font-weight":"500","letter-spacing":"0.015625rem","line-height":"1.8rem","text-transform":"none","margin-top":"0","margin-bottom":"0.5rem"},"h5":{"font-size":"1.25rem","font-weight":"500","letter-spacing":"0","line-height":"1.5rem","text-transform":"none","margin-top":"0","margin-bottom":"0.5rem"},"h6":{"font-size":"1rem","font-weight":"500","letter-spacing":"0.009375rem","line-height":"1.2rem","text-transform":"none","margin-top":"0","margin-bottom":"0.5rem"},"body-1":{"font-size":"1rem","font-weight":"400","letter-spacing":"0.03125rem","line-height":"1.5rem","text-transform":"none","margin-top":"0","margin-bottom":"0"},"body-2":{"font-size":"0.9rem","font-weight":"400","letter-spacing":"0.015625rem","line-height":"1.5rem","text-transform":"none","margin-top":"0","margin-bottom":"0"},"subtitle-1":{"font-size":"0.875rem","font-weight":"400","letter-spacing":"0.009375rem","line-height":"1.5rem","text-transform":"none","margin-top":"0","margin-bottom":"0"},"subtitle-2":{"font-size":"0.9rem","font-weight":"400","letter-spacing":"0.00625rem","line-height":"1.35rem","text-transform":"none","margin-top":"0","margin-bottom":"0"},"button":{"font-size":"1rem","font-weight":"500","letter-spacing":"0.046875rem","line-height":"1.5rem","text-transform":"none","margin-top":"0","margin-bottom":"0"},"caption":{"font-size":"0.75rem","font-weight":"400","letter-spacing":"0.025rem","line-height":"1rem","text-transform":"none"},"overline":{"font-size":"0.625rem","font-weight":"400","letter-spacing":"0.09375rem","line-height":"1rem","text-transform":"uppercase"},"bootstrap_weekday":{"font-size":"0.8125rem","font-weight":"400","line-height":"normal","text-transform":"none","margin-top":"0","margin-bottom":"0"}},"fluent":{"typeface":"'Open Sans', Helvetica, Arial, sans-serif","h1":{"font-size":"4.25rem","font-weight":"700","letter-spacing":"-0.09375rem","line-height":"4.75rem","text-transform":"none","margin-top":"0","margin-bottom":"0"},"h2":{"font-size":"2.625rem","font-weight":"700","letter-spacing":"-0.03125rem","line-height":"3.25rem","text-transform":"none","margin-top":"0","margin-bottom":"0"},"h3":{"font-size":"2rem","font-weight":"600","letter-spacing":"0","line-height":"2.5rem","text-transform":"none","margin-top":"0","margin-bottom":"0"},"h4":{"font-size":"1.75rem","font-weight":"400","letter-spacing":"0.015625rem","line-height":"2.25rem","text-transform":"none","margin-top":"0","margin-bottom":"0"},"h5":{"font-size":"1.5rem","font-weight":"400","letter-spacing":"0","line-height":"2rem","text-transform":"none","margin-top":"0","margin-bottom":"0"},"h6":{"font-size":"1.25rem","font-weight":"400","letter-spacing":"0.009375rem","line-height":"1.75rem","text-transform":"none","margin-top":"0","margin-bottom":"0"},"body-1":{"font-size":"1rem","font-weight":"400","letter-spacing":"0.03125rem","line-height":"1.375rem","text-transform":"none","margin-top":"0","margin-bottom":"0"},"body-2":{"font-size":"0.875rem","font-weight":"400","letter-spacing":"0.015625rem","line-height":"1.25rem","text-transform":"none","margin-top":"0","margin-bottom":"0"},"subtitle-1":{"font-size":"1.125rem","font-weight":"400","letter-spacing":"0.009375rem","line-height":"1.5rem","text-transform":"none","margin-top":"0","margin-bottom":"0"},"subtitle-2":{"font-size":"0.875rem","font-weight":"600","letter-spacing":"0.00625rem","line-height":"1.25rem","text-transform":"none","margin-top":"0","margin-bottom":"0"},"button":{"font-size":"0.875rem","font-weight":"600","letter-spacing":"0.046875rem","line-height":"0.875rem","text-transform":"capitalize","margin-top":"0","margin-bottom":"0"},"caption":{"font-size":"0.75rem","font-weight":"400","font-style":"normal","letter-spacing":"0.025rem","line-height":"1rem","text-transform":"none"},"overline":{"font-size":"0.625rem","font-weight":"400","letter-spacing":"0.09375rem","line-height":"0.875rem","text-transform":"uppercase","margin-top":"0","margin-bottom":"0"}},"indigo":{"typeface":"'Nunito Sans', sans-serif","h1":{"font-size":"6rem","font-weight":"200","letter-spacing":"-0.09375rem","line-height":"7rem","text-transform":"none","margin-top":"0","margin-bottom":"0"},"h2":{"font-size":"3.75rem","font-weight":"200","letter-spacing":"-0.03125rem","line-height":"4.5rem","text-transform":"none","margin-top":"0","margin-bottom":"0"},"h3":{"font-size":"3rem","font-weight":"200","letter-spacing":"0","line-height":"3.5rem","text-transform":"none","margin-top":"0","margin-bottom":"0"},"h4":{"font-size":"2.25rem","font-weight":"200","letter-spacing":"0.015625rem","line-height":"2.625rem","text-transform":"none","margin-top":"0","margin-bottom":"0"},"h5":{"font-size":"1.5rem","font-weight":"200","letter-spacing":"0","line-height":"1.75rem","text-transform":"none","margin-top":"0","margin-bottom":"0"},"h6":{"font-size":"1.25rem","font-weight":"600","letter-spacing":"0.009375rem","line-height":"1.625rem","text-transform":"none","margin-top":"0","margin-bottom":"0"},"body-1":{"font-size":"1rem","font-weight":"400","letter-spacing":"0.03125rem","line-height":"1.25rem","text-transform":"none","margin-top":"0","margin-bottom":"0"},"body-2":{"font-size":"0.875rem","font-weight":"400","letter-spacing":"0.015625rem","line-height":"1.25rem","text-transform":"none","margin-top":"0","margin-bottom":"0"},"subtitle-1":{"font-size":"1rem","font-weight":"600","letter-spacing":"0.009375rem","line-height":"1.375rem","text-transform":"none","margin-top":"0","margin-bottom":"0"},"subtitle-2":{"font-size":"0.875rem","font-weight":"700","letter-spacing":"0.00625rem","line-height":"1.25rem","text-transform":"none","margin-top":"0","margin-bottom":"0"},"button":{"font-size":"0.75rem","font-weight":"700","letter-spacing":"0.046875rem","line-height":"normal","text-transform":"uppercase","margin-top":"0","margin-bottom":"0"},"caption":{"font-size":"0.75rem","font-weight":"400","letter-spacing":"0.025rem","line-height":"1rem","text-transform":"normal","margin-top":"0","margin-bottom":"0"},"overline":{"font-size":"0.625rem","font-weight":"700","letter-spacing":"0.0125rem","line-height":"0.875rem","text-transform":"uppercase","margin-top":"0","margin-bottom":"0"}},"material":{"typeface":"'Titillium Web', sans-serif","h1":{"font-size":"6rem","font-weight":"300","font-style":"normal","letter-spacing":"-0.09375rem","line-height":"7rem","text-transform":"none","margin-top":"1.75rem","margin-bottom":"3.5rem"},"h2":{"font-size":"3.75rem","font-weight":"300","font-style":"normal","letter-spacing":"-0.03125rem","line-height":"4.4375rem","text-transform":"none","margin-top":"1.75rem","margin-bottom":"1.75rem"},"h3":{"font-size":"3rem","font-weight":"400","font-style":"normal","letter-spacing":"0","line-height":"3.5625rem","text-transform":"none","margin-top":"1.75rem","margin-bottom":"0"},"h4":{"font-size":"2.125rem","font-weight":"400","font-style":"normal","letter-spacing":"0.015625rem","line-height":"2.5rem","text-transform":"none","margin-top":"1.75rem","margin-bottom":"0"},"h5":{"font-size":"1.5rem","font-weight":"400","font-style":"normal","letter-spacing":"0","line-height":"1.75rem","text-transform":"none","margin-top":"1.75rem","margin-bottom":"0"},"h6":{"font-size":"1.25rem","font-weight":"600","font-style":"normal","letter-spacing":"0.009375rem","line-height":"1.5rem","text-transform":"none","margin-top":"0","margin-bottom":"0"},"body-1":{"font-size":"1rem","font-weight":"400","font-style":"normal","letter-spacing":"0.03125rem","line-height":"1.75rem","text-transform":"none","margin-top":"1.75rem","margin-bottom":"1rem"},"body-2":{"font-size":"0.875rem","font-weight":"400","font-style":"normal","letter-spacing":"0.015625rem","line-height":"1.25rem","text-transform":"none"},"subtitle-1":{"font-size":"1rem","font-weight":"400","font-style":"normal","letter-spacing":"0.009375rem","line-height":"1.5rem","text-transform":"none"},"subtitle-2":{"font-size":"0.875rem","font-weight":"600","font-style":"normal","letter-spacing":"0.00625rem","line-height":"1.5rem","text-transform":"none"},"button":{"font-size":"0.875rem","font-weight":"600","font-style":"normal","letter-spacing":"0.046875rem","line-height":"1rem","text-transform":"uppercase"},"caption":{"font-size":"0.75rem","font-weight":"400","font-style":"normal","letter-spacing":"0.025rem","line-height":"1rem","text-transform":"none"},"overline":{"font-size":"0.625rem","font-weight":"400","font-style":"normal","letter-spacing":"0.09375rem","line-height":"1rem","text-transform":"uppercase"}}}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "igniteui-theming",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.4.1-patch",
|
|
4
4
|
"description": "A set of Sass variables, mixins, and functions for generating palettes, typography, and elevations used by Ignite UI components.",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"scripts": {
|
|
@@ -31,9 +31,9 @@
|
|
|
31
31
|
]
|
|
32
32
|
},
|
|
33
33
|
"files": [
|
|
34
|
-
"/
|
|
35
|
-
"/
|
|
36
|
-
"
|
|
34
|
+
"sass/",
|
|
35
|
+
"json/",
|
|
36
|
+
"_index.scss"
|
|
37
37
|
],
|
|
38
38
|
"repository": {
|
|
39
39
|
"type": "git",
|
|
@@ -66,7 +66,13 @@
|
|
|
66
66
|
"./functions": {
|
|
67
67
|
"sass": "./sass/_functions.scss"
|
|
68
68
|
},
|
|
69
|
-
"./sass/**/*.*": "./sass/**/*.*"
|
|
69
|
+
"./sass/**/*.*": "./sass/**/*.*",
|
|
70
|
+
"./json/colors/meta/multipliers.json": "./json/colors/meta/multipliers.json",
|
|
71
|
+
"./json/colors/meta/palette.json": "./json/colors/meta/palette.json",
|
|
72
|
+
"./json/colors/presets/palettes.json": "./json/colors/presets/palettes.json",
|
|
73
|
+
"./json/elevations/indigo.json": "./json/elevations/indigo.json",
|
|
74
|
+
"./json/elevations/material.json": "./json/elevations/material.json",
|
|
75
|
+
"./json/typography/presets/typescales.json": "./json/typography/presets/typescales.json"
|
|
70
76
|
},
|
|
71
77
|
"devDependencies": {
|
|
72
78
|
"globby": "^13.1.4",
|
|
@@ -10,28 +10,24 @@
|
|
|
10
10
|
////
|
|
11
11
|
|
|
12
12
|
/// @type {Map}
|
|
13
|
-
/// @prop {Map} disabled-background [color: ('gray', 100
|
|
14
|
-
/// @prop {Color} disabled-foreground [color: ('gray',
|
|
13
|
+
/// @prop {Map} disabled-background [color: ('gray', 100)] - The disabled background color of the button.
|
|
14
|
+
/// @prop {Color} disabled-foreground [color: ('gray', 500)] - The disabled foreground color of the button.
|
|
15
15
|
$material-base-button-dark: (
|
|
16
16
|
disabled-background: (
|
|
17
17
|
color: (
|
|
18
18
|
'gray',
|
|
19
19
|
100,
|
|
20
|
-
0.3,
|
|
21
20
|
),
|
|
22
21
|
),
|
|
23
22
|
disabled-foreground: (
|
|
24
23
|
color: (
|
|
25
24
|
'gray',
|
|
26
|
-
|
|
25
|
+
500,
|
|
27
26
|
),
|
|
28
27
|
),
|
|
29
28
|
);
|
|
30
29
|
|
|
31
30
|
/// @type {Map}
|
|
32
|
-
/// @prop {Map} hover-background [color: ('secondary', 500, .12)] - The hover background color of a flat button.
|
|
33
|
-
/// @prop {Map} focus-background [color: ('secondary', 400, .24)] - The focus background color of a flat button.
|
|
34
|
-
/// @prop {Map} focus-visible-background [color: ('secondary', 400, .24)] - The focus-visible background color of a flat button.
|
|
35
31
|
/// @prop {Color} disabled-background [transparent] - The disabled background color a flat button.
|
|
36
32
|
/// @requires {Map} $material-base-button-dark
|
|
37
33
|
/// @requires {Map} $material-flat-button
|
|
@@ -39,42 +35,13 @@ $material-flat-button-dark: extend(
|
|
|
39
35
|
$material-flat-button,
|
|
40
36
|
$material-base-button-dark,
|
|
41
37
|
(
|
|
42
|
-
hover-background: (
|
|
43
|
-
color: (
|
|
44
|
-
'secondary',
|
|
45
|
-
500,
|
|
46
|
-
0.12,
|
|
47
|
-
),
|
|
48
|
-
),
|
|
49
|
-
focus-background: (
|
|
50
|
-
color: (
|
|
51
|
-
'secondary',
|
|
52
|
-
400,
|
|
53
|
-
0.24,
|
|
54
|
-
),
|
|
55
|
-
),
|
|
56
|
-
focus-visible-background: (
|
|
57
|
-
color: (
|
|
58
|
-
'secondary',
|
|
59
|
-
400,
|
|
60
|
-
0.24,
|
|
61
|
-
),
|
|
62
|
-
),
|
|
63
38
|
disabled-background: transparent,
|
|
64
39
|
)
|
|
65
40
|
);
|
|
66
41
|
|
|
67
|
-
/// @requires {Map} $material-contained-button
|
|
68
|
-
/// @requires {Map} $material-base-button-dark
|
|
69
|
-
$material-contained-button-dark: extend($material-contained-button, $material-base-button-dark);
|
|
70
|
-
|
|
71
|
-
/// @requires {Map} $material-fab-button
|
|
72
|
-
/// @requires {Map} $material-base-button-dark
|
|
73
|
-
$material-fab-button-dark: extend($material-fab-button, $material-base-button-dark);
|
|
74
|
-
|
|
75
42
|
/// @requires {Map} $material-outlined-button
|
|
76
43
|
/// @requires {Map} $material-base-button-dark
|
|
77
|
-
/// @prop {Map} disabled-border-color [color: ('gray',
|
|
44
|
+
/// @prop {Map} disabled-border-color [color: ('gray', 300)] - The disabled focused border color of an outlined button.
|
|
78
45
|
/// @prop {Color} disabled-background [transparent] - The disabled background color an outlined button.
|
|
79
46
|
$material-outlined-button-dark: extend(
|
|
80
47
|
$material-outlined-button,
|
|
@@ -83,14 +50,21 @@ $material-outlined-button-dark: extend(
|
|
|
83
50
|
disabled-border-color: (
|
|
84
51
|
color: (
|
|
85
52
|
'gray',
|
|
86
|
-
|
|
87
|
-
0.3,
|
|
53
|
+
300,
|
|
88
54
|
),
|
|
89
55
|
),
|
|
90
56
|
disabled-background: transparent,
|
|
91
57
|
)
|
|
92
58
|
);
|
|
93
59
|
|
|
60
|
+
/// @requires {Map} $material-contained-button
|
|
61
|
+
/// @requires {Map} $material-base-button-dark
|
|
62
|
+
$material-contained-button-dark: extend($material-contained-button, $material-base-button-dark);
|
|
63
|
+
|
|
64
|
+
/// @requires {Map} $material-fab-button
|
|
65
|
+
/// @requires {Map} $material-base-button-dark
|
|
66
|
+
$material-fab-button-dark: extend($material-fab-button, $material-base-button-dark);
|
|
67
|
+
|
|
94
68
|
/// Generates a dark material button schema.
|
|
95
69
|
/// @type {Map}
|
|
96
70
|
/// @requires {Map} $material-flat-button-dark
|
|
@@ -105,9 +79,30 @@ $dark-material-button: (
|
|
|
105
79
|
);
|
|
106
80
|
|
|
107
81
|
/// @type {Map}
|
|
108
|
-
/// @prop {Map}
|
|
109
|
-
/// @prop {Map}
|
|
82
|
+
/// @prop {Map} focus-visible-border-color [color: ('gray', 400)] - The focus-visible border color of a contained button.
|
|
83
|
+
/// @prop {Map} hover-background [color: ('gray', 50)] - The hover background of a contained button.
|
|
84
|
+
/// @prop {Map} focus-hover-background [color: ('gray', 50)] - The background color on focus hovered state of the button.
|
|
85
|
+
/// @prop {Map} disabled-background [color: ('gray', 50)] - The disabled background color of the button.
|
|
86
|
+
/// @prop {Map} disabled-foreground [color: ('gray', 200)] - The disabled foreground color of the button.
|
|
110
87
|
$fluent-base-button-dark: (
|
|
88
|
+
focus-visible-border-color: (
|
|
89
|
+
color: (
|
|
90
|
+
'gray',
|
|
91
|
+
400,
|
|
92
|
+
),
|
|
93
|
+
),
|
|
94
|
+
hover-background: (
|
|
95
|
+
color: (
|
|
96
|
+
'gray',
|
|
97
|
+
50,
|
|
98
|
+
),
|
|
99
|
+
),
|
|
100
|
+
focus-hover-background: (
|
|
101
|
+
color: (
|
|
102
|
+
'gray',
|
|
103
|
+
50,
|
|
104
|
+
),
|
|
105
|
+
),
|
|
111
106
|
disabled-background: (
|
|
112
107
|
color: (
|
|
113
108
|
'gray',
|
|
@@ -117,7 +112,7 @@ $fluent-base-button-dark: (
|
|
|
117
112
|
disabled-foreground: (
|
|
118
113
|
color: (
|
|
119
114
|
'gray',
|
|
120
|
-
|
|
115
|
+
200,
|
|
121
116
|
),
|
|
122
117
|
),
|
|
123
118
|
);
|
|
@@ -134,22 +129,72 @@ $fluent-flat-button-dark: extend(
|
|
|
134
129
|
)
|
|
135
130
|
);
|
|
136
131
|
|
|
132
|
+
/// @prop {Map} focus-border-color [color: ('gray', 400)] - The focus border color of a contained button.
|
|
133
|
+
/// @prop {Map} active-background [color: ('gray', 100, .8)] - The active background color of an outlined button.
|
|
134
|
+
/// @prop {Map} active-foreground [contrast-color: ('gray' 100)] - The active text color of an outlined button.
|
|
135
|
+
/// @prop {Map} border-color [color: ('gray', 400)] - The border color of an outlined button.
|
|
136
|
+
/// @prop {Map} hover-border-color [color: ('gray', 400)] - The hover border color of an outlined button.
|
|
137
|
+
/// @prop {Map} disabled-border-color [color: ('gray', 100)] - The disabled focused border color of an outlined button.
|
|
138
|
+
/// @requires {Map} $fluent-outlined-button
|
|
139
|
+
/// @requires {Map} $fluent-base-button-dark
|
|
140
|
+
$fluent-outlined-button-dark: extend(
|
|
141
|
+
$fluent-outlined-button,
|
|
142
|
+
$fluent-base-button-dark,
|
|
143
|
+
(
|
|
144
|
+
focus-border-color: (
|
|
145
|
+
color: (
|
|
146
|
+
'gray',
|
|
147
|
+
400,
|
|
148
|
+
),
|
|
149
|
+
),
|
|
150
|
+
active-background: (
|
|
151
|
+
color: (
|
|
152
|
+
'gray',
|
|
153
|
+
100,
|
|
154
|
+
0.8,
|
|
155
|
+
),
|
|
156
|
+
),
|
|
157
|
+
active-foreground: (
|
|
158
|
+
contrast-color: (
|
|
159
|
+
'gray',
|
|
160
|
+
100,
|
|
161
|
+
),
|
|
162
|
+
),
|
|
163
|
+
border-color: (
|
|
164
|
+
color: (
|
|
165
|
+
'gray',
|
|
166
|
+
400,
|
|
167
|
+
),
|
|
168
|
+
),
|
|
169
|
+
hover-border-color: (
|
|
170
|
+
color: (
|
|
171
|
+
'gray',
|
|
172
|
+
400,
|
|
173
|
+
),
|
|
174
|
+
),
|
|
175
|
+
disabled-border-color: (
|
|
176
|
+
color: (
|
|
177
|
+
'gray',
|
|
178
|
+
100,
|
|
179
|
+
),
|
|
180
|
+
),
|
|
181
|
+
)
|
|
182
|
+
);
|
|
183
|
+
|
|
137
184
|
/// @type {Map}
|
|
138
185
|
/// @prop {Map} background [color: ('primary', 300)] - The background color of an contained button.
|
|
139
|
-
/// @prop {Map} foreground [color: ('
|
|
140
|
-
/// @prop {Map} border-color [color: ('primary', 300)] - The border color of a contained button.
|
|
141
|
-
/// @prop {Map} hover-border-color [color: ('primary', 200)] - The hover border color of a contained button.
|
|
142
|
-
/// @prop {Map} focus-border-color [color: ('primary', 300)] - The focus border color of a contained button.
|
|
143
|
-
/// @prop {Map} focus-visible-border-color [color: ('primary', 200)] - The focus-visible border color of a contained button.
|
|
144
|
-
/// @prop {Map} active-border-color [color: ('primary', 200)] - The active border color of a contained button.
|
|
186
|
+
/// @prop {Map} foreground [contrast-color: ('primary', 300)] - The idle text color of a contained button.
|
|
187
|
+
/// @prop {Map} focus-visible-border-color [contrast-color: ('primary', 300)] - The focus-visible border color of a contained button.
|
|
145
188
|
/// @prop {Map} hover-background [color: ('primary', 200)] - The hover background of a contained button.
|
|
146
|
-
/// @prop {Map} hover-foreground [color: ('
|
|
189
|
+
/// @prop {Map} hover-foreground [contrast-color: ('primary', 500)] - The hover text color of a contained button.
|
|
147
190
|
/// @prop {Map} focus-background [color: ('primary', 300)] - The focus background color of a contained button.
|
|
148
|
-
/// @prop {Map} focus-foreground [color: ('
|
|
149
|
-
/// @prop {Map} focus-
|
|
150
|
-
/// @prop {Map} focus-
|
|
191
|
+
/// @prop {Map} focus-foreground [contrast-color: ('primary', 500)] - The focus text color of a contained button.
|
|
192
|
+
/// @prop {Map} focus-hover-background [color: ('primary', 200)] - The background color on focus hovered state of the button.
|
|
193
|
+
/// @prop {Map} focus-hover-foreground [contrast-color: ('primary', 500)] - The text color on focus hovered state of the button.
|
|
194
|
+
/// @prop {Map} focus-visible-background [color: ('primary', 300)] - The focus-visible background color of a contained button.
|
|
195
|
+
/// @prop {Map} focus-visible-foreground [contrast-color: ('primary', 500)] - The focus-visible text color of a contained button.
|
|
151
196
|
/// @prop {Map} active-background [color: ('primary', 200)] - The active background color of a contained button.
|
|
152
|
-
/// @prop {Map} active-foreground [color: ('
|
|
197
|
+
/// @prop {Map} active-foreground [contrast-color: ('primary', 500)] - The active text color of a contained button.
|
|
153
198
|
/// @requires {Map} $fluent-contained-button
|
|
154
199
|
/// @requires {Map} $fluent-base-button-dark
|
|
155
200
|
$fluent-contained-button-dark: extend(
|
|
@@ -163,13 +208,7 @@ $fluent-contained-button-dark: extend(
|
|
|
163
208
|
),
|
|
164
209
|
),
|
|
165
210
|
foreground: (
|
|
166
|
-
color: (
|
|
167
|
-
'surface',
|
|
168
|
-
500,
|
|
169
|
-
),
|
|
170
|
-
),
|
|
171
|
-
border-color: (
|
|
172
|
-
color: (
|
|
211
|
+
contrast-color: (
|
|
173
212
|
'primary',
|
|
174
213
|
300,
|
|
175
214
|
),
|
|
@@ -181,15 +220,9 @@ $fluent-contained-button-dark: extend(
|
|
|
181
220
|
),
|
|
182
221
|
),
|
|
183
222
|
hover-foreground: (
|
|
184
|
-
color: (
|
|
185
|
-
'surface',
|
|
186
|
-
500,
|
|
187
|
-
),
|
|
188
|
-
),
|
|
189
|
-
hover-border-color: (
|
|
190
|
-
color: (
|
|
223
|
+
contrast-color: (
|
|
191
224
|
'primary',
|
|
192
|
-
|
|
225
|
+
300,
|
|
193
226
|
),
|
|
194
227
|
),
|
|
195
228
|
focus-background: (
|
|
@@ -199,13 +232,19 @@ $fluent-contained-button-dark: extend(
|
|
|
199
232
|
),
|
|
200
233
|
),
|
|
201
234
|
focus-foreground: (
|
|
202
|
-
color: (
|
|
203
|
-
'
|
|
204
|
-
|
|
235
|
+
contrast-color: (
|
|
236
|
+
'primary',
|
|
237
|
+
300,
|
|
205
238
|
),
|
|
206
239
|
),
|
|
207
|
-
focus-
|
|
240
|
+
focus-hover-background: (
|
|
208
241
|
color: (
|
|
242
|
+
'primary',
|
|
243
|
+
200,
|
|
244
|
+
),
|
|
245
|
+
),
|
|
246
|
+
focus-hover-foreground: (
|
|
247
|
+
contrast-color: (
|
|
209
248
|
'primary',
|
|
210
249
|
300,
|
|
211
250
|
),
|
|
@@ -213,19 +252,19 @@ $fluent-contained-button-dark: extend(
|
|
|
213
252
|
focus-visible-background: (
|
|
214
253
|
color: (
|
|
215
254
|
'primary',
|
|
216
|
-
|
|
255
|
+
300,
|
|
217
256
|
),
|
|
218
257
|
),
|
|
219
258
|
focus-visible-foreground: (
|
|
220
|
-
color: (
|
|
221
|
-
'
|
|
222
|
-
|
|
259
|
+
contrast-color: (
|
|
260
|
+
'primary',
|
|
261
|
+
300,
|
|
223
262
|
),
|
|
224
263
|
),
|
|
225
264
|
focus-visible-border-color: (
|
|
226
|
-
color: (
|
|
265
|
+
contrast-color: (
|
|
227
266
|
'primary',
|
|
228
|
-
|
|
267
|
+
300,
|
|
229
268
|
),
|
|
230
269
|
),
|
|
231
270
|
active-background: (
|
|
@@ -235,57 +274,111 @@ $fluent-contained-button-dark: extend(
|
|
|
235
274
|
),
|
|
236
275
|
),
|
|
237
276
|
active-foreground: (
|
|
238
|
-
color: (
|
|
239
|
-
'surface',
|
|
240
|
-
500,
|
|
241
|
-
),
|
|
242
|
-
),
|
|
243
|
-
active-border-color: (
|
|
244
|
-
color: (
|
|
277
|
+
contrast-color: (
|
|
245
278
|
'primary',
|
|
246
|
-
|
|
279
|
+
300,
|
|
247
280
|
),
|
|
248
281
|
),
|
|
249
282
|
)
|
|
250
283
|
);
|
|
251
284
|
|
|
285
|
+
/// @type {Map}
|
|
286
|
+
/// @prop {Map} background [color: ('primary', 300)] - The background color of an contained button.
|
|
287
|
+
/// @prop {Map} foreground [contrast-color: ('primary', 300)] - The idle text color of a contained button.
|
|
288
|
+
/// @prop {Map} focus-visible-border-color [contrast-color: ('primary', 300)] - The focus-visible border color of a contained button.
|
|
289
|
+
/// @prop {Map} active-border-color [color: ('primary', 200)] - The active border color of a contained button.
|
|
290
|
+
/// @prop {Map} hover-background [color: ('primary', 200)] - The hover background of a contained button.
|
|
291
|
+
/// @prop {Map} hover-foreground [contrast-color: ('primary', 300)] - The hover text color of a contained button.
|
|
292
|
+
/// @prop {Map} focus-background [color: ('primary', 300)] - The focus background color of a contained button.
|
|
293
|
+
/// @prop {Map} focus-foreground [contrast-color: ('primary', 300)] - The focus text color of a contained button.
|
|
294
|
+
/// @prop {Map} focus-hover-background [color: ('primary', 200)] - The background color on focus hovered state of the button.
|
|
295
|
+
/// @prop {Map} focus-hover-foreground [contrast-color: ('primary', 300)] - The text color on focus hovered state of the button.
|
|
296
|
+
/// @prop {Map} focus-visible-background [color: ('primary', 300)] - The focus-visible background color of a contained button.
|
|
297
|
+
/// @prop {Map} focus-visible-foreground [contrast-color: ('primary', 300)] - The focus-visible text color of a contained button.
|
|
298
|
+
/// @prop {Map} active-background [color: ('primary', 200)] - The active background color of a contained button.
|
|
299
|
+
/// @prop {Map} active-foreground [contrast-color: ('primary', 300)] - The active text color of a contained button.
|
|
252
300
|
/// @requires {Map} $fluent-fab-button
|
|
253
301
|
/// @requires {Map} $fluent-base-button-dark
|
|
254
|
-
$fluent-fab-button-dark: extend(
|
|
255
|
-
|
|
256
|
-
/// @prop {Map} hover-foreground [color: ('gray', 50)] - TThe hover text color of an outlined button.
|
|
257
|
-
/// @prop {Map} active-background [color: ('gray', 100, .8)] - The active background color of an outlined button.
|
|
258
|
-
/// @prop {Map} active-foreground [contrast-color: ('gray' 100)] - The active text color of an outlined button.
|
|
259
|
-
/// @prop {Map} border-color [color: ('gray', 100)] - The border color of an outlined button.
|
|
260
|
-
/// @requires {Map} $fluent-outlined-button
|
|
261
|
-
/// @requires {Map} $fluent-base-button-dark
|
|
262
|
-
$fluent-outlined-button-dark: extend(
|
|
263
|
-
$fluent-outlined-button,
|
|
302
|
+
$fluent-fab-button-dark: extend(
|
|
303
|
+
$fluent-fab-button,
|
|
264
304
|
$fluent-base-button-dark,
|
|
265
305
|
(
|
|
306
|
+
background: (
|
|
307
|
+
color: (
|
|
308
|
+
'primary',
|
|
309
|
+
300,
|
|
310
|
+
),
|
|
311
|
+
),
|
|
312
|
+
foreground: (
|
|
313
|
+
contrast-color: (
|
|
314
|
+
'primary',
|
|
315
|
+
300,
|
|
316
|
+
),
|
|
317
|
+
),
|
|
266
318
|
hover-background: (
|
|
267
319
|
color: (
|
|
268
|
-
'
|
|
269
|
-
|
|
320
|
+
'primary',
|
|
321
|
+
200,
|
|
270
322
|
),
|
|
271
323
|
),
|
|
272
|
-
|
|
324
|
+
hover-foreground: (
|
|
325
|
+
contrast-color: (
|
|
326
|
+
'primary',
|
|
327
|
+
300,
|
|
328
|
+
),
|
|
329
|
+
),
|
|
330
|
+
focus-background: (
|
|
273
331
|
color: (
|
|
274
|
-
'
|
|
275
|
-
|
|
276
|
-
0.8,
|
|
332
|
+
'primary',
|
|
333
|
+
300,
|
|
277
334
|
),
|
|
278
335
|
),
|
|
279
|
-
|
|
336
|
+
focus-foreground: (
|
|
280
337
|
contrast-color: (
|
|
281
|
-
'
|
|
282
|
-
|
|
338
|
+
'primary',
|
|
339
|
+
300,
|
|
283
340
|
),
|
|
284
341
|
),
|
|
285
|
-
|
|
342
|
+
focus-hover-background: (
|
|
286
343
|
color: (
|
|
287
|
-
'
|
|
288
|
-
|
|
344
|
+
'primary',
|
|
345
|
+
200,
|
|
346
|
+
),
|
|
347
|
+
),
|
|
348
|
+
focus-hover-foreground: (
|
|
349
|
+
contrast-color: (
|
|
350
|
+
'primary',
|
|
351
|
+
300,
|
|
352
|
+
),
|
|
353
|
+
),
|
|
354
|
+
focus-visible-background: (
|
|
355
|
+
color: (
|
|
356
|
+
'primary',
|
|
357
|
+
300,
|
|
358
|
+
),
|
|
359
|
+
),
|
|
360
|
+
focus-visible-foreground: (
|
|
361
|
+
contrast-color: (
|
|
362
|
+
'primary',
|
|
363
|
+
300,
|
|
364
|
+
),
|
|
365
|
+
),
|
|
366
|
+
focus-visible-border-color: (
|
|
367
|
+
contrast-color: (
|
|
368
|
+
'primary',
|
|
369
|
+
300,
|
|
370
|
+
),
|
|
371
|
+
),
|
|
372
|
+
active-background: (
|
|
373
|
+
color: (
|
|
374
|
+
'primary',
|
|
375
|
+
200,
|
|
376
|
+
),
|
|
377
|
+
),
|
|
378
|
+
active-foreground: (
|
|
379
|
+
contrast-color: (
|
|
380
|
+
'primary',
|
|
381
|
+
300,
|
|
289
382
|
),
|
|
290
383
|
),
|
|
291
384
|
)
|
|
@@ -294,9 +387,9 @@ $fluent-outlined-button-dark: extend(
|
|
|
294
387
|
/// Generates a dark fluent button schema.
|
|
295
388
|
/// @type {Map}
|
|
296
389
|
/// @requires {Map} $fluent-flat-button-dark
|
|
297
|
-
/// @requires {Map} $fluent-outlined-button
|
|
298
|
-
/// @requires {Map} $fluent-contained-button
|
|
299
|
-
/// @requires {Map} $fluent-fab-button
|
|
390
|
+
/// @requires {Map} $fluent-outlined-button-dark
|
|
391
|
+
/// @requires {Map} $fluent-contained-button-dark
|
|
392
|
+
/// @requires {Map} $fluent-fab-button-dark
|
|
300
393
|
$dark-fluent-button: (
|
|
301
394
|
flat: $fluent-flat-button-dark,
|
|
302
395
|
outlined: $fluent-outlined-button-dark,
|
|
@@ -304,32 +397,6 @@ $dark-fluent-button: (
|
|
|
304
397
|
fab: $fluent-fab-button-dark,
|
|
305
398
|
);
|
|
306
399
|
|
|
307
|
-
/// @type {Map}
|
|
308
|
-
/// @requires {Map} $bootstrap-base-button
|
|
309
|
-
$bootstrap-base-button-dark: $bootstrap-base-button;
|
|
310
|
-
|
|
311
|
-
/// @type {Map}
|
|
312
|
-
/// @prop {Map} disabled-border-color [color: ('primary', 900)] - The disabled border color of the button.
|
|
313
|
-
/// @requires {Map} $bootstrap-base-button-dark
|
|
314
|
-
/// @requires {Map} $bootstrap-outlined-button
|
|
315
|
-
$bootstrap-outlined-button-dark: extend(
|
|
316
|
-
$bootstrap-base-button-dark,
|
|
317
|
-
$bootstrap-outlined-button,
|
|
318
|
-
(
|
|
319
|
-
disabled-border-color: (
|
|
320
|
-
color: (
|
|
321
|
-
'primary',
|
|
322
|
-
900,
|
|
323
|
-
),
|
|
324
|
-
),
|
|
325
|
-
)
|
|
326
|
-
);
|
|
327
|
-
|
|
328
|
-
/// @type {Map}
|
|
329
|
-
/// @requires {Map} $bootstrap-base-button-dark
|
|
330
|
-
/// @requires {Map} $bootstrap-flat-button
|
|
331
|
-
$bootstrap-flat-button-dark: extend($bootstrap-base-button-dark, $bootstrap-flat-button);
|
|
332
|
-
|
|
333
400
|
/// Generates a dark bootstrap button schema.
|
|
334
401
|
/// @type {Map}
|
|
335
402
|
/// @requires {Map} $bootstrap-flat-button
|
|
@@ -337,8 +404,8 @@ $bootstrap-flat-button-dark: extend($bootstrap-base-button-dark, $bootstrap-flat
|
|
|
337
404
|
/// @requires {Map} $bootstrap-contained-button
|
|
338
405
|
/// @requires {Map} $bootstrap-fab-button
|
|
339
406
|
$dark-bootstrap-button: (
|
|
340
|
-
flat: $bootstrap-flat-button
|
|
341
|
-
outlined: $bootstrap-outlined-button
|
|
407
|
+
flat: $bootstrap-flat-button,
|
|
408
|
+
outlined: $bootstrap-outlined-button,
|
|
342
409
|
contained: $bootstrap-contained-button,
|
|
343
410
|
fab: $bootstrap-fab-button,
|
|
344
411
|
);
|
|
@@ -386,6 +453,7 @@ $indigo-flat-button-dark: extend(
|
|
|
386
453
|
/// @prop {Color} foreground [color: ('gray', 900)] - The idle text color of a contained button.
|
|
387
454
|
/// @prop {Color} hover-foreground [color: ('gray', 900)] - The hover text color of a contained button.
|
|
388
455
|
/// @prop {Color} focus-foreground [color: ('gray', 900)] - The focus text color of a contained button.
|
|
456
|
+
/// @prop {Map} focus-hover-foreground [color: ('gray', 900)] - The text color on focus hovered state of the button.
|
|
389
457
|
/// @prop {Color} focus-visible-foreground [color: ('gray', 900)] - The focus-visible text color of a contained button.
|
|
390
458
|
/// @requires {Map} $indigo-base-button-dark
|
|
391
459
|
/// @requires {Map} $indigo-contained-button
|
|
@@ -411,6 +479,12 @@ $indigo-contained-button-dark: extend(
|
|
|
411
479
|
900,
|
|
412
480
|
),
|
|
413
481
|
),
|
|
482
|
+
focus-hover-foreground: (
|
|
483
|
+
color: (
|
|
484
|
+
'gray',
|
|
485
|
+
900,
|
|
486
|
+
),
|
|
487
|
+
),
|
|
414
488
|
focus-visible-foreground: (
|
|
415
489
|
color: (
|
|
416
490
|
'gray',
|
|
@@ -458,6 +532,7 @@ $indigo-outlined-button-dark: extend(
|
|
|
458
532
|
/// @prop {Color} foreground [color: ('gray', 900) - The idle text color of a fab button.
|
|
459
533
|
/// @prop {Color} hover-foreground [color: ('gray', 900)] - The hover text color of a fab button.
|
|
460
534
|
/// @prop {Color} focus-foreground [color: ('gray', 900)] - The focus text color of a fab button.
|
|
535
|
+
/// @prop {Map} focus-hover-foreground [color: ('gray', 900)] - The text color on focus hovered state of the button.
|
|
461
536
|
/// @prop {Color} focus-visible-foreground [color: ('gray', 900)] - The focus-visible text color of a fab button.
|
|
462
537
|
/// @requires {Map} $indigo-base-button-dark
|
|
463
538
|
/// @requires {Map} $indigo-fab-button
|
|
@@ -483,6 +558,12 @@ $indigo-fab-button-dark: extend(
|
|
|
483
558
|
900,
|
|
484
559
|
),
|
|
485
560
|
),
|
|
561
|
+
focus-hover-foreground: (
|
|
562
|
+
color: (
|
|
563
|
+
'gray',
|
|
564
|
+
900,
|
|
565
|
+
),
|
|
566
|
+
),
|
|
486
567
|
focus-visible-foreground: (
|
|
487
568
|
color: (
|
|
488
569
|
'gray',
|