material-inspired-component-library 7.0.2 → 8.0.1
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/.claude/settings.local.json +14 -0
- package/CLAUDE.md +53 -0
- package/README.md +6 -0
- package/components/accordion/README.md +6 -3
- package/components/alert/index.scss +5 -0
- package/components/appbar/index.scss +12 -0
- package/components/badge/index.scss +2 -0
- package/components/bottomsheet/index.scss +9 -0
- package/components/button/index.scss +33 -6
- package/components/card/README.md +4 -0
- package/components/card/index.scss +182 -150
- package/components/checkbox/index.scss +28 -6
- package/components/datepicker/index.scss +13 -0
- package/components/datepicker/index.ts +9 -9
- package/components/dialog/index.scss +21 -6
- package/components/iconbutton/index.scss +28 -6
- package/components/list/README.md +191 -32
- package/components/list/index.scss +281 -190
- package/components/list/index.ts +100 -100
- package/components/menu/README.md +199 -10
- package/components/menu/index.scss +242 -47
- package/components/menu/index.ts +74 -37
- package/components/navigationrail/index.scss +91 -68
- package/components/progressindicator/README.md +88 -0
- package/components/progressindicator/index.scss +225 -0
- package/components/progressindicator/index.ts +77 -0
- package/components/radio/index.scss +24 -6
- package/components/select/README.md +42 -5
- package/components/select/index.scss +45 -79
- package/components/shape/README.md +103 -0
- package/components/shape/_paths.generated.scss +64 -0
- package/components/shape/index.scss +66 -0
- package/components/shape/master.scss +28 -0
- package/components/sidesheet/index.scss +11 -0
- package/components/slider/index.scss +13 -0
- package/components/snackbar/index.scss +12 -0
- package/components/stepper/index.scss +3 -5
- package/components/switch/index.scss +9 -0
- package/components/textfield/index.scss +10 -1
- package/components/textfield/index.ts +2 -2
- package/components/timepicker/index.scss +16 -0
- package/dist/alert.css +1 -1
- package/dist/appbar.css +1 -1
- package/dist/badge.css +1 -1
- package/dist/bottomsheet.css +1 -1
- package/dist/button.css +1 -1
- package/dist/card.css +1 -1
- package/dist/checkbox.css +1 -1
- package/dist/components/list/index.d.ts +2 -2
- package/dist/components/progressindicator/index.d.ts +6 -0
- package/dist/datepicker.css +1 -1
- package/dist/dialog.css +1 -1
- package/dist/divider.css +1 -1
- package/dist/foundations/form/index.js +1 -0
- package/dist/foundations.css +1 -1
- package/dist/iconbutton.css +1 -1
- package/dist/layout.css +1 -1
- package/dist/list.css +1 -1
- package/dist/menu.css +1 -1
- package/dist/micl.css +1 -1
- package/dist/micl.js +1 -1
- package/dist/navigationrail.css +1 -1
- package/dist/progressindicator.css +1 -0
- package/dist/progressindicator.js +1 -0
- package/dist/radio.css +1 -1
- package/dist/select.css +1 -1
- package/dist/shape.css +1 -0
- package/dist/shape.js +1 -0
- package/dist/sidesheet.css +1 -1
- package/dist/slider.css +1 -1
- package/dist/snackbar.css +1 -1
- package/dist/stepper.css +1 -1
- package/dist/switch.css +1 -1
- package/dist/textfield.css +1 -1
- package/dist/timepicker.css +1 -1
- package/docs/accordion.html +24 -24
- package/docs/bottomsheet.html +1 -4
- package/docs/datepicker.html +21 -21
- package/docs/dialog.html +1 -1
- package/docs/index.html +5 -4
- package/docs/list.html +38 -22
- package/docs/menu.html +246 -41
- package/docs/micl.css +1 -1
- package/docs/micl.js +1 -1
- package/docs/progressindicator.html +288 -0
- package/docs/select.html +68 -19
- package/docs/shape.css +1 -0
- package/docs/shape.js +1 -0
- package/docs/shapes.html +150 -0
- package/foundations/index.scss +0 -1
- package/foundations/layout/README.md +1 -1
- package/foundations/layout/index.scss +3 -0
- package/micl.ts +8 -1
- package/package.json +6 -4
- package/styles/README.md +90 -12
- package/styles/elevation.scss +46 -13
- package/styles/motion.scss +51 -47
- package/styles/shapes.scss +41 -26
- package/styles/statelayer.scss +93 -36
- package/styles/typography.scss +120 -322
- package/styles.scss +10 -6
- package/tools/shapes/check.mjs +42 -0
- package/tools/shapes/generate.mjs +834 -0
- package/webpack.config.js +16 -1
package/docs/shapes.html
ADDED
|
@@ -0,0 +1,150 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<meta name="description" content="Demonstrating MICL Shapes">
|
|
7
|
+
<title>MICL Shapes</title>
|
|
8
|
+
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
9
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
10
|
+
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap">
|
|
11
|
+
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=content_copy,dark_mode,home&display=block">
|
|
12
|
+
<link rel="stylesheet" href="themes/airblue/theme.css" id="theme-link">
|
|
13
|
+
<link rel="stylesheet" href="micl.css">
|
|
14
|
+
<link rel="stylesheet" href="shape.css">
|
|
15
|
+
<link rel="stylesheet" href="docs.css">
|
|
16
|
+
<style>
|
|
17
|
+
figure {
|
|
18
|
+
margin: 24px;
|
|
19
|
+
}
|
|
20
|
+
.shape-primary {
|
|
21
|
+
--micl-shape-background-color: var(--md-sys-color-primary-container);
|
|
22
|
+
block-size: 96px;
|
|
23
|
+
inline-size: 96px;
|
|
24
|
+
}
|
|
25
|
+
</style>
|
|
26
|
+
</head>
|
|
27
|
+
<body class="micl-window light">
|
|
28
|
+
<main class="micl-body micl-body--stacked-to-large">
|
|
29
|
+
<section class="micl-pane">
|
|
30
|
+
<header class="micl-appbar">
|
|
31
|
+
<a href="index.html" class="micl-appbar__leading-icon micl-link micl-iconbutton-standard-s" aria-label="Navigate to the main MICL Showcase page">
|
|
32
|
+
<span class="material-symbols-outlined" aria-hidden="true">home</span>
|
|
33
|
+
</a>
|
|
34
|
+
<div class="micl-appbar__headline micl-appbar__headline--center">
|
|
35
|
+
<h1>Shapes</h1>
|
|
36
|
+
<p class="micl-appbar__subtitle">Showcasing MICL shapes</p>
|
|
37
|
+
</div>
|
|
38
|
+
<div id="settings-placeholder" class="micl-appbar__trailing"></div>
|
|
39
|
+
</header>
|
|
40
|
+
|
|
41
|
+
<div class="micl-pane__columns micl-pane__columns--stacked-to-expanded">
|
|
42
|
+
<div class="micl-pane__column">
|
|
43
|
+
<div class="micl-card-elevated">
|
|
44
|
+
<div class="micl-card__content" style="display:flex">
|
|
45
|
+
<svg class="micl-shape micl-shape-square" viewBox="-10 0 120 100" style="inline-size:120px;block-size:100px"><path /></svg>
|
|
46
|
+
<svg class="micl-shape micl-shape-square" viewBox="-10 0 120 100" style="inline-size:120px;block-size:100px">
|
|
47
|
+
<defs>
|
|
48
|
+
<pattern id="photo-1" patternUnits="userSpaceOnUse" x="-10" y="0" width="120" height="100">
|
|
49
|
+
<image href="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c0/A_Brouhot_car_in_Paris%2C_1910.jpg/330px-A_Brouhot_car_in_Paris%2C_1910.jpg?utm_source=commons.wikimedia.org&utm_campaign=index&utm_content=thumbnail" width="120" height="100" preserveAspectRatio="xMidYMid slice" />
|
|
50
|
+
</pattern>
|
|
51
|
+
</defs>
|
|
52
|
+
<path fill="url(#photo-1)" />
|
|
53
|
+
</svg>
|
|
54
|
+
|
|
55
|
+
<div style="display:flex;gap:8px;align-self:center;flex-wrap:wrap">
|
|
56
|
+
<button type="button" data-target="circle" class="micl-button-outlined-s">Circle</button>
|
|
57
|
+
<button type="button" data-target="square" class="micl-button-outlined-s">Square</button>
|
|
58
|
+
<button type="button" data-target="slanted" class="micl-button-outlined-s">Slanted</button>
|
|
59
|
+
<button type="button" data-target="arch" class="micl-button-outlined-s">Arch</button>
|
|
60
|
+
<button type="button" data-target="semicircle" class="micl-button-outlined-s">Semi-circle</button>
|
|
61
|
+
<button type="button" data-target="oval" class="micl-button-outlined-s">Oval</button>
|
|
62
|
+
<button type="button" data-target="pill" class="micl-button-outlined-s">Pill</button>
|
|
63
|
+
<button type="button" data-target="triangle" class="micl-button-outlined-s">Triangle</button>
|
|
64
|
+
<button type="button" data-target="arrow" class="micl-button-outlined-s">Arrow</button>
|
|
65
|
+
<button type="button" data-target="fan" class="micl-button-outlined-s">Fan</button>
|
|
66
|
+
<button type="button" data-target="diamond" class="micl-button-outlined-s">Diamond</button>
|
|
67
|
+
<button type="button" data-target="clamshell" class="micl-button-outlined-s">Clamshell</button>
|
|
68
|
+
<button type="button" data-target="pentagon" class="micl-button-outlined-s">Pentagon</button>
|
|
69
|
+
<button type="button" data-target="gem" class="micl-button-outlined-s">Gem</button>
|
|
70
|
+
<button type="button" data-target="very-sunny" class="micl-button-outlined-s">Very-sunny</button>
|
|
71
|
+
<button type="button" data-target="sunny" class="micl-button-outlined-s">Sunny</button>
|
|
72
|
+
<button type="button" data-target="cookie-4" class="micl-button-outlined-s">4-cookie</button>
|
|
73
|
+
<button type="button" data-target="cookie-6" class="micl-button-outlined-s">6-cookie</button>
|
|
74
|
+
<button type="button" data-target="cookie-7" class="micl-button-outlined-s">7-cookie</button>
|
|
75
|
+
<button type="button" data-target="cookie-9" class="micl-button-outlined-s">9-cookie</button>
|
|
76
|
+
<button type="button" data-target="cookie-12" class="micl-button-outlined-s">12-cookie</button>
|
|
77
|
+
<button type="button" data-target="clover-4" class="micl-button-outlined-s">4-leaf clover</button>
|
|
78
|
+
<button type="button" data-target="clover-8" class="micl-button-outlined-s">8-leaf clover</button>
|
|
79
|
+
<button type="button" data-target="burst" class="micl-button-outlined-s">Burst</button>
|
|
80
|
+
<button type="button" data-target="soft-burst" class="micl-button-outlined-s">Soft-burst</button>
|
|
81
|
+
<button type="button" data-target="boom" class="micl-button-outlined-s">Boom</button>
|
|
82
|
+
<button type="button" data-target="soft-boom" class="micl-button-outlined-s">Soft-boom</button>
|
|
83
|
+
<button type="button" data-target="flower" class="micl-button-outlined-s">Flower</button>
|
|
84
|
+
<button type="button" data-target="puffy" class="micl-button-outlined-s">Puffy</button>
|
|
85
|
+
<button type="button" data-target="puffy-diamond" class="micl-button-outlined-s">Puffy-diamond</button>
|
|
86
|
+
<button type="button" data-target="ghost-ish" class="micl-button-outlined-s">Ghost-ish</button>
|
|
87
|
+
<button type="button" data-target="pixel-circle" class="micl-button-outlined-s">Pixel-circle</button>
|
|
88
|
+
<button type="button" data-target="pixel-triangle" class="micl-button-outlined-s">Pixel-triangle</button>
|
|
89
|
+
<button type="button" data-target="bun" class="micl-button-outlined-s">Bun</button>
|
|
90
|
+
<button type="button" data-target="heart" class="micl-button-outlined-s">Heart</button>
|
|
91
|
+
</div>
|
|
92
|
+
</div>
|
|
93
|
+
</div>
|
|
94
|
+
</div>
|
|
95
|
+
</div>
|
|
96
|
+
</section>
|
|
97
|
+
<section class="micl-pane">
|
|
98
|
+
<div class="micl-card-filled" style="margin-top:8px">
|
|
99
|
+
<div class="micl-card__headline-s">
|
|
100
|
+
<h2>Code example</h2>
|
|
101
|
+
<button type="button" id="copycode" class="micl-iconbutton-standard-s material-symbols-outlined" aria-label="Copy code">content_copy</button>
|
|
102
|
+
</div>
|
|
103
|
+
<div class="micl-card__content docs-code">
|
|
104
|
+
<pre tabindex="-1"><code><hr class="micl-divider"></code></pre>
|
|
105
|
+
</div>
|
|
106
|
+
</div>
|
|
107
|
+
</section>
|
|
108
|
+
</main>
|
|
109
|
+
|
|
110
|
+
<script src="micl.js"></script>
|
|
111
|
+
<script src="docs.js"></script>
|
|
112
|
+
<script>
|
|
113
|
+
const SHAPES = [
|
|
114
|
+
'circle', 'square', 'slanted', 'arch', 'semicircle',
|
|
115
|
+
'oval', 'pill', 'triangle', 'arrow', 'fan',
|
|
116
|
+
'diamond', 'clamshell', 'pentagon', 'gem', 'very-sunny',
|
|
117
|
+
'sunny', 'cookie-4', 'cookie-6', 'cookie-7', 'cookie-9',
|
|
118
|
+
'cookie-12', 'clover-4', 'clover-8', 'burst', 'soft-burst',
|
|
119
|
+
'boom', 'soft-boom', 'flower', 'puffy', 'puffy-diamond',
|
|
120
|
+
'ghost-ish', 'pixel-circle', 'pixel-triangle', 'bun', 'heart'
|
|
121
|
+
];
|
|
122
|
+
|
|
123
|
+
document.querySelector('.micl-shape').addEventListener('morph', event =>
|
|
124
|
+
{
|
|
125
|
+
const el = event.currentTarget;
|
|
126
|
+
el.style.setProperty('--morph-duration', `${event.detail.duration}ms`);
|
|
127
|
+
if (event.detail.easing) {
|
|
128
|
+
el.style.setProperty('--morph-easing', event.detail.easing);
|
|
129
|
+
}
|
|
130
|
+
SHAPES.forEach(shape => el.classList.remove(`micl-shape-${shape}`));
|
|
131
|
+
el.classList.add(`micl-shape-${event.detail.shape}`);
|
|
132
|
+
});
|
|
133
|
+
|
|
134
|
+
document.querySelectorAll('button[data-target]').forEach(button =>
|
|
135
|
+
{
|
|
136
|
+
button.addEventListener('click', () => {
|
|
137
|
+
document.querySelectorAll('.micl-shape').forEach(el => {
|
|
138
|
+
el.dispatchEvent(new CustomEvent('morph', {
|
|
139
|
+
detail: {
|
|
140
|
+
shape: button.dataset.target,
|
|
141
|
+
duration: 2000,
|
|
142
|
+
easing: 'cubic-bezier(0.34, 1.56, 0.64, 1)'
|
|
143
|
+
}
|
|
144
|
+
}));
|
|
145
|
+
});
|
|
146
|
+
});
|
|
147
|
+
});
|
|
148
|
+
</script>
|
|
149
|
+
</body>
|
|
150
|
+
</html>
|
package/foundations/index.scss
CHANGED
|
@@ -50,7 +50,7 @@ For **spatial environments** where the main layout parts are visually separated,
|
|
|
50
50
|
```
|
|
51
51
|
|
|
52
52
|
### Navigation region
|
|
53
|
-
Use the dedicated [Navigation Rail](
|
|
53
|
+
Use the dedicated [Navigation Rail](../../components/navigationrail/README.md) component to display the main destinations in your application.
|
|
54
54
|
|
|
55
55
|
### Body region
|
|
56
56
|
The body region holds the majority of your app's content. Use the `<main>` element with the `micl-body` class to define this area.
|
|
@@ -21,6 +21,8 @@
|
|
|
21
21
|
|
|
22
22
|
@use '../../styles/shapes';
|
|
23
23
|
|
|
24
|
+
@include shapes.corner('medium');
|
|
25
|
+
|
|
24
26
|
$md-sys-window-compact-max: 599px;
|
|
25
27
|
$md-sys-window-medium-min: 600px;
|
|
26
28
|
$md-sys-window-medium-max: 839px;
|
|
@@ -96,6 +98,7 @@ $md-sys-pane-spacer: 24px;
|
|
|
96
98
|
}
|
|
97
99
|
}
|
|
98
100
|
.micl-body {
|
|
101
|
+
box-sizing: border-box;
|
|
99
102
|
display: flex;
|
|
100
103
|
flex-direction: row;
|
|
101
104
|
gap: var(--md-sys-comp-margin, 8px) var(--md-sys-layout-pane-spacer);
|
package/micl.ts
CHANGED
|
@@ -26,6 +26,7 @@ import _datepicker, { datepickerSelector } from './components/datepicker';
|
|
|
26
26
|
import _list, { listSelector } from './components/list';
|
|
27
27
|
import _menu, { menuSelector } from './components/menu';
|
|
28
28
|
import _navigationrail, { navigationrailSelector } from './components/navigationrail';
|
|
29
|
+
import _progressindicator, { progressindicatorSelector } from './components/progressindicator';
|
|
29
30
|
import _slider, { sliderSelector } from './components/slider';
|
|
30
31
|
import _snackbar, { snackbarSelector } from './components/snackbar';
|
|
31
32
|
import _stepper, { stepperSelector } from './components/stepper';
|
|
@@ -58,6 +59,7 @@ export default (() =>
|
|
|
58
59
|
[listSelector] : { component: _list, type: HTMLElement },
|
|
59
60
|
[menuSelector] : { component: _menu, type: HTMLElement },
|
|
60
61
|
[navigationrailSelector]: { component: _navigationrail, type: HTMLElement },
|
|
62
|
+
[progressindicatorSelector]: { component: _progressindicator, type: HTMLProgressElement },
|
|
61
63
|
[selectSelector] : { component: _textfield, type: HTMLSelectElement },
|
|
62
64
|
[sliderSelector] : { component: _slider, type: HTMLInputElement },
|
|
63
65
|
[snackbarSelector] : { component: _snackbar, type: HTMLElement },
|
|
@@ -95,7 +97,7 @@ export default (() =>
|
|
|
95
97
|
const initializeComponents = (parent: HTMLDocument | HTMLElement): void =>
|
|
96
98
|
{
|
|
97
99
|
parent.querySelectorAll<HTMLElement>(selector).forEach(initializeComponent);
|
|
98
|
-
parent.querySelectorAll<HTMLElement>('[class*="micl-"]').forEach(element =>
|
|
100
|
+
parent.querySelectorAll<HTMLElement>('[class*="micl-"], [class*="micl-"] > summary').forEach(element =>
|
|
99
101
|
{
|
|
100
102
|
if (rippleInitialized.has(element)) return;
|
|
101
103
|
|
|
@@ -111,10 +113,15 @@ export default (() =>
|
|
|
111
113
|
element.style.setProperty('--micl-x', `${e.clientX - r.left}px`);
|
|
112
114
|
element.style.setProperty('--micl-y', `${e.clientY - r.top}px`);
|
|
113
115
|
|
|
116
|
+
element.classList.remove('micl-rippling');
|
|
117
|
+
void element.offsetWidth;
|
|
118
|
+
element.classList.add('micl-rippling');
|
|
119
|
+
|
|
114
120
|
const cleanup = (ev: AnimationEvent): void =>
|
|
115
121
|
{
|
|
116
122
|
if (ev.animationName !== 'micl-ripple') return;
|
|
117
123
|
|
|
124
|
+
element.classList.remove('micl-rippling');
|
|
118
125
|
element.style.removeProperty('--micl-x');
|
|
119
126
|
element.style.removeProperty('--micl-y');
|
|
120
127
|
element.removeEventListener('animationend', cleanup);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "material-inspired-component-library",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "8.0.1",
|
|
4
4
|
"description": "The Material-Inspired Component Library (MICL) offers a collection of beautifully crafted components leveraging native HTML markup, designed to align with the Material Design 3 guidelines.",
|
|
5
5
|
"author": "MICL Hermana <micl.hermana@proton.me> (https://github.com/henkpb/micl)",
|
|
6
6
|
"license": "MIT",
|
|
@@ -50,11 +50,13 @@
|
|
|
50
50
|
"main": "dist/micl.js",
|
|
51
51
|
"types": "dist/micl.d.ts",
|
|
52
52
|
"scripts": {
|
|
53
|
-
"build": "webpack"
|
|
53
|
+
"build": "webpack",
|
|
54
|
+
"gen:shapes": "node tools/shapes/generate.mjs",
|
|
55
|
+
"check:shapes": "node tools/shapes/check.mjs"
|
|
54
56
|
},
|
|
55
57
|
"sideEffects": false,
|
|
56
58
|
"devDependencies": {
|
|
57
|
-
"autoprefixer": "^10.
|
|
59
|
+
"autoprefixer": "^10.5",
|
|
58
60
|
"css-loader": "^7.1",
|
|
59
61
|
"extract-loader": "^5.1",
|
|
60
62
|
"file-loader": "^6.2",
|
|
@@ -65,7 +67,7 @@
|
|
|
65
67
|
"sass-loader": "^16.0",
|
|
66
68
|
"ts-loader": "^9.5",
|
|
67
69
|
"typescript": "^6.0",
|
|
68
|
-
"webpack": "^5.
|
|
70
|
+
"webpack": "^5.106",
|
|
69
71
|
"webpack-cli": "^7.0"
|
|
70
72
|
}
|
|
71
73
|
}
|
package/styles/README.md
CHANGED
|
@@ -1,14 +1,24 @@
|
|
|
1
1
|
# Styles
|
|
2
2
|
This guide covers the fundamental visual settings used by components, all based on the [Material Design 3 Styles](https://m3.material.io/styles) specifications.
|
|
3
3
|
|
|
4
|
+
Each style-topic ships as a Sass partial with the same opt-in pattern: `@use ... with ($master: true)` installs the full set of tokens — that is what the master CSS bundle does. The default mode exposes mixins that emit only the tokens you ask for, so per-component bundles (and any custom subset bundle you build yourself) carry only the tokens they actually reference.
|
|
5
|
+
|
|
4
6
|
## Elevation
|
|
5
7
|
Elevation represents the distance between surfaces on the z-axis, creating a sense of depth and hierarchy. It's a realization of the [Material Design 3 Elevation](https://m3.material.io/styles/elevation/overview) system.
|
|
6
8
|
|
|
7
9
|
### CSS
|
|
8
|
-
Import the elevation styles into your project:
|
|
10
|
+
Import the elevation styles into your project. To install all six elevation levels at once, configure the module in master mode:
|
|
11
|
+
|
|
12
|
+
```CSS
|
|
13
|
+
@use "material-inspired-component-library/styles/elevation" with ($master: true);
|
|
14
|
+
```
|
|
15
|
+
|
|
16
|
+
To install only specific levels (useful when you build your own subset bundle), use the `level` mixin:
|
|
9
17
|
|
|
10
18
|
```CSS
|
|
11
19
|
@use "material-inspired-component-library/styles/elevation";
|
|
20
|
+
@include elevation.level(1);
|
|
21
|
+
@include elevation.level(2);
|
|
12
22
|
```
|
|
13
23
|
|
|
14
24
|
### Customizations
|
|
@@ -23,30 +33,67 @@ You can customize elevation levels by overriding their global CSS variables.
|
|
|
23
33
|
</div>
|
|
24
34
|
```
|
|
25
35
|
|
|
26
|
-
|
|
36
|
+
|
|
27
37
|
## Motion
|
|
28
38
|
Motion brings your UI to life, making it expressive and intuitive to use. The motion styles are based on the [Material Design 3 Motion](https://m3.material.io/styles/motion/overview/how-it-works) guidelines.
|
|
29
39
|
|
|
30
40
|
### CSS
|
|
31
|
-
Import the motion styles into your project:
|
|
41
|
+
Import the motion styles into your project. To install all sixteen duration tokens at once, configure the module in master mode:
|
|
42
|
+
|
|
43
|
+
```CSS
|
|
44
|
+
@use "material-inspired-component-library/styles/motion" with ($master: true);
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
To install only specific durations, use the `duration` mixin:
|
|
48
|
+
|
|
49
|
+
```CSS
|
|
50
|
+
@use "material-inspired-component-library/styles/motion";
|
|
51
|
+
@include motion.duration('short3');
|
|
52
|
+
@include motion.duration('long4');
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
The easing curves (`$md-sys-motion-easing-emphasized`, `$md-sys-motion-easing-standard` and its accelerate/decelerate variants, the expressive/standard fast-default-slow × spatial-effects curves, etc.) are exposed as **Sass variables**, not CSS custom properties. Reference them through interpolation in your transitions:
|
|
32
56
|
|
|
33
57
|
```CSS
|
|
34
58
|
@use "material-inspired-component-library/styles/motion";
|
|
59
|
+
@include motion.duration('short3');
|
|
60
|
+
|
|
61
|
+
.my-component {
|
|
62
|
+
transition: opacity var(--md-sys-motion-duration-short3) motion.$md-sys-motion-easing-standard;
|
|
63
|
+
}
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
### Customizations
|
|
67
|
+
You can customize duration tokens by overriding their global CSS variables.
|
|
68
|
+
|
|
69
|
+
**Example: Slowing the long4 duration:**
|
|
70
|
+
|
|
71
|
+
```HTML
|
|
72
|
+
<div style="--md-sys-motion-duration-long4: 800ms">
|
|
73
|
+
</div>
|
|
35
74
|
```
|
|
36
75
|
|
|
37
|
-
|
|
38
|
-
##
|
|
39
|
-
|
|
76
|
+
|
|
77
|
+
## Shape corner-radius tokens
|
|
78
|
+
Shape tokens define the corner radii used across every component, following the [Material Design 3 Shape](https://m3.material.io/styles/shape/overview-principles) principles.
|
|
40
79
|
|
|
41
80
|
### CSS
|
|
42
|
-
|
|
81
|
+
Each component opts into the corner tokens it actually uses, so when you `@use` a component, the matching corner tokens come along automatically — typically there is nothing to opt into yourself. To install **all** corner tokens at once (useful when you build your own subset bundle), configure the module in master mode:
|
|
82
|
+
|
|
83
|
+
```CSS
|
|
84
|
+
@use "material-inspired-component-library/styles/shapes" with ($master: true);
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
To install only specific corner tokens, use the `corner` mixin:
|
|
43
88
|
|
|
44
89
|
```CSS
|
|
45
90
|
@use "material-inspired-component-library/styles/shapes";
|
|
91
|
+
@include shapes.corner('medium');
|
|
92
|
+
@include shapes.corner('full');
|
|
46
93
|
```
|
|
47
94
|
|
|
48
95
|
### Customizations
|
|
49
|
-
|
|
96
|
+
Corner radii are exposed as CSS custom properties and can be overridden anywhere in the cascade.
|
|
50
97
|
|
|
51
98
|
**Example: Changing the corner radius of a card:**
|
|
52
99
|
|
|
@@ -57,15 +104,27 @@ You can customize a component's shape by overriding its global CSS variables, su
|
|
|
57
104
|
</div>
|
|
58
105
|
```
|
|
59
106
|
|
|
60
|
-
|
|
107
|
+
The decorative shape gallery (heart, cookie, clover, sunny, …) is **not** part of these tokens. It is shipped as an opt-in component — see the [Shape Component](../components/shape/README.md).
|
|
108
|
+
|
|
109
|
+
|
|
61
110
|
## State layers
|
|
62
111
|
State layers are visual overlays that communicate the interaction status of a component, such as when it's hovered over or pressed. These are based on [Material Design 3 States](https://m3.material.io/foundations/interaction/states/overview).
|
|
63
112
|
|
|
64
113
|
### CSS
|
|
65
|
-
Import the state layer styles into your project:
|
|
114
|
+
Import the state layer styles into your project. To install every state token and ripple parameter, configure the module in master mode:
|
|
115
|
+
|
|
116
|
+
```CSS
|
|
117
|
+
@use "material-inspired-component-library/styles/statelayer" with ($master: true);
|
|
118
|
+
```
|
|
119
|
+
|
|
120
|
+
To install only the parts you need, use the three opt-in mixins:
|
|
66
121
|
|
|
67
122
|
```CSS
|
|
68
123
|
@use "material-inspired-component-library/styles/statelayer";
|
|
124
|
+
@include statelayer.token('hover-state-layer-opacity');
|
|
125
|
+
@include statelayer.token('focus-state-layer-opacity');
|
|
126
|
+
@include statelayer.property; // typed-property registrations for animatable color/opacity
|
|
127
|
+
@include statelayer.keyframes; // ripple @keyframes (only needed for the spreading ripple effect)
|
|
69
128
|
```
|
|
70
129
|
|
|
71
130
|
### Customizations
|
|
@@ -78,15 +137,34 @@ Customize the appearance of state layers by overriding their global CSS variable
|
|
|
78
137
|
</div>
|
|
79
138
|
```
|
|
80
139
|
|
|
81
|
-
|
|
140
|
+
|
|
82
141
|
## Typography
|
|
83
142
|
Typography is the foundation of text styling. The typography styles in this library are based on the [Material Design 3 Typography](https://m3.material.io/styles/typography/overview) specifications.
|
|
84
143
|
|
|
85
144
|
### CSS
|
|
86
|
-
Import the typography styles into your project:
|
|
145
|
+
Import the typography styles into your project. The typeface and weight references are always installed. To additionally install all 31 typescale token sets, the narrow-typeface tracking overrides, and the `.md-sys-typescale-*` utility classes at once, configure the module in master mode:
|
|
146
|
+
|
|
147
|
+
```CSS
|
|
148
|
+
@use "material-inspired-component-library/styles/typography" with ($master: true);
|
|
149
|
+
```
|
|
150
|
+
|
|
151
|
+
To install only specific typescales, use the `scale` mixin:
|
|
87
152
|
|
|
88
153
|
```CSS
|
|
89
154
|
@use "material-inspired-component-library/styles/typography";
|
|
155
|
+
@include typography.scale('body-large');
|
|
156
|
+
@include typography.scale('title-medium');
|
|
157
|
+
```
|
|
158
|
+
|
|
159
|
+
There is also one selector-scope mixin per typescale (`display-large`, `display-medium`, …, `emphasized-label-small`) that emits the five `font-family`/`font-size`/`line-height`/`font-weight`/`letter-spacing` declarations at once, so you can apply a typescale to your own element without naming each variable:
|
|
160
|
+
|
|
161
|
+
```CSS
|
|
162
|
+
@use "material-inspired-component-library/styles/typography";
|
|
163
|
+
@include typography.scale('body-large');
|
|
164
|
+
|
|
165
|
+
.my-paragraph {
|
|
166
|
+
@include typography.body-large;
|
|
167
|
+
}
|
|
90
168
|
```
|
|
91
169
|
|
|
92
170
|
### Customizations
|
package/styles/elevation.scss
CHANGED
|
@@ -19,18 +19,51 @@
|
|
|
19
19
|
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
20
20
|
// SOFTWARE.
|
|
21
21
|
|
|
22
|
-
|
|
23
|
-
$md-sys-elevation-level1: rgba(0, 0, 0, 0.2) 0px 2px 1px -1px, rgba(0, 0, 0, 0.14) 0px 1px 1px 0px, rgba(0, 0, 0, 0.12) 0px 1px 3px 0px;
|
|
24
|
-
$md-sys-elevation-level2: rgba(0, 0, 0, 0.2) 0px 3px 3px -2px, rgba(0, 0, 0, 0.14) 0px 3px 4px 0px, rgba(0, 0, 0, 0.12) 0px 1px 8px 0px;
|
|
25
|
-
$md-sys-elevation-level3: rgba(0, 0, 0, 0.2) 0px 3px 5px -1px, rgba(0, 0, 0, 0.14) 0px 6px 10px 0px, rgba(0, 0, 0, 0.12) 0px 1px 18px 0px;
|
|
26
|
-
$md-sys-elevation-level4: rgba(0, 0, 0, 0.2) 0px 5px 5px -3px, rgba(0, 0, 0, 0.14) 0px 8px 10px 1px, rgba(0, 0, 0, 0.12) 0px 3px 14px 2px;
|
|
27
|
-
$md-sys-elevation-level5: rgba(0, 0, 0, 0.2) 0px 7px 8px -4px, rgba(0, 0, 0, 0.14) 0px 12px 17px 2px, rgba(0, 0, 0, 0.12) 0px 5px 22px 4px;
|
|
22
|
+
@use 'sass:map';
|
|
28
23
|
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
24
|
+
//
|
|
25
|
+
// Set $master: true (via @use ... with) to install all six levels in a single :root block —
|
|
26
|
+
// used by the master bundle. When false (default), components opt into individual levels via
|
|
27
|
+
// @include level($n), so per-component CSS bundles only carry the levels they actually reference.
|
|
28
|
+
//
|
|
29
|
+
$master: false !default;
|
|
30
|
+
|
|
31
|
+
$_levels: (
|
|
32
|
+
0: none,
|
|
33
|
+
1: (
|
|
34
|
+
rgb(from var(--md-sys-color-shadow) r g b / 0.3) 0 1px 2px 0,
|
|
35
|
+
rgb(from var(--md-sys-color-shadow) r g b / 0.15) 0 1px 3px 1px
|
|
36
|
+
),
|
|
37
|
+
2: (
|
|
38
|
+
rgb(from var(--md-sys-color-shadow) r g b / 0.3) 0 1px 2px 0,
|
|
39
|
+
rgb(from var(--md-sys-color-shadow) r g b / 0.15) 0 2px 6px 2px
|
|
40
|
+
),
|
|
41
|
+
3: (
|
|
42
|
+
rgb(from var(--md-sys-color-shadow) r g b / 0.3) 0 1px 3px 0,
|
|
43
|
+
rgb(from var(--md-sys-color-shadow) r g b / 0.15) 0 4px 8px 3px
|
|
44
|
+
),
|
|
45
|
+
4: (
|
|
46
|
+
rgb(from var(--md-sys-color-shadow) r g b / 0.3) 0 2px 3px 0,
|
|
47
|
+
rgb(from var(--md-sys-color-shadow) r g b / 0.15) 0 6px 10px 4px
|
|
48
|
+
),
|
|
49
|
+
5: (
|
|
50
|
+
rgb(from var(--md-sys-color-shadow) r g b / 0.3) 0 4px 4px 0,
|
|
51
|
+
rgb(from var(--md-sys-color-shadow) r g b / 0.15) 0 8px 12px 6px
|
|
52
|
+
)
|
|
53
|
+
);
|
|
54
|
+
|
|
55
|
+
@if $master {
|
|
56
|
+
body {
|
|
57
|
+
@each $n, $v in $_levels {
|
|
58
|
+
--md-sys-elevation-level#{$n}: #{$v};
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
@mixin level($n) {
|
|
64
|
+
@if not $master {
|
|
65
|
+
body {
|
|
66
|
+
--md-sys-elevation-level#{$n}: #{map.get($_levels, $n)};
|
|
67
|
+
}
|
|
68
|
+
}
|
|
36
69
|
}
|