material-inspired-component-library 1.0.0

package/docs/themes/olivegreen/theme.css

@@ -0,0 +1,306 @@
+.light {
+  --md-sys-color-primary: rgb(90 99 30);
+  --md-sys-color-surface-tint: rgb(90 99 30);
+  --md-sys-color-on-primary: rgb(255 255 255);
+  --md-sys-color-primary-container: rgb(223 233 149);
+  --md-sys-color-on-primary-container: rgb(67 75 6);
+  --md-sys-color-secondary: rgb(93 97 69);
+  --md-sys-color-on-secondary: rgb(255 255 255);
+  --md-sys-color-secondary-container: rgb(227 229 194);
+  --md-sys-color-on-secondary-container: rgb(70 73 47);
+  --md-sys-color-tertiary: rgb(59 102 91);
+  --md-sys-color-on-tertiary: rgb(255 255 255);
+  --md-sys-color-tertiary-container: rgb(189 236 222);
+  --md-sys-color-on-tertiary-container: rgb(34 78 68);
+  --md-sys-color-error: rgb(186 26 26);
+  --md-sys-color-on-error: rgb(255 255 255);
+  --md-sys-color-error-container: rgb(255 218 214);
+  --md-sys-color-on-error-container: rgb(147 0 10);
+  --md-sys-color-background: rgb(252 250 237);
+  --md-sys-color-on-background: rgb(27 28 20);
+  --md-sys-color-surface: rgb(252 250 237);
+  --md-sys-color-on-surface: rgb(27 28 20);
+  --md-sys-color-surface-variant: rgb(228 227 210);
+  --md-sys-color-on-surface-variant: rgb(71 72 59);
+  --md-sys-color-outline: rgb(120 120 106);
+  --md-sys-color-outline-variant: rgb(200 199 183);
+  --md-sys-color-shadow: rgb(0 0 0);
+  --md-sys-color-scrim: rgb(0 0 0);
+  --md-sys-color-inverse-surface: rgb(48 49 40);
+  --md-sys-color-inverse-on-surface: rgb(243 241 228);
+  --md-sys-color-inverse-primary: rgb(194 205 124);
+  --md-sys-color-primary-fixed: rgb(223 233 149);
+  --md-sys-color-on-primary-fixed: rgb(25 30 0);
+  --md-sys-color-primary-fixed-dim: rgb(194 205 124);
+  --md-sys-color-on-primary-fixed-variant: rgb(67 75 6);
+  --md-sys-color-secondary-fixed: rgb(227 229 194);
+  --md-sys-color-on-secondary-fixed: rgb(26 29 7);
+  --md-sys-color-secondary-fixed-dim: rgb(198 201 167);
+  --md-sys-color-on-secondary-fixed-variant: rgb(70 73 47);
+  --md-sys-color-tertiary-fixed: rgb(189 236 222);
+  --md-sys-color-on-tertiary-fixed: rgb(0 32 26);
+  --md-sys-color-tertiary-fixed-dim: rgb(162 208 194);
+  --md-sys-color-on-tertiary-fixed-variant: rgb(34 78 68);
+  --md-sys-color-surface-dim: rgb(220 218 206);
+  --md-sys-color-surface-bright: rgb(252 250 237);
+  --md-sys-color-surface-container-lowest: rgb(255 255 255);
+  --md-sys-color-surface-container-low: rgb(246 244 231);
+  --md-sys-color-surface-container: rgb(240 238 225);
+  --md-sys-color-surface-container-high: rgb(234 233 220);
+  --md-sys-color-surface-container-highest: rgb(228 227 214);
+}
+.light-medium-contrast {
+  --md-sys-color-primary: rgb(51 58 0);
+  --md-sys-color-surface-tint: rgb(90 99 30);
+  --md-sys-color-on-primary: rgb(255 255 255);
+  --md-sys-color-primary-container: rgb(105 114 44);
+  --md-sys-color-on-primary-container: rgb(255 255 255);
+  --md-sys-color-secondary: rgb(53 56 31);
+  --md-sys-color-on-secondary: rgb(255 255 255);
+  --md-sys-color-secondary-container: rgb(108 111 82);
+  --md-sys-color-on-secondary-container: rgb(255 255 255);
+  --md-sys-color-tertiary: rgb(14 61 51);
+  --md-sys-color-on-tertiary: rgb(255 255 255);
+  --md-sys-color-tertiary-container: rgb(74 117 105);
+  --md-sys-color-on-tertiary-container: rgb(255 255 255);
+  --md-sys-color-error: rgb(116 0 6);
+  --md-sys-color-on-error: rgb(255 255 255);
+  --md-sys-color-error-container: rgb(207 44 39);
+  --md-sys-color-on-error-container: rgb(255 255 255);
+  --md-sys-color-background: rgb(252 250 237);
+  --md-sys-color-on-background: rgb(27 28 20);
+  --md-sys-color-surface: rgb(252 250 237);
+  --md-sys-color-on-surface: rgb(17 18 11);
+  --md-sys-color-surface-variant: rgb(228 227 210);
+  --md-sys-color-on-surface-variant: rgb(54 55 43);
+  --md-sys-color-outline: rgb(83 83 70);
+  --md-sys-color-outline-variant: rgb(109 110 96);
+  --md-sys-color-shadow: rgb(0 0 0);
+  --md-sys-color-scrim: rgb(0 0 0);
+  --md-sys-color-inverse-surface: rgb(48 49 40);
+  --md-sys-color-inverse-on-surface: rgb(243 241 228);
+  --md-sys-color-inverse-primary: rgb(194 205 124);
+  --md-sys-color-primary-fixed: rgb(105 114 44);
+  --md-sys-color-on-primary-fixed: rgb(255 255 255);
+  --md-sys-color-primary-fixed-dim: rgb(81 89 21);
+  --md-sys-color-on-primary-fixed-variant: rgb(255 255 255);
+  --md-sys-color-secondary-fixed: rgb(108 111 82);
+  --md-sys-color-on-secondary-fixed: rgb(255 255 255);
+  --md-sys-color-secondary-fixed-dim: rgb(84 87 60);
+  --md-sys-color-on-secondary-fixed-variant: rgb(255 255 255);
+  --md-sys-color-tertiary-fixed: rgb(74 117 105);
+  --md-sys-color-on-tertiary-fixed: rgb(255 255 255);
+  --md-sys-color-tertiary-fixed-dim: rgb(49 93 81);
+  --md-sys-color-on-tertiary-fixed-variant: rgb(255 255 255);
+  --md-sys-color-surface-dim: rgb(200 199 187);
+  --md-sys-color-surface-bright: rgb(252 250 237);
+  --md-sys-color-surface-container-lowest: rgb(255 255 255);
+  --md-sys-color-surface-container-low: rgb(246 244 231);
+  --md-sys-color-surface-container: rgb(234 233 220);
+  --md-sys-color-surface-container-high: rgb(223 221 209);
+  --md-sys-color-surface-container-highest: rgb(211 210 198);
+}
+.light-high-contrast {
+  --md-sys-color-primary: rgb(41 47 0);
+  --md-sys-color-surface-tint: rgb(90 99 30);
+  --md-sys-color-on-primary: rgb(255 255 255);
+  --md-sys-color-primary-container: rgb(69 78 8);
+  --md-sys-color-on-primary-container: rgb(255 255 255);
+  --md-sys-color-secondary: rgb(43 46 22);
+  --md-sys-color-on-secondary: rgb(255 255 255);
+  --md-sys-color-secondary-container: rgb(72 75 49);
+  --md-sys-color-on-secondary-container: rgb(255 255 255);
+  --md-sys-color-tertiary: rgb(0 51 41);
+  --md-sys-color-on-tertiary: rgb(255 255 255);
+  --md-sys-color-tertiary-container: rgb(37 81 70);
+  --md-sys-color-on-tertiary-container: rgb(255 255 255);
+  --md-sys-color-error: rgb(96 0 4);
+  --md-sys-color-on-error: rgb(255 255 255);
+  --md-sys-color-error-container: rgb(152 0 10);
+  --md-sys-color-on-error-container: rgb(255 255 255);
+  --md-sys-color-background: rgb(252 250 237);
+  --md-sys-color-on-background: rgb(27 28 20);
+  --md-sys-color-surface: rgb(252 250 237);
+  --md-sys-color-on-surface: rgb(0 0 0);
+  --md-sys-color-surface-variant: rgb(228 227 210);
+  --md-sys-color-on-surface-variant: rgb(0 0 0);
+  --md-sys-color-outline: rgb(44 45 34);
+  --md-sys-color-outline-variant: rgb(73 74 61);
+  --md-sys-color-shadow: rgb(0 0 0);
+  --md-sys-color-scrim: rgb(0 0 0);
+  --md-sys-color-inverse-surface: rgb(48 49 40);
+  --md-sys-color-inverse-on-surface: rgb(255 255 255);
+  --md-sys-color-inverse-primary: rgb(194 205 124);
+  --md-sys-color-primary-fixed: rgb(69 78 8);
+  --md-sys-color-on-primary-fixed: rgb(255 255 255);
+  --md-sys-color-primary-fixed-dim: rgb(47 54 0);
+  --md-sys-color-on-primary-fixed-variant: rgb(255 255 255);
+  --md-sys-color-secondary-fixed: rgb(72 75 49);
+  --md-sys-color-on-secondary-fixed: rgb(255 255 255);
+  --md-sys-color-secondary-fixed-dim: rgb(49 53 28);
+  --md-sys-color-on-secondary-fixed-variant: rgb(255 255 255);
+  --md-sys-color-tertiary-fixed: rgb(37 81 70);
+  --md-sys-color-on-tertiary-fixed: rgb(255 255 255);
+  --md-sys-color-tertiary-fixed-dim: rgb(9 58 48);
+  --md-sys-color-on-tertiary-fixed-variant: rgb(255 255 255);
+  --md-sys-color-surface-dim: rgb(186 185 173);
+  --md-sys-color-surface-bright: rgb(252 250 237);
+  --md-sys-color-surface-container-lowest: rgb(255 255 255);
+  --md-sys-color-surface-container-low: rgb(243 241 228);
+  --md-sys-color-surface-container: rgb(228 227 214);
+  --md-sys-color-surface-container-high: rgb(214 213 200);
+  --md-sys-color-surface-container-highest: rgb(200 199 187);
+}
+.dark {
+  --md-sys-color-primary: rgb(194 205 124);
+  --md-sys-color-surface-tint: rgb(194 205 124);
+  --md-sys-color-on-primary: rgb(45 52 0);
+  --md-sys-color-primary-container: rgb(67 75 6);
+  --md-sys-color-on-primary-container: rgb(223 233 149);
+  --md-sys-color-secondary: rgb(198 201 167);
+  --md-sys-color-on-secondary: rgb(47 50 26);
+  --md-sys-color-secondary-container: rgb(70 73 47);
+  --md-sys-color-on-secondary-container: rgb(227 229 194);
+  --md-sys-color-tertiary: rgb(162 208 194);
+  --md-sys-color-on-tertiary: rgb(6 55 46);
+  --md-sys-color-tertiary-container: rgb(34 78 68);
+  --md-sys-color-on-tertiary-container: rgb(189 236 222);
+  --md-sys-color-error: rgb(255 180 171);
+  --md-sys-color-on-error: rgb(105 0 5);
+  --md-sys-color-error-container: rgb(147 0 10);
+  --md-sys-color-on-error-container: rgb(255 218 214);
+  --md-sys-color-background: rgb(19 20 13);
+  --md-sys-color-on-background: rgb(228 227 214);
+  --md-sys-color-surface: rgb(19 20 13);
+  --md-sys-color-on-surface: rgb(228 227 214);
+  --md-sys-color-surface-variant: rgb(71 72 59);
+  --md-sys-color-on-surface-variant: rgb(200 199 183);
+  --md-sys-color-outline: rgb(145 146 131);
+  --md-sys-color-outline-variant: rgb(71 72 59);
+  --md-sys-color-shadow: rgb(0 0 0);
+  --md-sys-color-scrim: rgb(0 0 0);
+  --md-sys-color-inverse-surface: rgb(228 227 214);
+  --md-sys-color-inverse-on-surface: rgb(48 49 40);
+  --md-sys-color-inverse-primary: rgb(90 99 30);
+  --md-sys-color-primary-fixed: rgb(223 233 149);
+  --md-sys-color-on-primary-fixed: rgb(25 30 0);
+  --md-sys-color-primary-fixed-dim: rgb(194 205 124);
+  --md-sys-color-on-primary-fixed-variant: rgb(67 75 6);
+  --md-sys-color-secondary-fixed: rgb(227 229 194);
+  --md-sys-color-on-secondary-fixed: rgb(26 29 7);
+  --md-sys-color-secondary-fixed-dim: rgb(198 201 167);
+  --md-sys-color-on-secondary-fixed-variant: rgb(70 73 47);
+  --md-sys-color-tertiary-fixed: rgb(189 236 222);
+  --md-sys-color-on-tertiary-fixed: rgb(0 32 26);
+  --md-sys-color-tertiary-fixed-dim: rgb(162 208 194);
+  --md-sys-color-on-tertiary-fixed-variant: rgb(34 78 68);
+  --md-sys-color-surface-dim: rgb(19 20 13);
+  --md-sys-color-surface-bright: rgb(57 58 49);
+  --md-sys-color-surface-container-lowest: rgb(14 15 8);
+  --md-sys-color-surface-container-low: rgb(27 28 20);
+  --md-sys-color-surface-container: rgb(31 32 24);
+  --md-sys-color-surface-container-high: rgb(42 43 34);
+  --md-sys-color-surface-container-highest: rgb(53 53 45);
+}
+.dark-medium-contrast {
+  --md-sys-color-primary: rgb(216 227 144);
+  --md-sys-color-surface-tint: rgb(194 205 124);
+  --md-sys-color-on-primary: rgb(35 40 0);
+  --md-sys-color-primary-container: rgb(141 151 76);
+  --md-sys-color-on-primary-container: rgb(0 0 0);
+  --md-sys-color-secondary: rgb(220 223 188);
+  --md-sys-color-on-secondary: rgb(36 39 16);
+  --md-sys-color-secondary-container: rgb(144 147 116);
+  --md-sys-color-on-secondary-container: rgb(0 0 0);
+  --md-sys-color-tertiary: rgb(183 230 216);
+  --md-sys-color-on-tertiary: rgb(0 44 35);
+  --md-sys-color-tertiary-container: rgb(109 154 141);
+  --md-sys-color-on-tertiary-container: rgb(0 0 0);
+  --md-sys-color-error: rgb(255 210 204);
+  --md-sys-color-on-error: rgb(84 0 3);
+  --md-sys-color-error-container: rgb(255 84 73);
+  --md-sys-color-on-error-container: rgb(0 0 0);
+  --md-sys-color-background: rgb(19 20 13);
+  --md-sys-color-on-background: rgb(228 227 214);
+  --md-sys-color-surface: rgb(19 20 13);
+  --md-sys-color-on-surface: rgb(255 255 255);
+  --md-sys-color-surface-variant: rgb(71 72 59);
+  --md-sys-color-on-surface-variant: rgb(222 221 204);
+  --md-sys-color-outline: rgb(179 179 163);
+  --md-sys-color-outline-variant: rgb(145 145 130);
+  --md-sys-color-shadow: rgb(0 0 0);
+  --md-sys-color-scrim: rgb(0 0 0);
+  --md-sys-color-inverse-surface: rgb(228 227 214);
+  --md-sys-color-inverse-on-surface: rgb(42 43 34);
+  --md-sys-color-inverse-primary: rgb(68 76 7);
+  --md-sys-color-primary-fixed: rgb(223 233 149);
+  --md-sys-color-on-primary-fixed: rgb(16 19 0);
+  --md-sys-color-primary-fixed-dim: rgb(194 205 124);
+  --md-sys-color-on-primary-fixed-variant: rgb(51 58 0);
+  --md-sys-color-secondary-fixed: rgb(227 229 194);
+  --md-sys-color-on-secondary-fixed: rgb(16 19 1);
+  --md-sys-color-secondary-fixed-dim: rgb(198 201 167);
+  --md-sys-color-on-secondary-fixed-variant: rgb(53 56 31);
+  --md-sys-color-tertiary-fixed: rgb(189 236 222);
+  --md-sys-color-on-tertiary-fixed: rgb(0 21 16);
+  --md-sys-color-tertiary-fixed-dim: rgb(162 208 194);
+  --md-sys-color-on-tertiary-fixed-variant: rgb(14 61 51);
+  --md-sys-color-surface-dim: rgb(19 20 13);
+  --md-sys-color-surface-bright: rgb(69 69 60);
+  --md-sys-color-surface-container-lowest: rgb(7 8 3);
+  --md-sys-color-surface-container-low: rgb(29 30 22);
+  --md-sys-color-surface-container: rgb(40 40 32);
+  --md-sys-color-surface-container-high: rgb(51 51 43);
+  --md-sys-color-surface-container-highest: rgb(62 62 53);
+}
+.dark-high-contrast {
+  --md-sys-color-primary: rgb(236 247 161);
+  --md-sys-color-surface-tint: rgb(194 205 124);
+  --md-sys-color-on-primary: rgb(0 0 0);
+  --md-sys-color-primary-container: rgb(191 201 120);
+  --md-sys-color-on-primary-container: rgb(10 13 0);
+  --md-sys-color-secondary: rgb(240 243 207);
+  --md-sys-color-on-secondary: rgb(0 0 0);
+  --md-sys-color-secondary-container: rgb(194 197 163);
+  --md-sys-color-on-secondary-container: rgb(10 13 0);
+  --md-sys-color-tertiary: rgb(203 250 235);
+  --md-sys-color-on-tertiary: rgb(0 0 0);
+  --md-sys-color-tertiary-container: rgb(158 204 190);
+  --md-sys-color-on-tertiary-container: rgb(0 14 10);
+  --md-sys-color-error: rgb(255 236 233);
+  --md-sys-color-on-error: rgb(0 0 0);
+  --md-sys-color-error-container: rgb(255 174 164);
+  --md-sys-color-on-error-container: rgb(34 0 1);
+  --md-sys-color-background: rgb(19 20 13);
+  --md-sys-color-on-background: rgb(228 227 214);
+  --md-sys-color-surface: rgb(19 20 13);
+  --md-sys-color-on-surface: rgb(255 255 255);
+  --md-sys-color-surface-variant: rgb(71 72 59);
+  --md-sys-color-on-surface-variant: rgb(255 255 255);
+  --md-sys-color-outline: rgb(242 241 223);
+  --md-sys-color-outline-variant: rgb(196 195 179);
+  --md-sys-color-shadow: rgb(0 0 0);
+  --md-sys-color-scrim: rgb(0 0 0);
+  --md-sys-color-inverse-surface: rgb(228 227 214);
+  --md-sys-color-inverse-on-surface: rgb(0 0 0);
+  --md-sys-color-inverse-primary: rgb(68 76 7);
+  --md-sys-color-primary-fixed: rgb(223 233 149);
+  --md-sys-color-on-primary-fixed: rgb(0 0 0);
+  --md-sys-color-primary-fixed-dim: rgb(194 205 124);
+  --md-sys-color-on-primary-fixed-variant: rgb(16 19 0);
+  --md-sys-color-secondary-fixed: rgb(227 229 194);
+  --md-sys-color-on-secondary-fixed: rgb(0 0 0);
+  --md-sys-color-secondary-fixed-dim: rgb(198 201 167);
+  --md-sys-color-on-secondary-fixed-variant: rgb(16 19 1);
+  --md-sys-color-tertiary-fixed: rgb(189 236 222);
+  --md-sys-color-on-tertiary-fixed: rgb(0 0 0);
+  --md-sys-color-tertiary-fixed-dim: rgb(162 208 194);
+  --md-sys-color-on-tertiary-fixed-variant: rgb(0 21 16);
+  --md-sys-color-surface-dim: rgb(19 20 13);
+  --md-sys-color-surface-bright: rgb(80 81 71);
+  --md-sys-color-surface-container-lowest: rgb(0 0 0);
+  --md-sys-color-surface-container-low: rgb(31 32 24);
+  --md-sys-color-surface-container: rgb(48 49 40);
+  --md-sys-color-surface-container-high: rgb(60 60 51);
+  --md-sys-color-surface-container-highest: rgb(71 71 62);
+}

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "material-inspired-component-library",
+  "version": "1.0.0",
+  "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.",
+  "author": "MICL Hermana <micl.hermana@proton.me> (https://github.com/henkpb/micl)",
+  "license": "ISC",
+  "keywords": [
+    "Material Design",
+    "component library",
+    "web components",
+    "front-end",
+    "UI",
+    "UX",
+    "accordion",
+    "bottomsheet",
+    "button",
+    "card",
+    "checkbox",
+    "dialog",
+    "divider",
+    "iconbutton",
+    "list",
+    "menu",
+    "radio button",
+    "sidesheet",
+    "slider",
+    "switch",
+    "textfield"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/henkpb/micl"
+  },
+  "homepage": "https://github.com/henkpb/micl",
+  "bugs": {
+    "url": "https://github.com/henkpb/micl/issues"
+  },
+  "main": "index.js",
+  "scripts": {
+    "build": "webpack",
+    "start": "echo 'No start script yet'",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "devDependencies": {
+    "autoprefixer": "^10.4.19",
+    "css-loader": "^7.1.2",
+    "extract-loader": "^5.1.0",
+    "file-loader": "^6.2.0",
+    "glob": "^11.0.3",
+    "mini-css-extract-plugin": "^2.9.3",
+    "postcss-loader": "^8.1.1",
+    "sass": "^1.89.1",
+    "sass-loader": "^16.0.5",
+    "ts-loader": "^9.5.2",
+    "typescript": "^5.8.3",
+    "webpack": "^5.99",
+    "webpack-cli": "^6.0"
+  },
+  "dependencies": {
+    "material-inspired-component-library": "file:"
+  }
+}

package/styles/README.md

@@ -0,0 +1,99 @@
+# Styles
+This guide covers the fundamental visual settings used by components, all based on the [Material Design 3 Styles](https://m3.material.io/styles) specifications.
+
+## Elevation
+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.
+
+### CSS
+Import the elevation styles into your project:
+
+```CSS
+@use "micl/styles/elevation";
+```
+
+### Customizations
+You can customize elevation levels by overriding their global CSS variables.
+
+**Example: Changing the elevation of a sidesheet:**
+
+```HTML
+<div style="--md-sys-elevation-level1: rgba(0, 0, 0, 0.2) 0px 3px 4px -1px, rgba(0, 0, 0, 0.1) 0px 4px 8px 0px, rgba(0, 0, 0, 0.1) 0px 1px 9px 0px">
+  <dialog class="micl-sidesheet" closedby="any" popover>
+  </dialog>
+</div>
+```
+
+
+## Motion
+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.
+
+### CSS
+Import the motion styles into your project:
+
+```CSS
+@use "micl/styles/motion";
+```
+
+
+## Shapes
+Shapes add decorative flair and help emphasize elements. These styles adhere to the [Material Design 3 Shape](https://m3.material.io/styles/shape/overview-principles) principles.
+
+### CSS
+Import the shape styles into your project:
+
+```CSS
+@use "micl/styles/shapes";
+```
+
+### Customizations
+You can customize a component's shape by overriding its global CSS variables, such as adjusting the corner radius.
+
+**Example: Changing the corner radius of a card:**
+
+```HTML
+<div style="--md-sys-shape-corner-medium: 14px">
+  <div class="micl-card-outlined">
+  </div>
+</div>
+```
+
+
+## State layers
+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).
+
+### CSS
+Import the state layer styles into your project:
+
+```CSS
+@use "micl/styles/statelayer";
+```
+
+### Customizations
+Customize the appearance of state layers by overriding their global CSS variables, such as adjusting the opacity.
+
+**Example: Changing the opacity of the hover-state layer:**
+
+```HTML
+<div style="--md-sys-state-hover-state-layer-opacity: 12%">
+</div>
+```
+
+
+## Typography
+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.
+
+### CSS
+Import the typography styles into your project:
+
+```CSS
+@use "micl/styles/typography";
+```
+
+### Customizations
+You can customize font settings by overriding their global CSS variables.
+
+**Changing the brand style font:**
+
+```HTML
+<div style="--md-ref-typeface-brand:Helvetica, Arial, sans-serif">
+</div>

package/styles/elevation.scss

@@ -0,0 +1,36 @@
+//
+// Copyright © 2025 Hermana AS
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in all
+// copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+// SOFTWARE.
+
+$md-sys-elevation-level0: rgba(0, 0, 0, 0.2) 0px 0px 0px 0px, rgba(0, 0, 0, 0.14) 0px 0px 0px 0px, rgba(0, 0, 0, 0.12) 0px 0px 0px 0px;
+$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;
+$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;
+$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;
+$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;
+$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;
+
+:root {
+    --md-sys-elevation-level0: #{$md-sys-elevation-level0};
+    --md-sys-elevation-level1: #{$md-sys-elevation-level1};
+    --md-sys-elevation-level2: #{$md-sys-elevation-level2};
+    --md-sys-elevation-level3: #{$md-sys-elevation-level3};
+    --md-sys-elevation-level4: #{$md-sys-elevation-level4};
+    --md-sys-elevation-level5: #{$md-sys-elevation-level5};
+}