diff options
134 files changed, 5556 insertions, 5263 deletions
| @@ -1,3 +1,5 @@ | |||
| 1 | node_modules | 1 | node_modules |
| 2 | public | 2 | public |
| 3 | static/garet.woff2 | 3 | static/garet.woff2 |
| 4 | |||
| 5 | .idea \ No newline at end of file | ||
diff --git a/.stylelintrc.json b/.stylelintrc.json index 622a3c3..c00dafa 100644 --- a/.stylelintrc.json +++ b/.stylelintrc.json | |||
| @@ -1,339 +1,27 @@ | |||
| 1 | { | 1 | { |
| 2 | "extends": "stylelint-config-sass-guidelines", | 2 | "extends": [ |
| 3 | "plugins": [ | 3 | "stylelint-config-sass-guidelines", |
| 4 | "stylelint-order" | 4 | "stylelint-config-recess-order" |
| 5 | ], | 5 | ], |
| 6 | "rules": { | 6 | "rules": { |
| 7 | "@stylistic/indentation": 4, | ||
| 8 | "@stylistic/number-leading-zero": "never", | ||
| 9 | "@stylistic/declaration-colon-space-after": null, | ||
| 7 | "max-nesting-depth": 7, | 10 | "max-nesting-depth": 7, |
| 11 | "length-zero-no-unit": [ | ||
| 12 | true, | ||
| 13 | { | ||
| 14 | "ignoreFunctions": [ | ||
| 15 | "/^props\\.def/" | ||
| 16 | ] | ||
| 17 | } | ||
| 18 | ], | ||
| 8 | "selector-class-pattern": [ | 19 | "selector-class-pattern": [ |
| 9 | "^[closut](-[a-z0-9]+)+(__[a-z0-9]+(-[a-z0-9]+)*)*(--[a-z0-9]+(-[a-z0-9]+)*)*(\\@[a-z0-9]+(-[a-z0-9]+)*)?$", | 20 | "^[closut](-[a-z0-9]+)+(__[a-z0-9]+(-[a-z0-9]+)*)*(--[a-z0-9]+(-[a-z0-9]+)*)*(\\@[a-z0-9]+(-[a-z0-9]+)*)?$", |
| 10 | { | 21 | { |
| 11 | "resolveNestedSelectors": true | 22 | "resolveNestedSelectors": true |
| 12 | } | 23 | } |
| 13 | ], | 24 | ], |
| 14 | "scss/dollar-variable-colon-space-after": null, | 25 | "scss/dollar-variable-colon-space-after": null |
| 15 | "order/properties-alphabetical-order": null, | 26 | } |
| 16 | "order/order": null, | ||
| 17 | "order/properties-order": [ | ||
| 18 | { | ||
| 19 | "properties": [ | ||
| 20 | "content", | ||
| 21 | "quotes" | ||
| 22 | ] | ||
| 23 | }, | ||
| 24 | { | ||
| 25 | "properties": [ | ||
| 26 | "display", | ||
| 27 | "visibility" | ||
| 28 | ] | ||
| 29 | }, | ||
| 30 | { | ||
| 31 | "properties": [ | ||
| 32 | "position", | ||
| 33 | "z-index", | ||
| 34 | "top", | ||
| 35 | "right", | ||
| 36 | "bottom", | ||
| 37 | "left" | ||
| 38 | ] | ||
| 39 | }, | ||
| 40 | { | ||
| 41 | "properties": [ | ||
| 42 | "box-sizing" | ||
| 43 | ] | ||
| 44 | }, | ||
| 45 | { | ||
| 46 | "properties": [ | ||
| 47 | "flex", | ||
| 48 | "flex-basis", | ||
| 49 | "flex-direction", | ||
| 50 | "flex-flow", | ||
| 51 | "flex-grow", | ||
| 52 | "flex-shrink", | ||
| 53 | "flex-wrap", | ||
| 54 | "align-content", | ||
| 55 | "align-items", | ||
| 56 | "align-self", | ||
| 57 | "justify-content", | ||
| 58 | "order" | ||
| 59 | ] | ||
| 60 | }, | ||
| 61 | { | ||
| 62 | "properties": [ | ||
| 63 | "width", | ||
| 64 | "min-width", | ||
| 65 | "max-width", | ||
| 66 | "height", | ||
| 67 | "min-height", | ||
| 68 | "max-height" | ||
| 69 | ] | ||
| 70 | }, | ||
| 71 | { | ||
| 72 | "properties": [ | ||
| 73 | "margin", | ||
| 74 | "margin-top", | ||
| 75 | "margin-right", | ||
| 76 | "margin-bottom", | ||
| 77 | "margin-left" | ||
| 78 | ] | ||
| 79 | }, | ||
| 80 | { | ||
| 81 | "properties": [ | ||
| 82 | "padding", | ||
| 83 | "padding-top", | ||
| 84 | "padding-right", | ||
| 85 | "padding-bottom", | ||
| 86 | "padding-left" | ||
| 87 | ] | ||
| 88 | }, | ||
| 89 | { | ||
| 90 | "properties": [ | ||
| 91 | "float", | ||
| 92 | "clear" | ||
| 93 | ] | ||
| 94 | }, | ||
| 95 | { | ||
| 96 | "properties": [ | ||
| 97 | "overflow", | ||
| 98 | "overflow-x", | ||
| 99 | "overflow-y" | ||
| 100 | ] | ||
| 101 | }, | ||
| 102 | { | ||
| 103 | "properties": [ | ||
| 104 | "clip", | ||
| 105 | "zoom" | ||
| 106 | ] | ||
| 107 | }, | ||
| 108 | { | ||
| 109 | "properties": [ | ||
| 110 | "columns", | ||
| 111 | "column-gap", | ||
| 112 | "column-fill", | ||
| 113 | "column-rule", | ||
| 114 | "column-span", | ||
| 115 | "column-count", | ||
| 116 | "column-width" | ||
| 117 | ] | ||
| 118 | }, | ||
| 119 | { | ||
| 120 | "properties": [ | ||
| 121 | "table-layout", | ||
| 122 | "empty-cells", | ||
| 123 | "caption-side", | ||
| 124 | "border-spacing", | ||
| 125 | "border-collapse", | ||
| 126 | "list-style", | ||
| 127 | "list-style-position", | ||
| 128 | "list-style-type", | ||
| 129 | "list-style-image" | ||
| 130 | ] | ||
| 131 | }, | ||
| 132 | { | ||
| 133 | "properties": [ | ||
| 134 | "transform", | ||
| 135 | "transform-origin", | ||
| 136 | "transform-style", | ||
| 137 | "backface-visibility", | ||
| 138 | "perspective", | ||
| 139 | "perspective-origin" | ||
| 140 | ] | ||
| 141 | }, | ||
| 142 | { | ||
| 143 | "properties": [ | ||
| 144 | "transition", | ||
| 145 | "transition-property", | ||
| 146 | "transition-duration", | ||
| 147 | "transition-timing-function", | ||
| 148 | "transition-delay" | ||
| 149 | ] | ||
| 150 | }, | ||
| 151 | { | ||
| 152 | "properties": [ | ||
| 153 | "animation", | ||
| 154 | "animation-name", | ||
| 155 | "animation-duration", | ||
| 156 | "animation-play-state", | ||
| 157 | "animation-timing-function", | ||
| 158 | "animation-delay", | ||
| 159 | "animation-iteration-count", | ||
| 160 | "animation-direction" | ||
| 161 | ] | ||
| 162 | }, | ||
| 163 | { | ||
| 164 | "properties": [ | ||
| 165 | "border", | ||
| 166 | "border-top", | ||
| 167 | "border-right", | ||
| 168 | "border-bottom", | ||
| 169 | "border-left", | ||
| 170 | "border-width", | ||
| 171 | "border-top-width", | ||
| 172 | "border-right-width", | ||
| 173 | "border-bottom-width", | ||
| 174 | "border-left-width" | ||
| 175 | ] | ||
| 176 | }, | ||
| 177 | { | ||
| 178 | "properties": [ | ||
| 179 | "border-style", | ||
| 180 | "border-top-style", | ||
| 181 | "border-right-style", | ||
| 182 | "border-bottom-style", | ||
| 183 | "border-left-style" | ||
| 184 | ] | ||
| 185 | }, | ||
| 186 | { | ||
| 187 | "properties": [ | ||
| 188 | "border-radius", | ||
| 189 | "border-top-left-radius", | ||
| 190 | "border-top-right-radius", | ||
| 191 | "border-bottom-left-radius", | ||
| 192 | "border-bottom-right-radius" | ||
| 193 | ] | ||
| 194 | }, | ||
| 195 | { | ||
| 196 | "properties": [ | ||
| 197 | "border-color", | ||
| 198 | "border-top-color", | ||
| 199 | "border-right-color", | ||
| 200 | "border-bottom-color", | ||
| 201 | "border-left-color" | ||
| 202 | ] | ||
| 203 | }, | ||
| 204 | { | ||
| 205 | "properties": [ | ||
| 206 | "outline", | ||
| 207 | "outline-color", | ||
| 208 | "outline-offset", | ||
| 209 | "outline-style", | ||
| 210 | "outline-width" | ||
| 211 | ] | ||
| 212 | }, | ||
| 213 | { | ||
| 214 | "properties": [ | ||
| 215 | "stroke-width", | ||
| 216 | "stroke-linecap", | ||
| 217 | "stroke-dasharray", | ||
| 218 | "stroke-dashoffset", | ||
| 219 | "stroke" | ||
| 220 | ] | ||
| 221 | }, | ||
| 222 | { | ||
| 223 | "properties": [ | ||
| 224 | "opacity" | ||
| 225 | ] | ||
| 226 | }, | ||
| 227 | { | ||
| 228 | "properties": [ | ||
| 229 | "background", | ||
| 230 | "background-color", | ||
| 231 | "background-image", | ||
| 232 | "background-repeat", | ||
| 233 | "background-position", | ||
| 234 | "background-size", | ||
| 235 | "box-shadow", | ||
| 236 | "fill" | ||
| 237 | ] | ||
| 238 | }, | ||
| 239 | { | ||
| 240 | "properties": [ | ||
| 241 | "color" | ||
| 242 | ] | ||
| 243 | }, | ||
| 244 | { | ||
| 245 | "properties": [ | ||
| 246 | "font", | ||
| 247 | "font-family", | ||
| 248 | "font-size", | ||
| 249 | "font-size-adjust", | ||
| 250 | "font-stretch", | ||
| 251 | "font-effect", | ||
| 252 | "font-style", | ||
| 253 | "font-variant", | ||
| 254 | "font-weight" | ||
| 255 | ] | ||
| 256 | }, | ||
| 257 | { | ||
| 258 | "properties": [ | ||
| 259 | "font-emphasize", | ||
| 260 | "font-emphasize-position", | ||
| 261 | "font-emphasize-style" | ||
| 262 | ] | ||
| 263 | }, | ||
| 264 | { | ||
| 265 | "properties": [ | ||
| 266 | "letter-spacing", | ||
| 267 | "line-height", | ||
| 268 | "list-style", | ||
| 269 | "word-spacing" | ||
| 270 | ] | ||
| 271 | }, | ||
| 272 | { | ||
| 273 | "properties": [ | ||
| 274 | "text-align", | ||
| 275 | "text-align-last", | ||
| 276 | "text-decoration", | ||
| 277 | "text-indent", | ||
| 278 | "text-justify", | ||
| 279 | "text-overflow", | ||
| 280 | "text-overflow-ellipsis", | ||
| 281 | "text-overflow-mode", | ||
| 282 | "text-rendering", | ||
| 283 | "text-outline", | ||
| 284 | "text-shadow", | ||
| 285 | "text-transform", | ||
| 286 | "text-wrap", | ||
| 287 | "word-wrap", | ||
| 288 | "word-break" | ||
| 289 | ] | ||
| 290 | }, | ||
| 291 | { | ||
| 292 | "properties": [ | ||
| 293 | "text-emphasis", | ||
| 294 | "text-emphasis-color", | ||
| 295 | "text-emphasis-style", | ||
| 296 | "text-emphasis-position" | ||
| 297 | ] | ||
| 298 | }, | ||
| 299 | { | ||
| 300 | "properties": [ | ||
| 301 | "vertical-align", | ||
| 302 | "white-space", | ||
| 303 | "word-spacing", | ||
| 304 | "hyphens" | ||
| 305 | ] | ||
| 306 | }, | ||
| 307 | { | ||
| 308 | "properties": [ | ||
| 309 | "src" | ||
| 310 | ] | ||
| 311 | }, | ||
| 312 | { | ||
| 313 | "properties": [ | ||
| 314 | "tab-size", | ||
| 315 | "counter-reset", | ||
| 316 | "counter-increment", | ||
| 317 | "resize", | ||
| 318 | "cursor", | ||
| 319 | "pointer-events", | ||
| 320 | "speak", | ||
| 321 | "user-select", | ||
| 322 | "nav-index", | ||
| 323 | "nav-up", | ||
| 324 | "nav-right", | ||
| 325 | "nav-down", | ||
| 326 | "nav-left" | ||
| 327 | ] | ||
| 328 | } | ||
| 329 | ] | ||
| 330 | }, | ||
| 331 | "overrides": [ | ||
| 332 | { | ||
| 333 | "files": [ | ||
| 334 | "**/*.scss" | ||
| 335 | ], | ||
| 336 | "customSyntax": "postcss-scss" | ||
| 337 | } | ||
| 338 | ] | ||
| 339 | } | 27 | } |
diff --git a/package.json b/package.json index a0d782a..cc74db1 100644 --- a/package.json +++ b/package.json | |||
| @@ -2,7 +2,8 @@ | |||
| 2 | "name": "iro-design", | 2 | "name": "iro-design", |
| 3 | "version": "1.0.0", | 3 | "version": "1.0.0", |
| 4 | "description": "Standard implementation of the Iro design system", | 4 | "description": "Standard implementation of the Iro design system", |
| 5 | "main": "src/index.scss", | 5 | "main": "src/_iro-design.scss", |
| 6 | "sass": "src/_iro-design.scss", | ||
| 6 | "author": "Volpeon", | 7 | "author": "Volpeon", |
| 7 | "license": "MIT", | 8 | "license": "MIT", |
| 8 | "private": true, | 9 | "private": true, |
| @@ -11,25 +12,25 @@ | |||
| 11 | "build": "npm run build:app && npm run build:style && npm run build:icons && npm run build:assets", | 12 | "build": "npm run build:app && npm run build:style && npm run build:icons && npm run build:assets", |
| 12 | "build:assets": "cp -r static/* public/", | 13 | "build:assets": "cp -r static/* public/", |
| 13 | "build:app": "pug tpl/index.pug -p tpl --out public/", | 14 | "build:app": "pug tpl/index.pug -p tpl --out public/", |
| 14 | "build:icons": "node node_modules/iro-icons/scripts/create_sprite.js image video volume-2 arrow-right check trash bookmark cog logout tags lock user chevron-left chevron-right hash x send smile repeat heart star arrow-corner-down-left public/icons.svg", | 15 | "build:icons": "node node_modules/iro-icons/scripts/create_sprite.js image video volume-2 arrow-right arrow-left check trash bookmark cog logout tags lock user chevron-left chevron-right hash x send smile repeat heart star arrow-corner-down-left public/icons.svg", |
| 15 | "build:style": "sass --load-path=node_modules src_demo/index.scss public/style.css", | 16 | "build:style": "sass --load-path=node_modules src_demo/index.scss public/style.css", |
| 16 | "lint:style": "stylelint \"src/**/*.scss\"", | 17 | "lint:style": "stylelint \"src/**/*.scss\"", |
| 17 | "fix:style": "stylelint \"src/**/*.scss\" --fix", | 18 | "fix:style": "stylelint \"src/**/*.scss\" --fix", |
| 18 | "serve": "python -m http.server --bind 127.0.0.1 --directory public 8001" | 19 | "serve": "python -m http.server --bind 127.0.0.1 --directory public 8001" |
| 19 | }, | 20 | }, |
| 20 | "dependencies": { | 21 | "dependencies": { |
| 21 | "@oddbird/blend": "^0.2.4", | ||
| 22 | "include-media": "^2.0.0", | 22 | "include-media": "^2.0.0", |
| 23 | "iro-sass": "git+https://git.vulpes.one/git/iro-sass.git#04f8e9dbdc57a53f004e6238dfacc917bafdbbff" | 23 | "iro-sass": "git+https://git.vulpes.one/git/iro-sass.git#351814a60e8909814c7120db96314a1a25d962bd" |
| 24 | }, | 24 | }, |
| 25 | "devDependencies": { | 25 | "devDependencies": { |
| 26 | "iro-icons": "git+https://git.vulpes.one/git/iro-icons.git#b854aa0bfdc5a1bd233606af8ffff6312017845e", | 26 | "iro-icons": "git+https://git.vulpes.one/git/iro-icons.git#8b921f634a565fd9bb8f6e0ddb1b4d7ba207c0a0", |
| 27 | "postcss-scss": "^4.0.6", | 27 | "postcss-scss": "^4.0.6", |
| 28 | "pug": "^3.0.3", | 28 | "pug": "^3.0.3", |
| 29 | "pug-cli": "^1.0.0-alpha6", | 29 | "pug-cli": "^1.0.0-alpha6", |
| 30 | "sass": "^1.77.6", | 30 | "sass": "^1.79.4", |
| 31 | "stylelint": "^16.6.1", | 31 | "stylelint": "^16.9.0", |
| 32 | "stylelint-config-sass-guidelines": "^11.1.0", | 32 | "stylelint-config-recess-order": "^5.1.1", |
| 33 | "stylelint-config-sass-guidelines": "^12.1.0", | ||
| 33 | "stylelint-order": "^6.0.4", | 34 | "stylelint-order": "^6.0.4", |
| 34 | "svg-sprite": "^2.0.4" | 35 | "svg-sprite": "^2.0.4" |
| 35 | } | 36 | } |
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 5a211e0..da001c6 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml | |||
| @@ -8,19 +8,16 @@ importers: | |||
| 8 | 8 | ||
| 9 | .: | 9 | .: |
| 10 | dependencies: | 10 | dependencies: |
| 11 | '@oddbird/blend': | ||
| 12 | specifier: ^0.2.4 | ||
| 13 | version: 0.2.4 | ||
| 14 | include-media: | 11 | include-media: |
| 15 | specifier: ^2.0.0 | 12 | specifier: ^2.0.0 |
| 16 | version: 2.0.0 | 13 | version: 2.0.0 |
| 17 | iro-sass: | 14 | iro-sass: |
| 18 | specifier: git+https://git.vulpes.one/git/iro-sass.git#04f8e9dbdc57a53f004e6238dfacc917bafdbbff | 15 | specifier: git+https://git.vulpes.one/git/iro-sass.git#351814a60e8909814c7120db96314a1a25d962bd |
| 19 | version: git+https://git.vulpes.one/git/iro-sass.git#04f8e9dbdc57a53f004e6238dfacc917bafdbbff | 16 | version: git+https://git.vulpes.one/git/iro-sass.git#351814a60e8909814c7120db96314a1a25d962bd |
| 20 | devDependencies: | 17 | devDependencies: |
| 21 | iro-icons: | 18 | iro-icons: |
| 22 | specifier: git+https://git.vulpes.one/git/iro-icons.git#b854aa0bfdc5a1bd233606af8ffff6312017845e | 19 | specifier: git+https://git.vulpes.one/git/iro-icons.git#8b921f634a565fd9bb8f6e0ddb1b4d7ba207c0a0 |
| 23 | version: git+https://git.vulpes.one/git/iro-icons.git#b854aa0bfdc5a1bd233606af8ffff6312017845e(svg-sprite@2.0.4) | 20 | version: git+https://git.vulpes.one/git/iro-icons.git#8b921f634a565fd9bb8f6e0ddb1b4d7ba207c0a0(svg-sprite@2.0.4) |
| 24 | postcss-scss: | 21 | postcss-scss: |
| 25 | specifier: ^4.0.6 | 22 | specifier: ^4.0.6 |
| 26 | version: 4.0.9(postcss@8.4.38) | 23 | version: 4.0.9(postcss@8.4.38) |
| @@ -31,25 +28,28 @@ importers: | |||
| 31 | specifier: ^1.0.0-alpha6 | 28 | specifier: ^1.0.0-alpha6 |
| 32 | version: 1.0.0-alpha6 | 29 | version: 1.0.0-alpha6 |
| 33 | sass: | 30 | sass: |
| 34 | specifier: ^1.77.6 | 31 | specifier: ^1.79.4 |
| 35 | version: 1.77.6 | 32 | version: 1.79.4 |
| 36 | stylelint: | 33 | stylelint: |
| 37 | specifier: ^16.6.1 | 34 | specifier: ^16.9.0 |
| 38 | version: 16.6.1 | 35 | version: 16.9.0 |
| 36 | stylelint-config-recess-order: | ||
| 37 | specifier: ^5.1.1 | ||
| 38 | version: 5.1.1(stylelint@16.9.0) | ||
| 39 | stylelint-config-sass-guidelines: | 39 | stylelint-config-sass-guidelines: |
| 40 | specifier: ^11.1.0 | 40 | specifier: ^12.1.0 |
| 41 | version: 11.1.0(postcss@8.4.38)(stylelint@16.6.1) | 41 | version: 12.1.0(postcss@8.4.38)(stylelint@16.9.0) |
| 42 | stylelint-order: | 42 | stylelint-order: |
| 43 | specifier: ^6.0.4 | 43 | specifier: ^6.0.4 |
| 44 | version: 6.0.4(stylelint@16.6.1) | 44 | version: 6.0.4(stylelint@16.9.0) |
| 45 | svg-sprite: | 45 | svg-sprite: |
| 46 | specifier: ^2.0.4 | 46 | specifier: ^2.0.4 |
| 47 | version: 2.0.4 | 47 | version: 2.0.4 |
| 48 | 48 | ||
| 49 | packages: | 49 | packages: |
| 50 | 50 | ||
| 51 | '@babel/code-frame@7.24.7': | 51 | '@babel/code-frame@7.25.7': |
| 52 | resolution: {integrity: sha512-BcYH1CVJBO9tvyIZ2jVeXgSIMvGZ2FDRvDdOIVQyuklNKSsx+eppDEBq/g47Ayw+RqNFE+URvOShmf+f/qwAlA==} | 52 | resolution: {integrity: sha512-0xZJFNE5XMpENsgfHYTw8FbX4kv53mFLn2i3XPoq69LyhYSCBJtitaHx9QnsVTrsogI4Z3+HtEfZ2/GFPOtf5g==} |
| 53 | engines: {node: '>=6.9.0'} | 53 | engines: {node: '>=6.9.0'} |
| 54 | 54 | ||
| 55 | '@babel/helper-string-parser@7.24.7': | 55 | '@babel/helper-string-parser@7.24.7': |
| @@ -60,8 +60,12 @@ packages: | |||
| 60 | resolution: {integrity: sha512-rR+PBcQ1SMQDDyF6X0wxtG8QyLCgUB0eRAGguqRLfkCA87l7yAP7ehq8SNj96OOGTO8OBV70KhuFYcIkHXOg0w==} | 60 | resolution: {integrity: sha512-rR+PBcQ1SMQDDyF6X0wxtG8QyLCgUB0eRAGguqRLfkCA87l7yAP7ehq8SNj96OOGTO8OBV70KhuFYcIkHXOg0w==} |
| 61 | engines: {node: '>=6.9.0'} | 61 | engines: {node: '>=6.9.0'} |
| 62 | 62 | ||
| 63 | '@babel/highlight@7.24.7': | 63 | '@babel/helper-validator-identifier@7.25.7': |
| 64 | resolution: {integrity: sha512-EStJpq4OuY8xYfhGVXngigBJRWxftKX9ksiGDnmlY3o7B/V7KIAc9X4oiK87uPJSc/vs5L869bem5fhZa8caZw==} | 64 | resolution: {integrity: sha512-AM6TzwYqGChO45oiuPqwL2t20/HdMC1rTPAesnBCgPCSF1x3oN9MVUwQV2iyz4xqWrctwK5RNC8LV22kaQCNYg==} |
| 65 | engines: {node: '>=6.9.0'} | ||
| 66 | |||
| 67 | '@babel/highlight@7.25.7': | ||
| 68 | resolution: {integrity: sha512-iYyACpW3iW8Fw+ZybQK+drQre+ns/tKpXbNESfrhNnPLIklLbXr7MYJ6gPEd0iETGLOK+SxMjVvKb/ffmk+FEw==} | ||
| 65 | engines: {node: '>=6.9.0'} | 69 | engines: {node: '>=6.9.0'} |
| 66 | 70 | ||
| 67 | '@babel/parser@7.24.7': | 71 | '@babel/parser@7.24.7': |
| @@ -77,28 +81,28 @@ packages: | |||
| 77 | resolution: {integrity: sha512-Ir+AOibqzrIsL6ajt3Rz3LskB7OiMVHqltZmspbW/TJuTVuyOMirVqAkjfY6JISiLHgyNqicAC8AyHHGzNd/dA==} | 81 | resolution: {integrity: sha512-Ir+AOibqzrIsL6ajt3Rz3LskB7OiMVHqltZmspbW/TJuTVuyOMirVqAkjfY6JISiLHgyNqicAC8AyHHGzNd/dA==} |
| 78 | engines: {node: '>=0.1.90'} | 82 | engines: {node: '>=0.1.90'} |
| 79 | 83 | ||
| 80 | '@csstools/css-parser-algorithms@2.6.3': | 84 | '@csstools/css-parser-algorithms@3.0.1': |
| 81 | resolution: {integrity: sha512-xI/tL2zxzEbESvnSxwFgwvy5HS00oCXxL4MLs6HUiDcYfwowsoQaABKxUElp1ARITrINzBnsECOc1q0eg2GOrA==} | 85 | resolution: {integrity: sha512-lSquqZCHxDfuTg/Sk2hiS0mcSFCEBuj49JfzPHJogDBT0mGCyY5A1AQzBWngitrp7i1/HAZpIgzF/VjhOEIJIg==} |
| 82 | engines: {node: ^14 || ^16 || >=18} | 86 | engines: {node: '>=18'} |
| 83 | peerDependencies: | 87 | peerDependencies: |
| 84 | '@csstools/css-tokenizer': ^2.3.1 | 88 | '@csstools/css-tokenizer': ^3.0.1 |
| 85 | 89 | ||
| 86 | '@csstools/css-tokenizer@2.3.1': | 90 | '@csstools/css-tokenizer@3.0.1': |
| 87 | resolution: {integrity: sha512-iMNHTyxLbBlWIfGtabT157LH9DUx9X8+Y3oymFEuMj8HNc+rpE3dPFGFgHjpKfjeFDjLjYIAIhXPGvS2lKxL9g==} | 91 | resolution: {integrity: sha512-UBqaiu7kU0lfvaP982/o3khfXccVlHPWp0/vwwiIgDF0GmqqqxoiXC/6FCjlS9u92f7CoEz6nXKQnrn1kIAkOw==} |
| 88 | engines: {node: ^14 || ^16 || >=18} | 92 | engines: {node: '>=18'} |
| 89 | 93 | ||
| 90 | '@csstools/media-query-list-parser@2.1.11': | 94 | '@csstools/media-query-list-parser@3.0.1': |
| 91 | resolution: {integrity: sha512-uox5MVhvNHqitPP+SynrB1o8oPxPMt2JLgp5ghJOWf54WGQ5OKu47efne49r1SWqs3wRP8xSWjnO9MBKxhB1dA==} | 95 | resolution: {integrity: sha512-HNo8gGD02kHmcbX6PvCoUuOQvn4szyB9ca63vZHKX5A81QytgDG4oxG4IaEfHTlEZSZ6MjPEMWIVU+zF2PZcgw==} |
| 92 | engines: {node: ^14 || ^16 || >=18} | 96 | engines: {node: '>=18'} |
| 93 | peerDependencies: | 97 | peerDependencies: |
| 94 | '@csstools/css-parser-algorithms': ^2.6.3 | 98 | '@csstools/css-parser-algorithms': ^3.0.1 |
| 95 | '@csstools/css-tokenizer': ^2.3.1 | 99 | '@csstools/css-tokenizer': ^3.0.1 |
| 96 | 100 | ||
| 97 | '@csstools/selector-specificity@3.1.1': | 101 | '@csstools/selector-specificity@4.0.0': |
| 98 | resolution: {integrity: sha512-a7cxGcJ2wIlMFLlh8z2ONm+715QkPHiyJcxwQlKOz/03GPw1COpfhcmC9wm4xlZfp//jWHNNMwzjtqHXVWU9KA==} | 102 | resolution: {integrity: sha512-189nelqtPd8++phaHNwYovKZI0FOzH1vQEE3QhHHkNIGrg5fSs9CbYP3RvfEH5geztnIA9Jwq91wyOIwAW5JIQ==} |
| 99 | engines: {node: ^14 || ^16 || >=18} | 103 | engines: {node: '>=18'} |
| 100 | peerDependencies: | 104 | peerDependencies: |
| 101 | postcss-selector-parser: ^6.0.13 | 105 | postcss-selector-parser: ^6.1.0 |
| 102 | 106 | ||
| 103 | '@dabh/diagnostics@2.0.3': | 107 | '@dabh/diagnostics@2.0.3': |
| 104 | resolution: {integrity: sha512-hrlQOIi7hAfzsMqlGSFyVucrx38O+j6wiGOf//H2ecvIEqYN4ADBSS2iLMh5UFyDunCNniUIPk/q3riFv45xRA==} | 108 | resolution: {integrity: sha512-hrlQOIi7hAfzsMqlGSFyVucrx38O+j6wiGOf//H2ecvIEqYN4ADBSS2iLMh5UFyDunCNniUIPk/q3riFv45xRA==} |
| @@ -118,9 +122,6 @@ packages: | |||
| 118 | resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==} | 122 | resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==} |
| 119 | engines: {node: '>= 8'} | 123 | engines: {node: '>= 8'} |
| 120 | 124 | ||
| 121 | '@oddbird/blend@0.2.4': | ||
| 122 | resolution: {integrity: sha512-+629s/xXq7YdEEt8mNEDia6ApX6GV3tz6XIhBgqQkdWqjAKbqGXDgjqcGA5O+SdLhzwS3YFtV6rqG4lA/DXymg==} | ||
| 123 | |||
| 124 | '@resvg/resvg-js-android-arm-eabi@2.6.2': | 125 | '@resvg/resvg-js-android-arm-eabi@2.6.2': |
| 125 | resolution: {integrity: sha512-FrJibrAk6v29eabIPgcTUMPXiEz8ssrAk7TXxsiZzww9UTQ1Z5KAbFJs+Z0Ez+VZTYgnE5IQJqBcoSiMebtPHA==} | 126 | resolution: {integrity: sha512-FrJibrAk6v29eabIPgcTUMPXiEz8ssrAk7TXxsiZzww9UTQ1Z5KAbFJs+Z0Ez+VZTYgnE5IQJqBcoSiMebtPHA==} |
| 126 | engines: {node: '>= 10'} | 127 | engines: {node: '>= 10'} |
| @@ -197,6 +198,12 @@ packages: | |||
| 197 | resolution: {integrity: sha512-xBaJish5OeGmniDj9cW5PRa/PtmuVU3ziqrbr5xJj901ZDN4TosrVaNZpEiLZAxdfnhAe7uQ7QFWfjPe9d9K2Q==} | 198 | resolution: {integrity: sha512-xBaJish5OeGmniDj9cW5PRa/PtmuVU3ziqrbr5xJj901ZDN4TosrVaNZpEiLZAxdfnhAe7uQ7QFWfjPe9d9K2Q==} |
| 198 | engines: {node: '>= 10'} | 199 | engines: {node: '>= 10'} |
| 199 | 200 | ||
| 201 | '@stylistic/stylelint-plugin@3.1.1': | ||
| 202 | resolution: {integrity: sha512-XagAHHIa528EvyGybv8EEYGK5zrVW74cHpsjhtovVATbhDRuJYfE+X4HCaAieW9lCkwbX6L+X0I4CiUG3w/hFw==} | ||
| 203 | engines: {node: ^18.12 || >=20.9} | ||
| 204 | peerDependencies: | ||
| 205 | stylelint: ^16.8.0 | ||
| 206 | |||
| 200 | '@trysound/sax@0.2.0': | 207 | '@trysound/sax@0.2.0': |
| 201 | resolution: {integrity: sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==} | 208 | resolution: {integrity: sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==} |
| 202 | engines: {node: '>=10.13.0'} | 209 | engines: {node: '>=10.13.0'} |
| @@ -232,8 +239,8 @@ packages: | |||
| 232 | engines: {node: '>=0.4.0'} | 239 | engines: {node: '>=0.4.0'} |
| 233 | hasBin: true | 240 | hasBin: true |
| 234 | 241 | ||
| 235 | ajv@8.16.0: | 242 | ajv@8.17.1: |
| 236 | resolution: {integrity: sha512-F0twR8U1ZU67JIEtekUcLkXkoO5mMMmgGD8sK/xUFzJ805jxHQl92hImFAqqXMyMYjSPOyUPAwHYhB72g5sTXw==} | 243 | resolution: {integrity: sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==} |
| 237 | 244 | ||
| 238 | align-text@0.1.4: | 245 | align-text@0.1.4: |
| 239 | resolution: {integrity: sha512-GrTZLRpmp6wIC2ztrWW9MjjTgSKccffgFagbNDOX95/dcjEcYZibYTeaOntySQLcdw1ztBoFkviiUvTMbb9MYg==} | 246 | resolution: {integrity: sha512-GrTZLRpmp6wIC2ztrWW9MjjTgSKccffgFagbNDOX95/dcjEcYZibYTeaOntySQLcdw1ztBoFkviiUvTMbb9MYg==} |
| @@ -247,8 +254,8 @@ packages: | |||
| 247 | resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==} | 254 | resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==} |
| 248 | engines: {node: '>=8'} | 255 | engines: {node: '>=8'} |
| 249 | 256 | ||
| 250 | ansi-regex@6.0.1: | 257 | ansi-regex@6.1.0: |
| 251 | resolution: {integrity: sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==} | 258 | resolution: {integrity: sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==} |
| 252 | engines: {node: '>=12'} | 259 | engines: {node: '>=12'} |
| 253 | 260 | ||
| 254 | ansi-styles@2.2.1: | 261 | ansi-styles@2.2.1: |
| @@ -263,10 +270,6 @@ packages: | |||
| 263 | resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==} | 270 | resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==} |
| 264 | engines: {node: '>=8'} | 271 | engines: {node: '>=8'} |
| 265 | 272 | ||
| 266 | anymatch@3.1.3: | ||
| 267 | resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==} | ||
| 268 | engines: {node: '>= 8'} | ||
| 269 | |||
| 270 | argparse@2.0.1: | 273 | argparse@2.0.1: |
| 271 | resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==} | 274 | resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==} |
| 272 | 275 | ||
| @@ -307,10 +310,6 @@ packages: | |||
| 307 | balanced-match@2.0.0: | 310 | balanced-match@2.0.0: |
| 308 | resolution: {integrity: sha512-1ugUSr8BHXRnK23KfuYS+gVMC3LB8QGH9W1iGtDPsNWoQbgtXSExkBu2aDR4epiGWZOjZsj6lDl/N/AqqTC3UA==} | 311 | resolution: {integrity: sha512-1ugUSr8BHXRnK23KfuYS+gVMC3LB8QGH9W1iGtDPsNWoQbgtXSExkBu2aDR4epiGWZOjZsj6lDl/N/AqqTC3UA==} |
| 309 | 312 | ||
| 310 | binary-extensions@2.3.0: | ||
| 311 | resolution: {integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==} | ||
| 312 | engines: {node: '>=8'} | ||
| 313 | |||
| 314 | boolbase@1.0.0: | 313 | boolbase@1.0.0: |
| 315 | resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==} | 314 | resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==} |
| 316 | 315 | ||
| @@ -348,9 +347,9 @@ packages: | |||
| 348 | character-parser@2.2.0: | 347 | character-parser@2.2.0: |
| 349 | resolution: {integrity: sha512-+UqJQjFEFaTAs3bNsF2j2kEN1baG/zghZbdqoYEDxGZtJo9LBzl1A+m0D4n3qKx8N2FNv8/Xp6yV9mQmBuptaw==} | 348 | resolution: {integrity: sha512-+UqJQjFEFaTAs3bNsF2j2kEN1baG/zghZbdqoYEDxGZtJo9LBzl1A+m0D4n3qKx8N2FNv8/Xp6yV9mQmBuptaw==} |
| 350 | 349 | ||
| 351 | chokidar@3.6.0: | 350 | chokidar@4.0.1: |
| 352 | resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==} | 351 | resolution: {integrity: sha512-n8enUVCED/KVRQlab1hr3MVpcVMvxtZjmEa956u+4YijlmQED223XMSYj2tLuKvr4jcCTzNNMpQDUer72MMmzA==} |
| 353 | engines: {node: '>= 8.10.0'} | 352 | engines: {node: '>= 14.16.0'} |
| 354 | 353 | ||
| 355 | clean-css@4.2.4: | 354 | clean-css@4.2.4: |
| 356 | resolution: {integrity: sha512-EJUDT7nDVFDvaQgAo2G/PJvxmp1o/c6iXLbswsBbUFXi1Nr+AjA2cKmfbKDMjMvzEe75g3P6JkaDDAKk96A85A==} | 355 | resolution: {integrity: sha512-EJUDT7nDVFDvaQgAo2G/PJvxmp1o/c6iXLbswsBbUFXi1Nr+AjA2cKmfbKDMjMvzEe75g3P6JkaDDAKk96A85A==} |
| @@ -468,8 +467,8 @@ packages: | |||
| 468 | cssom@0.5.0: | 467 | cssom@0.5.0: |
| 469 | resolution: {integrity: sha512-iKuQcq+NdHqlAcwUY0o/HL69XQrUaQdMjmStJ8JFmUaiiQErlhrmuigkg/CU4E2J0IyUKUrMAgl36TvN67MqTw==} | 468 | resolution: {integrity: sha512-iKuQcq+NdHqlAcwUY0o/HL69XQrUaQdMjmStJ8JFmUaiiQErlhrmuigkg/CU4E2J0IyUKUrMAgl36TvN67MqTw==} |
| 470 | 469 | ||
| 471 | debug@4.3.5: | 470 | debug@4.3.7: |
| 472 | resolution: {integrity: sha512-pt0bNEmneDIvdL1Xsd9oDQ/wrQRkXDT4AUWlNZNPKvW5x/jyO9VFXkJUP07vQ2upmw5PlaITaPKc31jK13V+jg==} | 471 | resolution: {integrity: sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==} |
| 473 | engines: {node: '>=6.0'} | 472 | engines: {node: '>=6.0'} |
| 474 | peerDependencies: | 473 | peerDependencies: |
| 475 | supports-color: '*' | 474 | supports-color: '*' |
| @@ -548,6 +547,9 @@ packages: | |||
| 548 | resolution: {integrity: sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==} | 547 | resolution: {integrity: sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==} |
| 549 | engines: {node: '>=8.6.0'} | 548 | engines: {node: '>=8.6.0'} |
| 550 | 549 | ||
| 550 | fast-uri@3.0.2: | ||
| 551 | resolution: {integrity: sha512-GR6f0hD7XXyNJa25Tb9BuIdN0tdr+0BMi6/CJPH3wJO1JjNG3n/VsSw38AwRdKZABm8lGbPfakLRkYzx2V9row==} | ||
| 552 | |||
| 551 | fastest-levenshtein@1.0.16: | 553 | fastest-levenshtein@1.0.16: |
| 552 | resolution: {integrity: sha512-eRnCtTTtGZFpQCwhJiUOuxPQWRXVKYDn0b2PeHfXL6/Zi53SLAzAHfVhVWK2AryC/WH05kGfxhFIPvTF0SXQzg==} | 554 | resolution: {integrity: sha512-eRnCtTTtGZFpQCwhJiUOuxPQWRXVKYDn0b2PeHfXL6/Zi53SLAzAHfVhVWK2AryC/WH05kGfxhFIPvTF0SXQzg==} |
| 553 | engines: {node: '>= 4.9.1'} | 555 | engines: {node: '>= 4.9.1'} |
| @@ -558,8 +560,8 @@ packages: | |||
| 558 | fecha@4.2.3: | 560 | fecha@4.2.3: |
| 559 | resolution: {integrity: sha512-OP2IUU6HeYKJi3i0z4A19kHMQoLVs4Hc+DPqqxI2h/DPZHTm/vjsfC6P0b4jCMy14XizLBqvndQ+UilD7707Jw==} | 561 | resolution: {integrity: sha512-OP2IUU6HeYKJi3i0z4A19kHMQoLVs4Hc+DPqqxI2h/DPZHTm/vjsfC6P0b4jCMy14XizLBqvndQ+UilD7707Jw==} |
| 560 | 562 | ||
| 561 | file-entry-cache@9.0.0: | 563 | file-entry-cache@9.1.0: |
| 562 | resolution: {integrity: sha512-6MgEugi8p2tiUhqO7GnPsmbCCzj0YRCwwaTbpGRyKZesjRSzkqkAE9fPp7V2yMs5hwfgbQLgdvSSkGNg1s5Uvw==} | 564 | resolution: {integrity: sha512-/pqPFG+FdxWQj+/WSuzXSDaNzxgTLr/OrR1QuqfEZzDakpdYE70PwUxL7BPUa8hpjbvY1+qvCl8k+8Tq34xJgg==} |
| 563 | engines: {node: '>=18'} | 565 | engines: {node: '>=18'} |
| 564 | 566 | ||
| 565 | fill-range@7.1.1: | 567 | fill-range@7.1.1: |
| @@ -579,11 +581,6 @@ packages: | |||
| 579 | fs.realpath@1.0.0: | 581 | fs.realpath@1.0.0: |
| 580 | resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==} | 582 | resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==} |
| 581 | 583 | ||
| 582 | fsevents@2.3.3: | ||
| 583 | resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==} | ||
| 584 | engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0} | ||
| 585 | os: [darwin] | ||
| 586 | |||
| 587 | function-bind@1.1.2: | 584 | function-bind@1.1.2: |
| 588 | resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==} | 585 | resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==} |
| 589 | 586 | ||
| @@ -656,12 +653,12 @@ packages: | |||
| 656 | resolution: {integrity: sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ==} | 653 | resolution: {integrity: sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ==} |
| 657 | engines: {node: '>=8'} | 654 | engines: {node: '>=8'} |
| 658 | 655 | ||
| 659 | ignore@5.3.1: | 656 | ignore@5.3.2: |
| 660 | resolution: {integrity: sha512-5Fytz/IraMjqpwfd34ke28PTVMjZjJG2MPn5t7OE4eUCUNf8BAa7b5WUS9/Qvr6mwOQS7Mk6vdsMno5he+T8Xw==} | 657 | resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==} |
| 661 | engines: {node: '>= 4'} | 658 | engines: {node: '>= 4'} |
| 662 | 659 | ||
| 663 | immutable@4.3.6: | 660 | immutable@4.3.7: |
| 664 | resolution: {integrity: sha512-Ju0+lEMyzMVZarkTn/gqRpdqd5dOPaz1mCZ0SH3JV6iFw81PldE/PEB1hWVEA288HPt4WXW8O7AWxB10M+03QQ==} | 661 | resolution: {integrity: sha512-1hqclzwYwjRDFLjcFxOM5AYkkG0rpFPpr1RLPMEuGczoS7YA8gLhy8SWXYRAA/XwfEHpfo3cw5JGioS32fnMRw==} |
| 665 | 662 | ||
| 666 | import-fresh@3.3.0: | 663 | import-fresh@3.3.0: |
| 667 | resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==} | 664 | resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==} |
| @@ -684,15 +681,15 @@ packages: | |||
| 684 | ini@1.3.8: | 681 | ini@1.3.8: |
| 685 | resolution: {integrity: sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==} | 682 | resolution: {integrity: sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==} |
| 686 | 683 | ||
| 687 | iro-icons@git+https://git.vulpes.one/git/iro-icons.git#b854aa0bfdc5a1bd233606af8ffff6312017845e: | 684 | iro-icons@git+https://git.vulpes.one/git/iro-icons.git#8b921f634a565fd9bb8f6e0ddb1b4d7ba207c0a0: |
| 688 | resolution: {commit: b854aa0bfdc5a1bd233606af8ffff6312017845e, repo: https://git.vulpes.one/git/iro-icons.git, type: git} | 685 | resolution: {commit: 8b921f634a565fd9bb8f6e0ddb1b4d7ba207c0a0, repo: https://git.vulpes.one/git/iro-icons.git, type: git} |
| 689 | version: 1.0.1 | 686 | version: 1.0.1 |
| 690 | hasBin: true | 687 | hasBin: true |
| 691 | peerDependencies: | 688 | peerDependencies: |
| 692 | svg-sprite: ^2.0.2 | 689 | svg-sprite: ^2.0.2 |
| 693 | 690 | ||
| 694 | iro-sass@git+https://git.vulpes.one/git/iro-sass.git#04f8e9dbdc57a53f004e6238dfacc917bafdbbff: | 691 | iro-sass@git+https://git.vulpes.one/git/iro-sass.git#351814a60e8909814c7120db96314a1a25d962bd: |
| 695 | resolution: {commit: 04f8e9dbdc57a53f004e6238dfacc917bafdbbff, repo: https://git.vulpes.one/git/iro-sass.git, type: git} | 692 | resolution: {commit: 351814a60e8909814c7120db96314a1a25d962bd, repo: https://git.vulpes.one/git/iro-sass.git, type: git} |
| 696 | version: 1.0.2 | 693 | version: 1.0.2 |
| 697 | 694 | ||
| 698 | is-arrayish@0.2.1: | 695 | is-arrayish@0.2.1: |
| @@ -701,10 +698,6 @@ packages: | |||
| 701 | is-arrayish@0.3.2: | 698 | is-arrayish@0.3.2: |
| 702 | resolution: {integrity: sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==} | 699 | resolution: {integrity: sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==} |
| 703 | 700 | ||
| 704 | is-binary-path@2.1.0: | ||
| 705 | resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==} | ||
| 706 | engines: {node: '>=8'} | ||
| 707 | |||
| 708 | is-buffer@1.1.6: | 701 | is-buffer@1.1.6: |
| 709 | resolution: {integrity: sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==} | 702 | resolution: {integrity: sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==} |
| 710 | 703 | ||
| @@ -788,8 +781,8 @@ packages: | |||
| 788 | resolution: {integrity: sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==} | 781 | resolution: {integrity: sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==} |
| 789 | engines: {node: '>=0.10.0'} | 782 | engines: {node: '>=0.10.0'} |
| 790 | 783 | ||
| 791 | known-css-properties@0.31.0: | 784 | known-css-properties@0.34.0: |
| 792 | resolution: {integrity: sha512-sBPIUGTNF0czz0mwGGUoKKJC8Q7On1GPbCSFPfyEsfHb2DyBG0Y4QtV+EVWpINSaiGKZblDNuF5AezxSgOhesQ==} | 785 | resolution: {integrity: sha512-tBECoUqNFbyAY4RrbqsBQqDFpGXAEbdD5QKr8kACx3+rnArmuuR22nKQWKazvp07N9yjTyDZaw/20UIH8tL9DQ==} |
| 793 | 786 | ||
| 794 | kuler@2.0.0: | 787 | kuler@2.0.0: |
| 795 | resolution: {integrity: sha512-Xq9nH7KlWZmXAtodXDDRE7vs6DU1gTU8zYDHDiWLSip45Egwq3plLHzPn27NgvzL2r1LMPC1vdqh98sQxtqj4A==} | 788 | resolution: {integrity: sha512-Xq9nH7KlWZmXAtodXDDRE7vs6DU1gTU8zYDHDiWLSip45Egwq3plLHzPn27NgvzL2r1LMPC1vdqh98sQxtqj4A==} |
| @@ -838,8 +831,8 @@ packages: | |||
| 838 | resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==} | 831 | resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==} |
| 839 | engines: {node: '>= 8'} | 832 | engines: {node: '>= 8'} |
| 840 | 833 | ||
| 841 | micromatch@4.0.7: | 834 | micromatch@4.0.8: |
| 842 | resolution: {integrity: sha512-LPP/3KorzCwBxfeUuZmaR6bG2kdeHSbe0P2tY3FLRU4vYrjYz5hI4QZwV0njUx3jeuKe67YukQ1LSPZBKDqO/Q==} | 835 | resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==} |
| 843 | engines: {node: '>=8.6'} | 836 | engines: {node: '>=8.6'} |
| 844 | 837 | ||
| 845 | minimatch@3.1.2: | 838 | minimatch@3.1.2: |
| @@ -852,9 +845,6 @@ packages: | |||
| 852 | resolution: {integrity: sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==} | 845 | resolution: {integrity: sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==} |
| 853 | hasBin: true | 846 | hasBin: true |
| 854 | 847 | ||
| 855 | ms@2.1.2: | ||
| 856 | resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==} | ||
| 857 | |||
| 858 | ms@2.1.3: | 848 | ms@2.1.3: |
| 859 | resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==} | 849 | resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==} |
| 860 | 850 | ||
| @@ -906,6 +896,9 @@ packages: | |||
| 906 | picocolors@1.0.1: | 896 | picocolors@1.0.1: |
| 907 | resolution: {integrity: sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==} | 897 | resolution: {integrity: sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==} |
| 908 | 898 | ||
| 899 | picocolors@1.1.0: | ||
| 900 | resolution: {integrity: sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw==} | ||
| 901 | |||
| 909 | picomatch@2.3.1: | 902 | picomatch@2.3.1: |
| 910 | resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==} | 903 | resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==} |
| 911 | engines: {node: '>=8.6'} | 904 | engines: {node: '>=8.6'} |
| @@ -913,11 +906,11 @@ packages: | |||
| 913 | postcss-media-query-parser@0.2.3: | 906 | postcss-media-query-parser@0.2.3: |
| 914 | resolution: {integrity: sha512-3sOlxmbKcSHMjlUXQZKQ06jOswE7oVkXPxmZdoB1r5l0q6gTFTQSHxNxOrCccElbW7dxNytifNEo8qidX2Vsig==} | 907 | resolution: {integrity: sha512-3sOlxmbKcSHMjlUXQZKQ06jOswE7oVkXPxmZdoB1r5l0q6gTFTQSHxNxOrCccElbW7dxNytifNEo8qidX2Vsig==} |
| 915 | 908 | ||
| 916 | postcss-resolve-nested-selector@0.1.1: | 909 | postcss-resolve-nested-selector@0.1.6: |
| 917 | resolution: {integrity: sha512-HvExULSwLqHLgUy1rl3ANIqCsvMS0WHss2UOsXhXnQaZ9VCc2oBvIpXrl00IUFT5ZDITME0o6oiXeiHr2SAIfw==} | 910 | resolution: {integrity: sha512-0sglIs9Wmkzbr8lQwEyIzlDOOC9bGmfVKcJTaxv3vMmd3uo4o4DerC3En0bnmgceeql9BfC8hRkp7cg0fjdVqw==} |
| 918 | 911 | ||
| 919 | postcss-safe-parser@7.0.0: | 912 | postcss-safe-parser@7.0.1: |
| 920 | resolution: {integrity: sha512-ovehqRNVCpuFzbXoTb4qLtyzK3xn3t/CUBxOs8LsnQjQrShaB4lKiHoVqY8ANaC0hBMHq5QVWk77rwGklFUDrg==} | 913 | resolution: {integrity: sha512-0AioNCJZ2DPYz5ABT6bddIqlhgwhpHZ/l65YAYo0BCIn0xiDpsnTHz0gnoTGk0OXZW0JRs+cDwL8u/teRdz+8A==} |
| 921 | engines: {node: '>=18.0'} | 914 | engines: {node: '>=18.0'} |
| 922 | peerDependencies: | 915 | peerDependencies: |
| 923 | postcss: ^8.4.31 | 916 | postcss: ^8.4.31 |
| @@ -928,8 +921,8 @@ packages: | |||
| 928 | peerDependencies: | 921 | peerDependencies: |
| 929 | postcss: ^8.4.29 | 922 | postcss: ^8.4.29 |
| 930 | 923 | ||
| 931 | postcss-selector-parser@6.1.0: | 924 | postcss-selector-parser@6.1.2: |
| 932 | resolution: {integrity: sha512-UMz42UD0UY0EApS0ZL9o1XnLhSTtvvvLe5Dc2H2O56fvRZi+KulDyf5ctDhhtYJBGKStV2FL1fy6253cmLgqVQ==} | 925 | resolution: {integrity: sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==} |
| 933 | engines: {node: '>=4'} | 926 | engines: {node: '>=4'} |
| 934 | 927 | ||
| 935 | postcss-sorting@8.0.2: | 928 | postcss-sorting@8.0.2: |
| @@ -944,6 +937,10 @@ packages: | |||
| 944 | resolution: {integrity: sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==} | 937 | resolution: {integrity: sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==} |
| 945 | engines: {node: ^10 || ^12 || >=14} | 938 | engines: {node: ^10 || ^12 || >=14} |
| 946 | 939 | ||
| 940 | postcss@8.4.47: | ||
| 941 | resolution: {integrity: sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ==} | ||
| 942 | engines: {node: ^10 || ^12 || >=14} | ||
| 943 | |||
| 947 | prettysize@2.0.0: | 944 | prettysize@2.0.0: |
| 948 | resolution: {integrity: sha512-VVtxR7sOh0VsG8o06Ttq5TrI1aiZKmC+ClSn4eBPaNf4SHr5lzbYW+kYGX3HocBL/MfpVrRfFZ9V3vCbLaiplg==} | 945 | resolution: {integrity: sha512-VVtxR7sOh0VsG8o06Ttq5TrI1aiZKmC+ClSn4eBPaNf4SHr5lzbYW+kYGX3HocBL/MfpVrRfFZ9V3vCbLaiplg==} |
| 949 | 946 | ||
| @@ -1029,10 +1026,6 @@ packages: | |||
| 1029 | pug@3.0.3: | 1026 | pug@3.0.3: |
| 1030 | resolution: {integrity: sha512-uBi6kmc9f3SZ3PXxqcHiUZLmIXgfgWooKWXcwSGwQd2Zi5Rb0bT14+8CJjJgI8AB+nndLaNgHGrcc6bPIB665g==} | 1027 | resolution: {integrity: sha512-uBi6kmc9f3SZ3PXxqcHiUZLmIXgfgWooKWXcwSGwQd2Zi5Rb0bT14+8CJjJgI8AB+nndLaNgHGrcc6bPIB665g==} |
| 1031 | 1028 | ||
| 1032 | punycode@2.3.1: | ||
| 1033 | resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==} | ||
| 1034 | engines: {node: '>=6'} | ||
| 1035 | |||
| 1036 | queue-microtask@1.2.3: | 1029 | queue-microtask@1.2.3: |
| 1037 | resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==} | 1030 | resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==} |
| 1038 | 1031 | ||
| @@ -1043,9 +1036,9 @@ packages: | |||
| 1043 | resolution: {integrity: sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==} | 1036 | resolution: {integrity: sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==} |
| 1044 | engines: {node: '>= 6'} | 1037 | engines: {node: '>= 6'} |
| 1045 | 1038 | ||
| 1046 | readdirp@3.6.0: | 1039 | readdirp@4.0.2: |
| 1047 | resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==} | 1040 | resolution: {integrity: sha512-yDMz9g+VaZkqBYS/ozoBJwaBhTbZo3UNYQHNRw1D3UFQB8oHB4uS/tAODO+ZLjGWmUbKnIlOWO+aaIiAxrUWHA==} |
| 1048 | engines: {node: '>=8.10.0'} | 1041 | engines: {node: '>= 14.16.0'} |
| 1049 | 1042 | ||
| 1050 | regenerator-runtime@0.11.1: | 1043 | regenerator-runtime@0.11.1: |
| 1051 | resolution: {integrity: sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==} | 1044 | resolution: {integrity: sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==} |
| @@ -1102,8 +1095,8 @@ packages: | |||
| 1102 | resolution: {integrity: sha512-e2bDA2WJT0wxseVd4lsDP4+3ONX6HpMXQa1ZhFQ7SU+GjvORCmShbCMltrtIDfkYhVHrOcPtj+KhmDBdPdZD1g==} | 1095 | resolution: {integrity: sha512-e2bDA2WJT0wxseVd4lsDP4+3ONX6HpMXQa1ZhFQ7SU+GjvORCmShbCMltrtIDfkYhVHrOcPtj+KhmDBdPdZD1g==} |
| 1103 | engines: {node: '>=10'} | 1096 | engines: {node: '>=10'} |
| 1104 | 1097 | ||
| 1105 | sass@1.77.6: | 1098 | sass@1.79.4: |
| 1106 | resolution: {integrity: sha512-ByXE1oLD79GVq9Ht1PeHWCPMPB8XHpBuz1r85oByKHjZY6qV6rWnQovQzXJXuQ/XyE1Oj3iPk3lo28uzaRA2/Q==} | 1099 | resolution: {integrity: sha512-K0QDSNPXgyqO4GZq2HO5Q70TLxTH6cIT59RdoCHMivrC8rqzaTw5ab9prjz9KUN1El4FLXrBXJhik61JR4HcGg==} |
| 1107 | engines: {node: '>=14.0.0'} | 1100 | engines: {node: '>=14.0.0'} |
| 1108 | hasBin: true | 1101 | hasBin: true |
| 1109 | 1102 | ||
| @@ -1126,8 +1119,8 @@ packages: | |||
| 1126 | resolution: {integrity: sha512-qMCMfhY040cVHT43K9BFygqYbUPFZKHOg7K73mtTWJRb8pyP3fzf4Ixd5SzdEJQ6MRUg/WBnOLxghZtKKurENQ==} | 1119 | resolution: {integrity: sha512-qMCMfhY040cVHT43K9BFygqYbUPFZKHOg7K73mtTWJRb8pyP3fzf4Ixd5SzdEJQ6MRUg/WBnOLxghZtKKurENQ==} |
| 1127 | engines: {node: '>=10'} | 1120 | engines: {node: '>=10'} |
| 1128 | 1121 | ||
| 1129 | source-map-js@1.2.0: | 1122 | source-map-js@1.2.1: |
| 1130 | resolution: {integrity: sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==} | 1123 | resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==} |
| 1131 | engines: {node: '>=0.10.0'} | 1124 | engines: {node: '>=0.10.0'} |
| 1132 | 1125 | ||
| 1133 | source-map@0.5.7: | 1126 | source-map@0.5.7: |
| @@ -1167,8 +1160,16 @@ packages: | |||
| 1167 | resolution: {integrity: sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==} | 1160 | resolution: {integrity: sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==} |
| 1168 | engines: {node: '>=12'} | 1161 | engines: {node: '>=12'} |
| 1169 | 1162 | ||
| 1170 | stylelint-config-sass-guidelines@11.1.0: | 1163 | style-search@0.1.0: |
| 1171 | resolution: {integrity: sha512-mVE3UmN8MlshK4Gb3eYk6f8tw9DkQ9yjMF4W9krlmpaNZpSXOdh13AL0sU7l/9l4Pnpt4KMobNNIRI0tJl56Cw==} | 1164 | resolution: {integrity: sha512-Dj1Okke1C3uKKwQcetra4jSuk0DqbzbYtXipzFlFMZtowbF1x7BKJwB9AayVMyFARvU8EDrZdcax4At/452cAg==} |
| 1165 | |||
| 1166 | stylelint-config-recess-order@5.1.1: | ||
| 1167 | resolution: {integrity: sha512-eDAHWVBelzDbMbdMj15pSw0Ycykv5eLeriJdbGCp0zd44yvhgZLI+wyVHegzXp5NrstxTPSxl0fuOVKdMm0XLA==} | ||
| 1168 | peerDependencies: | ||
| 1169 | stylelint: '>=16' | ||
| 1170 | |||
| 1171 | stylelint-config-sass-guidelines@12.1.0: | ||
| 1172 | resolution: {integrity: sha512-NTxEtVT6uNSqRvq+A3ScyKhjUrY/Z845TnpWEwnMgIPZ/+/Waa4+51r6OPuQRMu4XZS3D8DK1UaT4TWFBvuuAw==} | ||
| 1172 | engines: {node: '>=18.12.0'} | 1173 | engines: {node: '>=18.12.0'} |
| 1173 | peerDependencies: | 1174 | peerDependencies: |
| 1174 | postcss: ^8.4.21 | 1175 | postcss: ^8.4.21 |
| @@ -1179,14 +1180,14 @@ packages: | |||
| 1179 | peerDependencies: | 1180 | peerDependencies: |
| 1180 | stylelint: ^14.0.0 || ^15.0.0 || ^16.0.1 | 1181 | stylelint: ^14.0.0 || ^15.0.0 || ^16.0.1 |
| 1181 | 1182 | ||
| 1182 | stylelint-scss@6.3.2: | 1183 | stylelint-scss@6.7.0: |
| 1183 | resolution: {integrity: sha512-pNk9mXOVKkQtd+SROPC9io8ISSgX+tOVPhFdBE+LaKQnJMLdWPbGKAGYv4Wmf/RrnOjkutunNTN9kKMhkdE5qA==} | 1184 | resolution: {integrity: sha512-RFIa2A+pVWS5wjNT+whtK7wsbZEWazyqesCuSaPbPlZ8lh2TujwVJSnCYJijg6ChZzwI8pZPRZS1L6A9aCbXDg==} |
| 1184 | engines: {node: '>=18.12.0'} | 1185 | engines: {node: '>=18.12.0'} |
| 1185 | peerDependencies: | 1186 | peerDependencies: |
| 1186 | stylelint: ^16.0.2 | 1187 | stylelint: ^16.0.2 |
| 1187 | 1188 | ||
| 1188 | stylelint@16.6.1: | 1189 | stylelint@16.9.0: |
| 1189 | resolution: {integrity: sha512-yNgz2PqWLkhH2hw6X9AweV9YvoafbAD5ZsFdKN9BvSDVwGvPh+AUIrn7lYwy1S7IHmtFin75LLfX1m0D2tHu8Q==} | 1190 | resolution: {integrity: sha512-31Nm3WjxGOBGpQqF43o3wO9L5AC36TPIe6030Lnm13H3vDMTcS21DrLh69bMX+DBilKqMMVLian4iG6ybBoNRQ==} |
| 1190 | engines: {node: '>=18.12.0'} | 1191 | engines: {node: '>=18.12.0'} |
| 1191 | hasBin: true | 1192 | hasBin: true |
| 1192 | 1193 | ||
| @@ -1202,8 +1203,8 @@ packages: | |||
| 1202 | resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==} | 1203 | resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==} |
| 1203 | engines: {node: '>=8'} | 1204 | engines: {node: '>=8'} |
| 1204 | 1205 | ||
| 1205 | supports-hyperlinks@3.0.0: | 1206 | supports-hyperlinks@3.1.0: |
| 1206 | resolution: {integrity: sha512-QBDPHyPQDRTy9ku4URNGY5Lah8PAaXs6tAAwp55sL5WCsSW7GIfdf6W5ixfziW+t7wh3GVvHyHHyQ1ESsoRvaA==} | 1207 | resolution: {integrity: sha512-2rn0BZ+/f7puLOHZm1HOJfwBggfaHXUpPUSSG/SWM4TWp5KCfmNYwnC3hruy2rZlMnmWZ+QAGpZfchu3f3695A==} |
| 1207 | engines: {node: '>=14.18'} | 1208 | engines: {node: '>=14.18'} |
| 1208 | 1209 | ||
| 1209 | supports-preserve-symlinks-flag@1.0.0: | 1210 | supports-preserve-symlinks-flag@1.0.0: |
| @@ -1260,9 +1261,6 @@ packages: | |||
| 1260 | uglify-to-browserify@1.0.2: | 1261 | uglify-to-browserify@1.0.2: |
| 1261 | resolution: {integrity: sha512-vb2s1lYx2xBtUgy+ta+b2J/GLVUR+wmpINwHePmPRhOsIVCG2wDzKJ0n14GslH1BifsqVzSOwQhRaCAsZ/nI4Q==} | 1262 | resolution: {integrity: sha512-vb2s1lYx2xBtUgy+ta+b2J/GLVUR+wmpINwHePmPRhOsIVCG2wDzKJ0n14GslH1BifsqVzSOwQhRaCAsZ/nI4Q==} |
| 1262 | 1263 | ||
| 1263 | uri-js@4.4.1: | ||
| 1264 | resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==} | ||
| 1265 | |||
| 1266 | util-deprecate@1.0.2: | 1264 | util-deprecate@1.0.2: |
| 1267 | resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==} | 1265 | resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==} |
| 1268 | 1266 | ||
| @@ -1337,21 +1335,23 @@ packages: | |||
| 1337 | 1335 | ||
| 1338 | snapshots: | 1336 | snapshots: |
| 1339 | 1337 | ||
| 1340 | '@babel/code-frame@7.24.7': | 1338 | '@babel/code-frame@7.25.7': |
| 1341 | dependencies: | 1339 | dependencies: |
| 1342 | '@babel/highlight': 7.24.7 | 1340 | '@babel/highlight': 7.25.7 |
| 1343 | picocolors: 1.0.1 | 1341 | picocolors: 1.1.0 |
| 1344 | 1342 | ||
| 1345 | '@babel/helper-string-parser@7.24.7': {} | 1343 | '@babel/helper-string-parser@7.24.7': {} |
| 1346 | 1344 | ||
| 1347 | '@babel/helper-validator-identifier@7.24.7': {} | 1345 | '@babel/helper-validator-identifier@7.24.7': {} |
| 1348 | 1346 | ||
| 1349 | '@babel/highlight@7.24.7': | 1347 | '@babel/helper-validator-identifier@7.25.7': {} |
| 1348 | |||
| 1349 | '@babel/highlight@7.25.7': | ||
| 1350 | dependencies: | 1350 | dependencies: |
| 1351 | '@babel/helper-validator-identifier': 7.24.7 | 1351 | '@babel/helper-validator-identifier': 7.25.7 |
| 1352 | chalk: 2.4.2 | 1352 | chalk: 2.4.2 |
| 1353 | js-tokens: 4.0.0 | 1353 | js-tokens: 4.0.0 |
| 1354 | picocolors: 1.0.1 | 1354 | picocolors: 1.1.0 |
| 1355 | 1355 | ||
| 1356 | '@babel/parser@7.24.7': | 1356 | '@babel/parser@7.24.7': |
| 1357 | dependencies: | 1357 | dependencies: |
| @@ -1365,20 +1365,20 @@ snapshots: | |||
| 1365 | 1365 | ||
| 1366 | '@colors/colors@1.6.0': {} | 1366 | '@colors/colors@1.6.0': {} |
| 1367 | 1367 | ||
| 1368 | '@csstools/css-parser-algorithms@2.6.3(@csstools/css-tokenizer@2.3.1)': | 1368 | '@csstools/css-parser-algorithms@3.0.1(@csstools/css-tokenizer@3.0.1)': |
| 1369 | dependencies: | 1369 | dependencies: |
| 1370 | '@csstools/css-tokenizer': 2.3.1 | 1370 | '@csstools/css-tokenizer': 3.0.1 |
| 1371 | 1371 | ||
| 1372 | '@csstools/css-tokenizer@2.3.1': {} | 1372 | '@csstools/css-tokenizer@3.0.1': {} |
| 1373 | 1373 | ||
| 1374 | '@csstools/media-query-list-parser@2.1.11(@csstools/css-parser-algorithms@2.6.3(@csstools/css-tokenizer@2.3.1))(@csstools/css-tokenizer@2.3.1)': | 1374 | '@csstools/media-query-list-parser@3.0.1(@csstools/css-parser-algorithms@3.0.1(@csstools/css-tokenizer@3.0.1))(@csstools/css-tokenizer@3.0.1)': |
| 1375 | dependencies: | 1375 | dependencies: |
| 1376 | '@csstools/css-parser-algorithms': 2.6.3(@csstools/css-tokenizer@2.3.1) | 1376 | '@csstools/css-parser-algorithms': 3.0.1(@csstools/css-tokenizer@3.0.1) |
| 1377 | '@csstools/css-tokenizer': 2.3.1 | 1377 | '@csstools/css-tokenizer': 3.0.1 |
| 1378 | 1378 | ||
| 1379 | '@csstools/selector-specificity@3.1.1(postcss-selector-parser@6.1.0)': | 1379 | '@csstools/selector-specificity@4.0.0(postcss-selector-parser@6.1.2)': |
| 1380 | dependencies: | 1380 | dependencies: |
| 1381 | postcss-selector-parser: 6.1.0 | 1381 | postcss-selector-parser: 6.1.2 |
| 1382 | 1382 | ||
| 1383 | '@dabh/diagnostics@2.0.3': | 1383 | '@dabh/diagnostics@2.0.3': |
| 1384 | dependencies: | 1384 | dependencies: |
| @@ -1400,8 +1400,6 @@ snapshots: | |||
| 1400 | '@nodelib/fs.scandir': 2.1.5 | 1400 | '@nodelib/fs.scandir': 2.1.5 |
| 1401 | fastq: 1.17.1 | 1401 | fastq: 1.17.1 |
| 1402 | 1402 | ||
| 1403 | '@oddbird/blend@0.2.4': {} | ||
| 1404 | |||
| 1405 | '@resvg/resvg-js-android-arm-eabi@2.6.2': | 1403 | '@resvg/resvg-js-android-arm-eabi@2.6.2': |
| 1406 | optional: true | 1404 | optional: true |
| 1407 | 1405 | ||
| @@ -1453,6 +1451,17 @@ snapshots: | |||
| 1453 | '@resvg/resvg-js-win32-ia32-msvc': 2.6.2 | 1451 | '@resvg/resvg-js-win32-ia32-msvc': 2.6.2 |
| 1454 | '@resvg/resvg-js-win32-x64-msvc': 2.6.2 | 1452 | '@resvg/resvg-js-win32-x64-msvc': 2.6.2 |
| 1455 | 1453 | ||
| 1454 | '@stylistic/stylelint-plugin@3.1.1(stylelint@16.9.0)': | ||
| 1455 | dependencies: | ||
| 1456 | '@csstools/css-parser-algorithms': 3.0.1(@csstools/css-tokenizer@3.0.1) | ||
| 1457 | '@csstools/css-tokenizer': 3.0.1 | ||
| 1458 | '@csstools/media-query-list-parser': 3.0.1(@csstools/css-parser-algorithms@3.0.1(@csstools/css-tokenizer@3.0.1))(@csstools/css-tokenizer@3.0.1) | ||
| 1459 | is-plain-object: 5.0.0 | ||
| 1460 | postcss-selector-parser: 6.1.2 | ||
| 1461 | postcss-value-parser: 4.2.0 | ||
| 1462 | style-search: 0.1.0 | ||
| 1463 | stylelint: 16.9.0 | ||
| 1464 | |||
| 1456 | '@trysound/sax@0.2.0': {} | 1465 | '@trysound/sax@0.2.0': {} |
| 1457 | 1466 | ||
| 1458 | '@types/babel-types@7.0.12': {} | 1467 | '@types/babel-types@7.0.12': {} |
| @@ -1475,12 +1484,12 @@ snapshots: | |||
| 1475 | 1484 | ||
| 1476 | acorn@7.4.1: {} | 1485 | acorn@7.4.1: {} |
| 1477 | 1486 | ||
| 1478 | ajv@8.16.0: | 1487 | ajv@8.17.1: |
| 1479 | dependencies: | 1488 | dependencies: |
| 1480 | fast-deep-equal: 3.1.3 | 1489 | fast-deep-equal: 3.1.3 |
| 1490 | fast-uri: 3.0.2 | ||
| 1481 | json-schema-traverse: 1.0.0 | 1491 | json-schema-traverse: 1.0.0 |
| 1482 | require-from-string: 2.0.2 | 1492 | require-from-string: 2.0.2 |
| 1483 | uri-js: 4.4.1 | ||
| 1484 | 1493 | ||
| 1485 | align-text@0.1.4: | 1494 | align-text@0.1.4: |
| 1486 | dependencies: | 1495 | dependencies: |
| @@ -1492,7 +1501,7 @@ snapshots: | |||
| 1492 | 1501 | ||
| 1493 | ansi-regex@5.0.1: {} | 1502 | ansi-regex@5.0.1: {} |
| 1494 | 1503 | ||
| 1495 | ansi-regex@6.0.1: {} | 1504 | ansi-regex@6.1.0: {} |
| 1496 | 1505 | ||
| 1497 | ansi-styles@2.2.1: {} | 1506 | ansi-styles@2.2.1: {} |
| 1498 | 1507 | ||
| @@ -1504,11 +1513,6 @@ snapshots: | |||
| 1504 | dependencies: | 1513 | dependencies: |
| 1505 | color-convert: 2.0.1 | 1514 | color-convert: 2.0.1 |
| 1506 | 1515 | ||
| 1507 | anymatch@3.1.3: | ||
| 1508 | dependencies: | ||
| 1509 | normalize-path: 3.0.0 | ||
| 1510 | picomatch: 2.3.1 | ||
| 1511 | |||
| 1512 | argparse@2.0.1: {} | 1516 | argparse@2.0.1: {} |
| 1513 | 1517 | ||
| 1514 | array-union@2.1.0: {} | 1518 | array-union@2.1.0: {} |
| @@ -1543,8 +1547,6 @@ snapshots: | |||
| 1543 | 1547 | ||
| 1544 | balanced-match@2.0.0: {} | 1548 | balanced-match@2.0.0: {} |
| 1545 | 1549 | ||
| 1546 | binary-extensions@2.3.0: {} | ||
| 1547 | |||
| 1548 | boolbase@1.0.0: {} | 1550 | boolbase@1.0.0: {} |
| 1549 | 1551 | ||
| 1550 | brace-expansion@1.1.11: | 1552 | brace-expansion@1.1.11: |
| @@ -1591,17 +1593,9 @@ snapshots: | |||
| 1591 | dependencies: | 1593 | dependencies: |
| 1592 | is-regex: 1.1.4 | 1594 | is-regex: 1.1.4 |
| 1593 | 1595 | ||
| 1594 | chokidar@3.6.0: | 1596 | chokidar@4.0.1: |
| 1595 | dependencies: | 1597 | dependencies: |
| 1596 | anymatch: 3.1.3 | 1598 | readdirp: 4.0.2 |
| 1597 | braces: 3.0.3 | ||
| 1598 | glob-parent: 5.1.2 | ||
| 1599 | is-binary-path: 2.1.0 | ||
| 1600 | is-glob: 4.0.3 | ||
| 1601 | normalize-path: 3.0.0 | ||
| 1602 | readdirp: 3.6.0 | ||
| 1603 | optionalDependencies: | ||
| 1604 | fsevents: 2.3.3 | ||
| 1605 | 1599 | ||
| 1606 | clean-css@4.2.4: | 1600 | clean-css@4.2.4: |
| 1607 | dependencies: | 1601 | dependencies: |
| @@ -1709,7 +1703,7 @@ snapshots: | |||
| 1709 | css-tree@2.3.1: | 1703 | css-tree@2.3.1: |
| 1710 | dependencies: | 1704 | dependencies: |
| 1711 | mdn-data: 2.0.30 | 1705 | mdn-data: 2.0.30 |
| 1712 | source-map-js: 1.2.0 | 1706 | source-map-js: 1.2.1 |
| 1713 | 1707 | ||
| 1714 | css-what@6.1.0: {} | 1708 | css-what@6.1.0: {} |
| 1715 | 1709 | ||
| @@ -1721,9 +1715,9 @@ snapshots: | |||
| 1721 | 1715 | ||
| 1722 | cssom@0.5.0: {} | 1716 | cssom@0.5.0: {} |
| 1723 | 1717 | ||
| 1724 | debug@4.3.5: | 1718 | debug@4.3.7: |
| 1725 | dependencies: | 1719 | dependencies: |
| 1726 | ms: 2.1.2 | 1720 | ms: 2.1.3 |
| 1727 | 1721 | ||
| 1728 | decamelize@1.2.0: {} | 1722 | decamelize@1.2.0: {} |
| 1729 | 1723 | ||
| @@ -1789,7 +1783,9 @@ snapshots: | |||
| 1789 | '@nodelib/fs.walk': 1.2.8 | 1783 | '@nodelib/fs.walk': 1.2.8 |
| 1790 | glob-parent: 5.1.2 | 1784 | glob-parent: 5.1.2 |
| 1791 | merge2: 1.4.1 | 1785 | merge2: 1.4.1 |
| 1792 | micromatch: 4.0.7 | 1786 | micromatch: 4.0.8 |
| 1787 | |||
| 1788 | fast-uri@3.0.2: {} | ||
| 1793 | 1789 | ||
| 1794 | fastest-levenshtein@1.0.16: {} | 1790 | fastest-levenshtein@1.0.16: {} |
| 1795 | 1791 | ||
| @@ -1799,7 +1795,7 @@ snapshots: | |||
| 1799 | 1795 | ||
| 1800 | fecha@4.2.3: {} | 1796 | fecha@4.2.3: {} |
| 1801 | 1797 | ||
| 1802 | file-entry-cache@9.0.0: | 1798 | file-entry-cache@9.1.0: |
| 1803 | dependencies: | 1799 | dependencies: |
| 1804 | flat-cache: 5.0.0 | 1800 | flat-cache: 5.0.0 |
| 1805 | 1801 | ||
| @@ -1818,9 +1814,6 @@ snapshots: | |||
| 1818 | 1814 | ||
| 1819 | fs.realpath@1.0.0: {} | 1815 | fs.realpath@1.0.0: {} |
| 1820 | 1816 | ||
| 1821 | fsevents@2.3.3: | ||
| 1822 | optional: true | ||
| 1823 | |||
| 1824 | function-bind@1.1.2: {} | 1817 | function-bind@1.1.2: {} |
| 1825 | 1818 | ||
| 1826 | get-caller-file@2.0.5: {} | 1819 | get-caller-file@2.0.5: {} |
| @@ -1861,7 +1854,7 @@ snapshots: | |||
| 1861 | array-union: 2.1.0 | 1854 | array-union: 2.1.0 |
| 1862 | dir-glob: 3.0.1 | 1855 | dir-glob: 3.0.1 |
| 1863 | fast-glob: 3.3.2 | 1856 | fast-glob: 3.3.2 |
| 1864 | ignore: 5.3.1 | 1857 | ignore: 5.3.2 |
| 1865 | merge2: 1.4.1 | 1858 | merge2: 1.4.1 |
| 1866 | slash: 3.0.0 | 1859 | slash: 3.0.0 |
| 1867 | 1860 | ||
| @@ -1897,9 +1890,9 @@ snapshots: | |||
| 1897 | 1890 | ||
| 1898 | html-tags@3.3.1: {} | 1891 | html-tags@3.3.1: {} |
| 1899 | 1892 | ||
| 1900 | ignore@5.3.1: {} | 1893 | ignore@5.3.2: {} |
| 1901 | 1894 | ||
| 1902 | immutable@4.3.6: {} | 1895 | immutable@4.3.7: {} |
| 1903 | 1896 | ||
| 1904 | import-fresh@3.3.0: | 1897 | import-fresh@3.3.0: |
| 1905 | dependencies: | 1898 | dependencies: |
| @@ -1919,20 +1912,16 @@ snapshots: | |||
| 1919 | 1912 | ||
| 1920 | ini@1.3.8: {} | 1913 | ini@1.3.8: {} |
| 1921 | 1914 | ||
| 1922 | iro-icons@git+https://git.vulpes.one/git/iro-icons.git#b854aa0bfdc5a1bd233606af8ffff6312017845e(svg-sprite@2.0.4): | 1915 | iro-icons@git+https://git.vulpes.one/git/iro-icons.git#8b921f634a565fd9bb8f6e0ddb1b4d7ba207c0a0(svg-sprite@2.0.4): |
| 1923 | dependencies: | 1916 | dependencies: |
| 1924 | svg-sprite: 2.0.4 | 1917 | svg-sprite: 2.0.4 |
| 1925 | 1918 | ||
| 1926 | iro-sass@git+https://git.vulpes.one/git/iro-sass.git#04f8e9dbdc57a53f004e6238dfacc917bafdbbff: {} | 1919 | iro-sass@git+https://git.vulpes.one/git/iro-sass.git#351814a60e8909814c7120db96314a1a25d962bd: {} |
| 1927 | 1920 | ||
| 1928 | is-arrayish@0.2.1: {} | 1921 | is-arrayish@0.2.1: {} |
| 1929 | 1922 | ||
| 1930 | is-arrayish@0.3.2: {} | 1923 | is-arrayish@0.3.2: {} |
| 1931 | 1924 | ||
| 1932 | is-binary-path@2.1.0: | ||
| 1933 | dependencies: | ||
| 1934 | binary-extensions: 2.3.0 | ||
| 1935 | |||
| 1936 | is-buffer@1.1.6: {} | 1925 | is-buffer@1.1.6: {} |
| 1937 | 1926 | ||
| 1938 | is-core-module@2.14.0: | 1927 | is-core-module@2.14.0: |
| @@ -2003,7 +1992,7 @@ snapshots: | |||
| 2003 | 1992 | ||
| 2004 | kind-of@6.0.3: {} | 1993 | kind-of@6.0.3: {} |
| 2005 | 1994 | ||
| 2006 | known-css-properties@0.31.0: {} | 1995 | known-css-properties@0.34.0: {} |
| 2007 | 1996 | ||
| 2008 | kuler@2.0.0: {} | 1997 | kuler@2.0.0: {} |
| 2009 | 1998 | ||
| @@ -2040,7 +2029,7 @@ snapshots: | |||
| 2040 | 2029 | ||
| 2041 | merge2@1.4.1: {} | 2030 | merge2@1.4.1: {} |
| 2042 | 2031 | ||
| 2043 | micromatch@4.0.7: | 2032 | micromatch@4.0.8: |
| 2044 | dependencies: | 2033 | dependencies: |
| 2045 | braces: 3.0.3 | 2034 | braces: 3.0.3 |
| 2046 | picomatch: 2.3.1 | 2035 | picomatch: 2.3.1 |
| @@ -2055,8 +2044,6 @@ snapshots: | |||
| 2055 | dependencies: | 2044 | dependencies: |
| 2056 | minimist: 1.2.8 | 2045 | minimist: 1.2.8 |
| 2057 | 2046 | ||
| 2058 | ms@2.1.2: {} | ||
| 2059 | |||
| 2060 | ms@2.1.3: {} | 2047 | ms@2.1.3: {} |
| 2061 | 2048 | ||
| 2062 | mustache@4.2.0: {} | 2049 | mustache@4.2.0: {} |
| @@ -2085,7 +2072,7 @@ snapshots: | |||
| 2085 | 2072 | ||
| 2086 | parse-json@5.2.0: | 2073 | parse-json@5.2.0: |
| 2087 | dependencies: | 2074 | dependencies: |
| 2088 | '@babel/code-frame': 7.24.7 | 2075 | '@babel/code-frame': 7.25.7 |
| 2089 | error-ex: 1.3.2 | 2076 | error-ex: 1.3.2 |
| 2090 | json-parse-even-better-errors: 2.3.1 | 2077 | json-parse-even-better-errors: 2.3.1 |
| 2091 | lines-and-columns: 1.2.4 | 2078 | lines-and-columns: 1.2.4 |
| @@ -2098,21 +2085,23 @@ snapshots: | |||
| 2098 | 2085 | ||
| 2099 | picocolors@1.0.1: {} | 2086 | picocolors@1.0.1: {} |
| 2100 | 2087 | ||
| 2088 | picocolors@1.1.0: {} | ||
| 2089 | |||
| 2101 | picomatch@2.3.1: {} | 2090 | picomatch@2.3.1: {} |
| 2102 | 2091 | ||
| 2103 | postcss-media-query-parser@0.2.3: {} | 2092 | postcss-media-query-parser@0.2.3: {} |
| 2104 | 2093 | ||
| 2105 | postcss-resolve-nested-selector@0.1.1: {} | 2094 | postcss-resolve-nested-selector@0.1.6: {} |
| 2106 | 2095 | ||
| 2107 | postcss-safe-parser@7.0.0(postcss@8.4.38): | 2096 | postcss-safe-parser@7.0.1(postcss@8.4.47): |
| 2108 | dependencies: | 2097 | dependencies: |
| 2109 | postcss: 8.4.38 | 2098 | postcss: 8.4.47 |
| 2110 | 2099 | ||
| 2111 | postcss-scss@4.0.9(postcss@8.4.38): | 2100 | postcss-scss@4.0.9(postcss@8.4.38): |
| 2112 | dependencies: | 2101 | dependencies: |
| 2113 | postcss: 8.4.38 | 2102 | postcss: 8.4.38 |
| 2114 | 2103 | ||
| 2115 | postcss-selector-parser@6.1.0: | 2104 | postcss-selector-parser@6.1.2: |
| 2116 | dependencies: | 2105 | dependencies: |
| 2117 | cssesc: 3.0.0 | 2106 | cssesc: 3.0.0 |
| 2118 | util-deprecate: 1.0.2 | 2107 | util-deprecate: 1.0.2 |
| @@ -2127,7 +2116,13 @@ snapshots: | |||
| 2127 | dependencies: | 2116 | dependencies: |
| 2128 | nanoid: 3.3.7 | 2117 | nanoid: 3.3.7 |
| 2129 | picocolors: 1.0.1 | 2118 | picocolors: 1.0.1 |
| 2130 | source-map-js: 1.2.0 | 2119 | source-map-js: 1.2.1 |
| 2120 | |||
| 2121 | postcss@8.4.47: | ||
| 2122 | dependencies: | ||
| 2123 | nanoid: 3.3.7 | ||
| 2124 | picocolors: 1.1.0 | ||
| 2125 | source-map-js: 1.2.1 | ||
| 2131 | 2126 | ||
| 2132 | prettysize@2.0.0: {} | 2127 | prettysize@2.0.0: {} |
| 2133 | 2128 | ||
| @@ -2280,8 +2275,6 @@ snapshots: | |||
| 2280 | pug-runtime: 3.0.1 | 2275 | pug-runtime: 3.0.1 |
| 2281 | pug-strip-comments: 2.0.0 | 2276 | pug-strip-comments: 2.0.0 |
| 2282 | 2277 | ||
| 2283 | punycode@2.3.1: {} | ||
| 2284 | |||
| 2285 | queue-microtask@1.2.3: {} | 2278 | queue-microtask@1.2.3: {} |
| 2286 | 2279 | ||
| 2287 | readable-stream@2.3.8: | 2280 | readable-stream@2.3.8: |
| @@ -2300,9 +2293,7 @@ snapshots: | |||
| 2300 | string_decoder: 1.3.0 | 2293 | string_decoder: 1.3.0 |
| 2301 | util-deprecate: 1.0.2 | 2294 | util-deprecate: 1.0.2 |
| 2302 | 2295 | ||
| 2303 | readdirp@3.6.0: | 2296 | readdirp@4.0.2: {} |
| 2304 | dependencies: | ||
| 2305 | picomatch: 2.3.1 | ||
| 2306 | 2297 | ||
| 2307 | regenerator-runtime@0.11.1: {} | 2298 | regenerator-runtime@0.11.1: {} |
| 2308 | 2299 | ||
| @@ -2342,11 +2333,11 @@ snapshots: | |||
| 2342 | 2333 | ||
| 2343 | safe-stable-stringify@2.4.3: {} | 2334 | safe-stable-stringify@2.4.3: {} |
| 2344 | 2335 | ||
| 2345 | sass@1.77.6: | 2336 | sass@1.79.4: |
| 2346 | dependencies: | 2337 | dependencies: |
| 2347 | chokidar: 3.6.0 | 2338 | chokidar: 4.0.1 |
| 2348 | immutable: 4.3.6 | 2339 | immutable: 4.3.7 |
| 2349 | source-map-js: 1.2.0 | 2340 | source-map-js: 1.2.1 |
| 2350 | 2341 | ||
| 2351 | set-function-length@1.2.2: | 2342 | set-function-length@1.2.2: |
| 2352 | dependencies: | 2343 | dependencies: |
| @@ -2371,7 +2362,7 @@ snapshots: | |||
| 2371 | astral-regex: 2.0.0 | 2362 | astral-regex: 2.0.0 |
| 2372 | is-fullwidth-code-point: 3.0.0 | 2363 | is-fullwidth-code-point: 3.0.0 |
| 2373 | 2364 | ||
| 2374 | source-map-js@1.2.0: {} | 2365 | source-map-js@1.2.1: {} |
| 2375 | 2366 | ||
| 2376 | source-map@0.5.7: {} | 2367 | source-map@0.5.7: {} |
| 2377 | 2368 | ||
| @@ -2405,68 +2396,78 @@ snapshots: | |||
| 2405 | 2396 | ||
| 2406 | strip-ansi@7.1.0: | 2397 | strip-ansi@7.1.0: |
| 2407 | dependencies: | 2398 | dependencies: |
| 2408 | ansi-regex: 6.0.1 | 2399 | ansi-regex: 6.1.0 |
| 2400 | |||
| 2401 | style-search@0.1.0: {} | ||
| 2409 | 2402 | ||
| 2410 | stylelint-config-sass-guidelines@11.1.0(postcss@8.4.38)(stylelint@16.6.1): | 2403 | stylelint-config-recess-order@5.1.1(stylelint@16.9.0): |
| 2411 | dependencies: | 2404 | dependencies: |
| 2405 | stylelint: 16.9.0 | ||
| 2406 | stylelint-order: 6.0.4(stylelint@16.9.0) | ||
| 2407 | |||
| 2408 | stylelint-config-sass-guidelines@12.1.0(postcss@8.4.38)(stylelint@16.9.0): | ||
| 2409 | dependencies: | ||
| 2410 | '@stylistic/stylelint-plugin': 3.1.1(stylelint@16.9.0) | ||
| 2412 | postcss: 8.4.38 | 2411 | postcss: 8.4.38 |
| 2413 | postcss-scss: 4.0.9(postcss@8.4.38) | 2412 | postcss-scss: 4.0.9(postcss@8.4.38) |
| 2414 | stylelint: 16.6.1 | 2413 | stylelint: 16.9.0 |
| 2415 | stylelint-scss: 6.3.2(stylelint@16.6.1) | 2414 | stylelint-scss: 6.7.0(stylelint@16.9.0) |
| 2416 | 2415 | ||
| 2417 | stylelint-order@6.0.4(stylelint@16.6.1): | 2416 | stylelint-order@6.0.4(stylelint@16.9.0): |
| 2418 | dependencies: | 2417 | dependencies: |
| 2419 | postcss: 8.4.38 | 2418 | postcss: 8.4.38 |
| 2420 | postcss-sorting: 8.0.2(postcss@8.4.38) | 2419 | postcss-sorting: 8.0.2(postcss@8.4.38) |
| 2421 | stylelint: 16.6.1 | 2420 | stylelint: 16.9.0 |
| 2422 | 2421 | ||
| 2423 | stylelint-scss@6.3.2(stylelint@16.6.1): | 2422 | stylelint-scss@6.7.0(stylelint@16.9.0): |
| 2424 | dependencies: | 2423 | dependencies: |
| 2425 | known-css-properties: 0.31.0 | 2424 | css-tree: 2.3.1 |
| 2425 | is-plain-object: 5.0.0 | ||
| 2426 | known-css-properties: 0.34.0 | ||
| 2426 | postcss-media-query-parser: 0.2.3 | 2427 | postcss-media-query-parser: 0.2.3 |
| 2427 | postcss-resolve-nested-selector: 0.1.1 | 2428 | postcss-resolve-nested-selector: 0.1.6 |
| 2428 | postcss-selector-parser: 6.1.0 | 2429 | postcss-selector-parser: 6.1.2 |
| 2429 | postcss-value-parser: 4.2.0 | 2430 | postcss-value-parser: 4.2.0 |
| 2430 | stylelint: 16.6.1 | 2431 | stylelint: 16.9.0 |
| 2431 | 2432 | ||
| 2432 | stylelint@16.6.1: | 2433 | stylelint@16.9.0: |
| 2433 | dependencies: | 2434 | dependencies: |
| 2434 | '@csstools/css-parser-algorithms': 2.6.3(@csstools/css-tokenizer@2.3.1) | 2435 | '@csstools/css-parser-algorithms': 3.0.1(@csstools/css-tokenizer@3.0.1) |
| 2435 | '@csstools/css-tokenizer': 2.3.1 | 2436 | '@csstools/css-tokenizer': 3.0.1 |
| 2436 | '@csstools/media-query-list-parser': 2.1.11(@csstools/css-parser-algorithms@2.6.3(@csstools/css-tokenizer@2.3.1))(@csstools/css-tokenizer@2.3.1) | 2437 | '@csstools/media-query-list-parser': 3.0.1(@csstools/css-parser-algorithms@3.0.1(@csstools/css-tokenizer@3.0.1))(@csstools/css-tokenizer@3.0.1) |
| 2437 | '@csstools/selector-specificity': 3.1.1(postcss-selector-parser@6.1.0) | 2438 | '@csstools/selector-specificity': 4.0.0(postcss-selector-parser@6.1.2) |
| 2438 | '@dual-bundle/import-meta-resolve': 4.1.0 | 2439 | '@dual-bundle/import-meta-resolve': 4.1.0 |
| 2439 | balanced-match: 2.0.0 | 2440 | balanced-match: 2.0.0 |
| 2440 | colord: 2.9.3 | 2441 | colord: 2.9.3 |
| 2441 | cosmiconfig: 9.0.0 | 2442 | cosmiconfig: 9.0.0 |
| 2442 | css-functions-list: 3.2.2 | 2443 | css-functions-list: 3.2.2 |
| 2443 | css-tree: 2.3.1 | 2444 | css-tree: 2.3.1 |
| 2444 | debug: 4.3.5 | 2445 | debug: 4.3.7 |
| 2445 | fast-glob: 3.3.2 | 2446 | fast-glob: 3.3.2 |
| 2446 | fastest-levenshtein: 1.0.16 | 2447 | fastest-levenshtein: 1.0.16 |
| 2447 | file-entry-cache: 9.0.0 | 2448 | file-entry-cache: 9.1.0 |
| 2448 | global-modules: 2.0.0 | 2449 | global-modules: 2.0.0 |
| 2449 | globby: 11.1.0 | 2450 | globby: 11.1.0 |
| 2450 | globjoin: 0.1.4 | 2451 | globjoin: 0.1.4 |
| 2451 | html-tags: 3.3.1 | 2452 | html-tags: 3.3.1 |
| 2452 | ignore: 5.3.1 | 2453 | ignore: 5.3.2 |
| 2453 | imurmurhash: 0.1.4 | 2454 | imurmurhash: 0.1.4 |
| 2454 | is-plain-object: 5.0.0 | 2455 | is-plain-object: 5.0.0 |
| 2455 | known-css-properties: 0.31.0 | 2456 | known-css-properties: 0.34.0 |
| 2456 | mathml-tag-names: 2.1.3 | 2457 | mathml-tag-names: 2.1.3 |
| 2457 | meow: 13.2.0 | 2458 | meow: 13.2.0 |
| 2458 | micromatch: 4.0.7 | 2459 | micromatch: 4.0.8 |
| 2459 | normalize-path: 3.0.0 | 2460 | normalize-path: 3.0.0 |
| 2460 | picocolors: 1.0.1 | 2461 | picocolors: 1.1.0 |
| 2461 | postcss: 8.4.38 | 2462 | postcss: 8.4.47 |
| 2462 | postcss-resolve-nested-selector: 0.1.1 | 2463 | postcss-resolve-nested-selector: 0.1.6 |
| 2463 | postcss-safe-parser: 7.0.0(postcss@8.4.38) | 2464 | postcss-safe-parser: 7.0.1(postcss@8.4.47) |
| 2464 | postcss-selector-parser: 6.1.0 | 2465 | postcss-selector-parser: 6.1.2 |
| 2465 | postcss-value-parser: 4.2.0 | 2466 | postcss-value-parser: 4.2.0 |
| 2466 | resolve-from: 5.0.0 | 2467 | resolve-from: 5.0.0 |
| 2467 | string-width: 4.2.3 | 2468 | string-width: 4.2.3 |
| 2468 | strip-ansi: 7.1.0 | 2469 | strip-ansi: 7.1.0 |
| 2469 | supports-hyperlinks: 3.0.0 | 2470 | supports-hyperlinks: 3.1.0 |
| 2470 | svg-tags: 1.0.0 | 2471 | svg-tags: 1.0.0 |
| 2471 | table: 6.8.2 | 2472 | table: 6.8.2 |
| 2472 | write-file-atomic: 5.0.1 | 2473 | write-file-atomic: 5.0.1 |
| @@ -2484,7 +2485,7 @@ snapshots: | |||
| 2484 | dependencies: | 2485 | dependencies: |
| 2485 | has-flag: 4.0.0 | 2486 | has-flag: 4.0.0 |
| 2486 | 2487 | ||
| 2487 | supports-hyperlinks@3.0.0: | 2488 | supports-hyperlinks@3.1.0: |
| 2488 | dependencies: | 2489 | dependencies: |
| 2489 | has-flag: 4.0.0 | 2490 | has-flag: 4.0.0 |
| 2490 | supports-color: 7.2.0 | 2491 | supports-color: 7.2.0 |
| @@ -2525,7 +2526,7 @@ snapshots: | |||
| 2525 | 2526 | ||
| 2526 | table@6.8.2: | 2527 | table@6.8.2: |
| 2527 | dependencies: | 2528 | dependencies: |
| 2528 | ajv: 8.16.0 | 2529 | ajv: 8.17.1 |
| 2529 | lodash.truncate: 4.4.2 | 2530 | lodash.truncate: 4.4.2 |
| 2530 | slice-ansi: 4.0.0 | 2531 | slice-ansi: 4.0.0 |
| 2531 | string-width: 4.2.3 | 2532 | string-width: 4.2.3 |
| @@ -2557,10 +2558,6 @@ snapshots: | |||
| 2557 | uglify-to-browserify@1.0.2: | 2558 | uglify-to-browserify@1.0.2: |
| 2558 | optional: true | 2559 | optional: true |
| 2559 | 2560 | ||
| 2560 | uri-js@4.4.1: | ||
| 2561 | dependencies: | ||
| 2562 | punycode: 2.3.1 | ||
| 2563 | |||
| 2564 | util-deprecate@1.0.2: {} | 2561 | util-deprecate@1.0.2: {} |
| 2565 | 2562 | ||
| 2566 | vinyl@2.2.1: | 2563 | vinyl@2.2.1: |
diff --git a/src/.old/layouts/_message-group.scss b/src/.old/layouts/_message-group.scss deleted file mode 100644 index 235e242..0000000 --- a/src/.old/layouts/_message-group.scss +++ /dev/null | |||
| @@ -1,139 +0,0 @@ | |||
| 1 | @use 'iro-sass/src/index' as iro; | ||
| 2 | @use '../functions' as fn; | ||
| 3 | |||
| 4 | // @use '../objects/message'; | ||
| 5 | |||
| 6 | @include iro.props-namespace('message-group') { | ||
| 7 | @include iro.props-store(( | ||
| 8 | --dims: ( | ||
| 9 | --spacing-x: fn.global-dim(--size --225), | ||
| 10 | --spacing-y: fn.global-dim(--size --150), | ||
| 11 | --arrow-size: fn.global-dim(--size --100), | ||
| 12 | |||
| 13 | --compact: ( | ||
| 14 | --spacing-x: fn.global-dim(--size --225), | ||
| 15 | --spacing-y: fn.global-dim(--size --50), | ||
| 16 | ) | ||
| 17 | ) | ||
| 18 | )); | ||
| 19 | |||
| 20 | @include iro.bem-layout(iro.props-namespace()) { | ||
| 21 | display: grid; | ||
| 22 | grid-template-columns: auto 1fr; | ||
| 23 | grid-auto-rows: auto; | ||
| 24 | grid-template-areas: 'avatar message' 'avatar .'; | ||
| 25 | align-items: flex-start; | ||
| 26 | gap: 0 fn.dim(--spacing-x); | ||
| 27 | |||
| 28 | @include iro.bem-elem('avatar') { | ||
| 29 | grid-area: avatar; | ||
| 30 | block-size: 0; | ||
| 31 | } | ||
| 32 | |||
| 33 | @include iro.bem-elem('message') { | ||
| 34 | grid-column: message; | ||
| 35 | position: relative; | ||
| 36 | box-sizing: border-box; | ||
| 37 | min-inline-size: 0; | ||
| 38 | max-inline-size: 100%; | ||
| 39 | |||
| 40 | &::before { | ||
| 41 | content: ''; | ||
| 42 | display: none; | ||
| 43 | position: absolute; | ||
| 44 | top: 0; | ||
| 45 | left: calc(-1 * fn.dim(--arrow-size)); | ||
| 46 | border: fn.dim(--arrow-size) solid fn.global-color(--bg-l2); | ||
| 47 | border-bottom-color: transparent; | ||
| 48 | border-left-color: transparent; | ||
| 49 | } | ||
| 50 | |||
| 51 | @include iro.bem-next-twin-elem { | ||
| 52 | margin-top: fn.dim(--spacing-y); | ||
| 53 | } | ||
| 54 | } | ||
| 55 | |||
| 56 | @include iro.bem-modifier('right') { | ||
| 57 | @include iro.bem-elem('message') { | ||
| 58 | &::before { | ||
| 59 | right: calc(-1 * fn.dim(--arrow-size)); | ||
| 60 | left: auto; | ||
| 61 | border-right-color: transparent; | ||
| 62 | border-left-color: fn.global-color(--bg-l2); | ||
| 63 | } | ||
| 64 | } | ||
| 65 | } | ||
| 66 | |||
| 67 | @include iro.bem-modifier('compact') { | ||
| 68 | gap: 0 fn.dim(--compact --spacing-x); | ||
| 69 | |||
| 70 | @include iro.bem-modifier('left') { | ||
| 71 | justify-items: start; | ||
| 72 | } | ||
| 73 | |||
| 74 | @include iro.bem-modifier('right') { | ||
| 75 | justify-items: end; | ||
| 76 | } | ||
| 77 | |||
| 78 | @include iro.bem-elem('message') { | ||
| 79 | @include iro.bem-next-twin-elem { | ||
| 80 | margin-top: fn.dim(--compact --spacing-y); | ||
| 81 | } | ||
| 82 | } | ||
| 83 | } | ||
| 84 | |||
| 85 | @include iro.bem-modifier('right') { | ||
| 86 | grid-template-columns: 1fr auto; | ||
| 87 | grid-template-areas: 'message avatar' '. avatar'; | ||
| 88 | } | ||
| 89 | |||
| 90 | @include iro.bem-modifier('no-avatar') { | ||
| 91 | grid-template-columns: 1fr; | ||
| 92 | grid-template-areas: 'message'; | ||
| 93 | |||
| 94 | @include iro.bem-elem('avatar') { | ||
| 95 | display: none; | ||
| 96 | } | ||
| 97 | } | ||
| 98 | |||
| 99 | @include iro.bem-modifier('arrow') { | ||
| 100 | @include iro.bem-elem('message') { | ||
| 101 | &::before { | ||
| 102 | display: block; | ||
| 103 | } | ||
| 104 | |||
| 105 | @include iro.bem-next-twin-elem { | ||
| 106 | &::before { | ||
| 107 | display: none; | ||
| 108 | } | ||
| 109 | } | ||
| 110 | } | ||
| 111 | } | ||
| 112 | |||
| 113 | & + & { | ||
| 114 | @include iro.bem-modifier('merge') { | ||
| 115 | margin-top: fn.dim(--spacing-y); | ||
| 116 | |||
| 117 | @include iro.bem-elem('avatar') { | ||
| 118 | visibility: hidden; | ||
| 119 | } | ||
| 120 | |||
| 121 | @include iro.bem-modifier('compact') { | ||
| 122 | margin-top: fn.dim(--compact --spacing-y); | ||
| 123 | } | ||
| 124 | |||
| 125 | @include iro.bem-elem('merge-hide') { | ||
| 126 | display: none; | ||
| 127 | } | ||
| 128 | |||
| 129 | @include iro.bem-modifier('arrow') { | ||
| 130 | @include iro.bem-elem('message') { | ||
| 131 | &::before { | ||
| 132 | display: none; | ||
| 133 | } | ||
| 134 | } | ||
| 135 | } | ||
| 136 | } | ||
| 137 | } | ||
| 138 | } | ||
| 139 | } | ||
diff --git a/src/.old/objects/_dialog.scss b/src/.old/objects/_dialog.scss deleted file mode 100644 index 9333ce6..0000000 --- a/src/.old/objects/_dialog.scss +++ /dev/null | |||
| @@ -1,152 +0,0 @@ | |||
| 1 | @use 'iro-sass/src/index' as iro; | ||
| 2 | @use '../functions' as fn; | ||
| 3 | |||
| 4 | @include iro.props-namespace('dialog') { | ||
| 5 | @include iro.props-store(( | ||
| 6 | --dims: ( | ||
| 7 | --width-sm: iro.fn-px-to-rem(500px), | ||
| 8 | --width-md: iro.fn-px-to-rem(800px), | ||
| 9 | --width-lg: iro.fn-px-to-rem(1100px), | ||
| 10 | --rounding: 4px, | ||
| 11 | --border: 1px, | ||
| 12 | |||
| 13 | --header: ( | ||
| 14 | --pad-x: fn.global-dim(--size --75), | ||
| 15 | --pad-y: fn.global-dim(--size --75), | ||
| 16 | ), | ||
| 17 | |||
| 18 | --sidebar: ( | ||
| 19 | --pad-x: fn.global-dim(--size --75), | ||
| 20 | --pad-y: fn.global-dim(--size --75), | ||
| 21 | ), | ||
| 22 | |||
| 23 | --body: ( | ||
| 24 | --pad-x: fn.global-dim(--size --200), | ||
| 25 | --pad-y: fn.global-dim(--size --200), | ||
| 26 | ) | ||
| 27 | ), | ||
| 28 | ), 'dims'); | ||
| 29 | |||
| 30 | @include iro.props-store(( | ||
| 31 | --dims: ( | ||
| 32 | --pad-x: fn.global-dim(--size --300), | ||
| 33 | --pad-y: fn.global-dim(--size --300), | ||
| 34 | ), | ||
| 35 | ), 'md'); | ||
| 36 | |||
| 37 | @include iro.props-store(( | ||
| 38 | --colors: ( | ||
| 39 | --border: fn.global-color(--border --stable), | ||
| 40 | ), | ||
| 41 | ), 'colors'); | ||
| 42 | |||
| 43 | @include iro.bem-object(iro.props-namespace()) { | ||
| 44 | display: grid; | ||
| 45 | grid-template-rows: auto auto 1fr auto auto; | ||
| 46 | grid-template-columns: auto 1fr; | ||
| 47 | grid-template-areas: | ||
| 48 | 'sidebar-header header' | ||
| 49 | 'sidebar top' | ||
| 50 | 'sidebar body' | ||
| 51 | 'sidebar bottom' | ||
| 52 | 'sidebar footer'; | ||
| 53 | position: relative; | ||
| 54 | box-sizing: border-box; | ||
| 55 | flex: 0 0 auto; | ||
| 56 | width: 100%; | ||
| 57 | max-width: fn.dim(--width-md); | ||
| 58 | margin: 0 auto; | ||
| 59 | overflow: hidden; | ||
| 60 | border-radius: fn.dim(--rounding); | ||
| 61 | background-clip: padding-box; | ||
| 62 | background-color: fn.global-color(--bg); | ||
| 63 | color: fn.global-color(--fg); | ||
| 64 | |||
| 65 | @include iro.bem-modifier('sm') { | ||
| 66 | max-width: fn.dim(--width-sm); | ||
| 67 | } | ||
| 68 | |||
| 69 | @include iro.bem-modifier('lg') { | ||
| 70 | max-width: fn.dim(--width-lg); | ||
| 71 | } | ||
| 72 | |||
| 73 | @include iro.bem-elem('header') { | ||
| 74 | grid-area: sidebar-header / sidebar-header / header / header; | ||
| 75 | padding: fn.dim(--header --pad-y) fn.dim(--header --pad-x); | ||
| 76 | |||
| 77 | @include iro.bem-modifier('sidebar') { | ||
| 78 | grid-area: sidebar-header; | ||
| 79 | border-right: 1px solid fn.color(--border); | ||
| 80 | |||
| 81 | @include iro.bem-sibling-elem('header') { | ||
| 82 | grid-area: header; | ||
| 83 | } | ||
| 84 | } | ||
| 85 | } | ||
| 86 | |||
| 87 | @include iro.bem-elem('title') { | ||
| 88 | margin-top: 0; | ||
| 89 | padding-right: calc(fn.dim(--body --pad-x) - fn.dim(--header --pad-x)); | ||
| 90 | padding-left: calc(fn.dim(--body --pad-x) - fn.dim(--header --pad-x)); | ||
| 91 | } | ||
| 92 | |||
| 93 | @include iro.bem-elem('close-btn') { | ||
| 94 | margin-left: auto; | ||
| 95 | } | ||
| 96 | |||
| 97 | @include iro.bem-elem('sidebar') { | ||
| 98 | grid-area: sidebar; | ||
| 99 | padding: fn.dim(--sidebar --pad-y) fn.dim(--sidebar --pad-x); | ||
| 100 | overflow: auto; | ||
| 101 | border-right: 1px solid fn.color(--border); | ||
| 102 | } | ||
| 103 | |||
| 104 | @include iro.bem-elem('top') { | ||
| 105 | grid-area: top; | ||
| 106 | min-width: 0; | ||
| 107 | padding: fn.dim(--body --pad-y) fn.dim(--body --pad-x); | ||
| 108 | |||
| 109 | @include iro.bem-sibling-elem('body') { | ||
| 110 | padding-top: 0; | ||
| 111 | } | ||
| 112 | } | ||
| 113 | |||
| 114 | @include iro.bem-elem('bottom') { | ||
| 115 | grid-area: bottom; | ||
| 116 | min-width: 0; | ||
| 117 | padding: fn.dim(--body --pad-y) fn.dim(--body --pad-x); | ||
| 118 | |||
| 119 | @include iro.bem-sibling-elem('body') { | ||
| 120 | padding-bottom: 0; | ||
| 121 | } | ||
| 122 | } | ||
| 123 | |||
| 124 | @include iro.bem-elem('body') { | ||
| 125 | grid-area: body; | ||
| 126 | min-width: 0; | ||
| 127 | min-height: 0; | ||
| 128 | padding: fn.dim(--body --pad-y) fn.dim(--body --pad-x); | ||
| 129 | } | ||
| 130 | |||
| 131 | @include iro.bem-elem('footer') { | ||
| 132 | grid-area: footer; | ||
| 133 | justify-content: flex-end; | ||
| 134 | padding: fn.dim(--body --pad-y) fn.dim(--body --pad-x); | ||
| 135 | } | ||
| 136 | |||
| 137 | @include iro.bem-modifier('scrollable') { | ||
| 138 | flex-shrink: 1; | ||
| 139 | |||
| 140 | @include iro.bem-elem('body') { | ||
| 141 | overflow: auto; | ||
| 142 | scrollbar-color: fn.global-color(--obj-lo) transparent; | ||
| 143 | } | ||
| 144 | } | ||
| 145 | |||
| 146 | @include iro.bem-modifier('flat') { | ||
| 147 | @include iro.bem-elem('body') { | ||
| 148 | padding-top: 0; | ||
| 149 | } | ||
| 150 | } | ||
| 151 | } | ||
| 152 | } | ||
diff --git a/src/.old/objects/_icon-nav.scss b/src/.old/objects/_icon-nav.scss deleted file mode 100644 index d1c6539..0000000 --- a/src/.old/objects/_icon-nav.scss +++ /dev/null | |||
| @@ -1,20 +0,0 @@ | |||
| 1 | @use 'iro-sass/src/index' as iro; | ||
| 2 | @use '../functions' as fn; | ||
| 3 | |||
| 4 | @include iro.props-namespace('icon-nav') { | ||
| 5 | @include iro.props-store(( | ||
| 6 | --dims: ( | ||
| 7 | --spacing: fn.global-dim(--size --100), | ||
| 8 | ) | ||
| 9 | ), 'dims'); | ||
| 10 | |||
| 11 | @include iro.bem-object(iro.props-namespace()) { | ||
| 12 | display: flex; | ||
| 13 | align-items: center; | ||
| 14 | gap: fn.dim(--spacing); | ||
| 15 | |||
| 16 | @include iro.bem-modifier('vertical') { | ||
| 17 | flex-direction: column; | ||
| 18 | } | ||
| 19 | } | ||
| 20 | } | ||
diff --git a/src/.old/objects/_list-group.scss b/src/.old/objects/_list-group.scss deleted file mode 100644 index a346828..0000000 --- a/src/.old/objects/_list-group.scss +++ /dev/null | |||
| @@ -1,61 +0,0 @@ | |||
| 1 | @use 'iro-sass/src/index' as iro; | ||
| 2 | @use '../functions' as fn; | ||
| 3 | |||
| 4 | @include iro.props-namespace('list-group') { | ||
| 5 | @include iro.props-store(( | ||
| 6 | --dims: ( | ||
| 7 | --pad-i: fn.global-dim(--size --175), | ||
| 8 | --pad-b: fn.global-dim(--size --125), | ||
| 9 | --rounding: fn.global-dim(--rounding), | ||
| 10 | --border: fn.global-dim(--border --thin), | ||
| 11 | ), | ||
| 12 | --colors: ( | ||
| 13 | --bg: fn.global-color(--base --75), | ||
| 14 | --border: fn.global-color(--border), | ||
| 15 | --hover: fn.global-color(--border-mute), | ||
| 16 | --active: fn.global-color(--border), | ||
| 17 | ) | ||
| 18 | )); | ||
| 19 | |||
| 20 | @include iro.bem-object(iro.props-namespace()) { | ||
| 21 | border: fn.dim(--border) solid fn.color(--border); | ||
| 22 | border-radius: fn.dim(--rounding); | ||
| 23 | background-color: fn.color(--bg); | ||
| 24 | |||
| 25 | @include iro.bem-elem('item') { | ||
| 26 | padding-block: fn.dim(--pad-b); | ||
| 27 | padding-inline: fn.dim(--pad-i); | ||
| 28 | |||
| 29 | @include iro.bem-next-twin-elem { | ||
| 30 | border-width: 0; | ||
| 31 | border-block-start-width: fn.dim(--border); | ||
| 32 | border-style: solid; | ||
| 33 | border-color: fn.color(--border); | ||
| 34 | } | ||
| 35 | |||
| 36 | @include iro.bem-multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') { | ||
| 37 | &:hover, | ||
| 38 | &:focus-visible { | ||
| 39 | background-color: fn.color(--hover); | ||
| 40 | } | ||
| 41 | |||
| 42 | &:active { | ||
| 43 | background-color: fn.color(--active); | ||
| 44 | } | ||
| 45 | } | ||
| 46 | } | ||
| 47 | |||
| 48 | @include iro.bem-modifier('horizontal') { | ||
| 49 | display: flex; | ||
| 50 | |||
| 51 | @include iro.bem-elem('item') { | ||
| 52 | flex: 1 0 auto; | ||
| 53 | |||
| 54 | @include iro.bem-next-twin-elem { | ||
| 55 | border-block-start-width: 0; | ||
| 56 | border-inline-start-width: fn.dim(--border); | ||
| 57 | } | ||
| 58 | } | ||
| 59 | } | ||
| 60 | } | ||
| 61 | } | ||
diff --git a/src/.old/objects/_message.scss b/src/.old/objects/_message.scss deleted file mode 100644 index 283ce26..0000000 --- a/src/.old/objects/_message.scss +++ /dev/null | |||
| @@ -1,51 +0,0 @@ | |||
| 1 | @use 'iro-sass/src/index' as iro; | ||
| 2 | @use '../functions' as fn; | ||
| 3 | |||
| 4 | @include iro.props-namespace('message') { | ||
| 5 | @include iro.props-store(( | ||
| 6 | --dims: ( | ||
| 7 | --bubble: ( | ||
| 8 | --pad-x: fn.global-dim(--size --200), | ||
| 9 | --pad-y: fn.global-dim(--size --150), | ||
| 10 | --rounding: 0, | ||
| 11 | |||
| 12 | --75: ( | ||
| 13 | --pad-x: fn.global-dim(--size --150), | ||
| 14 | --pad-y: fn.global-dim(--size --85), | ||
| 15 | ), | ||
| 16 | ), | ||
| 17 | ) | ||
| 18 | ), 'dims'); | ||
| 19 | |||
| 20 | @include iro.props-store(( | ||
| 21 | --colors: ( | ||
| 22 | --highlight: fn.global-color(--fg-lo), | ||
| 23 | ), | ||
| 24 | ), 'colors'); | ||
| 25 | |||
| 26 | @include iro.bem-object(iro.props-namespace()) { | ||
| 27 | @include iro.bem-elem('suffix') { | ||
| 28 | margin-left: 1em; | ||
| 29 | float: right; | ||
| 30 | } | ||
| 31 | |||
| 32 | @include iro.bem-modifier('bubble') { | ||
| 33 | padding: fn.dim(--bubble --pad-y) fn.dim(--bubble --pad-x); | ||
| 34 | border-radius: fn.dim(--bubble --rounding); | ||
| 35 | background-color: fn.global-color(--bg); | ||
| 36 | color: fn.global-color(--fg); | ||
| 37 | |||
| 38 | @include iro.bem-elem('suffix') { | ||
| 39 | transform: translate(.2em, .2em); | ||
| 40 | } | ||
| 41 | |||
| 42 | @include iro.bem-modifier('highlight') { | ||
| 43 | box-shadow: -3px 0 0 0 fn.color(--highlight); | ||
| 44 | } | ||
| 45 | |||
| 46 | @include iro.bem-modifier('75') { | ||
| 47 | padding: fn.dim(--bubble --75 --pad-y) fn.dim(--bubble --75 --pad-x); | ||
| 48 | } | ||
| 49 | } | ||
| 50 | } | ||
| 51 | } | ||
diff --git a/src/.old/objects/_overflow-button.scss b/src/.old/objects/_overflow-button.scss deleted file mode 100644 index b15ea1f..0000000 --- a/src/.old/objects/_overflow-button.scss +++ /dev/null | |||
| @@ -1,243 +0,0 @@ | |||
| 1 | @use 'iro-sass/src/index' as iro; | ||
| 2 | @use '../functions' as fn; | ||
| 3 | |||
| 4 | @include iro.props-namespace('overflow-button') { | ||
| 5 | @include iro.props-store(( | ||
| 6 | --dims: ( | ||
| 7 | --pad-x: calc(fn.global-dim(--size --125) - 1px), | ||
| 8 | --pad-y: calc(fn.global-dim(--size --125) - 1px), | ||
| 9 | --spacing: fn.global-dim(--size --50) | ||
| 10 | ), | ||
| 11 | ), 'dims'); | ||
| 12 | |||
| 13 | @include iro.props-store(( | ||
| 14 | --colors: ( | ||
| 15 | --label: fn.global-color(--fg), | ||
| 16 | |||
| 17 | --hover: ( | ||
| 18 | --bg: fn.global-color(--obj-hi), | ||
| 19 | --label: fn.global-color(--fg-lo), | ||
| 20 | ), | ||
| 21 | --active: ( | ||
| 22 | --bg: fn.global-color(--obj), | ||
| 23 | --label: fn.global-color(--fg-lo), | ||
| 24 | ), | ||
| 25 | --selected: ( | ||
| 26 | --bg: fn.global-color(--obj-hi), | ||
| 27 | --label: fn.global-color(--fg), | ||
| 28 | |||
| 29 | --hover: ( | ||
| 30 | --bg: fn.global-color(--obj), | ||
| 31 | --label: fn.global-color(--fg-lo), | ||
| 32 | ), | ||
| 33 | ), | ||
| 34 | --disabled: ( | ||
| 35 | --label: fn.global-color(--fg-hi3), | ||
| 36 | ), | ||
| 37 | --key-focus: ( | ||
| 38 | --border: fn.global-color(--focus --fill), | ||
| 39 | --shadow: fn.global-color(--focus --shadow), | ||
| 40 | ), | ||
| 41 | |||
| 42 | --red: ( | ||
| 43 | --hover: ( | ||
| 44 | --bg: fn.global-color(--red --quiet --bg), | ||
| 45 | --label: fn.global-color(--red --quiet --fg), | ||
| 46 | ), | ||
| 47 | --active: ( | ||
| 48 | --bg: fn.global-color(--red --quiet --obj), | ||
| 49 | --label: fn.global-color(--red --quiet --fg-lo), | ||
| 50 | ), | ||
| 51 | |||
| 52 | --selected: ( | ||
| 53 | --bg: fn.global-color(--red --quiet --bg), | ||
| 54 | --label: fn.global-color(--red --quiet --fg), | ||
| 55 | |||
| 56 | --hover: ( | ||
| 57 | --bg: fn.global-color(--red --quiet --obj), | ||
| 58 | --label: fn.global-color(--red --quiet --fg-lo), | ||
| 59 | ), | ||
| 60 | ), | ||
| 61 | ), | ||
| 62 | |||
| 63 | --blue: ( | ||
| 64 | --hover: ( | ||
| 65 | --bg: fn.global-color(--blue --quiet --bg), | ||
| 66 | --label: fn.global-color(--blue --quiet --fg), | ||
| 67 | ), | ||
| 68 | --active: ( | ||
| 69 | --bg: fn.global-color(--blue --quiet --obj), | ||
| 70 | --label: fn.global-color(--blue --quiet --fg-lo), | ||
| 71 | ), | ||
| 72 | |||
| 73 | --selected: ( | ||
| 74 | --bg: fn.global-color(--blue --quiet --bg), | ||
| 75 | --label: fn.global-color(--blue --quiet --fg), | ||
| 76 | |||
| 77 | --hover: ( | ||
| 78 | --bg: fn.global-color(--blue --quiet --obj), | ||
| 79 | --label: fn.global-color(--blue --quiet --fg-lo), | ||
| 80 | ), | ||
| 81 | ), | ||
| 82 | ), | ||
| 83 | |||
| 84 | --green: ( | ||
| 85 | --hover: ( | ||
| 86 | --bg: fn.global-color(--green --quiet --bg), | ||
| 87 | --label: fn.global-color(--green --quiet --fg), | ||
| 88 | ), | ||
| 89 | --active: ( | ||
| 90 | --bg: fn.global-color(--green --quiet --obj), | ||
| 91 | --label: fn.global-color(--green --quiet --fg-lo), | ||
| 92 | ), | ||
| 93 | |||
| 94 | --selected: ( | ||
| 95 | --bg: fn.global-color(--green --quiet --bg), | ||
| 96 | --label: fn.global-color(--green --quiet --fg), | ||
| 97 | |||
| 98 | --hover: ( | ||
| 99 | --bg: fn.global-color(--green --quiet --obj), | ||
| 100 | --label: fn.global-color(--green --quiet --fg-lo), | ||
| 101 | ), | ||
| 102 | ), | ||
| 103 | ) | ||
| 104 | ), | ||
| 105 | ), 'colors'); | ||
| 106 | |||
| 107 | @include iro.bem-object(iro.props-namespace()) { | ||
| 108 | display: inline-block; | ||
| 109 | color: fn.color(--disabled --label); | ||
| 110 | |||
| 111 | @include iro.bem-elem('outside') { | ||
| 112 | display: inline-block; | ||
| 113 | margin-right: fn.dim(--spacing); | ||
| 114 | } | ||
| 115 | |||
| 116 | @include iro.bem-elem('inside') { | ||
| 117 | display: inline-block; | ||
| 118 | padding: fn.dim(--pad-y) fn.dim(--pad-x); | ||
| 119 | border: 2px solid transparent; | ||
| 120 | border-radius: 100em; | ||
| 121 | line-height: 1; | ||
| 122 | text-align: center; | ||
| 123 | text-decoration: none; | ||
| 124 | text-overflow: ellipsis; | ||
| 125 | white-space: nowrap; | ||
| 126 | |||
| 127 | @include iro.bem-next-elem('outside') { | ||
| 128 | margin-right: 0; | ||
| 129 | margin-left: fn.dim(--spacing); | ||
| 130 | } | ||
| 131 | } | ||
| 132 | |||
| 133 | &:link, | ||
| 134 | &:visited, | ||
| 135 | &:enabled { | ||
| 136 | color: fn.color(--label); | ||
| 137 | |||
| 138 | &:hover { | ||
| 139 | @include iro.bem-elem('inside') { | ||
| 140 | background-color: fn.color(--hover --bg); | ||
| 141 | color: fn.color(--hover --label); | ||
| 142 | } | ||
| 143 | } | ||
| 144 | |||
| 145 | &:active { | ||
| 146 | @include iro.bem-elem('inside') { | ||
| 147 | background-color: fn.color(--active --bg); | ||
| 148 | color: fn.color(--active --label); | ||
| 149 | } | ||
| 150 | } | ||
| 151 | |||
| 152 | @include iro.bem-at-theme('keyboard') { | ||
| 153 | &:focus { | ||
| 154 | @include iro.bem-elem('inside') { | ||
| 155 | background-color: fn.color(--hover --bg); | ||
| 156 | color: fn.color(--hover --label); | ||
| 157 | } | ||
| 158 | } | ||
| 159 | } | ||
| 160 | } | ||
| 161 | |||
| 162 | @include iro.bem-is('selected') { | ||
| 163 | @include iro.bem-elem('inside') { | ||
| 164 | background-color: fn.color(--selected --bg); | ||
| 165 | } | ||
| 166 | |||
| 167 | &:link, | ||
| 168 | &:visited, | ||
| 169 | &:enabled { | ||
| 170 | @include iro.bem-elem('inside') { | ||
| 171 | color: fn.color(--selected --label); | ||
| 172 | } | ||
| 173 | |||
| 174 | &:hover, | ||
| 175 | &:active { | ||
| 176 | @include iro.bem-elem('inside') { | ||
| 177 | background-color: fn.color(--selected --hover --bg); | ||
| 178 | color: fn.color(--selected --hover --label); | ||
| 179 | } | ||
| 180 | } | ||
| 181 | |||
| 182 | @include iro.bem-at-theme('keyboard') { | ||
| 183 | &:focus { | ||
| 184 | @include iro.bem-elem('inside') { | ||
| 185 | background-color: fn.color(--selected --bg); | ||
| 186 | color: fn.color(--selected --hover --label); | ||
| 187 | } | ||
| 188 | } | ||
| 189 | } | ||
| 190 | } | ||
| 191 | } | ||
| 192 | |||
| 193 | @each $color in 'red' 'blue' 'green' { | ||
| 194 | @include iro.bem-modifier($color) { | ||
| 195 | &:link, | ||
| 196 | &:visited, | ||
| 197 | &:enabled { | ||
| 198 | &:hover { | ||
| 199 | @include iro.bem-elem('inside') { | ||
| 200 | background-color: fn.color(--#{$color} --hover --bg); | ||
| 201 | color: fn.color(--#{$color} --hover --label); | ||
| 202 | } | ||
| 203 | } | ||
| 204 | |||
| 205 | &:active { | ||
| 206 | @include iro.bem-elem('inside') { | ||
| 207 | background-color: fn.color(--#{$color} --active --bg); | ||
| 208 | color: fn.color(--#{$color} --active --label); | ||
| 209 | } | ||
| 210 | } | ||
| 211 | } | ||
| 212 | |||
| 213 | @include iro.bem-is('selected') { | ||
| 214 | &:link, | ||
| 215 | &:visited, | ||
| 216 | &:enabled { | ||
| 217 | @include iro.bem-elem('inside') { | ||
| 218 | background-color: fn.color(--#{$color} --selected --bg); | ||
| 219 | color: fn.color(--#{$color} --selected --label); | ||
| 220 | } | ||
| 221 | |||
| 222 | &:hover, | ||
| 223 | &:active { | ||
| 224 | @include iro.bem-elem('inside') { | ||
| 225 | background-color: fn.color(--#{$color} --selected --hover --bg); | ||
| 226 | color: fn.color(--#{$color} --selected --hover --label); | ||
| 227 | } | ||
| 228 | } | ||
| 229 | } | ||
| 230 | } | ||
| 231 | } | ||
| 232 | } | ||
| 233 | |||
| 234 | @include iro.bem-at-theme('keyboard') { | ||
| 235 | &:focus { | ||
| 236 | @include iro.bem-elem('inside') { | ||
| 237 | border-color: fn.color(--key-focus --border); | ||
| 238 | box-shadow: fn.color(--key-focus --shadow); | ||
| 239 | } | ||
| 240 | } | ||
| 241 | } | ||
| 242 | } | ||
| 243 | } | ||
diff --git a/src/functions/colors/_apca.scss b/src/_apca.scss index d9236b2..c65f46e 100644 --- a/src/functions/colors/_apca.scss +++ b/src/_apca.scss | |||
| @@ -1,5 +1,5 @@ | |||
| 1 | /* stylelint-disable scss/dollar-variable-pattern */ | 1 | // stylelint-disable scss/dollar-variable-pattern |
| 2 | /* stylelint-disable scss/at-function-pattern */ | 2 | // stylelint-disable scss/at-function-pattern |
| 3 | 3 | ||
| 4 | @use 'sass:color'; | 4 | @use 'sass:color'; |
| 5 | @use 'sass:list'; | 5 | @use 'sass:list'; |
| @@ -9,43 +9,46 @@ | |||
| 9 | $SA98G: ( | 9 | $SA98G: ( |
| 10 | mainTRC: 2.4, | 10 | mainTRC: 2.4, |
| 11 | 11 | ||
| 12 | sRco: 0.2126729, | 12 | sRco: .2126729, |
| 13 | sGco: 0.7151522, | 13 | sGco: .7151522, |
| 14 | sBco: 0.0721750, | 14 | sBco: .072175, |
| 15 | 15 | ||
| 16 | normBG: 0.56, | 16 | normBG: .56, |
| 17 | normTXT: 0.57, | 17 | normTXT: .57, |
| 18 | revTXT: 0.62, | 18 | revTXT: .62, |
| 19 | revBG: 0.65, | 19 | revBG: .65, |
| 20 | 20 | ||
| 21 | blkThrs: 0.022, | 21 | blkThrs: .022, |
| 22 | blkClmp: 1.414, | 22 | blkClmp: 1.414, |
| 23 | scaleBoW: 1.14, | 23 | scaleBoW: 1.14, |
| 24 | scaleWoB: 1.14, | 24 | scaleWoB: 1.14, |
| 25 | loBoWoffset: 0.027, | 25 | loBoWoffset: .027, |
| 26 | loWoBoffset: 0.027, | 26 | loWoBoffset: .027, |
| 27 | deltaYmin: 0.0005, | 27 | deltaYmin: .0005, |
| 28 | loClip: 0.0001, | 28 | loClip: .0001, |
| 29 | 29 | ||
| 30 | mFactor: 1.94685544331710, | 30 | mFactor: 1.9468554433171, |
| 31 | mOffsetIn: 0.03873938165714010, | 31 | mOffsetIn: .0387393816571401, |
| 32 | mExpAdj: 0.2833433964208690, | 32 | mExpAdj: .283343396420869, |
| 33 | mOffsetOut: 0.3128657958707580, | 33 | mOffsetOut: .312865795870758, |
| 34 | ); | 34 | ); |
| 35 | 35 | ||
| 36 | @function apca_sRGB_to_Y($color) { | 36 | @function sRGB_to_Y($color) { |
| 37 | @return map.get($SA98G, sRco) * math.pow(math.div(color.red($color), 255), map.get($SA98G, mainTRC)) + | 37 | $rgb: color.to-space($color, rgb); |
| 38 | map.get($SA98G, sGco) * math.pow(math.div(color.green($color), 255), map.get($SA98G, mainTRC)) + | 38 | |
| 39 | map.get($SA98G, sBco) * math.pow(math.div(color.blue($color), 255), map.get($SA98G, mainTRC)); | 39 | @return map.get($SA98G, sRco) * math.pow(math.div(color.channel($rgb, 'red'), 255), map.get($SA98G, mainTRC)) + |
| 40 | map.get($SA98G, sGco) * math.pow(math.div(color.channel($rgb, 'green'), 255), map.get($SA98G, mainTRC)) + | ||
| 41 | map.get($SA98G, sBco) * math.pow(math.div(color.channel($rgb, 'blue'), 255), map.get($SA98G, mainTRC)); | ||
| 40 | } | 42 | } |
| 41 | 43 | ||
| 42 | @function apca_Y_to_sRGB($y) { | 44 | @function Y_to_sRGB($y) { |
| 43 | $c: math.round(math.pow($y, math.div(1, map.get($SA98G, mainTRC))) * 255); | 45 | $c: math.round(math.pow($y, math.div(1, map.get($SA98G, mainTRC))) * 255); |
| 44 | @return rgb($c, $c, $c); | 46 | @return rgb($c, $c, $c); |
| 45 | } | 47 | } |
| 46 | 48 | ||
| 47 | @function apcaContrast($txtY, $bgY) { | 49 | @function contrast($txtY, $bgY) { |
| 48 | $icp: 0.0 1.1; | 50 | /* stylelint-disable-next-line @stylistic/number-no-trailing-zeros */ |
| 51 | $icp: .0 1.1; | ||
| 49 | 52 | ||
| 50 | @if math.min($txtY, $bgY) < list.nth($icp, 1) or math.max($txtY, $bgY) > list.nth($icp, 2) { | 53 | @if math.min($txtY, $bgY) < list.nth($icp, 1) or math.max($txtY, $bgY) > list.nth($icp, 2) { |
| 51 | @return 0; | 54 | @return 0; |
| @@ -78,10 +81,10 @@ $SA98G: ( | |||
| 78 | } | 81 | } |
| 79 | } | 82 | } |
| 80 | 83 | ||
| 81 | @return $outputContrast * 100.0; | 84 | @return $outputContrast * 100; |
| 82 | } | 85 | } |
| 83 | 86 | ||
| 84 | @function apcaReverse($contrast, $knownY, $knownType: 'bg') { | 87 | @function reverse($contrast, $knownY, $knownType: 'bg') { |
| 85 | $unknownY: $knownY; | 88 | $unknownY: $knownY; |
| 86 | 89 | ||
| 87 | $knownExp: 0; | 90 | $knownExp: 0; |
| @@ -90,7 +93,7 @@ $SA98G: ( | |||
| 90 | $scale: map.get($SA98G, if($contrast > 0, scaleBoW, scaleWoB)); | 93 | $scale: map.get($SA98G, if($contrast > 0, scaleBoW, scaleWoB)); |
| 91 | $offset: map.get($SA98G, if($contrast > 0, loBoWoffset, loWoBoffset)); | 94 | $offset: map.get($SA98G, if($contrast > 0, loBoWoffset, loWoBoffset)); |
| 92 | 95 | ||
| 93 | $contrast: math.div($contrast * 0.01 + $offset, $scale); | 96 | $contrast: math.div($contrast * .01 + $offset, $scale); |
| 94 | 97 | ||
| 95 | @if $knownY <= map.get($SA98G, blkThrs) { | 98 | @if $knownY <= map.get($SA98G, blkThrs) { |
| 96 | $knownY: $knownY + math.pow(map.get($SA98G, blkThrs) - $knownY, map.get($SA98G, blkClmp)); | 99 | $knownY: $knownY + math.pow(map.get($SA98G, blkThrs) - $knownY, map.get($SA98G, blkClmp)); |
| @@ -115,10 +118,7 @@ $SA98G: ( | |||
| 115 | } | 118 | } |
| 116 | 119 | ||
| 117 | @if $unknownY <= map.get($SA98G, blkThrs) { | 120 | @if $unknownY <= map.get($SA98G, blkThrs) { |
| 118 | $unknownY: math.pow( | 121 | $unknownY: math.pow(($unknownY + map.get($SA98G, mOffsetIn)) * map.get($SA98G, mFactor), math.div(map.get($SA98G, mExpAdj), map.get($SA98G, blkClmp))) * math.div(1, map.get($SA98G, mFactor)) - map.get($SA98G, mOffsetOut); |
| 119 | ($unknownY + map.get($SA98G, mOffsetIn)) * map.get($SA98G, mFactor), | ||
| 120 | math.div(map.get($SA98G, mExpAdj), map.get($SA98G, blkClmp)) | ||
| 121 | ) * math.div(1, map.get($SA98G, mFactor)) - map.get($SA98G, mOffsetOut); | ||
| 122 | } | 122 | } |
| 123 | 123 | ||
| 124 | $unknownY: math.max(math.min($unknownY, 1), 0); | 124 | $unknownY: math.max(math.min($unknownY, 1), 0); |
diff --git a/src/_apply-vars.scss b/src/_apply-vars.scss deleted file mode 100644 index a2ee404..0000000 --- a/src/_apply-vars.scss +++ /dev/null | |||
| @@ -1,17 +0,0 @@ | |||
| 1 | @use 'sass:map'; | ||
| 2 | @use 'iro-sass/src/index' as iro; | ||
| 3 | @use 'include-media/dist/include-media' as media; | ||
| 4 | |||
| 5 | :root { | ||
| 6 | @include iro.props-assign; | ||
| 7 | |||
| 8 | @each $breakpoint in map.keys(media.$breakpoints) { | ||
| 9 | @include media.media('<=#{$breakpoint}') { | ||
| 10 | @include iro.props-assign($breakpoint); | ||
| 11 | } | ||
| 12 | } | ||
| 13 | |||
| 14 | @media (prefers-color-scheme: dark) { | ||
| 15 | @include iro.props-assign('dark'); | ||
| 16 | } | ||
| 17 | } | ||
diff --git a/src/_base.scss b/src/_base.scss deleted file mode 100644 index 8e4c1d9..0000000 --- a/src/_base.scss +++ /dev/null | |||
| @@ -1,145 +0,0 @@ | |||
| 1 | @use 'sass:math'; | ||
| 2 | @use 'iro-sass/src/index' as iro; | ||
| 3 | @use 'functions' as fn; | ||
| 4 | @use 'mixins' as mx; | ||
| 5 | @use 'config'; | ||
| 6 | |||
| 7 | html { | ||
| 8 | scrollbar-color: fn.color(--text-disabled) transparent; | ||
| 9 | accent-color: fn.color(--accent --600); | ||
| 10 | } | ||
| 11 | |||
| 12 | html, | ||
| 13 | body { | ||
| 14 | block-size: 100%; | ||
| 15 | } | ||
| 16 | |||
| 17 | body { | ||
| 18 | @include mx.set-font(--standard, (--size: fn.dim(--font-size --100))); | ||
| 19 | |||
| 20 | margin: 0; | ||
| 21 | padding: 0; | ||
| 22 | background-color: fn.color(--bg-base); | ||
| 23 | color: fn.color(--text); | ||
| 24 | } | ||
| 25 | |||
| 26 | pre, | ||
| 27 | code { | ||
| 28 | font-feature-settings: 'calt' 0, 'dlig' 1, 'ss09' 1; | ||
| 29 | } | ||
| 30 | |||
| 31 | pre, | ||
| 32 | code { | ||
| 33 | @include mx.set-font(--mono, (--size: .93em)); | ||
| 34 | } | ||
| 35 | |||
| 36 | pre { | ||
| 37 | margin: 0; | ||
| 38 | overflow-x: auto; | ||
| 39 | |||
| 40 | code { | ||
| 41 | color: currentColor; | ||
| 42 | font-size: 1em; | ||
| 43 | } | ||
| 44 | } | ||
| 45 | |||
| 46 | h1, | ||
| 47 | h2, | ||
| 48 | h3, | ||
| 49 | h4, | ||
| 50 | h5, | ||
| 51 | h6 { | ||
| 52 | @include mx.heading-medium(--md); | ||
| 53 | |||
| 54 | margin-block: fn.dim(--heading --margin-bs) 0; | ||
| 55 | |||
| 56 | & + & { | ||
| 57 | margin-block-start: fn.dim(--heading --margin-bs-sibling); | ||
| 58 | } | ||
| 59 | } | ||
| 60 | |||
| 61 | p { | ||
| 62 | margin-block: fn.dim(--paragraph --margin-bs) 0; | ||
| 63 | |||
| 64 | &:empty { | ||
| 65 | display: none; | ||
| 66 | } | ||
| 67 | } | ||
| 68 | |||
| 69 | strong { | ||
| 70 | font-weight: bold; | ||
| 71 | } | ||
| 72 | |||
| 73 | small { | ||
| 74 | font-size: fn.dim(--font-size --75); | ||
| 75 | } | ||
| 76 | |||
| 77 | ul, | ||
| 78 | ol { | ||
| 79 | margin: 0; | ||
| 80 | padding: 0; | ||
| 81 | list-style: none; | ||
| 82 | } | ||
| 83 | |||
| 84 | li { | ||
| 85 | margin: 0; | ||
| 86 | padding: 0; | ||
| 87 | } | ||
| 88 | |||
| 89 | :focus, | ||
| 90 | :focus-visible { | ||
| 91 | outline: 0; | ||
| 92 | } | ||
| 93 | |||
| 94 | :link, | ||
| 95 | :visited { | ||
| 96 | color: currentColor; | ||
| 97 | text-decoration: none; | ||
| 98 | } | ||
| 99 | |||
| 100 | |||
| 101 | button, | ||
| 102 | input, | ||
| 103 | textarea { | ||
| 104 | box-sizing: content-box; | ||
| 105 | margin: 0; | ||
| 106 | padding: 0; | ||
| 107 | border: 0; | ||
| 108 | background: none; | ||
| 109 | color: currentColor; | ||
| 110 | font-family: inherit; | ||
| 111 | font-size: 1em; | ||
| 112 | font-style: inherit; | ||
| 113 | font-weight: inherit; | ||
| 114 | line-height: inherit; | ||
| 115 | text-align: inherit; | ||
| 116 | text-transform: inherit; | ||
| 117 | appearance: none; | ||
| 118 | |||
| 119 | &::-moz-focus-inner { | ||
| 120 | border: 0; | ||
| 121 | } | ||
| 122 | } | ||
| 123 | |||
| 124 | input, | ||
| 125 | textarea { | ||
| 126 | &::placeholder { | ||
| 127 | opacity: 1; | ||
| 128 | color: fn.color(--text-mute); | ||
| 129 | } | ||
| 130 | |||
| 131 | &:disabled { | ||
| 132 | color: fn.color(--text-disabled); | ||
| 133 | } | ||
| 134 | } | ||
| 135 | |||
| 136 | textarea { | ||
| 137 | block-size: calc(1em * fn.dim(--font --standard --line-height)); | ||
| 138 | } | ||
| 139 | |||
| 140 | hr { | ||
| 141 | block-size: fn.dim(--border --thin); | ||
| 142 | margin: 0; | ||
| 143 | border: 0; | ||
| 144 | background-color: fn.color(--border); | ||
| 145 | } | ||
diff --git a/src/_config.defaults.scss b/src/_config.defaults.scss new file mode 100644 index 0000000..cf23f29 --- /dev/null +++ b/src/_config.defaults.scss | |||
| @@ -0,0 +1,187 @@ | |||
| 1 | @use 'sass:list'; | ||
| 2 | @use 'sass:map'; | ||
| 3 | @use 'sass:math'; | ||
| 4 | @use 'iro-sass/src/easing' as easing; | ||
| 5 | |||
| 6 | $static-colors: ( | ||
| 7 | --base: hsl(0, 0%, 98%), | ||
| 8 | |||
| 9 | --levels: ( | ||
| 10 | --100: math.div(0, 12) * 110 - 10, | ||
| 11 | --200: math.div(1, 12) * 110 - 10, | ||
| 12 | --300: math.div(2, 12) * 110 - 10, | ||
| 13 | --400: math.div(3, 12) * 110 - 10, | ||
| 14 | --500: math.div(4, 12) * 110 - 10, | ||
| 15 | --600: math.div(5, 12) * 110 - 10, | ||
| 16 | --700: math.div(6, 12) * 110 - 10, | ||
| 17 | --800: math.div(7, 12) * 110 - 10, | ||
| 18 | --900: math.div(8, 12) * 110 - 10, | ||
| 19 | --1000: math.div(9, 12) * 110 - 10, | ||
| 20 | --1100: math.div(10, 12) * 110 - 10, | ||
| 21 | --1200: math.div(11, 12) * 110 - 10, | ||
| 22 | --1300: math.div(12, 12) * 110 - 10, | ||
| 23 | ), | ||
| 24 | |||
| 25 | --palettes: ( | ||
| 26 | --blue: oklch(56% .14 275.25), | ||
| 27 | --purple: oklch(56% .14 305.58), | ||
| 28 | --red: oklch(56% .14 14.69), | ||
| 29 | --green: oklch(56% .14 150.48), | ||
| 30 | --yellow: oklch(56% .14 84.08), | ||
| 31 | ), | ||
| 32 | |||
| 33 | --transparents: ( | ||
| 34 | --100: 0, | ||
| 35 | --200: .1, | ||
| 36 | --300: .25, | ||
| 37 | --400: .4, | ||
| 38 | --500: .55, | ||
| 39 | --600: .7, | ||
| 40 | --700: .8, | ||
| 41 | --800: .9, | ||
| 42 | --900: 1, | ||
| 43 | ), | ||
| 44 | ); | ||
| 45 | |||
| 46 | $semantic-colors-common: ( | ||
| 47 | --accent: --blue, | ||
| 48 | --accent-static: --blue-static, | ||
| 49 | --positive: --green, | ||
| 50 | --positive-static: --green-static, | ||
| 51 | --negative: --red, | ||
| 52 | --negative-static: --red-static, | ||
| 53 | --warning: --yellow, | ||
| 54 | --warning-static: --yellow-static, | ||
| 55 | |||
| 56 | --focus-raw: --accent, | ||
| 57 | --focus-static: --accent-static, | ||
| 58 | |||
| 59 | --border-mute: --base --200, | ||
| 60 | --border: --base --300, | ||
| 61 | --border-strong: --base --400, | ||
| 62 | |||
| 63 | --text-disabled: --base --500, | ||
| 64 | --text-mute-more: --base --600, | ||
| 65 | --text-mute: --base --700, | ||
| 66 | --text: --base --800, | ||
| 67 | --heading: --base --900, | ||
| 68 | |||
| 69 | --focus: ( | ||
| 70 | --outline: --focus-raw --400, | ||
| 71 | --border-mute: --focus-raw --900, | ||
| 72 | --border: --focus-raw --1000, | ||
| 73 | --border-text: --focus-raw --1000-text, | ||
| 74 | --border-strong: --focus-raw --1100, | ||
| 75 | --text: --focus-raw --1100, | ||
| 76 | ), | ||
| 77 | ); | ||
| 78 | |||
| 79 | $theme-light: ( | ||
| 80 | --levels: ( | ||
| 81 | --grays: ( | ||
| 82 | --50: (-8) (.2 + .8 * easing.ease(math.div(0, 12))), | ||
| 83 | --75: (-4) (.2 + .8 * easing.ease(math.div(1, 12))), | ||
| 84 | --100: (0) (.2 + .8 * easing.ease(math.div(2, 12))), | ||
| 85 | |||
| 86 | --200: (easing.cubic-bezier(.2, .1, .9, .9, math.div(1, 7)) * 98) (.2 + .8 * easing.ease(math.div(3, 12))), | ||
| 87 | --300: (easing.cubic-bezier(.2, .1, .9, .9, math.div(2, 7)) * 98) (.2 + .8 * easing.ease(math.div(4, 12))), | ||
| 88 | --400: (easing.cubic-bezier(.2, .1, .9, .9, math.div(3, 7)) * 98) (.2 + .8 * easing.ease(math.div(5, 12))), | ||
| 89 | |||
| 90 | --500: (easing.cubic-bezier(.2, .1, .9, .9, math.div(4, 7)) * 98) (.2 + .8 * easing.ease(math.div(6, 12))), | ||
| 91 | --600: (easing.cubic-bezier(.2, .1, .9, .9, math.div(5, 7)) * 98) (.2 + .8 * easing.ease(math.div(7, 12))), | ||
| 92 | --700: (easing.cubic-bezier(.2, .1, .9, .9, math.div(6, 7)) * 98) (.2 + .8 * easing.ease(math.div(8, 12))), | ||
| 93 | --800: (easing.cubic-bezier(.2, .1, .9, .9, math.div(7, 7)) * 98) (.2 + .8 * easing.ease(math.div(9, 12))), | ||
| 94 | --900: (106) (.2 + .8 * easing.ease(math.div(10, 12))), | ||
| 95 | ), | ||
| 96 | |||
| 97 | --colors: ( | ||
| 98 | --100: (math.div(0, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(0, 12))), | ||
| 99 | --200: (math.div(1, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(1, 12))), | ||
| 100 | --300: (math.div(2, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(2, 12))), | ||
| 101 | --400: (math.div(3, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(3, 12))), | ||
| 102 | --500: (math.div(4, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(4, 12))), | ||
| 103 | --600: (math.div(5, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(5, 12))), | ||
| 104 | --700: (math.div(6, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(6, 12))), | ||
| 105 | --800: (math.div(7, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(7, 12))), | ||
| 106 | --900: (math.div(8, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(8, 12))), | ||
| 107 | --1000: (math.div(9, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(9, 12))), | ||
| 108 | --1100: (math.div(10, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(10, 12))), | ||
| 109 | --1200: (math.div(11, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(11, 12))), | ||
| 110 | --1300: (math.div(12, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(12, 12))), | ||
| 111 | ), | ||
| 112 | ), | ||
| 113 | |||
| 114 | --palettes: ( | ||
| 115 | --base: hsl(260, 70%, 98%) --grays, | ||
| 116 | --blue: oklch(56% .16 275.25) --colors, | ||
| 117 | --purple: oklch(56% .16 305.58) --colors, | ||
| 118 | --red: oklch(56% .16 14.69) --colors, | ||
| 119 | --green: oklch(56% .16 150.48) --colors, | ||
| 120 | --yellow: oklch(56% .16 84.08) --colors, | ||
| 121 | ), | ||
| 122 | |||
| 123 | --semantic: map.merge($semantic-colors-common, ( | ||
| 124 | --bg-l2: --base --50, | ||
| 125 | --bg-l1: --base --100, | ||
| 126 | --bg-base: --base --200, | ||
| 127 | )), | ||
| 128 | |||
| 129 | --constants: ( | ||
| 130 | --shadow: rgba(#000, .15), | ||
| 131 | ), | ||
| 132 | ); | ||
| 133 | |||
| 134 | $theme-dark: ( | ||
| 135 | --levels: ( | ||
| 136 | --grays: ( | ||
| 137 | --50: (4.4) (.3 + .7 * easing.ease(math.div(10, 12))), | ||
| 138 | --75: (2.5) (.3 + .7 * easing.ease(math.div(9, 12))), | ||
| 139 | --100: (0) (.3 + .7 * easing.ease(math.div(8, 12))), | ||
| 140 | |||
| 141 | --200: (easing.cubic-bezier(.3, .1, .8, .8, math.div(1, 8)) * -108) (.3 + .7 * easing.ease(math.div(7, 12))), | ||
| 142 | --300: (easing.cubic-bezier(.3, .1, .8, .8, math.div(2, 8)) * -108) (.3 + .7 * easing.ease(math.div(6, 12))), | ||
| 143 | --400: (easing.cubic-bezier(.3, .1, .8, .8, math.div(3, 8)) * -108) (.3 + .7 * easing.ease(math.div(5, 12))), | ||
| 144 | |||
| 145 | --500: (easing.cubic-bezier(.3, .1, .8, .8, math.div(4, 8)) * -108) (.3 + .7 * easing.ease(math.div(4, 12))), | ||
| 146 | --600: (easing.cubic-bezier(.3, .1, .8, .8, math.div(5, 8)) * -108) (.3 + .7 * easing.ease(math.div(3, 12))), | ||
| 147 | --700: (easing.cubic-bezier(.3, .1, .8, .8, math.div(6, 8)) * -108) (.3 + .7 * easing.ease(math.div(2, 12))), | ||
| 148 | --800: (easing.cubic-bezier(.3, .1, .8, .8, math.div(7, 8)) * -108) (.3 + .7 * easing.ease(math.div(1, 12))), | ||
| 149 | --900: (easing.cubic-bezier(.3, .1, .8, .8, math.div(8, 8)) * -108) (.3 + .7 * easing.ease(math.div(0, 12))), | ||
| 150 | ), | ||
| 151 | |||
| 152 | --colors: ( | ||
| 153 | --100: (easing.cubic-bezier(.2, .1, .8, .8, math.div(0, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(0, 12))), | ||
| 154 | --200: (easing.cubic-bezier(.2, .1, .8, .8, math.div(1, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(1, 12))), | ||
| 155 | --300: (easing.cubic-bezier(.2, .1, .8, .8, math.div(2, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(2, 12))), | ||
| 156 | --400: (easing.cubic-bezier(.2, .1, .8, .8, math.div(3, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(3, 12))), | ||
| 157 | --500: (easing.cubic-bezier(.2, .1, .8, .8, math.div(4, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(4, 12))), | ||
| 158 | --600: (easing.cubic-bezier(.2, .1, .8, .8, math.div(5, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(5, 12))), | ||
| 159 | --700: (easing.cubic-bezier(.2, .1, .8, .8, math.div(6, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(6, 12))), | ||
| 160 | --800: (easing.cubic-bezier(.2, .1, .8, .8, math.div(7, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(7, 12))), | ||
| 161 | --900: (easing.cubic-bezier(.2, .1, .8, .8, math.div(8, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(8, 12))), | ||
| 162 | --1000: (easing.cubic-bezier(.2, .1, .8, .8, math.div(9, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(9, 12))), | ||
| 163 | --1100: (easing.cubic-bezier(.2, .1, .8, .8, math.div(10, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(10, 12))), | ||
| 164 | --1200: (easing.cubic-bezier(.2, .1, .8, .8, math.div(11, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(11, 12))), | ||
| 165 | --1300: (easing.cubic-bezier(.2, .1, .8, .8, math.div(12, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(12, 12))), | ||
| 166 | ), | ||
| 167 | ), | ||
| 168 | |||
| 169 | --palettes: ( | ||
| 170 | --base: hsl(257, 7%, 20%) --grays, | ||
| 171 | --blue: oklch(56% .16 275.25) --colors, | ||
| 172 | --purple: oklch(56% .16 305.58) --colors, | ||
| 173 | --red: oklch(56% .16 14.69) --colors, | ||
| 174 | --green: oklch(56% .16 150.48) --colors, | ||
| 175 | --yellow: oklch(56% .16 84.08) --colors, | ||
| 176 | ), | ||
| 177 | |||
| 178 | --semantic: map.merge($semantic-colors-common, ( | ||
| 179 | --bg-base: --base --50, | ||
| 180 | --bg-l1: --base --75, | ||
| 181 | --bg-l2: --base --100, | ||
| 182 | )), | ||
| 183 | |||
| 184 | --constants: ( | ||
| 185 | --shadow: rgba(#000, .5), | ||
| 186 | ), | ||
| 187 | ); | ||
diff --git a/src/_config.scss b/src/_config.scss index 5449a04..284d6e7 100644 --- a/src/_config.scss +++ b/src/_config.scss | |||
| @@ -1,230 +1,27 @@ | |||
| 1 | @use 'sass:list'; | 1 | @use 'sass:list'; |
| 2 | @use 'sass:map'; | 2 | @use 'sass:map'; |
| 3 | @use 'sass:math'; | 3 | @use 'sass:math'; |
| 4 | @use 'iro-sass/src/index' as iro; | ||
| 5 | @use 'iro-sass/src/responsive' as res; | ||
| 6 | @use 'iro-sass/src/easing' as easing; | 4 | @use 'iro-sass/src/easing' as easing; |
| 7 | @use 'include-media/dist/include-media' as media; | 5 | @use 'config.defaults' as def; |
| 8 | @use '@oddbird/blend'; | ||
| 9 | 6 | ||
| 10 | iro.$vars-root-size: 16px; | 7 | $static-colors-override: () !default; |
| 8 | $static-colors: map.deep-merge(def.$static-colors, $static-colors-override) !default; | ||
| 11 | 9 | ||
| 12 | media.$breakpoints: ( | 10 | $semantic-colors-common-override: () !default; |
| 13 | lg: 1340px, | 11 | $semantic-colors-common: map.deep-merge(def.$semantic-colors-common, $semantic-colors-common-override) !default; |
| 14 | md: 900px, | ||
| 15 | sm: 620px, | ||
| 16 | xs: 400px, | ||
| 17 | ); | ||
| 18 | 12 | ||
| 19 | media.$unit-intervals: ( | 13 | $theme-light-override: () !default; |
| 20 | 'px': 1, | 14 | $theme-light: map.deep-merge(def.$theme-light, $theme-light-override) !default; |
| 21 | 'em': .01, | ||
| 22 | 'rem': .01, | ||
| 23 | '': 0 | ||
| 24 | ); | ||
| 25 | 15 | ||
| 26 | res.$named-viewports: media.$breakpoints; | 16 | $theme-dark-override: () !default; |
| 17 | $theme-dark: map.deep-merge(def.$theme-dark, $theme-dark-override) !default; | ||
| 27 | 18 | ||
| 28 | $palette-precision: 0.01 !default; | 19 | $themes-override: () !default; |
| 29 | 20 | $themes: map.deep-merge(( | |
| 30 | $palette-chroma-easing: 'ease' !default; | 21 | --main: ( |
| 31 | 22 | light: $theme-light, | |
| 32 | $static-colors: ( | 23 | dark: $theme-dark, |
| 33 | --base: hsl(0, 0%, 98%), | ||
| 34 | |||
| 35 | --contrasts: ( | ||
| 36 | --100: math.div( 0, 12) * 110 - 10, | ||
| 37 | --200: math.div( 1, 12) * 110 - 10, | ||
| 38 | --300: math.div( 2, 12) * 110 - 10, | ||
| 39 | --400: math.div( 3, 12) * 110 - 10, | ||
| 40 | --500: math.div( 4, 12) * 110 - 10, | ||
| 41 | --600: math.div( 5, 12) * 110 - 10, | ||
| 42 | --700: math.div( 6, 12) * 110 - 10, | ||
| 43 | --800: math.div( 7, 12) * 110 - 10, | ||
| 44 | --900: math.div( 8, 12) * 110 - 10, | ||
| 45 | --1000: math.div( 9, 12) * 110 - 10, | ||
| 46 | --1100: math.div(10, 12) * 110 - 10, | ||
| 47 | --1200: math.div(11, 12) * 110 - 10, | ||
| 48 | --1300: math.div(12, 12) * 110 - 10, | ||
| 49 | ), | ||
| 50 | |||
| 51 | --palettes: ( | ||
| 52 | --blue: oklch(56% 0.14 265.25), | ||
| 53 | --purple: oklch(56% 0.14 305.58), | ||
| 54 | --red: oklch(56% 0.14 18.69), | ||
| 55 | --green: oklch(56% 0.14 150.48), | ||
| 56 | --yellow: oklch(56% 0.14 84.08), | ||
| 57 | ), | ||
| 58 | |||
| 59 | --transparents: ( | ||
| 60 | --100: 0, | ||
| 61 | --200: .1, | ||
| 62 | --300: .25, | ||
| 63 | --400: .4, | ||
| 64 | --500: .55, | ||
| 65 | --600: .7, | ||
| 66 | --700: .8, | ||
| 67 | --800: .9, | ||
| 68 | --900: 1, | ||
| 69 | ), | ||
| 70 | ) !default; | ||
| 71 | |||
| 72 | $semantic-colors-common: ( | ||
| 73 | --accent: --blue, | ||
| 74 | --accent-static: --blue-static, | ||
| 75 | --positive: --green, | ||
| 76 | --positive-static: --green-static, | ||
| 77 | --negative: --red, | ||
| 78 | --negative-static: --red-static, | ||
| 79 | --warning: --yellow, | ||
| 80 | --warning-static: --yellow-static, | ||
| 81 | |||
| 82 | --focus-raw: --accent, | ||
| 83 | --focus-static: --accent-static, | ||
| 84 | |||
| 85 | --border-mute: --base --200, | ||
| 86 | --border: --base --300, | ||
| 87 | --border-strong: --base --400, | ||
| 88 | |||
| 89 | --text-disabled: --base --500, | ||
| 90 | --text-mute-more: --base --600, | ||
| 91 | --text-mute: --base --700, | ||
| 92 | --text: --base --800, | ||
| 93 | --heading: --base --900, | ||
| 94 | |||
| 95 | --focus: ( | ||
| 96 | --outline: --focus-raw --400, | ||
| 97 | --border-mute: --focus-raw --900, | ||
| 98 | --border: --focus-raw --1000, | ||
| 99 | --border-text: --focus-raw --1000-text, | ||
| 100 | --border-strong: --focus-raw --1100, | ||
| 101 | --text: --focus-raw --1100, | ||
| 102 | ), | ||
| 103 | ) !default; | ||
| 104 | |||
| 105 | $theme-light: ( | ||
| 106 | --contrasts: ( | ||
| 107 | --grays: ( | ||
| 108 | --50: -8, | ||
| 109 | --75: -4, | ||
| 110 | --100: 0, | ||
| 111 | |||
| 112 | --200: easing.cubic-bezier(.2, .1, .9, .9, math.div(1, 7)) * 100, | ||
| 113 | --300: easing.cubic-bezier(.2, .1, .9, .9, math.div(2, 7)) * 100, | ||
| 114 | --400: easing.cubic-bezier(.2, .1, .9, .9, math.div(3, 7)) * 100, | ||
| 115 | |||
| 116 | --500: easing.cubic-bezier(.2, .1, .9, .9, math.div(4, 7)) * 100, | ||
| 117 | --600: easing.cubic-bezier(.2, .1, .9, .9, math.div(5, 7)) * 100, | ||
| 118 | --700: easing.cubic-bezier(.2, .1, .9, .9, math.div(6, 7)) * 100, | ||
| 119 | --800: easing.cubic-bezier(.2, .1, .9, .9, math.div(7, 7)) * 100, | ||
| 120 | --900: 108, | ||
| 121 | ), | ||
| 122 | |||
| 123 | --colors: ( | ||
| 124 | --100: math.div( 0, 12) * 96 + 5, | ||
| 125 | --200: math.div( 1, 12) * 96 + 5, | ||
| 126 | --300: math.div( 2, 12) * 96 + 5, | ||
| 127 | --400: math.div( 3, 12) * 96 + 5, | ||
| 128 | --500: math.div( 4, 12) * 96 + 5, | ||
| 129 | --600: math.div( 5, 12) * 96 + 5, | ||
| 130 | --700: math.div( 6, 12) * 96 + 5, | ||
| 131 | --800: math.div( 7, 12) * 96 + 5, | ||
| 132 | --900: math.div( 8, 12) * 96 + 5, | ||
| 133 | --1000: math.div( 9, 12) * 96 + 5, | ||
| 134 | --1100: math.div(10, 12) * 96 + 5, | ||
| 135 | --1200: math.div(11, 12) * 96 + 5, | ||
| 136 | --1300: math.div(12, 12) * 96 + 5, | ||
| 137 | ), | ||
| 138 | ), | ||
| 139 | |||
| 140 | --ranges: ( | ||
| 141 | --full: 1, | ||
| 142 | --muted: .1, | ||
| 143 | ), | ||
| 144 | |||
| 145 | --palettes: ( | ||
| 146 | --base: hsl(0, 0%, 98%) --grays --full, | ||
| 147 | --blue: oklch(56% 0.16 265.25) --colors --muted, | ||
| 148 | --purple: oklch(56% 0.16 305.58) --colors --muted, | ||
| 149 | --red: oklch(56% 0.16 18.69) --colors --muted, | ||
| 150 | --green: oklch(56% 0.16 150.48) --colors --muted, | ||
| 151 | --yellow: oklch(56% 0.16 84.08) --colors --muted, | ||
| 152 | ), | ||
| 153 | |||
| 154 | --semantic: map.merge($semantic-colors-common, ( | ||
| 155 | --bg-l2: --base --50, | ||
| 156 | --bg-l1: --base --100, | ||
| 157 | --bg-base: --base --200, | ||
| 158 | )), | ||
| 159 | |||
| 160 | --constants: ( | ||
| 161 | --shadow: rgba(#000, 0.15), | ||
| 162 | ), | ||
| 163 | ) !default; | ||
| 164 | |||
| 165 | $theme-dark: ( | ||
| 166 | --contrasts: ( | ||
| 167 | --grays: ( | ||
| 168 | --50: 4.4, | ||
| 169 | --75: 2.2, | ||
| 170 | --100: 0, | ||
| 171 | |||
| 172 | --200: easing.cubic-bezier(.3, .1, .8, .8, math.div(1, 8)) * -108, | ||
| 173 | --300: easing.cubic-bezier(.3, .1, .8, .8, math.div(2, 8)) * -108, | ||
| 174 | --400: easing.cubic-bezier(.3, .1, .8, .8, math.div(3, 8)) * -108, | ||
| 175 | |||
| 176 | --500: easing.cubic-bezier(.3, .1, .8, .8, math.div(4, 8)) * -108, | ||
| 177 | --600: easing.cubic-bezier(.3, .1, .8, .8, math.div(5, 8)) * -108, | ||
| 178 | --700: easing.cubic-bezier(.3, .1, .8, .8, math.div(6, 8)) * -108, | ||
| 179 | --800: easing.cubic-bezier(.3, .1, .8, .8, math.div(7, 8)) * -108, | ||
| 180 | --900: easing.cubic-bezier(.3, .1, .8, .8, math.div(8, 8)) * -108, | ||
| 181 | ), | ||
| 182 | |||
| 183 | --colors: ( | ||
| 184 | --100: math.div( 0, 12) * -100 - 5, | ||
| 185 | --200: math.div( 1, 12) * -100 - 5, | ||
| 186 | --300: math.div( 2, 12) * -100 - 5, | ||
| 187 | --400: math.div( 3, 12) * -100 - 5, | ||
| 188 | --500: math.div( 4, 12) * -100 - 5, | ||
| 189 | --600: math.div( 5, 12) * -100 - 5, | ||
| 190 | --700: math.div( 6, 12) * -100 - 5, | ||
| 191 | --800: math.div( 7, 12) * -100 - 5, | ||
| 192 | --900: math.div( 8, 12) * -100 - 5, | ||
| 193 | --1000: math.div( 9, 12) * -100 - 5, | ||
| 194 | --1100: math.div(10, 12) * -100 - 5, | ||
| 195 | --1200: math.div(11, 12) * -100 - 5, | ||
| 196 | --1300: math.div(12, 12) * -100 - 5, | ||
| 197 | ), | ||
| 198 | ), | 24 | ), |
| 199 | 25 | ), $themes-override) !default; | |
| 200 | --ranges: ( | ||
| 201 | --full: 1, | ||
| 202 | --muted: .3, | ||
| 203 | ), | ||
| 204 | |||
| 205 | --palettes: ( | ||
| 206 | --base: hsl(0, 0%, 20%) --grays --full, | ||
| 207 | --blue: oklch(56% 0.16 265.25) --colors --muted, | ||
| 208 | --purple: oklch(56% 0.16 305.58) --colors --muted, | ||
| 209 | --red: oklch(56% 0.16 18.69) --colors --muted, | ||
| 210 | --green: oklch(56% 0.16 150.48) --colors --muted, | ||
| 211 | --yellow: oklch(56% 0.16 84.08) --colors --muted, | ||
| 212 | ), | ||
| 213 | |||
| 214 | --semantic: map.merge($semantic-colors-common, ( | ||
| 215 | --bg-base: --base --50, | ||
| 216 | --bg-l1: --base --75, | ||
| 217 | --bg-l2: --base --100, | ||
| 218 | )), | ||
| 219 | |||
| 220 | --constants: ( | ||
| 221 | --shadow: rgba(#000, 0.5), | ||
| 222 | ), | ||
| 223 | ) !default; | ||
| 224 | |||
| 225 | $themes: ( | ||
| 226 | light: $theme-light, | ||
| 227 | dark: $theme-dark, | ||
| 228 | ) !default; | ||
| 229 | 26 | ||
| 230 | $theme-default: list.nth(map.keys($themes), 1) !default; | 27 | $theme-default: list.nth(map.keys($themes), 1) !default; |
diff --git a/src/_core.scss b/src/_core.scss new file mode 100644 index 0000000..7b7a384 --- /dev/null +++ b/src/_core.scss | |||
| @@ -0,0 +1,38 @@ | |||
| 1 | @use 'sass:map'; | ||
| 2 | @use 'sass:meta'; | ||
| 3 | @use 'sass:string'; | ||
| 4 | @use 'iro-sass/src/bem'; | ||
| 5 | @use 'iro-sass/src/props'; | ||
| 6 | @use 'config'; | ||
| 7 | |||
| 8 | @use 'core.vars' as vars; | ||
| 9 | @forward 'core.vars'; | ||
| 10 | |||
| 11 | @mixin styles { | ||
| 12 | @each $theme-name, $theme in vars.$themes { | ||
| 13 | @if $theme-name == config.$theme-default { | ||
| 14 | :root { | ||
| 15 | @include props.materialize(map.values(meta.module-variables('vars'))); | ||
| 16 | |||
| 17 | @if map.has-key($theme, 'dark') { | ||
| 18 | @media (prefers-color-scheme: dark) { | ||
| 19 | @include props.materialize(map.get($theme, 'dark')); | ||
| 20 | } | ||
| 21 | } | ||
| 22 | } | ||
| 23 | } @else { | ||
| 24 | @include bem.theme(string.slice($theme-name, 3)) { | ||
| 25 | @include props.materialize(map.get($theme, 'light')); | ||
| 26 | |||
| 27 | color: props.get(vars.$theme, --text); | ||
| 28 | background-color: props.get(vars.$theme, --bg-base); | ||
| 29 | |||
| 30 | @if map.has-key($theme, 'dark') { | ||
| 31 | @media (prefers-color-scheme: dark) { | ||
| 32 | @include props.materialize(map.get($theme, 'dark')); | ||
| 33 | } | ||
| 34 | } | ||
| 35 | } | ||
| 36 | } | ||
| 37 | } | ||
| 38 | } | ||
diff --git a/src/_core.vars.scss b/src/_core.vars.scss new file mode 100644 index 0000000..0a94534 --- /dev/null +++ b/src/_core.vars.scss | |||
| @@ -0,0 +1,176 @@ | |||
| 1 | // stylelint-disable scss/dollar-variable-pattern | ||
| 2 | |||
| 3 | @use 'sass:map'; | ||
| 4 | @use 'sass:meta'; | ||
| 5 | @use 'sass:list'; | ||
| 6 | @use 'functions' as fn; | ||
| 7 | @use 'config'; | ||
| 8 | @use 'iro-sass/src/functions'; | ||
| 9 | @use 'iro-sass/src/props'; | ||
| 10 | |||
| 11 | $size--0: props.def(--size--0, 0) !default; | ||
| 12 | $size--10: props.def(--size--10, functions.px-to-rem(1px)) !default; | ||
| 13 | $size--25: props.def(--size--25, functions.px-to-rem(2px)) !default; | ||
| 14 | $size--40: props.def(--size--40, functions.px-to-rem(3px)) !default; | ||
| 15 | $size--50: props.def(--size--50, functions.px-to-rem(4px)) !default; | ||
| 16 | $size--65: props.def(--size--65, functions.px-to-rem(5px)) !default; | ||
| 17 | $size--75: props.def(--size--75, functions.px-to-rem(6px)) !default; | ||
| 18 | $size--85: props.def(--size--85, functions.px-to-rem(7px)) !default; | ||
| 19 | $size--100: props.def(--size--100, functions.px-to-rem(8px)) !default; | ||
| 20 | $size--115: props.def(--size--115, functions.px-to-rem(9px)) !default; | ||
| 21 | $size--125: props.def(--size--125, functions.px-to-rem(10px)) !default; | ||
| 22 | $size--130: props.def(--size--130, functions.px-to-rem(11px)) !default; | ||
| 23 | $size--150: props.def(--size--150, functions.px-to-rem(12px)) !default; | ||
| 24 | $size--160: props.def(--size--160, functions.px-to-rem(13px)) !default; | ||
| 25 | $size--175: props.def(--size--175, functions.px-to-rem(14px)) !default; | ||
| 26 | $size--200: props.def(--size--200, functions.px-to-rem(16px)) !default; | ||
| 27 | $size--225: props.def(--size--225, functions.px-to-rem(18px)) !default; | ||
| 28 | $size--250: props.def(--size--250, functions.px-to-rem(20px)) !default; | ||
| 29 | $size--275: props.def(--size--275, functions.px-to-rem(22px)) !default; | ||
| 30 | $size--300: props.def(--size--300, functions.px-to-rem(24px)) !default; | ||
| 31 | $size--325: props.def(--size--325, functions.px-to-rem(26px)) !default; | ||
| 32 | $size--350: props.def(--size--350, functions.px-to-rem(28px)) !default; | ||
| 33 | $size--375: props.def(--size--375, functions.px-to-rem(30px)) !default; | ||
| 34 | $size--400: props.def(--size--400, functions.px-to-rem(32px)) !default; | ||
| 35 | $size--450: props.def(--size--450, functions.px-to-rem(36px)) !default; | ||
| 36 | $size--500: props.def(--size--500, functions.px-to-rem(40px)) !default; | ||
| 37 | $size--550: props.def(--size--550, functions.px-to-rem(44px)) !default; | ||
| 38 | $size--600: props.def(--size--600, functions.px-to-rem(48px)) !default; | ||
| 39 | $size--650: props.def(--size--650, functions.px-to-rem(52px)) !default; | ||
| 40 | $size--700: props.def(--size--700, functions.px-to-rem(56px)) !default; | ||
| 41 | $size--800: props.def(--size--800, functions.px-to-rem(64px)) !default; | ||
| 42 | $size--900: props.def(--size--900, functions.px-to-rem(72px)) !default; | ||
| 43 | $size--1000: props.def(--size--1000, functions.px-to-rem(80px)) !default; | ||
| 44 | $size--1200: props.def(--size--1200, functions.px-to-rem(96px)) !default; | ||
| 45 | $size--1600: props.def(--size--1600, functions.px-to-rem(128px)) !default; | ||
| 46 | $size--2000: props.def(--size--2000, functions.px-to-rem(160px)) !default; | ||
| 47 | $size--2400: props.def(--size--2400, functions.px-to-rem(192px)) !default; | ||
| 48 | $size--2500: props.def(--size--2500, functions.px-to-rem(200px)) !default; | ||
| 49 | $size--2600: props.def(--size--2600, functions.px-to-rem(208px)) !default; | ||
| 50 | $size--2800: props.def(--size--2800, functions.px-to-rem(224px)) !default; | ||
| 51 | $size--3200: props.def(--size--3200, functions.px-to-rem(256px)) !default; | ||
| 52 | $size--3400: props.def(--size--3400, functions.px-to-rem(272px)) !default; | ||
| 53 | $size--3500: props.def(--size--3500, functions.px-to-rem(280px)) !default; | ||
| 54 | $size--3600: props.def(--size--3600, functions.px-to-rem(288px)) !default; | ||
| 55 | $size--3800: props.def(--size--3800, functions.px-to-rem(304px)) !default; | ||
| 56 | $size--4600: props.def(--size--4600, functions.px-to-rem(368px)) !default; | ||
| 57 | $size--5000: props.def(--size--5000, functions.px-to-rem(400px)) !default; | ||
| 58 | $size--6000: props.def(--size--6000, functions.px-to-rem(480px)) !default; | ||
| 59 | |||
| 60 | $font--standard--family: props.def(--font--standard--family, ('Inter', 'Open Sans', 'Segoe UI', 'Droid Sans', Roboto, Oxygen, 'Helvetica Neue', Helvetica, Tahoma, Arial, sans-serif)) !default; | ||
| 61 | $font--standard--line-height: props.def(--font--standard--line-height, 1.5) !default; | ||
| 62 | $font--standard--feature-settings: props.def(--font--standard--feature-settings, ('\'ss01\'')) !default; | ||
| 63 | |||
| 64 | $font--headline--family: props.def(--font--headline--family, ('Inter', props.get($font--standard--family))) !default; | ||
| 65 | $font--headline--line-height: props.def(--font--headline--line-height, 1.3) !default; | ||
| 66 | $font--headline--weight: props.def(--font--headline--weight, 800) !default; | ||
| 67 | $font--headline--feature-settings: props.def(--font--headline--feature-settings, ('\'opsz\'' 32, '\'ss01\'', '\'cv06\'')) !default; | ||
| 68 | |||
| 69 | $font--mono--family: props.def(--font--mono--family, ('Iosevka Term SS09', 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace)) !default; | ||
| 70 | $font--mono--line-height: props.def(--font--mono--line-height, 1.4) !default; | ||
| 71 | $font--mono--feature-settings: props.def(--font--mono--feature-settings, ('\'calt\'' 0, '\'dlig\' 1', '\'ss09\' 1')) !default; | ||
| 72 | |||
| 73 | $font-size--50: props.def(--font-size--50, functions.px-to-rem(12px)) !default; | ||
| 74 | $font-size--75: props.def(--font-size--75 , functions.px-to-rem(13px)) !default; | ||
| 75 | $font-size--100: props.def(--font-size--100, functions.px-to-rem(14px)) !default; | ||
| 76 | $font-size--150: props.def(--font-size--150, functions.px-to-rem(16px)) !default; | ||
| 77 | $font-size--200: props.def(--font-size--200, functions.px-to-rem(18px)) !default; | ||
| 78 | $font-size--300: props.def(--font-size--300, functions.px-to-rem(20px)) !default; | ||
| 79 | $font-size--400: props.def(--font-size--400, functions.px-to-rem(24px)) !default; | ||
| 80 | $font-size--500: props.def(--font-size--500, functions.px-to-rem(28px)) !default; | ||
| 81 | $font-size--600: props.def(--font-size--600, functions.px-to-rem(32px)) !default; | ||
| 82 | $font-size--700: props.def(--font-size--700, functions.px-to-rem(36px)) !default; | ||
| 83 | $font-size--800: props.def(--font-size--800, functions.px-to-rem(40px)) !default; | ||
| 84 | $font-size--900: props.def(--font-size--900, functions.px-to-rem(45px)) !default; | ||
| 85 | $font-size--1000: props.def(--font-size--1000, functions.px-to-rem(50px)) !default; | ||
| 86 | $font-size--1100: props.def(--font-size--1100, functions.px-to-rem(60px)) !default; | ||
| 87 | |||
| 88 | $border-width--thick: props.def(--border-width--thick, 4px) !default; | ||
| 89 | $border-width--medium: props.def(--border-width--medium, 2px) !default; | ||
| 90 | $border-width--thin: props.def(--border-width--thin, 1px) !default; | ||
| 91 | |||
| 92 | $shadow--x: props.def(--shadow--x, 0) !default; | ||
| 93 | $shadow--y: props.def(--shadow--y, 1px) !default; | ||
| 94 | $shadow--blur: props.def(--shadow--blur, 4px) !default; | ||
| 95 | |||
| 96 | $rounding: props.def(--rounding, 4px) !default; | ||
| 97 | |||
| 98 | $key-focus--outline-width: props.def(--key-focus--outline-width, props.get($border-width--thick)) !default; | ||
| 99 | $key-focus--border-width: props.def(--key-focus--border-width, props.get($border-width--medium)) !default; | ||
| 100 | $key-focus--border-offset: props.def(--key-focus--border-offset, props.get($border-width--medium)) !default; | ||
| 101 | |||
| 102 | $list--indent: props.def(--list--indent, props.get($size--400)) !default; | ||
| 103 | $list--compact-indent: props.def(--list--compact-indent, props.get($size--250)) !default; | ||
| 104 | |||
| 105 | $sticky-top-offset: props.def(--sticky-top-offset, 0rem) !default; | ||
| 106 | |||
| 107 | // | ||
| 108 | |||
| 109 | $-static-colors: (); | ||
| 110 | |||
| 111 | @each $palette-name, $palette in map.get(config.$static-colors, --palettes) { | ||
| 112 | $palette: fn.palette($palette, map.get(config.$static-colors, --levels), map.get(config.$static-colors, --base)); | ||
| 113 | $-static-colors: map.merge($-static-colors, ( $palette-name: $palette )); | ||
| 114 | } | ||
| 115 | |||
| 116 | // | ||
| 117 | |||
| 118 | $transparent-colors: props.def(--transparent-colors, (), 'color'); | ||
| 119 | |||
| 120 | @each $palette-name, $palette in (--black: #000 #fff, --white: #fff #000) { | ||
| 121 | $color: list.nth($palette, 1); | ||
| 122 | $text: list.nth($palette, 2); | ||
| 123 | |||
| 124 | $palette: fn.transparent-palette($color, $text, map.get(config.$static-colors, --transparents)); | ||
| 125 | $transparent-colors: props.merge($transparent-colors, ( $palette-name: $palette )); | ||
| 126 | } | ||
| 127 | |||
| 128 | // | ||
| 129 | |||
| 130 | $themes: (); | ||
| 131 | |||
| 132 | @each $theme-name, $theme in config.$themes { | ||
| 133 | @each $variant-name, $variant in $theme { | ||
| 134 | @if $variant != null { | ||
| 135 | $compiled: props.def(--colors, (), 'color'); | ||
| 136 | |||
| 137 | @each $palette-name, $palette in $-static-colors { | ||
| 138 | $compiled: props.merge($compiled, ( #{$palette-name}-static: $palette )); | ||
| 139 | } | ||
| 140 | |||
| 141 | @each $palette-name, $palette in map.get($variant, --palettes) { | ||
| 142 | $base-color: list.nth($palette, 1); | ||
| 143 | $levels: list.nth($palette, 2); | ||
| 144 | |||
| 145 | $palette: fn.palette($base-color, map.get($variant, --levels, $levels), list.nth(map.get($variant, --palettes, --base), 1)); | ||
| 146 | $compiled: props.merge($compiled, ( $palette-name: $palette )); | ||
| 147 | } | ||
| 148 | |||
| 149 | @each $color, $value in map.get($variant, --constants) { | ||
| 150 | $compiled: props.merge($compiled, ( $color: $value )); | ||
| 151 | } | ||
| 152 | |||
| 153 | @each $color, $ref in map.get($variant, --semantic) { | ||
| 154 | $res: (); | ||
| 155 | |||
| 156 | @if meta.type-of($ref) == 'map' { | ||
| 157 | @each $key, $r in $ref { | ||
| 158 | $re1: list.nth($r, 1); | ||
| 159 | $re2: functions.list-slice($r, 2); | ||
| 160 | $res: map.merge($res, ($key: props.get($compiled, $re1, $re2...))); | ||
| 161 | } | ||
| 162 | } @else { | ||
| 163 | $ref1: list.nth($ref, 1); | ||
| 164 | $ref2: functions.list-slice($ref, 2); | ||
| 165 | $res: props.get($compiled, $ref1, $ref2...); | ||
| 166 | } | ||
| 167 | |||
| 168 | $compiled: props.merge($compiled, ( $color: $res )); | ||
| 169 | } | ||
| 170 | |||
| 171 | $themes: map.set($themes, $theme-name, $variant-name, $compiled); | ||
| 172 | } | ||
| 173 | } | ||
| 174 | } | ||
| 175 | |||
| 176 | $theme: map.get($themes, config.$theme-default, light) !default; | ||
diff --git a/src/_declare-vars.scss b/src/_declare-vars.scss deleted file mode 100644 index e205354..0000000 --- a/src/_declare-vars.scss +++ /dev/null | |||
| @@ -1,274 +0,0 @@ | |||
| 1 | @use 'sass:map'; | ||
| 2 | @use 'sass:meta'; | ||
| 3 | @use 'sass:list'; | ||
| 4 | @use 'iro-sass/src/index' as iro; | ||
| 5 | @use 'include-media/dist/include-media' as media; | ||
| 6 | @use '@oddbird/blend'; | ||
| 7 | @use 'functions' as fn; | ||
| 8 | @use 'config'; | ||
| 9 | |||
| 10 | @include iro.props-store(( | ||
| 11 | --dims: ( | ||
| 12 | --size: ( | ||
| 13 | --0: 0, | ||
| 14 | --10: iro.fn-px-to-rem(1px), | ||
| 15 | --25: iro.fn-px-to-rem(2px), | ||
| 16 | --40: iro.fn-px-to-rem(3px), | ||
| 17 | --50: iro.fn-px-to-rem(4px), | ||
| 18 | --65: iro.fn-px-to-rem(5px), | ||
| 19 | --75: iro.fn-px-to-rem(6px), | ||
| 20 | --85: iro.fn-px-to-rem(7px), | ||
| 21 | --100: iro.fn-px-to-rem(8px), | ||
| 22 | --115: iro.fn-px-to-rem(9px), | ||
| 23 | --125: iro.fn-px-to-rem(10px), | ||
| 24 | --130: iro.fn-px-to-rem(11px), | ||
| 25 | --150: iro.fn-px-to-rem(12px), | ||
| 26 | --160: iro.fn-px-to-rem(13px), | ||
| 27 | --175: iro.fn-px-to-rem(14px), | ||
| 28 | --200: iro.fn-px-to-rem(16px), | ||
| 29 | --225: iro.fn-px-to-rem(18px), | ||
| 30 | --250: iro.fn-px-to-rem(20px), | ||
| 31 | --275: iro.fn-px-to-rem(22px), | ||
| 32 | --300: iro.fn-px-to-rem(24px), | ||
| 33 | --325: iro.fn-px-to-rem(26px), | ||
| 34 | --350: iro.fn-px-to-rem(28px), | ||
| 35 | --375: iro.fn-px-to-rem(30px), | ||
| 36 | --400: iro.fn-px-to-rem(32px), | ||
| 37 | --450: iro.fn-px-to-rem(36px), | ||
| 38 | --500: iro.fn-px-to-rem(40px), | ||
| 39 | --550: iro.fn-px-to-rem(44px), | ||
| 40 | --600: iro.fn-px-to-rem(48px), | ||
| 41 | --650: iro.fn-px-to-rem(52px), | ||
| 42 | --700: iro.fn-px-to-rem(56px), | ||
| 43 | --800: iro.fn-px-to-rem(64px), | ||
| 44 | --900: iro.fn-px-to-rem(72px), | ||
| 45 | --1000: iro.fn-px-to-rem(80px), | ||
| 46 | --1200: iro.fn-px-to-rem(96px), | ||
| 47 | --1600: iro.fn-px-to-rem(128px), | ||
| 48 | --2000: iro.fn-px-to-rem(160px), | ||
| 49 | --2400: iro.fn-px-to-rem(192px), | ||
| 50 | --2500: iro.fn-px-to-rem(200px), | ||
| 51 | --2600: iro.fn-px-to-rem(208px), | ||
| 52 | --2800: iro.fn-px-to-rem(224px), | ||
| 53 | --3200: iro.fn-px-to-rem(256px), | ||
| 54 | --3400: iro.fn-px-to-rem(272px), | ||
| 55 | --3500: iro.fn-px-to-rem(280px), | ||
| 56 | --3600: iro.fn-px-to-rem(288px), | ||
| 57 | --3800: iro.fn-px-to-rem(304px), | ||
| 58 | --4600: iro.fn-px-to-rem(368px), | ||
| 59 | --5000: iro.fn-px-to-rem(400px), | ||
| 60 | --6000: iro.fn-px-to-rem(480px), | ||
| 61 | ), | ||
| 62 | |||
| 63 | --font: ( | ||
| 64 | --standard: ( | ||
| 65 | --family: ('Inter', 'Open Sans', 'Segoe UI', 'Droid Sans', Roboto, Oxygen, 'Helvetica Neue', Helvetica, Tahoma, Arial, sans-serif), | ||
| 66 | --line-height: 1.5, | ||
| 67 | --feature-settings: ('\'ss01\''), | ||
| 68 | ), | ||
| 69 | --headline: ( | ||
| 70 | --family: ('Inter', fn.dim(--font --standard --family, null)), | ||
| 71 | --line-height: 1.3, | ||
| 72 | --weight: 800, | ||
| 73 | --feature-settings: ('\'opsz\'' 32, '\'ss01\'', '\'cv06\''), | ||
| 74 | ), | ||
| 75 | --mono: ( | ||
| 76 | --family: ('Iosevka Term SS09', 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace), | ||
| 77 | --line-height: 1.4, | ||
| 78 | ) | ||
| 79 | ), | ||
| 80 | |||
| 81 | --font-size: ( | ||
| 82 | --50: iro.fn-px-to-rem(12px), | ||
| 83 | --75: iro.fn-px-to-rem(13px), | ||
| 84 | --100: iro.fn-px-to-rem(14px), | ||
| 85 | --150: iro.fn-px-to-rem(16px), | ||
| 86 | --200: iro.fn-px-to-rem(18px), | ||
| 87 | --300: iro.fn-px-to-rem(20px), | ||
| 88 | --400: iro.fn-px-to-rem(24px), | ||
| 89 | --500: iro.fn-px-to-rem(28px), | ||
| 90 | --600: iro.fn-px-to-rem(32px), | ||
| 91 | --700: iro.fn-px-to-rem(36px), | ||
| 92 | --800: iro.fn-px-to-rem(40px), | ||
| 93 | --900: iro.fn-px-to-rem(45px), | ||
| 94 | --1000: iro.fn-px-to-rem(50px), | ||
| 95 | --1100: iro.fn-px-to-rem(60px), | ||
| 96 | ), | ||
| 97 | |||
| 98 | --border: ( | ||
| 99 | --thick: 4px, | ||
| 100 | --medium: 2px, | ||
| 101 | --thin: 1px, | ||
| 102 | ), | ||
| 103 | |||
| 104 | --shadow: ( | ||
| 105 | --x: 0, | ||
| 106 | --y: 1px, | ||
| 107 | --blur: 4px, | ||
| 108 | ), | ||
| 109 | |||
| 110 | --rounding: 4px, | ||
| 111 | |||
| 112 | --key-focus: ( | ||
| 113 | --outline: fn.dim(--border --thick, null), | ||
| 114 | --border: fn.dim(--border --medium, null), | ||
| 115 | --border-offset: fn.dim(--border --medium, null), | ||
| 116 | ), | ||
| 117 | |||
| 118 | --paragraph: ( | ||
| 119 | --margin-bs: fn.dim(--size --300, null), | ||
| 120 | ), | ||
| 121 | |||
| 122 | --heading: ( | ||
| 123 | --margin-bs: fn.dim(--size --700, null), | ||
| 124 | --margin-bs-sibling: fn.dim(--size --325, null), | ||
| 125 | |||
| 126 | --xxl: fn.dim(--font-size --300, null), | ||
| 127 | --xl: fn.dim(--font-size --200, null), | ||
| 128 | --lg: fn.dim(--font-size --150, null), | ||
| 129 | --md: fn.dim(--font-size --100, null), | ||
| 130 | --sm: fn.dim(--font-size --75, null), | ||
| 131 | --xs: fn.dim(--font-size --50, null), | ||
| 132 | |||
| 133 | --display: ( | ||
| 134 | --xxl: fn.dim(--font-size --1100, null), | ||
| 135 | --xl: fn.dim(--font-size --700, null), | ||
| 136 | --lg: fn.dim(--font-size --300, null), | ||
| 137 | --md: fn.dim(--font-size --150, null), | ||
| 138 | --sm: fn.dim(--font-size --75, null), | ||
| 139 | --xs: fn.dim(--font-size --50, null), | ||
| 140 | ), | ||
| 141 | |||
| 142 | --display-sm: ( | ||
| 143 | --xxl: fn.dim(--font-size --900, null), | ||
| 144 | --xl: fn.dim(--font-size --600, null), | ||
| 145 | --lg: fn.dim(--font-size --200, null), | ||
| 146 | --md: fn.dim(--font-size --100, null), | ||
| 147 | --sm: fn.dim(--font-size --75, null), | ||
| 148 | --xs: fn.dim(--font-size --50, null), | ||
| 149 | ) | ||
| 150 | ), | ||
| 151 | |||
| 152 | --list: ( | ||
| 153 | --indent: fn.dim(--size --400, null), | ||
| 154 | --compact-indent: fn.dim(--size --250, null), | ||
| 155 | ), | ||
| 156 | ), | ||
| 157 | )); | ||
| 158 | |||
| 159 | @each $breakpoint in map.keys(media.$breakpoints) { | ||
| 160 | @include media.media('<=#{$breakpoint}') { | ||
| 161 | @include iro.props-store((), $breakpoint); | ||
| 162 | } | ||
| 163 | } | ||
| 164 | |||
| 165 | @include iro.props-store(( | ||
| 166 | --dims: ( | ||
| 167 | --heading: ( | ||
| 168 | --margin-bs: fn.dim(--size --600, null), | ||
| 169 | ), | ||
| 170 | |||
| 171 | --list: ( | ||
| 172 | --indent: fn.dim(--size --300), | ||
| 173 | ), | ||
| 174 | ) | ||
| 175 | ), 'sm'); | ||
| 176 | |||
| 177 | @include iro.props-store(( | ||
| 178 | --dims: ( | ||
| 179 | --heading: ( | ||
| 180 | --margin-bs: fn.dim(--size --500, null), | ||
| 181 | ), | ||
| 182 | |||
| 183 | --list: ( | ||
| 184 | --indent: fn.dim(--size --250), | ||
| 185 | ), | ||
| 186 | ) | ||
| 187 | ), 'xs'); | ||
| 188 | |||
| 189 | // | ||
| 190 | |||
| 191 | @each $palette-name, $palette in map.get(config.$static-colors, --palettes) { | ||
| 192 | @include iro.props-store(( | ||
| 193 | --colors: ( | ||
| 194 | #{$palette-name}-static: fn.palette( | ||
| 195 | $palette, | ||
| 196 | map.get(config.$static-colors, --contrasts), | ||
| 197 | 1, | ||
| 198 | map.get(config.$static-colors, --base), | ||
| 199 | ), | ||
| 200 | ), | ||
| 201 | )); | ||
| 202 | } | ||
| 203 | |||
| 204 | @each $palette-name, $palette in (--black: #000 #fff, --white: #fff #000) { | ||
| 205 | $color: list.nth($palette, 1); | ||
| 206 | $text: list.nth($palette, 2); | ||
| 207 | |||
| 208 | @include iro.props-store(( | ||
| 209 | --colors: ( | ||
| 210 | #{$palette-name}-transparent: fn.transparent-palette( | ||
| 211 | $color, | ||
| 212 | $text, | ||
| 213 | map.get(config.$static-colors, --transparents), | ||
| 214 | ), | ||
| 215 | ), | ||
| 216 | )); | ||
| 217 | } | ||
| 218 | |||
| 219 | @each $theme-name, $theme in config.$themes { | ||
| 220 | $tree: if($theme-name == config.$theme-default, iro.$props-default-tree, $theme-name); | ||
| 221 | |||
| 222 | @each $palette-name, $palette in map.get($theme, --palettes) { | ||
| 223 | $base-color: list.nth($palette, 1); | ||
| 224 | $contrasts: list.nth($palette, 2); | ||
| 225 | $ranges: list.nth($palette, 3); | ||
| 226 | |||
| 227 | @include iro.props-store(( | ||
| 228 | --colors: ( | ||
| 229 | $palette-name: fn.palette( | ||
| 230 | $base-color, | ||
| 231 | map.get($theme, --contrasts, $contrasts), | ||
| 232 | map.get($theme, --ranges, $ranges), | ||
| 233 | list.nth(map.get($theme, --palettes, --base), 1), | ||
| 234 | ), | ||
| 235 | ), | ||
| 236 | ), $tree); | ||
| 237 | } | ||
| 238 | |||
| 239 | @each $color, $value in map.get($theme, --constants) { | ||
| 240 | @include iro.props-store(( | ||
| 241 | --colors: ( | ||
| 242 | $color: $value, | ||
| 243 | ), | ||
| 244 | ), $tree); | ||
| 245 | } | ||
| 246 | |||
| 247 | @each $color, $ref in map.get($theme, --semantic) { | ||
| 248 | $res: (); | ||
| 249 | |||
| 250 | @if meta.type-of($ref) == 'map' { | ||
| 251 | @each $key, $r in $ref { | ||
| 252 | $res: map.set($res, $key, fn.color($r)); | ||
| 253 | } | ||
| 254 | } @else { | ||
| 255 | $res: fn.color($ref); | ||
| 256 | } | ||
| 257 | |||
| 258 | @include iro.props-store(( | ||
| 259 | --colors: ( | ||
| 260 | $color: $res, | ||
| 261 | ), | ||
| 262 | ), $tree); | ||
| 263 | } | ||
| 264 | } | ||
| 265 | |||
| 266 | @each $theme-name, $theme in config.$themes { | ||
| 267 | $tree: if($theme-name == config.$theme-default, iro.$props-default-tree, $theme-name); | ||
| 268 | |||
| 269 | @include iro.props-store(( | ||
| 270 | --colors: ( | ||
| 271 | |||
| 272 | ), | ||
| 273 | ), $tree); | ||
| 274 | } | ||
diff --git a/src/_functions.scss b/src/_functions.scss index d615614..b41609e 100644 --- a/src/_functions.scss +++ b/src/_functions.scss | |||
| @@ -4,132 +4,54 @@ | |||
| 4 | @use 'sass:list'; | 4 | @use 'sass:list'; |
| 5 | @use 'sass:meta'; | 5 | @use 'sass:meta'; |
| 6 | 6 | ||
| 7 | @use '@oddbird/blend'; | 7 | @use 'iro-sass/src/easing'; |
| 8 | @use '@oddbird/blend/sass/convert' as blend-convert; | 8 | @use 'apca'; |
| 9 | 9 | ||
| 10 | @use 'iro-sass/src/index' as iro; | 10 | @function palette($base-color, $levels, $ref-color: $base-color) { |
| 11 | @use 'iro-sass/src/easing' as easing; | 11 | $base-lch: color.to-space($base-color, oklch); |
| 12 | @use 'functions/colors' as iro-colors; | 12 | $ref-lch: color.to-space($ref-color, oklch); |
| 13 | @use 'config'; | ||
| 14 | 13 | ||
| 15 | @function color($key, $tree: iro.$props-default-tree, $default: null, $global: false) { | 14 | $ref-l: color.channel($ref-lch, 'lightness'); |
| 16 | @return iro.props-get(list.join(--colors, $key), $tree, $default, $global); | 15 | $ref-y: apca.sRGB_to_Y($ref-lch); |
| 17 | } | ||
| 18 | |||
| 19 | @function global-color($key, $tree: iro.$props-default-tree, $default: null, $global: true) { | ||
| 20 | @return color($key, $tree, $default, $global); | ||
| 21 | } | ||
| 22 | |||
| 23 | @function foreign-color($foreign-key, $key, $tree: iro.$props-default-tree, $default: null, $global: true) { | ||
| 24 | @return iro.props-get(list.join($foreign-key --colors, $key), $tree, $default, $global); | ||
| 25 | } | ||
| 26 | |||
| 27 | @function dim($key, $tree: iro.$props-default-tree, $default: null, $global: false) { | ||
| 28 | @return iro.props-get(list.join(--dims, $key), $tree, $default, $global); | ||
| 29 | } | ||
| 30 | |||
| 31 | @function global-dim($key, $tree: iro.$props-default-tree, $default: null, $global: true) { | ||
| 32 | @return dim($key, $tree, $default, $global); | ||
| 33 | } | ||
| 34 | |||
| 35 | @function foreign-dim($foreign-key, $key, $tree: iro.$props-default-tree, $default: null, $global: true) { | ||
| 36 | @return iro.props-get(list.join($foreign-key --dims, $key), $tree, $default, $global); | ||
| 37 | } | ||
| 38 | |||
| 39 | @function font-prop($data, $overrides, $key, $prop) { | ||
| 40 | @if (map.has-key($overrides, $prop)) { | ||
| 41 | @return map.get($overrides, $prop); | ||
| 42 | } @else if (map.has-key($data, $prop)) { | ||
| 43 | @return global-dim(--font $key $prop); | ||
| 44 | } | ||
| 45 | @return null; | ||
| 46 | } | ||
| 47 | 16 | ||
| 48 | @function set-font($key, $overrides: ()) { | 17 | $black-y: apca.sRGB_to_Y(#000); |
| 49 | $font: iro.props-get-static(list.join(--dims --font, $key), $global: true); | 18 | $white-y: apca.sRGB_to_Y(#fff); |
| 50 | |||
| 51 | $map: ( | ||
| 52 | font-family: font-prop($font, $overrides, $key, --family), | ||
| 53 | font-size: font-prop($font, $overrides, $key, --size), | ||
| 54 | font-weight: font-prop($font, $overrides, $key, --weight), | ||
| 55 | font-style: font-prop($font, $overrides, $key, --style), | ||
| 56 | line-height: font-prop($font, $overrides, $key, --line-height), | ||
| 57 | text-transform: font-prop($font, $overrides, $key, --transform), | ||
| 58 | letter-spacing: font-prop($font, $overrides, $key, --spacing), | ||
| 59 | font-variant-alternates: font-prop($font, $overrides, $key, --variant-alternates), | ||
| 60 | font-feature-settings: font-prop($font, $overrides, $key, --feature-settings), | ||
| 61 | ); | ||
| 62 | |||
| 63 | @return $map; | ||
| 64 | } | ||
| 65 | |||
| 66 | @function lum($color) { | ||
| 67 | @return list.nth(blend-convert.lin_sRGB_to_XYZ(blend-convert.lin_sRGB(blend-convert.sassToRgb($color))), 2) + .05; | ||
| 68 | } | ||
| 69 | |||
| 70 | @function palette($base-color, $contrasts, $chroma-range: 1, $reference-color: $base-color) { | ||
| 71 | $base-lch: iro-colors.parse-oklch($base-color); | ||
| 72 | $ref-lch: iro-colors.parse-oklch($reference-color); | ||
| 73 | $ref-l: list.nth($ref-lch, 1); | ||
| 74 | $ref-y: iro-colors.apca_sRGB_to_Y($reference-color); | ||
| 75 | |||
| 76 | $cmax: math.max(map.values($contrasts)...); | ||
| 77 | $cmax: math.max($cmax, math.abs(math.min(map.values($contrasts)...))); | ||
| 78 | |||
| 79 | $black-y: iro-colors.apca_sRGB_to_Y(#000); | ||
| 80 | $white-y: iro-colors.apca_sRGB_to_Y(#fff); | ||
| 81 | |||
| 82 | $chroma-easing: meta.get-function(config.$palette-chroma-easing, $module: easing); | ||
| 83 | 19 | ||
| 84 | $palette: (); | 20 | $palette: (); |
| 85 | 21 | ||
| 86 | @each $key, $contrast in $contrasts { | 22 | @each $key, $level in $levels { |
| 87 | //$i: math.div(list.length($palette), 2 * (list.length($contrasts) - 1)); | 23 | $color: list.nth($level, 1); |
| 88 | $y: iro-colors.apcaReverse($contrast, $ref-y); | 24 | $y: 0; |
| 89 | $l: list.nth($base-lch, 1); | ||
| 90 | $c: 1; | 25 | $c: 1; |
| 26 | $h: 0deg; | ||
| 91 | 27 | ||
| 92 | @if $y != false { | 28 | @if list.length($level) > 1 { |
| 93 | $y-lch: blend-convert.Lab_to_LCH( | 29 | $c: list.nth($level, 2); |
| 94 | iro-colors.lin_sRGB_to_Oklab( | ||
| 95 | blend-convert.lin_sRGB( | ||
| 96 | blend-convert.sassToRgb( | ||
| 97 | iro-colors.apca_Y_to_sRGB($y) | ||
| 98 | ) | ||
| 99 | ) | ||
| 100 | ) | ||
| 101 | ); | ||
| 102 | $l: list.nth($y-lch, 1); | ||
| 103 | } @else { | ||
| 104 | $y: $ref-y; | ||
| 105 | } | 30 | } |
| 106 | 31 | @if list.length($level) > 2 { | |
| 107 | @if $chroma-range != 1 { | 32 | $h: list.nth($level, 3); |
| 108 | $c: if( | ||
| 109 | $ref-l > .5, | ||
| 110 | math.clamp(0, math.div($contrast, $cmax), 1), | ||
| 111 | -1 * math.clamp(-1, math.div($contrast, $cmax), 0) | ||
| 112 | ); | ||
| 113 | $c: meta.call($chroma-easing, $c); | ||
| 114 | $c: $chroma-range + (1 - $chroma-range) * $c; | ||
| 115 | } | 33 | } |
| 116 | 34 | ||
| 117 | $color: oklch(($l * 100%) ($c * list.nth($base-lch, 2)) list.nth($base-lch, 3)); | 35 | @if meta.type-of($color) != 'color' { |
| 118 | //$color: $l, $c * list.nth($base-lch, 2), list.nth($base-lch, 3); | 36 | $y: apca.reverse($color, $ref-y); |
| 119 | //$color: blend-convert.rgbToSass( | 37 | $l: color.channel($base-lch, 'lightness'); |
| 120 | // blend-convert.gam_sRGB( | 38 | |
| 121 | // iro-colors.Oklab_to_lin_sRGB( | 39 | @if $y != false { |
| 122 | // blend-convert.LCH_to_Lab($color) | 40 | $l: color.channel(apca.Y_to_sRGB($y), 'lightness', oklch); |
| 123 | // ) | 41 | } @else { |
| 124 | // ) | 42 | $y: $ref-y; |
| 125 | //); | 43 | } |
| 126 | 44 | ||
| 127 | $contrast-black: iro-colors.apcaContrast($black-y, $y); | 45 | $color: oklch($l ($c * color.channel($base-lch, 'chroma')) ($h + color.channel($base-lch, 'hue'))); |
| 128 | $contrast-white: iro-colors.apcaContrast($white-y, $y); | 46 | } @else { |
| 47 | $y: apca.sRGB_to_Y($color); | ||
| 48 | } | ||
| 49 | |||
| 50 | $contrast-black: apca.contrast($black-y, $y); | ||
| 51 | $contrast-white: apca.contrast($white-y, $y); | ||
| 129 | 52 | ||
| 130 | $palette: map.set($palette, $key, $color); | 53 | $palette: map.set($palette, $key, $color); |
| 131 | $palette: map.set($palette, #{$key}-text, if(math.abs($contrast-black) > math.abs($contrast-white), #000, #fff)); | 54 | $palette: map.set($palette, #{$key}-text, if(math.abs($contrast-black) > math.abs($contrast-white), #000, #fff)); |
| 132 | //$palette: map.set($palette, #{$key}-text, blend.contrast($color)); | ||
| 133 | } | 55 | } |
| 134 | 56 | ||
| 135 | @return $palette; | 57 | @return $palette; |
| @@ -146,7 +68,3 @@ | |||
| 146 | 68 | ||
| 147 | @return $palette; | 69 | @return $palette; |
| 148 | } | 70 | } |
| 149 | |||
| 150 | @function px-to-em($size, $base: iro.$vars-root-size) { | ||
| 151 | @return math.div($size, $base) * 1em; | ||
| 152 | } | ||
diff --git a/src/_iro-design.scss b/src/_iro-design.scss new file mode 100644 index 0000000..bad29c5 --- /dev/null +++ b/src/_iro-design.scss | |||
| @@ -0,0 +1,78 @@ | |||
| 1 | $breakpoints: ( | ||
| 2 | lg: 1340px, | ||
| 3 | md: 900px, | ||
| 4 | sm: 620px, | ||
| 5 | xs: 400px, | ||
| 6 | ) !default; | ||
| 7 | |||
| 8 | @use 'iro-sass/src/responsive' with ( | ||
| 9 | $named-viewports: $breakpoints | ||
| 10 | ); | ||
| 11 | |||
| 12 | @forward 'include-media/dist/include-media' as media--* with ( | ||
| 13 | $breakpoints: $breakpoints, | ||
| 14 | $unit-intervals: ( | ||
| 15 | 'px': 1, | ||
| 16 | 'em': .01, | ||
| 17 | 'rem': .01, | ||
| 18 | '': 0 | ||
| 19 | ) !default, | ||
| 20 | ); | ||
| 21 | |||
| 22 | @forward 'config.defaults' as config-defaults--*; | ||
| 23 | @forward 'config' as config--*; | ||
| 24 | @forward 'props' as props--*; | ||
| 25 | @forward 'core' as core--*; | ||
| 26 | @forward 'layers' as layers--*; | ||
| 27 | |||
| 28 | @forward 'layouts/button-group' as l-button-group--*; | ||
| 29 | @forward 'layouts/card-list' as l-card-list--*; | ||
| 30 | @forward 'layouts/container' as l-container--*; | ||
| 31 | @forward 'layouts/flex' as l-flex--*; | ||
| 32 | @forward 'layouts/form' as l-form--*; | ||
| 33 | @forward 'layouts/media' as l-media--*; | ||
| 34 | @forward 'layouts/overflow' as l-overflow--*; | ||
| 35 | @forward 'layouts/split-view' as l-split-view--*; | ||
| 36 | |||
| 37 | @forward 'scopes/implicit' as s-implicit--*; | ||
| 38 | @forward 'scopes/body' as s-body--*; | ||
| 39 | @forward 'scopes/blockquotes' as s-blockquotes--*; | ||
| 40 | @forward 'scopes/code' as s-code--*; | ||
| 41 | @forward 'scopes/figures' as s-figures--*; | ||
| 42 | @forward 'scopes/headings' as s-headings--*; | ||
| 43 | @forward 'scopes/links' as s-links--*; | ||
| 44 | @forward 'scopes/lists' as s-lists--*; | ||
| 45 | @forward 'scopes/tables' as s-tables--*; | ||
| 46 | |||
| 47 | @forward 'objects/action-button' as o-action-button--*; | ||
| 48 | @forward 'objects/alert' as o-alert--*; | ||
| 49 | @forward 'objects/avatar' as o-avatar--*; | ||
| 50 | @forward 'objects/backdrop' as o-backdrop--*; | ||
| 51 | @forward 'objects/badge' as o-badge--*; | ||
| 52 | @forward 'objects/button' as o-button--*; | ||
| 53 | @forward 'objects/card' as o-card--*; | ||
| 54 | @forward 'objects/checkbox' as o-checkbox--*; | ||
| 55 | @forward 'objects/divider' as o-divider--*; | ||
| 56 | @forward 'objects/emoji' as o-emoji--*; | ||
| 57 | @forward 'objects/figure' as o-figure--*; | ||
| 58 | @forward 'objects/field-label' as o-field-label--*; | ||
| 59 | @forward 'objects/heading' as o-heading--*; | ||
| 60 | @forward 'objects/icon' as o-icon--*; | ||
| 61 | @forward 'objects/lightbox' as o-lightbox--*; | ||
| 62 | @forward 'objects/menu' as o-menu--*; | ||
| 63 | @forward 'objects/navbar' as o-navbar--*; | ||
| 64 | @forward 'objects/palette' as o-palette--*; | ||
| 65 | @forward 'objects/placeholders' as o-placeholders--*; | ||
| 66 | @forward 'objects/popover' as o-popover--*; | ||
| 67 | @forward 'objects/radio' as o-radio--*; | ||
| 68 | @forward 'objects/side-nav' as o-side-nav--*; | ||
| 69 | @forward 'objects/status-indicator' as o-status-indicator--*; | ||
| 70 | @forward 'objects/switch' as o-switch--*; | ||
| 71 | @forward 'objects/table' as o-table--*; | ||
| 72 | @forward 'objects/tabbar' as o-tabbar--*; | ||
| 73 | @forward 'objects/text-field' as o-text-field--*; | ||
| 74 | @forward 'objects/thumbnail' as o-thumbnail--*; | ||
| 75 | |||
| 76 | @forward 'utils' as utils--*; | ||
| 77 | |||
| 78 | @forward 'themes' as themes--*; | ||
diff --git a/src/_layers.scss b/src/_layers.scss new file mode 100644 index 0000000..cc3bb50 --- /dev/null +++ b/src/_layers.scss | |||
| @@ -0,0 +1,3 @@ | |||
| 1 | @mixin styles { | ||
| 2 | @layer scope, theme, object, layout, component, utility; | ||
| 3 | } | ||
diff --git a/src/_layouts.scss b/src/_layouts.scss deleted file mode 100644 index 572308d..0000000 --- a/src/_layouts.scss +++ /dev/null | |||
| @@ -1,8 +0,0 @@ | |||
| 1 | @use 'layouts/media'; | ||
| 2 | @use 'layouts/container'; | ||
| 3 | @use 'layouts/button-group'; | ||
| 4 | @use 'layouts/form'; | ||
| 5 | @use 'layouts/flex'; | ||
| 6 | @use 'layouts/overflow'; | ||
| 7 | @use 'layouts/card-list'; | ||
| 8 | //@use 'layouts/message-group'; | ||
diff --git a/src/_mixins.scss b/src/_mixins.scss index dca6831..49d3b6f 100644 --- a/src/_mixins.scss +++ b/src/_mixins.scss | |||
| @@ -12,8 +12,8 @@ | |||
| 12 | } | 12 | } |
| 13 | 13 | ||
| 14 | @mixin heading-strong($size) { | 14 | @mixin heading-strong($size) { |
| 15 | color: fn.global-color(--heading); | ||
| 16 | font-size: fn.global-dim(list.join(--heading, $size)); | 15 | font-size: fn.global-dim(list.join(--heading, $size)); |
| 16 | color: fn.global-color(--heading); | ||
| 17 | } | 17 | } |
| 18 | 18 | ||
| 19 | @mixin heading-medium($size) { | 19 | @mixin heading-medium($size) { |
diff --git a/src/_objects.scss b/src/_objects.scss deleted file mode 100644 index c5049cd..0000000 --- a/src/_objects.scss +++ /dev/null | |||
| @@ -1,28 +0,0 @@ | |||
| 1 | @use 'objects/icon'; | ||
| 2 | @use 'objects/emoji'; | ||
| 3 | @use 'objects/heading'; | ||
| 4 | @use 'objects/divider'; | ||
| 5 | @use 'objects/badge'; | ||
| 6 | @use 'objects/button'; | ||
| 7 | @use 'objects/text-field'; | ||
| 8 | @use 'objects/field-label'; | ||
| 9 | @use 'objects/radio'; | ||
| 10 | @use 'objects/checkbox'; | ||
| 11 | @use 'objects/switch'; | ||
| 12 | @use 'objects/action-button'; | ||
| 13 | // @use 'objects/overflow-button'; | ||
| 14 | @use 'objects/status-indicator'; | ||
| 15 | @use 'objects/avatar'; | ||
| 16 | // @use 'objects/message'; | ||
| 17 | @use 'objects/side-nav'; | ||
| 18 | @use 'objects/popover'; | ||
| 19 | @use 'objects/menu'; | ||
| 20 | @use 'objects/card'; | ||
| 21 | // @use 'objects/icon-nav'; | ||
| 22 | @use 'objects/backdrop'; | ||
| 23 | // @use 'objects/dialog'; | ||
| 24 | @use 'objects/lightbox'; | ||
| 25 | // @use 'objects/list-group'; | ||
| 26 | @use 'objects/table'; | ||
| 27 | @use 'objects/alert'; | ||
| 28 | @use 'objects/palette'; | ||
diff --git a/src/_props.scss b/src/_props.scss new file mode 100644 index 0000000..ffba054 --- /dev/null +++ b/src/_props.scss | |||
| @@ -0,0 +1,41 @@ | |||
| 1 | @use 'sass:list'; | ||
| 2 | @use 'sass:map'; | ||
| 3 | @use 'sass:meta'; | ||
| 4 | @use 'sass:string'; | ||
| 5 | @use 'config'; | ||
| 6 | @use 'include-media/dist/include-media' as media; | ||
| 7 | @use 'iro-sass/src/bem'; | ||
| 8 | @use 'iro-sass/src/props'; | ||
| 9 | |||
| 10 | @mixin materialize-at-root($ref) { | ||
| 11 | @if meta.type-of($ref) == 'map' { | ||
| 12 | $ref: map.values($ref); | ||
| 13 | } | ||
| 14 | |||
| 15 | :root { | ||
| 16 | @include props.materialize($ref, null); | ||
| 17 | @include props.materialize($ref, 'color'); | ||
| 18 | |||
| 19 | @each $breakpoint in map.keys(media.$breakpoints) { | ||
| 20 | @include media.media('<=#{$breakpoint}') { | ||
| 21 | @include props.materialize($ref, $breakpoint); | ||
| 22 | } | ||
| 23 | } | ||
| 24 | |||
| 25 | @media (prefers-color-scheme: dark) { | ||
| 26 | @include props.materialize($ref, 'dark'); | ||
| 27 | } | ||
| 28 | } | ||
| 29 | |||
| 30 | @each $theme-name in map.keys(config.$themes) { | ||
| 31 | @if $theme-name != config.$theme-default { | ||
| 32 | @include bem.theme(string.slice($theme-name, 3)) { | ||
| 33 | @include props.materialize($ref, 'color'); | ||
| 34 | |||
| 35 | @media (prefers-color-scheme: dark) { | ||
| 36 | @include props.materialize($ref, 'dark'); | ||
| 37 | } | ||
| 38 | } | ||
| 39 | } | ||
| 40 | } | ||
| 41 | } | ||
diff --git a/src/_scopes.scss b/src/_scopes.scss deleted file mode 100644 index a3aeb6c..0000000 --- a/src/_scopes.scss +++ /dev/null | |||
| @@ -1,6 +0,0 @@ | |||
| 1 | @use 'scopes/links'; | ||
| 2 | @use 'scopes/code'; | ||
| 3 | @use 'scopes/blockquotes'; | ||
| 4 | @use 'scopes/lists'; | ||
| 5 | @use 'scopes/headings'; | ||
| 6 | @use 'scopes/tables'; | ||
diff --git a/src/_themes.scss b/src/_themes.scss index 8296064..caf1e80 100644 --- a/src/_themes.scss +++ b/src/_themes.scss | |||
| @@ -1,26 +1,74 @@ | |||
| 1 | @use 'iro-sass/src/index' as iro; | 1 | @use 'sass:map'; |
| 2 | @use 'functions' as fn; | 2 | @use 'sass:string'; |
| 3 | @use 'iro-sass/src/bem'; | ||
| 4 | @use 'iro-sass/src/props'; | ||
| 5 | @use 'include-media/dist/include-media' as media; | ||
| 3 | 6 | ||
| 4 | $static-themes: 'black' 'white' !default; | 7 | @use 'core.vars' as vars; |
| 8 | @forward 'core.vars'; | ||
| 5 | 9 | ||
| 6 | @include iro.bem-theme('base') { | 10 | @mixin styles { |
| 7 | background-color: fn.global-color(--bg-base); | 11 | @include bem.theme('base') { |
| 8 | } | 12 | background-color: props.get(vars.$theme, --bg-base); |
| 9 | 13 | ||
| 10 | @include iro.bem-theme('l1') { | 14 | @include bem.suffix('light') { |
| 11 | background-color: fn.global-color(--bg-l1); | 15 | @media (prefers-color-scheme: light) { |
| 12 | } | 16 | background-color: props.get(vars.$theme, --bg-base); |
| 17 | } | ||
| 18 | } | ||
| 13 | 19 | ||
| 14 | @include iro.bem-theme('l2') { | 20 | @include bem.suffix('dark') { |
| 15 | background-color: fn.global-color(--bg-l2); | 21 | @media (prefers-color-scheme: dark) { |
| 16 | } | 22 | background-color: props.get(vars.$theme, --bg-base); |
| 23 | } | ||
| 24 | } | ||
| 25 | } | ||
| 17 | 26 | ||
| 18 | @include iro.bem-theme('50') { | 27 | @include bem.theme('l1') { |
| 19 | background-color: fn.global-color(--base --50); | 28 | background-color: props.get(vars.$theme, --bg-l1); |
| 20 | } | 29 | |
| 30 | @include bem.suffix('light') { | ||
| 31 | @media (prefers-color-scheme: light) { | ||
| 32 | background-color: props.get(vars.$theme, --bg-l1); | ||
| 33 | } | ||
| 34 | } | ||
| 35 | |||
| 36 | @include bem.suffix('dark') { | ||
| 37 | @media (prefers-color-scheme: dark) { | ||
| 38 | background-color: props.get(vars.$theme, --bg-l1); | ||
| 39 | } | ||
| 40 | } | ||
| 41 | } | ||
| 42 | |||
| 43 | @include bem.theme('l2') { | ||
| 44 | background-color: props.get(vars.$theme, --bg-l2); | ||
| 45 | |||
| 46 | @include bem.suffix('light') { | ||
| 47 | @media (prefers-color-scheme: light) { | ||
| 48 | background-color: props.get(vars.$theme, --bg-l2); | ||
| 49 | } | ||
| 50 | } | ||
| 51 | |||
| 52 | @include bem.suffix('dark') { | ||
| 53 | @media (prefers-color-scheme: dark) { | ||
| 54 | background-color: props.get(vars.$theme, --bg-l2); | ||
| 55 | } | ||
| 56 | } | ||
| 57 | } | ||
| 58 | |||
| 59 | @include bem.theme('50') { | ||
| 60 | background-color: props.get(vars.$theme, --base, --50); | ||
| 61 | |||
| 62 | @include bem.suffix('light') { | ||
| 63 | @media (prefers-color-scheme: light) { | ||
| 64 | background-color: props.get(vars.$theme, --base, --50); | ||
| 65 | } | ||
| 66 | } | ||
| 21 | 67 | ||
| 22 | @each $theme in $static-themes { | 68 | @include bem.suffix('dark') { |
| 23 | @include iro.bem-theme(static-#{$theme}) { | 69 | @media (prefers-color-scheme: dark) { |
| 24 | color: fn.global-color(--#{$theme}-transparent --800); | 70 | background-color: props.get(vars.$theme, --base, --50); |
| 71 | } | ||
| 72 | } | ||
| 25 | } | 73 | } |
| 26 | } | 74 | } |
diff --git a/src/_utils.scss b/src/_utils.scss index d5a3478..445e5c6 100644 --- a/src/_utils.scss +++ b/src/_utils.scss | |||
| @@ -1,209 +1,361 @@ | |||
| 1 | @use 'sass:map'; | 1 | @use 'sass:map'; |
| 2 | @use 'iro-sass/src/index' as iro; | 2 | @use 'sass:string'; |
| 3 | @use 'functions' as fn; | 3 | @use 'iro-sass/src/bem'; |
| 4 | @use 'iro-sass/src/props'; | ||
| 4 | @use 'include-media/dist/include-media' as media; | 5 | @use 'include-media/dist/include-media' as media; |
| 5 | 6 | ||
| 6 | $dirs: ( | 7 | @use 'core.vars' as vars; |
| 8 | @forward 'core.vars'; | ||
| 9 | |||
| 10 | /* stylelint-disable-next-line scss/dollar-variable-pattern */ | ||
| 11 | $-dirs: ( | ||
| 7 | '': '', | 12 | '': '', |
| 13 | 'b': '-block', | ||
| 8 | 'bs': '-block-start', | 14 | 'bs': '-block-start', |
| 9 | 'be': '-block-end', | 15 | 'be': '-block-end', |
| 10 | 'b': '-block', | 16 | 'i': '-inline', |
| 11 | 'is': '-inline-start', | 17 | 'is': '-inline-start', |
| 12 | 'ie': '-inline-end', | 18 | 'ie': '-inline-end', |
| 13 | 'i': '-inline', | ||
| 14 | ) !default; | 19 | ) !default; |
| 15 | 20 | ||
| 16 | $sizes: 0 10 50 75 100 125 200 400 700 800 !default; | 21 | /* stylelint-disable-next-line scss/dollar-variable-pattern */ |
| 22 | $-sizes: ( | ||
| 23 | 0: vars.$size--0, | ||
| 24 | 10: vars.$size--10, | ||
| 25 | 50: vars.$size--50, | ||
| 26 | 75: vars.$size--75, | ||
| 27 | 100: vars.$size--100, | ||
| 28 | 125: vars.$size--125, | ||
| 29 | 200: vars.$size--200, | ||
| 30 | 400: vars.$size--400, | ||
| 31 | 700: vars.$size--700, | ||
| 32 | 800: vars.$size--800, | ||
| 33 | ) !default; | ||
| 17 | 34 | ||
| 18 | @include iro.bem-utility('d-block') { | 35 | @mixin styles { |
| 19 | display: block; | 36 | @include bem.utility('d-block') { |
| 20 | } | 37 | display: block; |
| 38 | } | ||
| 21 | 39 | ||
| 22 | @include iro.bem-utility('d-inline-block') { | 40 | @include bem.utility('d-inline-block') { |
| 23 | display: inline-block; | 41 | display: inline-block; |
| 24 | } | 42 | } |
| 25 | 43 | ||
| 26 | @include iro.bem-utility('d-contents') { | 44 | @include bem.utility('d-contents') { |
| 27 | display: contents; | 45 | display: contents; |
| 28 | } | 46 | } |
| 29 | 47 | ||
| 30 | @include iro.bem-utility('td-none') { | 48 | @include bem.utility('d-flex') { |
| 31 | text-decoration: none; | 49 | display: flex; |
| 32 | } | 50 | } |
| 51 | |||
| 52 | @include bem.utility('td-none') { | ||
| 53 | text-decoration: none; | ||
| 54 | } | ||
| 33 | 55 | ||
| 34 | @include iro.bem-utility('d-none') { | 56 | @include bem.utility('d-none') { |
| 35 | display: none; | 57 | display: none; |
| 36 | 58 | ||
| 37 | @each $breakpoint in map.keys(media.$breakpoints) { | 59 | @each $breakpoint in map.keys(media.$breakpoints) { |
| 38 | @include media.media('<=#{$breakpoint}') { | 60 | @include media.media('<=#{$breakpoint}') { |
| 39 | @include iro.bem-suffix('#{$breakpoint}-lo') { | 61 | @include bem.suffix('#{$breakpoint}-lo') { |
| 62 | display: none; | ||
| 63 | } | ||
| 64 | } | ||
| 65 | |||
| 66 | @include media.media('>#{$breakpoint}') { | ||
| 67 | @include bem.suffix('#{$breakpoint}-hi') { | ||
| 68 | display: none; | ||
| 69 | } | ||
| 70 | } | ||
| 71 | } | ||
| 72 | |||
| 73 | @include bem.at-theme('js') { | ||
| 74 | @include bem.suffix('js') { | ||
| 40 | display: none; | 75 | display: none; |
| 41 | } | 76 | } |
| 42 | } | 77 | } |
| 43 | 78 | ||
| 44 | @include media.media('>#{$breakpoint}') { | 79 | @include bem.at-theme('no-js') { |
| 45 | @include iro.bem-suffix('#{$breakpoint}-hi') { | 80 | @include bem.suffix('no-js') { |
| 46 | display: none; | 81 | display: none; |
| 47 | } | 82 | } |
| 48 | } | 83 | } |
| 49 | } | ||
| 50 | 84 | ||
| 51 | @include iro.bem-at-theme('js') { | 85 | @include bem.suffix('empty') { |
| 52 | @include iro.bem-suffix('js') { | 86 | &:empty { |
| 53 | display: none; | 87 | display: none; |
| 88 | } | ||
| 54 | } | 89 | } |
| 55 | } | 90 | } |
| 56 | 91 | ||
| 57 | @include iro.bem-at-theme('no-js') { | 92 | @include bem.utility('va-top') { |
| 58 | @include iro.bem-suffix('no-js') { | 93 | vertical-align: top; |
| 59 | display: none; | ||
| 60 | } | ||
| 61 | } | 94 | } |
| 62 | 95 | ||
| 63 | @include iro.bem-suffix('empty') { | 96 | @include bem.utility('va-baseline') { |
| 64 | &:empty { | 97 | vertical-align: baseline; |
| 65 | display: none; | ||
| 66 | } | ||
| 67 | } | 98 | } |
| 68 | } | ||
| 69 | 99 | ||
| 70 | @include iro.bem-utility('ta-start') { | 100 | @include bem.utility('va-middle') { |
| 71 | text-align: start; | 101 | vertical-align: middle; |
| 72 | } | 102 | } |
| 73 | 103 | ||
| 74 | @include iro.bem-utility('ta-end') { | 104 | @include bem.utility('va-bottom') { |
| 75 | text-align: end; | 105 | vertical-align: bottom; |
| 76 | } | 106 | } |
| 77 | 107 | ||
| 78 | @include iro.bem-utility('ta-center') { | 108 | @include bem.utility('ta-start') { |
| 79 | text-align: center; | 109 | text-align: start; |
| 80 | } | 110 | } |
| 81 | 111 | ||
| 82 | @include iro.bem-utility('fw-normal') { | 112 | @include bem.utility('ta-end') { |
| 83 | font-weight: normal; | 113 | text-align: end; |
| 84 | } | 114 | } |
| 85 | 115 | ||
| 86 | @include iro.bem-utility('ai-center') { | 116 | @include bem.utility('ta-center') { |
| 87 | align-items: center; | 117 | text-align: center; |
| 88 | } | 118 | } |
| 89 | 119 | ||
| 90 | @include iro.bem-utility('ai-start') { | 120 | @include bem.utility('fw-normal') { |
| 91 | align-items: flex-start; | 121 | font-weight: normal; |
| 92 | } | 122 | } |
| 93 | 123 | ||
| 94 | @include iro.bem-utility('ai-end') { | 124 | @include bem.utility('ai-center') { |
| 95 | align-items: flex-end; | 125 | align-items: center; |
| 96 | } | 126 | } |
| 97 | 127 | ||
| 98 | @include iro.bem-utility('jc-center') { | 128 | @include bem.utility('ai-start') { |
| 99 | justify-content: center; | 129 | align-items: flex-start; |
| 100 | } | 130 | } |
| 101 | 131 | ||
| 102 | @include iro.bem-utility('jc-start') { | 132 | @include bem.utility('ai-end') { |
| 103 | justify-content: flex-start; | 133 | align-items: flex-end; |
| 104 | } | 134 | } |
| 105 | 135 | ||
| 106 | @include iro.bem-utility('jc-end') { | 136 | @include bem.utility('ac-center') { |
| 107 | justify-content: flex-end; | 137 | align-content: center; |
| 108 | } | 138 | } |
| 109 | 139 | ||
| 110 | @include iro.bem-utility('c-heading') { | 140 | @include bem.utility('jc-center') { |
| 111 | color: fn.color(--heading); | 141 | justify-content: center; |
| 112 | } | 142 | } |
| 113 | 143 | ||
| 114 | @include iro.bem-utility('c-text') { | 144 | @include bem.utility('jc-start') { |
| 115 | color: fn.color(--text); | 145 | justify-content: flex-start; |
| 116 | } | 146 | } |
| 117 | 147 | ||
| 118 | @include iro.bem-utility('c-mute') { | 148 | @include bem.utility('jc-end') { |
| 119 | color: fn.color(--text-mute); | 149 | justify-content: flex-end; |
| 120 | } | 150 | } |
| 121 | 151 | ||
| 122 | @include iro.bem-utility('c-mute-more') { | 152 | @include bem.utility('tt-upper') { |
| 123 | color: fn.color(--text-mute-more); | 153 | text-transform: uppercase; |
| 124 | } | 154 | } |
| 125 | 155 | ||
| 126 | @each $dir, $prop in (is: inline-size, bs: block-size) { | 156 | @include bem.utility('tt-lower') { |
| 127 | @include iro.bem-utility('#{$dir}-100') { | 157 | text-transform: lowercase; |
| 128 | #{$prop}: 100%; | ||
| 129 | } | 158 | } |
| 159 | |||
| 160 | @include bem.utility('c-heading') { | ||
| 161 | color: props.get(vars.$theme, --heading); | ||
| 162 | |||
| 163 | @each $theme in map.keys(props.get(vars.$transparent-colors)) { | ||
| 164 | $theme-name: static-#{string.slice($theme, 3)}; | ||
| 130 | 165 | ||
| 131 | @include iro.bem-utility('#{$dir}-75') { | 166 | @include bem.at-theme($theme-name) { |
| 132 | #{$prop}: 75%; | 167 | color: props.get(vars.$transparent-colors, $theme, --900); |
| 168 | } | ||
| 169 | } | ||
| 133 | } | 170 | } |
| 171 | |||
| 172 | @include bem.utility('c-text') { | ||
| 173 | color: props.get(vars.$theme, --text); | ||
| 174 | |||
| 175 | @each $theme in map.keys(props.get(vars.$transparent-colors)) { | ||
| 176 | $theme-name: static-#{string.slice($theme, 3)}; | ||
| 134 | 177 | ||
| 135 | @include iro.bem-utility('#{$dir}-50') { | 178 | @include bem.at-theme($theme-name) { |
| 136 | #{$prop}: 50%; | 179 | color: props.get(vars.$transparent-colors, $theme, --800); |
| 180 | } | ||
| 181 | } | ||
| 137 | } | 182 | } |
| 183 | |||
| 184 | @include bem.utility('c-mute') { | ||
| 185 | color: props.get(vars.$theme, --text-mute); | ||
| 186 | |||
| 187 | @each $theme in map.keys(props.get(vars.$transparent-colors)) { | ||
| 188 | $theme-name: static-#{string.slice($theme, 3)}; | ||
| 138 | 189 | ||
| 139 | @include iro.bem-utility('#{$dir}-25') { | 190 | @include bem.at-theme($theme-name) { |
| 140 | #{$prop}: 25%; | 191 | color: props.get(vars.$transparent-colors, $theme, --700); |
| 192 | } | ||
| 193 | } | ||
| 141 | } | 194 | } |
| 195 | |||
| 196 | @include bem.utility('c-mute-more') { | ||
| 197 | color: props.get(vars.$theme, --text-mute-more); | ||
| 198 | |||
| 199 | @each $theme in map.keys(props.get(vars.$transparent-colors)) { | ||
| 200 | $theme-name: static-#{string.slice($theme, 3)}; | ||
| 142 | 201 | ||
| 143 | @include iro.bem-utility('#{$dir}-1px') { | 202 | @include bem.at-theme($theme-name) { |
| 144 | #{$prop}: 1px; | 203 | color: props.get(vars.$transparent-colors, $theme, --600); |
| 204 | } | ||
| 205 | } | ||
| 145 | } | 206 | } |
| 146 | 207 | ||
| 147 | @include iro.bem-utility('#{$dir}-0') { | 208 | @each $dir, $prop in (is: inline-size, bs: block-size) { |
| 148 | #{$prop}: 0; | 209 | @include bem.utility('#{$dir}-100') { |
| 210 | #{$prop}: 100%; | ||
| 211 | } | ||
| 212 | |||
| 213 | @include bem.utility('#{$dir}-75') { | ||
| 214 | #{$prop}: 75%; | ||
| 215 | } | ||
| 216 | |||
| 217 | @include bem.utility('#{$dir}-50') { | ||
| 218 | #{$prop}: 50%; | ||
| 219 | } | ||
| 220 | |||
| 221 | @include bem.utility('#{$dir}-25') { | ||
| 222 | #{$prop}: 25%; | ||
| 223 | } | ||
| 224 | |||
| 225 | @include bem.utility('#{$dir}-1px') { | ||
| 226 | #{$prop}: 1px; | ||
| 227 | } | ||
| 228 | |||
| 229 | @include bem.utility('#{$dir}-0') { | ||
| 230 | #{$prop}: 0; | ||
| 231 | } | ||
| 149 | } | 232 | } |
| 150 | } | ||
| 151 | 233 | ||
| 152 | @include iro.bem-utility('elp') { | 234 | @include bem.utility('elp') { |
| 153 | overflow: hidden; | 235 | overflow: hidden; |
| 154 | text-overflow: ellipsis; | 236 | text-overflow: ellipsis; |
| 155 | white-space: nowrap; | 237 | white-space: nowrap; |
| 156 | } | 238 | } |
| 157 | 239 | ||
| 158 | @include iro.bem-utility('p-static') { | 240 | @include bem.utility('o-auto') { |
| 159 | position: static; | 241 | overflow: auto; |
| 160 | } | 242 | } |
| 161 | 243 | ||
| 162 | @include iro.bem-utility('p-relative') { | 244 | @include bem.utility('o-hidden') { |
| 163 | position: relative; | 245 | overflow: hidden; |
| 164 | } | 246 | } |
| 165 | 247 | ||
| 166 | @include iro.bem-utility('p-fixed') { | 248 | @include bem.utility('p-static') { |
| 167 | position: fixed; | 249 | position: static; |
| 168 | } | 250 | } |
| 169 | 251 | ||
| 170 | @include iro.bem-utility('p-sticky-bs') { | 252 | @include bem.utility('p-relative') { |
| 171 | position: sticky; | 253 | position: relative; |
| 172 | inset-block-start: 0; | 254 | } |
| 173 | } | ||
| 174 | 255 | ||
| 175 | @each $dir, $suffix in $dirs { | 256 | @include bem.utility('p-fixed') { |
| 176 | @include iro.bem-utility('m#{$dir}-auto') { | 257 | position: fixed; |
| 177 | margin#{$suffix}: auto; | ||
| 178 | } | 258 | } |
| 179 | 259 | ||
| 180 | @include iro.bem-utility('p#{$dir}-auto') { | 260 | @include bem.utility('p-sticky-bs') { |
| 181 | padding#{$suffix}: auto; | 261 | position: sticky; |
| 262 | inset-block-start: props.get(vars.$sticky-top-offset); | ||
| 182 | } | 263 | } |
| 183 | 264 | ||
| 184 | @each $size in $sizes { | 265 | @include bem.utility('p-sticky-be') { |
| 185 | @include iro.bem-utility('m#{$dir}-#{$size}') { | 266 | position: sticky; |
| 186 | margin#{$suffix}: fn.global-dim(--size --#{$size}); | 267 | inset-block-end: 0; |
| 268 | } | ||
| 269 | |||
| 270 | @include bem.utility('br-round') { | ||
| 271 | border-radius: props.get(vars.$rounding); | ||
| 272 | } | ||
| 273 | |||
| 274 | @each $dir, $suffix in $-dirs { | ||
| 275 | @include bem.utility('m#{$dir}-auto') { | ||
| 276 | margin#{$suffix}: auto; | ||
| 277 | } | ||
| 278 | |||
| 279 | @include bem.utility('p#{$dir}-auto') { | ||
| 280 | padding#{$suffix}: auto; | ||
| 281 | } | ||
| 282 | |||
| 283 | @each $mod, $size in $-sizes { | ||
| 284 | @include bem.utility('m#{$dir}-#{$mod}') { | ||
| 285 | margin#{$suffix}: props.get($size); | ||
| 286 | } | ||
| 287 | |||
| 288 | @include bem.utility('p#{$dir}-#{$mod}') { | ||
| 289 | padding#{$suffix}: props.get($size); | ||
| 290 | } | ||
| 291 | } | ||
| 292 | |||
| 293 | @include bem.utility('b#{$dir}-0') { | ||
| 294 | border#{$suffix}: 0; | ||
| 295 | |||
| 296 | @include bem.suffix('light') { | ||
| 297 | @media (prefers-color-scheme: light) { | ||
| 298 | border#{$suffix}: 0; | ||
| 299 | } | ||
| 300 | } | ||
| 301 | |||
| 302 | @include bem.suffix('dark') { | ||
| 303 | @media (prefers-color-scheme: dark) { | ||
| 304 | border#{$suffix}: 0; | ||
| 305 | } | ||
| 306 | } | ||
| 187 | } | 307 | } |
| 188 | 308 | ||
| 189 | @include iro.bem-utility('p#{$dir}-#{$size}') { | 309 | @include bem.utility('b#{$dir}-1') { |
| 190 | padding#{$suffix}: fn.global-dim(--size --#{$size}); | 310 | border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border); |
| 311 | |||
| 312 | @include bem.suffix('light') { | ||
| 313 | @media (prefers-color-scheme: light) { | ||
| 314 | border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border); | ||
| 315 | } | ||
| 316 | } | ||
| 317 | |||
| 318 | @include bem.suffix('dark') { | ||
| 319 | @media (prefers-color-scheme: dark) { | ||
| 320 | border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border); | ||
| 321 | } | ||
| 322 | } | ||
| 323 | } | ||
| 324 | |||
| 325 | @include bem.utility('b#{$dir}-1-mute') { | ||
| 326 | border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border-mute); | ||
| 327 | |||
| 328 | @include bem.suffix('light') { | ||
| 329 | @media (prefers-color-scheme: light) { | ||
| 330 | border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border-mute); | ||
| 331 | } | ||
| 332 | } | ||
| 333 | |||
| 334 | @include bem.suffix('dark') { | ||
| 335 | @media (prefers-color-scheme: dark) { | ||
| 336 | border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border-mute); | ||
| 337 | } | ||
| 338 | } | ||
| 191 | } | 339 | } |
| 192 | } | 340 | } |
| 193 | 341 | ||
| 194 | @include iro.bem-utility('b#{$dir}-0') { | 342 | @include bem.utility('mbs-neutralize') { |
| 195 | border#{$suffix}: 0; | 343 | &::before { |
| 344 | display: block; | ||
| 345 | margin-block: -100em 100em; | ||
| 346 | content: ''; | ||
| 347 | } | ||
| 196 | } | 348 | } |
| 197 | 349 | ||
| 198 | @include iro.bem-utility('b#{$dir}-1') { | 350 | @include bem.utility('sr-only') { |
| 199 | border#{$suffix}: fn.global-dim(--border --thin) solid fn.global-color(--border); | 351 | position: absolute; |
| 200 | } | 352 | width: 1px; |
| 201 | } | 353 | height: 1px; |
| 202 | 354 | padding: 0; | |
| 203 | @include iro.bem-utility('mbs-neutralize') { | 355 | margin: -1px; |
| 204 | &::before { | 356 | overflow: hidden; |
| 205 | content: ''; | 357 | clip-path: inset(50%); |
| 206 | display: block; | 358 | white-space: nowrap; |
| 207 | margin-block: -100em 100em; | 359 | border: 0; |
| 208 | } | 360 | } |
| 209 | } | 361 | } |
diff --git a/src/functions/colors/_index.scss b/src/functions/colors/_index.scss deleted file mode 100644 index 26c3027..0000000 --- a/src/functions/colors/_index.scss +++ /dev/null | |||
| @@ -1,2 +0,0 @@ | |||
| 1 | @forward 'apca'; | ||
| 2 | @forward 'oklch'; | ||
diff --git a/src/functions/colors/_oklch.scss b/src/functions/colors/_oklch.scss deleted file mode 100644 index e3df041..0000000 --- a/src/functions/colors/_oklch.scss +++ /dev/null | |||
| @@ -1,88 +0,0 @@ | |||
| 1 | /* stylelint-disable scss/dollar-variable-pattern */ | ||
| 2 | /* stylelint-disable scss/at-function-pattern */ | ||
| 3 | |||
| 4 | @use 'sass:list'; | ||
| 5 | @use 'sass:math'; | ||
| 6 | @use 'sass:meta'; | ||
| 7 | @use 'sass:string'; | ||
| 8 | @use '@oddbird/blend/sass/convert' as blend-convert; | ||
| 9 | @use '@oddbird/blend/sass/utils/pow'; | ||
| 10 | @use 'iro-sass/src/index' as iro; | ||
| 11 | |||
| 12 | @function lin_sRGB_to_Oklab($color) { | ||
| 13 | $r_: list.nth($color, 1); | ||
| 14 | $g_: list.nth($color, 2); | ||
| 15 | $b_: list.nth($color, 3); | ||
| 16 | |||
| 17 | $l: pow.cbrt(0.4122214708 * $r_ + 0.5363325363 * $g_ + 0.0514459929 * $b_); | ||
| 18 | $m: pow.cbrt(0.2119034982 * $r_ + 0.6806995451 * $g_ + 0.1073969566 * $b_); | ||
| 19 | $s: pow.cbrt(0.0883024619 * $r_ + 0.2817188376 * $g_ + 0.6299787005 * $b_); | ||
| 20 | |||
| 21 | @return ( | ||
| 22 | 0.2104542553 * $l + 0.7936177850 * $m - 0.0040720468 * $s, | ||
| 23 | 1.9779984951 * $l - 2.4285922050 * $m + 0.4505937099 * $s, | ||
| 24 | 0.0259040371 * $l + 0.7827717662 * $m - 0.8086757660 * $s, | ||
| 25 | ); | ||
| 26 | } | ||
| 27 | |||
| 28 | @function Oklab_to_lin_sRGB($color) { | ||
| 29 | $l_: list.nth($color, 1); | ||
| 30 | $a_: list.nth($color, 2); | ||
| 31 | $b_: list.nth($color, 3); | ||
| 32 | |||
| 33 | $l: $l_ + 0.3963377774 * $a_ + 0.2158037573 * $b_; | ||
| 34 | $m: $l_ - 0.1055613458 * $a_ - 0.0638541728 * $b_; | ||
| 35 | $s: $l_ - 0.0894841775 * $a_ - 1.2914855480 * $b_; | ||
| 36 | |||
| 37 | $l: $l * $l * $l; | ||
| 38 | $m: $m * $m * $m; | ||
| 39 | $s: $s * $s * $s; | ||
| 40 | |||
| 41 | @return ( | ||
| 42 | 4.0767416621 * $l - 3.3077115913 * $m + 0.2309699292 * $s, | ||
| 43 | -1.2684380046 * $l + 2.6097574011 * $m - 0.3413193965 * $s, | ||
| 44 | -0.0041960863 * $l - 0.7034186147 * $m + 1.7076147010 * $s, | ||
| 45 | ); | ||
| 46 | } | ||
| 47 | |||
| 48 | @function oklch($arg) { | ||
| 49 | $l: math.div(list.nth($arg, 1), 100%); | ||
| 50 | $c: list.nth($arg, 2); | ||
| 51 | $h: list.nth($arg, 3); | ||
| 52 | |||
| 53 | @return blend-convert.rgbToSass( | ||
| 54 | blend-convert.gam_sRGB( | ||
| 55 | Oklab_to_lin_sRGB( | ||
| 56 | blend-convert.LCH_to_Lab($l $c $h) | ||
| 57 | ) | ||
| 58 | ) | ||
| 59 | ); | ||
| 60 | } | ||
| 61 | |||
| 62 | @function parse-oklch($color) { | ||
| 63 | @if meta.type-of($color) == 'color' { | ||
| 64 | @return blend-convert.Lab_to_LCH( | ||
| 65 | lin_sRGB_to_Oklab( | ||
| 66 | blend-convert.lin_sRGB( | ||
| 67 | blend-convert.sassToRgb($color) | ||
| 68 | ) | ||
| 69 | ) | ||
| 70 | ); | ||
| 71 | } | ||
| 72 | |||
| 73 | @if meta.type-of($color) != 'string' { | ||
| 74 | @return null; | ||
| 75 | } | ||
| 76 | |||
| 77 | @if string.slice($color, 1, 6) == 'oklch(' { | ||
| 78 | $args: string.split(string.slice($color, 7, -2), ' '); | ||
| 79 | |||
| 80 | $l: math.div(iro.fn-to-number(list.nth($args, 1)), 100%); | ||
| 81 | $c: iro.fn-to-number(list.nth($args, 2)); | ||
| 82 | $h: iro.fn-to-number(list.nth($args, 3)); | ||
| 83 | |||
| 84 | @return $l $c $h; | ||
| 85 | } | ||
| 86 | |||
| 87 | @return null; | ||
| 88 | } | ||
diff --git a/src/index.scss b/src/index.scss deleted file mode 100644 index 50927e2..0000000 --- a/src/index.scss +++ /dev/null | |||
| @@ -1,10 +0,0 @@ | |||
| 1 | @use 'declare-vars'; | ||
| 2 | |||
| 3 | @use 'base'; | ||
| 4 | @use 'layouts'; | ||
| 5 | @use 'objects'; | ||
| 6 | @use 'scopes'; | ||
| 7 | @use 'themes'; | ||
| 8 | @use 'utils'; | ||
| 9 | |||
| 10 | @use 'apply-vars'; | ||
diff --git a/src/layouts/_button-group.scss b/src/layouts/_button-group.scss index a70d27a..b0a3c8e 100644 --- a/src/layouts/_button-group.scss +++ b/src/layouts/_button-group.scss | |||
| @@ -1,16 +1,50 @@ | |||
| 1 | @use 'iro-sass/src/index' as iro; | 1 | @use 'sass:meta'; |
| 2 | @use '../functions' as fn; | 2 | @use 'iro-sass/src/bem'; |
| 3 | 3 | @use 'iro-sass/src/props'; | |
| 4 | @include iro.props-namespace('button-group') { | 4 | @use '../props' as *; |
| 5 | @include iro.props-store(( | 5 | |
| 6 | --dims: ( | 6 | @forward 'button-group.vars'; |
| 7 | --spacing: fn.global-dim(--size --150), | 7 | @use 'button-group.vars' as vars; |
| 8 | ), | 8 | @use '../objects/action-button.vars' as action-button; |
| 9 | )); | 9 | |
| 10 | 10 | @mixin styles { | |
| 11 | @include iro.bem-layout(iro.props-namespace()) { | 11 | @include materialize-at-root(meta.module-variables('vars')); |
| 12 | display: flex; | 12 | |
| 13 | gap: fn.dim(--spacing); | 13 | @include bem.layout('button-group') { |
| 14 | display: inline-flex; | ||
| 14 | flex-wrap: wrap; | 15 | flex-wrap: wrap; |
| 16 | gap: props.get(vars.$gap); | ||
| 17 | |||
| 18 | @each $mod, $size in vars.$sizes { | ||
| 19 | @include bem.modifier($mod) { | ||
| 20 | gap: props.get($size); | ||
| 21 | } | ||
| 22 | } | ||
| 23 | |||
| 24 | @include bem.modifier('align-block') { | ||
| 25 | margin-inline: calc(-1 * props.get(action-button.$pad-i) - props.get(action-button.$border-width)); | ||
| 26 | |||
| 27 | @include bem.modifier('pill') { | ||
| 28 | margin-inline: calc(-1 * props.get(action-button.$pad-i-pill) - props.get(action-button.$border-width)); | ||
| 29 | } | ||
| 30 | |||
| 31 | @include bem.modifier('icon') { | ||
| 32 | margin-inline: calc(-1 * props.get(action-button.$pad-b) - props.get(action-button.$border-width) - .5em * (props.get(action-button.$line-height) - 1)); | ||
| 33 | } | ||
| 34 | |||
| 35 | @each $mod, $pad-i, $pad-i-label, $pad-i-pill, $pad-b, $font-size in action-button.$fixed-sizes { | ||
| 36 | @include bem.modifier('action-#{$mod}') { | ||
| 37 | margin-inline: calc(-1 * props.get($pad-i) - props.get(action-button.$border-width)); | ||
| 38 | |||
| 39 | @include bem.modifier('pill') { | ||
| 40 | margin-inline: calc(-1 * props.get($pad-i-pill) - props.get(action-button.$border-width)); | ||
| 41 | } | ||
| 42 | |||
| 43 | @include bem.modifier('icon') { | ||
| 44 | margin-inline: calc(-1 * props.get($pad-b) - props.get(action-button.$border-width) - .5em * (props.get(action-button.$line-height) - 1)); | ||
| 45 | } | ||
| 46 | } | ||
| 47 | } | ||
| 48 | } | ||
| 15 | } | 49 | } |
| 16 | } | 50 | } |
diff --git a/src/layouts/_button-group.vars.scss b/src/layouts/_button-group.vars.scss new file mode 100644 index 0000000..50c1b53 --- /dev/null +++ b/src/layouts/_button-group.vars.scss | |||
| @@ -0,0 +1,16 @@ | |||
| 1 | @use 'iro-sass/src/props'; | ||
| 2 | @use '../core.vars' as core; | ||
| 3 | |||
| 4 | $gap: props.def(--l-button-group--gap, props.get(core.$size--150)) !default; | ||
| 5 | |||
| 6 | $gapless: props.def(--l-button-group--gapless, 0) !default; | ||
| 7 | $sm: props.def(--l-button-group--sm, props.get(core.$size--100)) !default; | ||
| 8 | $lg: props.def(--l-button-group--lg, props.get(core.$size--300)) !default; | ||
| 9 | $xl: props.def(--l-button-group--xl, props.get(core.$size--450)) !default; | ||
| 10 | |||
| 11 | $sizes: ( | ||
| 12 | 'gapless': $gapless, | ||
| 13 | 'sm': $sm, | ||
| 14 | 'lg': $lg, | ||
| 15 | 'xl': $xl, | ||
| 16 | ) !default; | ||
diff --git a/src/layouts/_card-list.scss b/src/layouts/_card-list.scss index 65b6a66..8ef40c5 100644 --- a/src/layouts/_card-list.scss +++ b/src/layouts/_card-list.scss | |||
| @@ -1,94 +1,80 @@ | |||
| 1 | @use 'iro-sass/src/index' as iro; | 1 | @use 'sass:meta'; |
| 2 | @use '../functions' as fn; | ||
| 3 | @use 'include-media/dist/include-media' as media; | 2 | @use 'include-media/dist/include-media' as media; |
| 3 | @use 'iro-sass/src/bem'; | ||
| 4 | @use 'iro-sass/src/props'; | ||
| 5 | @use '../props' as *; | ||
| 4 | 6 | ||
| 5 | @include iro.props-namespace('card-list') { | 7 | @forward 'card-list.vars'; |
| 6 | @include iro.props-store(( | 8 | @use 'card-list.vars' as vars; |
| 7 | --dims: ( | ||
| 8 | --row-gap: fn.global-dim(--size --800), | ||
| 9 | --col-gap: fn.global-dim(--size --400), | ||
| 10 | 9 | ||
| 11 | --grid: ( | 10 | @mixin styles { |
| 12 | --row-gap: fn.global-dim(--size --800), | 11 | @include materialize-at-root(meta.module-variables('vars')); |
| 13 | --col-gap: fn.global-dim(--size --400), | ||
| 14 | --col-width: fn.global-dim(--size --3200), | ||
| 15 | ), | ||
| 16 | --masonry: ( | ||
| 17 | --row-gap: fn.global-dim(--size --800), | ||
| 18 | --col-gap: fn.global-dim(--size --400), | ||
| 19 | --col-width: fn.global-dim(--size --3200), | ||
| 20 | ), | ||
| 21 | --masonry-h: ( | ||
| 22 | --row-gap: fn.global-dim(--size --800), | ||
| 23 | --col-gap: fn.global-dim(--size --400), | ||
| 24 | --row-height: fn.global-dim(--size --3200), | ||
| 25 | ) | ||
| 26 | ), | ||
| 27 | --colors: ( | ||
| 28 | --border: fn.global-color(--border), | ||
| 29 | ), | ||
| 30 | )); | ||
| 31 | 12 | ||
| 32 | @include iro.bem-layout(iro.props-namespace()) { | 13 | @include bem.layout('card-list') { |
| 33 | display: flex; | 14 | display: flex; |
| 34 | flex-direction: column; | 15 | flex-direction: column; |
| 35 | gap: fn.dim(--row-gap) fn.dim(--col-gap); | 16 | gap: props.get(vars.$row-gap); |
| 36 | 17 | ||
| 37 | @include iro.bem-modifier('grid') { | 18 | @include bem.modifier('quiet') { |
| 19 | row-gap: props.get(vars.$quiet--row-gap); | ||
| 20 | } | ||
| 21 | |||
| 22 | @include bem.modifier('grid') { | ||
| 38 | display: grid; | 23 | display: grid; |
| 39 | grid-template-columns: repeat(auto-fill, minmax(fn.dim(--grid --col-width), 1fr)); | 24 | grid-template-columns: repeat(auto-fill, minmax(props.get(vars.$grid--col-width), 1fr)); |
| 40 | gap: fn.dim(--grid --col-gap); | 25 | gap: props.get(vars.$grid--row-gap) props.get(vars.$grid--col-gap); |
| 41 | 26 | ||
| 42 | @include iro.bem-modifier('quiet') { | 27 | @include bem.modifier('quiet') { |
| 43 | row-gap: fn.dim(--grid --row-gap); | 28 | row-gap: props.get(vars.$grid--quiet--row-gap); |
| 44 | } | 29 | } |
| 45 | } | 30 | } |
| 46 | 31 | ||
| 47 | @include iro.bem-modifier('masonry') { | 32 | @include bem.modifier('masonry') { |
| 48 | display: block; | 33 | display: block; |
| 49 | columns: auto fn.dim(--masonry --col-width); | 34 | columns: auto props.get(vars.$masonry--col-width); |
| 50 | column-gap: fn.dim(--masonry --col-gap); | 35 | column-gap: props.get(vars.$masonry--col-gap); |
| 51 | 36 | ||
| 52 | @include iro.bem-elem('card') { | 37 | @include bem.elem('card') { |
| 53 | margin-block-end: fn.dim(--masonry --col-gap); | 38 | margin-block-end: props.get(vars.$masonry--row-gap); |
| 54 | break-inside: avoid; | 39 | break-inside: avoid; |
| 55 | } | 40 | } |
| 56 | 41 | ||
| 57 | @include iro.bem-modifier('quiet') { | 42 | @include bem.modifier('quiet') { |
| 58 | @include iro.bem-elem('card') { | 43 | @include bem.elem('card') { |
| 59 | margin-block-end: fn.dim(--masonry --row-gap); | 44 | margin-block-end: props.get(vars.$masonry--quiet--row-gap); |
| 60 | } | 45 | } |
| 61 | } | 46 | } |
| 62 | } | 47 | } |
| 63 | 48 | ||
| 64 | @include iro.bem-modifier('masonry-h') { | 49 | @include bem.modifier('masonry-h') { |
| 65 | flex-flow: row wrap; | 50 | flex-flow: row wrap; |
| 66 | gap: fn.dim(--masonry-h --col-gap); | 51 | gap: props.get(vars.$masonry-h--row-gap) props.get(vars.$masonry-h--col-gap); |
| 67 | 52 | ||
| 68 | &::after { | 53 | @include bem.modifier('no-flush') { |
| 69 | content: ''; | 54 | &::after { |
| 70 | display: block; | 55 | display: block; |
| 71 | flex: 1 0 auto; | 56 | flex: 1 0 auto; |
| 72 | inline-size: fn.dim(--masonry-h --row-height); | 57 | inline-size: props.get(vars.$masonry-h--row-height); |
| 73 | block-size: 0; | 58 | content: ''; |
| 59 | } | ||
| 74 | } | 60 | } |
| 75 | 61 | ||
| 76 | @include iro.bem-elem('card') { | 62 | @include bem.elem('card') { |
| 77 | flex: 1 0 auto; | 63 | flex: 1 0 auto; |
| 78 | max-inline-size: 100%; | 64 | max-inline-size: 100%; |
| 79 | } | 65 | } |
| 80 | 66 | ||
| 81 | @include iro.bem-elem('card-image') { | 67 | @include bem.elem('card-image') { |
| 82 | block-size: fn.dim(--masonry-h --row-height); | 68 | block-size: props.get(vars.$masonry-h--row-height); |
| 83 | } | 69 | } |
| 84 | 70 | ||
| 85 | @include iro.bem-modifier('quiet') { | 71 | @include bem.modifier('quiet') { |
| 86 | row-gap: fn.dim(--masonry-h --row-gap); | 72 | row-gap: props.get(vars.$masonry-h--quiet--row-gap); |
| 87 | } | 73 | } |
| 88 | } | 74 | } |
| 89 | 75 | ||
| 90 | @include iro.bem-modifier('aspect-5\\/4') { | 76 | @include bem.modifier('aspect-5\\/4') { |
| 91 | @include iro.bem-elem('card-image') { | 77 | @include bem.elem('card-image') { |
| 92 | aspect-ratio: 5 / 4; | 78 | aspect-ratio: 5 / 4; |
| 93 | } | 79 | } |
| 94 | } | 80 | } |
diff --git a/src/layouts/_card-list.vars.scss b/src/layouts/_card-list.vars.scss new file mode 100644 index 0000000..f77bfbf --- /dev/null +++ b/src/layouts/_card-list.vars.scss | |||
| @@ -0,0 +1,22 @@ | |||
| 1 | @use 'iro-sass/src/props'; | ||
| 2 | @use '../core.vars' as core; | ||
| 3 | |||
| 4 | $row-gap: props.def(--l-card-list--row-gap, props.get(core.$size--200)) !default; | ||
| 5 | $quiet--row-gap: props.def(--l-card-list--quiet--row-gap, props.get(core.$size--800)) !default; | ||
| 6 | |||
| 7 | $grid--row-gap: props.def(--l-card-list--grid--row-gap, props.get(core.$size--400)) !default; | ||
| 8 | $grid--col-gap: props.def(--l-card-list--grid--col-gap, props.get(core.$size--400)) !default; | ||
| 9 | $grid--col-width: props.def(--l-card-list--grid--col-width, props.get(core.$size--3200)) !default; | ||
| 10 | $grid--quiet--row-gap: props.def(--l-card-list--grid--quiet--row-gap, props.get(core.$size--800)) !default; | ||
| 11 | |||
| 12 | $masonry--row-gap: props.def(--l-card-list--masonry--row-gap, props.get(core.$size--400)) !default; | ||
| 13 | $masonry--col-gap: props.def(--l-card-list--masonry--col-gap, props.get(core.$size--400)) !default; | ||
| 14 | $masonry--col-width: props.def(--l-card-list--masonry--col-width, props.get(core.$size--3200)) !default; | ||
| 15 | $masonry--quiet--row-gap: props.def(--l-card-list--masonry--quiet--row-gap, props.get(core.$size--800)) !default; | ||
| 16 | |||
| 17 | $masonry-h--row-gap: props.def(--l-card-list--masonry-h--row-gap, props.get(core.$size--400)) !default; | ||
| 18 | $masonry-h--col-gap: props.def(--l-card-list--masonry-h--col-gap, props.get(core.$size--400)) !default; | ||
| 19 | $masonry-h--row-height: props.def(--l-card-list--masonry-h--row-height, props.get(core.$size--3200)) !default; | ||
| 20 | $masonry-h--quiet--row-gap: props.def(--l-card-list--masonry-h--quiet--row-gap, props.get(core.$size--800)) !default; | ||
| 21 | |||
| 22 | $border-color: props.def(--l-card-list--border-color, props.get(core.$theme, --border), 'color') !default; | ||
diff --git a/src/layouts/_container.scss b/src/layouts/_container.scss index d13c4f3..17ab2f0 100644 --- a/src/layouts/_container.scss +++ b/src/layouts/_container.scss | |||
| @@ -1,45 +1,28 @@ | |||
| 1 | @use 'iro-sass/src/index' as iro; | 1 | @use 'sass:meta'; |
| 2 | @use '../functions' as fn; | 2 | @use 'iro-sass/src/bem'; |
| 3 | @use 'iro-sass/src/props'; | ||
| 4 | @use '../props' as *; | ||
| 3 | 5 | ||
| 4 | @include iro.props-namespace('container') { | 6 | @forward 'container.vars'; |
| 5 | @include iro.props-store(( | 7 | @use 'container.vars' as vars; |
| 6 | --dims: ( | ||
| 7 | --narrow-125: iro.fn-px-to-rem(720px), | ||
| 8 | --narrow: iro.fn-px-to-rem(610px), | ||
| 9 | --narrow-75: iro.fn-px-to-rem(500px), | ||
| 10 | --pad-i: fn.global-dim(--size --400), | ||
| 11 | --pad-b: fn.global-dim(--size --800), | ||
| 12 | ) | ||
| 13 | )); | ||
| 14 | 8 | ||
| 15 | @include iro.props-store(( | 9 | @mixin styles { |
| 16 | --dims: ( | 10 | @include materialize-at-root(meta.module-variables('vars')); |
| 17 | --pad-i: fn.global-dim(--size --200), | ||
| 18 | --pad-b: fn.global-dim(--size --600), | ||
| 19 | ) | ||
| 20 | ), 'sm'); | ||
| 21 | 11 | ||
| 22 | @include iro.props-store(( | 12 | @include bem.layout('container') { |
| 23 | --dims: ( | 13 | @each $mod, $size in vars.$fixed-sizes { |
| 24 | --pad-i: fn.global-dim(--size --150), | 14 | @include bem.modifier($mod) { |
| 25 | --pad-b: fn.global-dim(--size --450), | 15 | max-inline-size: props.get($size); |
| 26 | ) | ||
| 27 | ), 'xs'); | ||
| 28 | |||
| 29 | @include iro.bem-layout(iro.props-namespace()) { | ||
| 30 | @each $size in 'narrow-125' 'narrow' 'narrow-75' { | ||
| 31 | @include iro.bem-modifier($size) { | ||
| 32 | max-inline-size: fn.dim(--#{$size}); | ||
| 33 | margin-inline: auto; | 16 | margin-inline: auto; |
| 34 | } | 17 | } |
| 35 | } | 18 | } |
| 36 | 19 | ||
| 37 | @include iro.bem-modifier('pad-i') { | 20 | @include bem.modifier('pad-i') { |
| 38 | padding-inline: fn.dim(--pad-i); | 21 | padding-inline: props.get(vars.$pad-i); |
| 39 | } | 22 | } |
| 40 | 23 | ||
| 41 | @include iro.bem-modifier('pad-b') { | 24 | @include bem.modifier('pad-b') { |
| 42 | padding-block: fn.dim(--pad-b); | 25 | padding-block: props.get(vars.$pad-b); |
| 43 | } | 26 | } |
| 44 | } | 27 | } |
| 45 | } | 28 | } |
diff --git a/src/layouts/_container.vars.scss b/src/layouts/_container.vars.scss new file mode 100644 index 0000000..56b6c89 --- /dev/null +++ b/src/layouts/_container.vars.scss | |||
| @@ -0,0 +1,22 @@ | |||
| 1 | @use 'iro-sass/src/functions' as fn; | ||
| 2 | @use 'iro-sass/src/props'; | ||
| 3 | @use '../core.vars' as core; | ||
| 4 | |||
| 5 | $fixed-200: props.def(--l-container--fixed-200, fn.px-to-rem(1300px)) !default; | ||
| 6 | $fixed-150: props.def(--l-container--fixed-150, fn.px-to-rem(860px)) !default; | ||
| 7 | $fixed: props.def(--l-container--fixed, fn.px-to-rem(680px)) !default; | ||
| 8 | |||
| 9 | $fixed-sizes: ( | ||
| 10 | 'fixed-200': $fixed-200, | ||
| 11 | 'fixed-150': $fixed-150, | ||
| 12 | 'fixed': $fixed | ||
| 13 | ) !default; | ||
| 14 | |||
| 15 | $pad-i: props.def(--l-container--pad-i, props.get(core.$size--400)) !default; | ||
| 16 | $pad-b: props.def(--l-container--pad-b, props.get(core.$size--800)) !default; | ||
| 17 | |||
| 18 | $pad-i--sm: props.def(--l-container--pad-i, props.get(core.$size--200), 'sm') !default; | ||
| 19 | $pad-b--sm: props.def(--l-container--pad-b, props.get(core.$size--600), 'sm') !default; | ||
| 20 | |||
| 21 | $pad-i--xs: props.def(--l-container--pad-i, props.get(core.$size--150), 'xs') !default; | ||
| 22 | $pad-b--xs: props.def(--l-container--pad-b, props.get(core.$size--450), 'xs') !default; | ||
diff --git a/src/layouts/_flex.scss b/src/layouts/_flex.scss index d3f4f9c..902ecdb 100644 --- a/src/layouts/_flex.scss +++ b/src/layouts/_flex.scss | |||
| @@ -1,27 +1,19 @@ | |||
| 1 | @use 'iro-sass/src/index' as iro; | 1 | @use 'iro-sass/src/bem'; |
| 2 | 2 | ||
| 3 | @include iro.props-namespace('flex') { | 3 | @mixin styles { |
| 4 | @include iro.bem-layout(iro.props-namespace()) { | 4 | @include bem.layout('flex') { |
| 5 | display: flex; | 5 | display: flex; |
| 6 | 6 | ||
| 7 | @include iro.bem-modifier('align-stretch') { | 7 | @include bem.modifier('column') { |
| 8 | align-items: stretch; | 8 | flex-direction: column; |
| 9 | } | ||
| 10 | |||
| 11 | @include iro.bem-modifier('align-center') { | ||
| 12 | align-items: center; | ||
| 13 | } | ||
| 14 | |||
| 15 | @include iro.bem-modifier('align-start') { | ||
| 16 | align-items: flex-start; | ||
| 17 | } | 9 | } |
| 18 | 10 | ||
| 19 | @include iro.bem-modifier('align-end') { | 11 | @include bem.modifier('wrap') { |
| 20 | align-items: flex-end; | 12 | flex-wrap: wrap; |
| 21 | } | 13 | } |
| 22 | 14 | ||
| 23 | @include iro.bem-modifier('column') { | 15 | @include bem.modifier('wrap-reverse') { |
| 24 | flex-direction: column; | 16 | flex-wrap: wrap-reverse; |
| 25 | } | 17 | } |
| 26 | } | 18 | } |
| 27 | } | 19 | } |
diff --git a/src/layouts/_form.scss b/src/layouts/_form.scss index f6b60ea..5f0567b 100644 --- a/src/layouts/_form.scss +++ b/src/layouts/_form.scss | |||
| @@ -1,60 +1,57 @@ | |||
| 1 | @use 'iro-sass/src/index' as iro; | 1 | @use 'sass:meta'; |
| 2 | @use '../functions' as fn; | 2 | @use 'iro-sass/src/bem'; |
| 3 | @use 'iro-sass/src/props'; | ||
| 4 | @use '../props' as *; | ||
| 3 | 5 | ||
| 4 | // @use '../objects/field-label'; | 6 | @forward 'form.vars'; |
| 7 | @use 'form.vars' as vars; | ||
| 5 | 8 | ||
| 6 | @include iro.props-namespace('form') { | 9 | @mixin styles { |
| 7 | @include iro.props-store(( | 10 | @include materialize-at-root(meta.module-variables('vars')); |
| 8 | --dims: ( | ||
| 9 | --item-spacing-b: fn.global-dim(--size --325), | ||
| 10 | --label-spacing-i: fn.global-dim(--size --325), | ||
| 11 | --hint-font-size: fn.global-dim(--font-size --75), | ||
| 12 | ), | ||
| 13 | )); | ||
| 14 | 11 | ||
| 15 | @include iro.bem-layout(iro.props-namespace()) { | 12 | @include bem.layout('form') { |
| 16 | display: flex; | 13 | display: flex; |
| 17 | flex-direction: column; | 14 | flex-direction: column; |
| 18 | gap: fn.dim(--item-spacing-b) fn.dim(--label-spacing-i); | 15 | gap: props.get(vars.$item-spacing-b) props.get(vars.$label-spacing-i); |
| 19 | 16 | ||
| 20 | @include iro.bem-elem('item') { | 17 | @include bem.elem('item') { |
| 21 | display: block; | 18 | display: block; |
| 22 | } | 19 | } |
| 23 | 20 | ||
| 24 | @include iro.bem-elem('item-content') { | 21 | @include bem.elem('item-content') { |
| 25 | @include iro.bem-modifier('align-start') { | 22 | @include bem.modifier('align-start') { |
| 26 | align-self: start; | 23 | align-self: start; |
| 27 | } | 24 | } |
| 28 | } | 25 | } |
| 29 | 26 | ||
| 30 | @include iro.bem-modifier('row') { | 27 | @include bem.modifier('row') { |
| 31 | flex-direction: row; | 28 | flex-direction: row; |
| 32 | align-items: flex-end; | 29 | align-items: flex-end; |
| 33 | } | 30 | } |
| 34 | 31 | ||
| 35 | @include iro.bem-modifier('labels-start', 'labels-end') { | 32 | @include bem.modifier('labels-start', 'labels-end') { |
| 36 | display: grid; | 33 | display: grid; |
| 37 | grid-template-columns: auto 1fr; | ||
| 38 | grid-template-rows: auto; | 34 | grid-template-rows: auto; |
| 35 | grid-template-columns: auto 1fr; | ||
| 39 | align-items: baseline; | 36 | align-items: baseline; |
| 40 | 37 | ||
| 41 | @include iro.bem-elem('item') { | 38 | @include bem.elem('item') { |
| 42 | display: contents; | 39 | display: contents; |
| 43 | } | 40 | } |
| 44 | 41 | ||
| 45 | @include iro.bem-elem('item-label') { | 42 | @include bem.elem('item-label') { |
| 46 | grid-column: 1; | 43 | grid-column: 1; |
| 47 | padding-inline-end: 0; | 44 | padding-inline-end: 0; |
| 48 | } | 45 | } |
| 49 | 46 | ||
| 50 | @include iro.bem-elem('item-content') { | 47 | @include bem.elem('item-content') { |
| 51 | grid-column: 2; | 48 | grid-column: 2; |
| 52 | margin-block-start: 0; | 49 | margin-block-start: 0; |
| 53 | } | 50 | } |
| 54 | } | 51 | } |
| 55 | 52 | ||
| 56 | @include iro.bem-modifier('labels-end') { | 53 | @include bem.modifier('labels-end') { |
| 57 | @include iro.bem-elem('item-label') { | 54 | @include bem.elem('item-label') { |
| 58 | text-align: end; | 55 | text-align: end; |
| 59 | } | 56 | } |
| 60 | } | 57 | } |
diff --git a/src/layouts/_form.vars.scss b/src/layouts/_form.vars.scss new file mode 100644 index 0000000..c533e6b --- /dev/null +++ b/src/layouts/_form.vars.scss | |||
| @@ -0,0 +1,5 @@ | |||
| 1 | @use 'iro-sass/src/props'; | ||
| 2 | @use '../core.vars' as core; | ||
| 3 | |||
| 4 | $item-spacing-b: props.def(--l-form--item-spacing-b, props.get(core.$size--325)) !default; | ||
| 5 | $label-spacing-i: props.def(--l-form--label-spacing-i, props.get(core.$size--325)) !default; | ||
diff --git a/src/layouts/_media.scss b/src/layouts/_media.scss index c42aa3e..2192db5 100644 --- a/src/layouts/_media.scss +++ b/src/layouts/_media.scss | |||
| @@ -1,45 +1,39 @@ | |||
| 1 | @use 'iro-sass/src/index' as iro; | 1 | @use 'sass:meta'; |
| 2 | @use '../functions' as fn; | 2 | @use 'iro-sass/src/bem'; |
| 3 | @use 'iro-sass/src/props'; | ||
| 4 | @use '../props' as *; | ||
| 3 | 5 | ||
| 4 | $sizes: 'gapless' 'sm' 'lg' 'xl' !default; | 6 | @forward 'media.vars'; |
| 7 | @use 'media.vars' as vars; | ||
| 5 | 8 | ||
| 6 | @include iro.props-namespace('media') { | 9 | @mixin styles { |
| 7 | @include iro.props-store(( | 10 | @include materialize-at-root(meta.module-variables('vars')); |
| 8 | --dims: ( | ||
| 9 | --gap: fn.global-dim(--size --150), | ||
| 10 | 11 | ||
| 11 | --gapless: 0, | 12 | @include bem.layout('media') { |
| 12 | --sm: fn.global-dim(--size --100), | ||
| 13 | --lg: fn.global-dim(--size --300), | ||
| 14 | --xl: fn.global-dim(--size --450), | ||
| 15 | ) | ||
| 16 | )); | ||
| 17 | |||
| 18 | @include iro.bem-layout(iro.props-namespace()) { | ||
| 19 | display: flex; | 13 | display: flex; |
| 14 | gap: props.get(vars.$gap); | ||
| 20 | align-items: center; | 15 | align-items: center; |
| 21 | gap: fn.dim(--gap); | ||
| 22 | line-height: 1.4; | 16 | line-height: 1.4; |
| 23 | 17 | ||
| 24 | @each $size in $sizes { | 18 | @each $mod, $size in vars.$sizes { |
| 25 | @include iro.bem-modifier($size) { | 19 | @include bem.modifier($mod) { |
| 26 | gap: fn.dim(--#{$size}); | 20 | gap: props.get($size); |
| 27 | } | 21 | } |
| 28 | } | 22 | } |
| 29 | 23 | ||
| 30 | @include iro.bem-modifier('wrap') { | 24 | @include bem.modifier('wrap') { |
| 31 | flex-wrap: wrap; | 25 | flex-wrap: wrap; |
| 32 | } | 26 | } |
| 33 | 27 | ||
| 34 | @include iro.bem-elem('block') { | 28 | @include bem.elem('block') { |
| 35 | flex: 0 0 auto; | 29 | flex: 0 0 auto; |
| 36 | 30 | ||
| 37 | @include iro.bem-modifier('shrink', 'main') { | 31 | @include bem.modifier('shrink', 'main') { |
| 38 | flex-shrink: 1; | 32 | flex-shrink: 1; |
| 39 | min-inline-size: 0; | 33 | min-inline-size: 0; |
| 40 | } | 34 | } |
| 41 | 35 | ||
| 42 | @include iro.bem-modifier('main') { | 36 | @include bem.modifier('main') { |
| 43 | inline-size: 100%; | 37 | inline-size: 100%; |
| 44 | } | 38 | } |
| 45 | } | 39 | } |
diff --git a/src/layouts/_media.vars.scss b/src/layouts/_media.vars.scss new file mode 100644 index 0000000..fd6d986 --- /dev/null +++ b/src/layouts/_media.vars.scss | |||
| @@ -0,0 +1,16 @@ | |||
| 1 | @use 'iro-sass/src/props'; | ||
| 2 | @use '../core.vars' as core; | ||
| 3 | |||
| 4 | $gap: props.def(--l-media--gap, props.get(core.$size--150)) !default; | ||
| 5 | |||
| 6 | $gapless: props.def(--l-media--gapless, 0) !default; | ||
| 7 | $sm: props.def(--l-media--sm, props.get(core.$size--100)) !default; | ||
| 8 | $lg: props.def(--l-media--lg, props.get(core.$size--300)) !default; | ||
| 9 | $xl: props.def(--l-media--xl, props.get(core.$size--450)) !default; | ||
| 10 | |||
| 11 | $sizes: ( | ||
| 12 | 'gapless': $gapless, | ||
| 13 | 'sm': $sm, | ||
| 14 | 'lg': $lg, | ||
| 15 | 'xl': $xl, | ||
| 16 | ) !default; | ||
diff --git a/src/layouts/_overflow.scss b/src/layouts/_overflow.scss index 8643bbf..9fba7eb 100644 --- a/src/layouts/_overflow.scss +++ b/src/layouts/_overflow.scss | |||
| @@ -1,9 +1,11 @@ | |||
| 1 | @use 'iro-sass/src/index' as iro; | 1 | @use 'iro-sass/src/bem'; |
| 2 | @use '../functions' as fn; | 2 | @use 'iro-sass/src/props'; |
| 3 | @use '../core.vars' as core; | ||
| 3 | 4 | ||
| 4 | @include iro.props-namespace('overflow') { | 5 | @mixin styles { |
| 5 | @include iro.bem-layout(iro.props-namespace()) { | 6 | @include bem.layout('overflow') { |
| 6 | overflow: auto; | 7 | overflow: auto; |
| 7 | scrollbar-color: fn.global-color(--text-disabled) transparent; | 8 | scrollbar-color: props.get(core.$theme, --text-disabled) transparent; |
| 8 | } | 9 | } |
| 9 | } | 10 | } |
| 11 | |||
diff --git a/src/layouts/_split-view.scss b/src/layouts/_split-view.scss new file mode 100644 index 0000000..f522254 --- /dev/null +++ b/src/layouts/_split-view.scss | |||
| @@ -0,0 +1,91 @@ | |||
| 1 | @use 'sass:meta'; | ||
| 2 | @use 'include-media/dist/include-media' as media; | ||
| 3 | @use 'iro-sass/src/bem'; | ||
| 4 | @use 'iro-sass/src/props'; | ||
| 5 | @use '../props' as *; | ||
| 6 | |||
| 7 | @forward 'split-view.vars'; | ||
| 8 | @use 'split-view.vars' as vars; | ||
| 9 | |||
| 10 | @mixin styles { | ||
| 11 | @include materialize-at-root(meta.module-variables('vars')); | ||
| 12 | |||
| 13 | @include bem.layout('split-view') { | ||
| 14 | display: flex; | ||
| 15 | gap: props.get(vars.$col-gap); | ||
| 16 | align-items: start; | ||
| 17 | |||
| 18 | @include bem.elem('panel') { | ||
| 19 | flex: 1 1 auto; | ||
| 20 | inline-size: 100%; | ||
| 21 | min-inline-size: 0; | ||
| 22 | |||
| 23 | @include bem.modifier('side-25') { | ||
| 24 | flex: 0 0 auto; | ||
| 25 | inline-size: 25%; | ||
| 26 | min-inline-size: props.get(vars.$panel--side-25--min); | ||
| 27 | } | ||
| 28 | |||
| 29 | @include bem.modifier('sticky-0') { | ||
| 30 | position: sticky; | ||
| 31 | inset-block-start: 0; | ||
| 32 | } | ||
| 33 | |||
| 34 | @include bem.modifier('sticky') { | ||
| 35 | position: sticky; | ||
| 36 | inset-block-start: props.get(vars.$panel--sticky-offset); | ||
| 37 | } | ||
| 38 | |||
| 39 | @include bem.modifier('sticky-400') { | ||
| 40 | position: sticky; | ||
| 41 | inset-block-start: calc(props.get(vars.$panel--sticky-400--inset) + props.get(vars.$panel--sticky-offset)); | ||
| 42 | } | ||
| 43 | |||
| 44 | @include bem.modifier('sticky-1200') { | ||
| 45 | position: sticky; | ||
| 46 | inset-block-start: calc(props.get(vars.$panel--sticky-1200--inset) + props.get(vars.$panel--sticky-offset)); | ||
| 47 | } | ||
| 48 | } | ||
| 49 | |||
| 50 | @include bem.modifier('gapless') { | ||
| 51 | gap: props.get(vars.$gapless); | ||
| 52 | |||
| 53 | @include bem.elem('panel') { | ||
| 54 | @include bem.modifier('side-25') { | ||
| 55 | min-inline-size: calc(props.get(vars.$panel--side-25--min) + props.get(vars.$col-gap) - props.get(vars.$gapless)); | ||
| 56 | } | ||
| 57 | } | ||
| 58 | } | ||
| 59 | |||
| 60 | @include bem.elem('content') { | ||
| 61 | inline-size: 100%; | ||
| 62 | } | ||
| 63 | |||
| 64 | @include media.media('<=md') { | ||
| 65 | flex-direction: column; | ||
| 66 | gap: props.get(vars.$row-gap); | ||
| 67 | align-items: stretch; | ||
| 68 | |||
| 69 | @include bem.modifier('gapless') { | ||
| 70 | gap: props.get(vars.$gapless); | ||
| 71 | } | ||
| 72 | |||
| 73 | @include bem.modifier('wrap-reverse') { | ||
| 74 | flex-direction: column-reverse; | ||
| 75 | } | ||
| 76 | |||
| 77 | @include bem.elem('panel') { | ||
| 78 | inline-size: auto; | ||
| 79 | |||
| 80 | @include bem.modifier('side-25') { | ||
| 81 | inline-size: auto; | ||
| 82 | min-inline-size: 0; | ||
| 83 | } | ||
| 84 | |||
| 85 | @include bem.modifier('sticky', 'sticky-400', 'sticky-1200') { | ||
| 86 | position: static; | ||
| 87 | } | ||
| 88 | } | ||
| 89 | } | ||
| 90 | } | ||
| 91 | } | ||
diff --git a/src/layouts/_split-view.vars.scss b/src/layouts/_split-view.vars.scss new file mode 100644 index 0000000..d519939 --- /dev/null +++ b/src/layouts/_split-view.vars.scss | |||
| @@ -0,0 +1,13 @@ | |||
| 1 | @use 'iro-sass/src/props'; | ||
| 2 | @use '../core.vars' as core; | ||
| 3 | |||
| 4 | $col-gap: props.def(--l-split-view--col-gap, props.get(core.$size--800)) !default; | ||
| 5 | $row-gap: props.def(--l-split-view--row-gap, props.get(core.$size--600)) !default; | ||
| 6 | |||
| 7 | $gapless: props.def(--l-split-view--gapless, 0rem) !default; | ||
| 8 | |||
| 9 | $panel--side-25--min: props.def(--l-split-view--panel--side-25--min, props.get(core.$size--3200)) !default; | ||
| 10 | $panel--sticky-400--inset: props.def(--l-split-view--panel--sticky-400--inset, props.get(core.$size--400)) !default; | ||
| 11 | $panel--sticky-1200--inset: props.def(--l-split-view--panel--sticky-1200--inset, props.get(core.$size--1200)) !default; | ||
| 12 | |||
| 13 | $panel--sticky-offset: props.def(--l-split-view--panel--sticky-offset, props.get(core.$sticky-top-offset)) !default; | ||
diff --git a/src/objects/_action-button.scss b/src/objects/_action-button.scss index 7fe9d44..1dd4b84 100644 --- a/src/objects/_action-button.scss +++ b/src/objects/_action-button.scss | |||
| @@ -1,292 +1,130 @@ | |||
| 1 | @use 'sass:list'; | 1 | @use 'sass:list'; |
| 2 | @use 'iro-sass/src/index' as iro; | 2 | @use 'sass:map'; |
| 3 | @use '../functions' as fn; | 3 | @use 'sass:meta'; |
| 4 | @use 'sass:string'; | ||
| 5 | @use 'iro-sass/src/bem'; | ||
| 6 | @use 'iro-sass/src/props'; | ||
| 7 | @use '../props' as *; | ||
| 4 | 8 | ||
| 5 | $sizes: 'sm' 'lg' 'xl' !default; | 9 | @forward 'action-button.vars'; |
| 6 | $static-themes: 'black' 'white' !default; | 10 | @use 'action-button.vars' as vars; |
| 7 | 11 | ||
| 8 | @mixin static-theme($theme: ()) { | 12 | @mixin -apply-theme($theme, $key: ()) { |
| 9 | border-color: fn.color(list.join($theme, --disabled --border)); | 13 | color: props.get($theme, list.join($key, --disabled --label-color)...); |
| 10 | background-color: fn.color(list.join($theme, --disabled --bg)); | 14 | background-color: props.get($theme, list.join($key, --disabled --bg-color)...); |
| 11 | color: fn.color(list.join($theme, --disabled --label)); | 15 | border-color: props.get($theme, list.join($key, --disabled --border-color)...); |
| 12 | 16 | ||
| 13 | &::after { | 17 | &::after { |
| 14 | outline-color: fn.color(list.join($theme, --key-focus --border)); | 18 | outline-color: props.get($theme, list.join($key, --key-focus --border-color)...); |
| 15 | box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(list.join($theme, --key-focus --outline)); | 19 | box-shadow: |
| 20 | 0 | ||
| 21 | 0 | ||
| 22 | 0 | ||
| 23 | calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) | ||
| 24 | props.get($theme, list.join($key, --key-focus --outline-color)...); | ||
| 16 | } | 25 | } |
| 17 | 26 | ||
| 18 | &:link, | 27 | &:link, |
| 19 | &:visited, | 28 | &:visited, |
| 20 | &:enabled { | 29 | &:enabled { |
| 21 | border-color: fn.color(list.join($theme, --border)); | 30 | color: props.get($theme, list.join($key, --label-color)...); |
| 22 | background-color: fn.color(list.join($theme, --bg)); | 31 | background-color: props.get($theme, list.join($key, --bg-color)...); |
| 23 | color: fn.color(list.join($theme, --label)); | 32 | border-color: props.get($theme, list.join($key, --border-color)...); |
| 24 | 33 | ||
| 25 | &:hover, | 34 | &:hover, |
| 26 | &:focus-visible { | 35 | &:focus-visible { |
| 27 | border-color: fn.color(list.join($theme, --hover --border)); | 36 | color: props.get($theme, list.join($key, --hover --label-color)...); |
| 28 | background-color: fn.color(list.join($theme, --hover --bg)); | 37 | background-color: props.get($theme, list.join($key, --hover --bg-color)...); |
| 29 | color: fn.color(list.join($theme, --hover --label)); | 38 | border-color: props.get($theme, list.join($key, --hover --border-color)...); |
| 30 | } | 39 | } |
| 31 | 40 | ||
| 32 | &:active { | 41 | &:active { |
| 33 | border-color: fn.color(list.join($theme, --active --border)); | 42 | color: props.get($theme, list.join($key, --active --label-color)...); |
| 34 | background-color: fn.color(list.join($theme, --active --bg)); | 43 | background-color: props.get($theme, list.join($key, --active --bg-color)...); |
| 35 | color: fn.color(list.join($theme, --active --label)); | 44 | border-color: props.get($theme, list.join($key, --active --border-color)...); |
| 36 | } | 45 | } |
| 37 | } | 46 | } |
| 38 | 47 | ||
| 39 | @include iro.bem-modifier('quiet') { | 48 | @include bem.modifier('quiet') { |
| 40 | border-color: transparent; | 49 | color: props.get($theme, list.join($key, --quiet --disabled --label-color)...); |
| 41 | background-color: transparent; | 50 | background-color: transparent; |
| 42 | color: fn.color(list.join($theme, --quiet --disabled --label)); | 51 | border-color: transparent; |
| 43 | 52 | ||
| 44 | &:link, | 53 | &:link, |
| 45 | &:visited, | 54 | &:visited, |
| 46 | &:enabled { | 55 | &:enabled { |
| 47 | border-color: transparent; | 56 | color: props.get($theme, list.join($key, --quiet --label-color)...); |
| 48 | background-color: transparent; | 57 | background-color: transparent; |
| 49 | color: fn.color(list.join($theme, --quiet --label)); | 58 | border-color: transparent; |
| 50 | 59 | ||
| 51 | &:hover, | 60 | &:hover, |
| 52 | &:focus-visible { | 61 | &:focus-visible { |
| 62 | color: props.get($theme, list.join($key, --quiet --hover --label-color)...); | ||
| 63 | background-color: props.get($theme, list.join($key, --quiet --hover --bg-color)...); | ||
| 53 | border-color: transparent; | 64 | border-color: transparent; |
| 54 | background-color: fn.color(list.join($theme, --quiet --hover --bg)); | ||
| 55 | color: fn.color(list.join($theme, --quiet --hover --label)); | ||
| 56 | } | 65 | } |
| 57 | 66 | ||
| 58 | &:active { | 67 | &:active { |
| 68 | color: props.get($theme, list.join($key, --quiet --active --label-color)...); | ||
| 69 | background-color: props.get($theme, list.join($key, --quiet --active --bg-color)...); | ||
| 59 | border-color: transparent; | 70 | border-color: transparent; |
| 60 | background-color: fn.color(list.join($theme, --quiet --active --bg)); | ||
| 61 | color: fn.color(list.join($theme, --quiet --active --label)); | ||
| 62 | } | 71 | } |
| 63 | } | 72 | } |
| 64 | } | 73 | } |
| 65 | 74 | ||
| 66 | @include iro.bem-is('selected') { | 75 | @include bem.is('selected') { |
| 67 | border-color: fn.color(list.join($theme, --selected --disabled --border)); | 76 | color: props.get($theme, list.join($key, --selected --disabled --label-color)...); |
| 68 | background-color: fn.color(list.join($theme, --selected --disabled --bg)); | 77 | background-color: props.get($theme, list.join($key, --selected --disabled --bg-color)...); |
| 69 | color: fn.color(list.join($theme, --selected --disabled --label)); | 78 | border-color: props.get($theme, list.join($key, --selected --disabled --border-color)...); |
| 70 | 79 | ||
| 71 | &:link, | 80 | &:link, |
| 72 | &:visited, | 81 | &:visited, |
| 73 | &:enabled { | 82 | &:enabled { |
| 74 | border-color: fn.color(list.join($theme, --selected --border)); | 83 | color: props.get($theme, list.join($key, --selected --label-color)...); |
| 75 | background-color: fn.color(list.join($theme, --selected --bg)); | 84 | background-color: props.get($theme, list.join($key, --selected --bg-color)...); |
| 76 | color: fn.color(list.join($theme, --selected --label)); | 85 | border-color: props.get($theme, list.join($key, --selected --border-color)...); |
| 77 | 86 | ||
| 78 | &:hover, | 87 | &:hover, |
| 79 | &:focus-visible { | 88 | &:focus-visible { |
| 80 | border-color: fn.color(list.join($theme, --selected --hover --border)); | 89 | color: props.get($theme, list.join($key, --selected --hover --label-color)...); |
| 81 | background-color: fn.color(list.join($theme, --selected --hover --bg)); | 90 | background-color: props.get($theme, list.join($key, --selected --hover --bg-color)...); |
| 82 | color: fn.color(list.join($theme, --selected --hover --label)); | 91 | border-color: props.get($theme, list.join($key, --selected --hover --border-color)...); |
| 83 | } | 92 | } |
| 84 | 93 | ||
| 85 | &:active { | 94 | &:active { |
| 86 | border-color: fn.color(list.join($theme, --selected --active --border)); | 95 | color: props.get($theme, list.join($key, --selected --active --label-color)...); |
| 87 | background-color: fn.color(list.join($theme, --selected --active --bg)); | 96 | background-color: props.get($theme, list.join($key, --selected --active --bg-color)...); |
| 88 | color: fn.color(list.join($theme, --selected --active --label)); | 97 | border-color: props.get($theme, list.join($key, --selected --active --border-color)...); |
| 89 | } | 98 | } |
| 90 | } | 99 | } |
| 91 | } | 100 | } |
| 92 | } | 101 | } |
| 93 | 102 | ||
| 94 | @include iro.props-namespace('action-button') { | 103 | @mixin styles { |
| 95 | @include iro.props-store(( | 104 | @include materialize-at-root(meta.module-variables('vars')); |
| 96 | --dims: ( | ||
| 97 | --line-height: 1.4, | ||
| 98 | --pad-i: fn.global-dim(--size --150), | ||
| 99 | --pad-i-pill: fn.global-dim(--size --200), | ||
| 100 | --pad-b: fn.global-dim(--size --85), | ||
| 101 | --border: fn.global-dim(--border --thin), | ||
| 102 | --rounding: fn.global-dim(--rounding), | ||
| 103 | --font-size: fn.global-dim(--font-size --100), | ||
| 104 | |||
| 105 | --sm: ( | ||
| 106 | --pad-i: fn.global-dim(--size --100), | ||
| 107 | --pad-i-pill: fn.global-dim(--size --150), | ||
| 108 | --pad-b: fn.global-dim(--size --40), | ||
| 109 | --font-size: fn.global-dim(--font-size --75), | ||
| 110 | ), | ||
| 111 | --lg: ( | ||
| 112 | --pad-i: fn.global-dim(--size --175), | ||
| 113 | --pad-i-pill: fn.global-dim(--size --225), | ||
| 114 | --pad-b: fn.global-dim(--size --115), | ||
| 115 | --font-size: fn.global-dim(--font-size --150), | ||
| 116 | ), | ||
| 117 | --xl: ( | ||
| 118 | --pad-i: fn.global-dim(--size --225), | ||
| 119 | --pad-i-pill: fn.global-dim(--size --300), | ||
| 120 | --pad-b: fn.global-dim(--size --150), | ||
| 121 | --font-size: fn.global-dim(--font-size --200), | ||
| 122 | ), | ||
| 123 | |||
| 124 | --key-focus: ( | ||
| 125 | --border: fn.global-dim(--key-focus --border), | ||
| 126 | --border-offset: fn.global-dim(--key-focus --border-offset), | ||
| 127 | --outline: fn.global-dim(--key-focus --outline), | ||
| 128 | ), | ||
| 129 | ), | ||
| 130 | --colors: ( | ||
| 131 | --bg: fn.global-color(--base --75), | ||
| 132 | --label: fn.global-color(--text), | ||
| 133 | --border: fn.global-color(--border-strong), | ||
| 134 | |||
| 135 | --hover: ( | ||
| 136 | --bg: fn.global-color(--border-mute), | ||
| 137 | --label: fn.global-color(--heading), | ||
| 138 | --border: fn.global-color(--text-mute-more), | ||
| 139 | ), | ||
| 140 | --active: ( | ||
| 141 | --bg: fn.global-color(--border), | ||
| 142 | --label: fn.global-color(--heading), | ||
| 143 | --border: fn.global-color(--text-mute), | ||
| 144 | ), | ||
| 145 | --disabled: ( | ||
| 146 | --bg: fn.global-color(--bg-l1), | ||
| 147 | --label: fn.global-color(--border-strong), | ||
| 148 | --border: fn.global-color(--border), | ||
| 149 | ), | ||
| 150 | --key-focus: ( | ||
| 151 | --border: fn.global-color(--focus --border), | ||
| 152 | --outline: fn.global-color(--focus --outline), | ||
| 153 | ), | ||
| 154 | |||
| 155 | --selected: ( | ||
| 156 | --bg: fn.global-color(--text-mute), | ||
| 157 | --label: fn.global-color(--base --50), | ||
| 158 | --border: fn.global-color(--text-mute), | ||
| 159 | |||
| 160 | --hover: ( | ||
| 161 | --bg: fn.global-color(--text), | ||
| 162 | --label: fn.global-color(--base --50), | ||
| 163 | --border: fn.global-color(--text), | ||
| 164 | ), | ||
| 165 | --active: ( | ||
| 166 | --bg: fn.global-color(--heading), | ||
| 167 | --label: fn.global-color(--base --50), | ||
| 168 | --border: fn.global-color(--heading), | ||
| 169 | ), | ||
| 170 | --disabled: ( | ||
| 171 | --bg: fn.global-color(--border-mute), | ||
| 172 | --label: fn.global-color(--border-strong), | ||
| 173 | --border: fn.global-color(--border-mute), | ||
| 174 | ), | ||
| 175 | ), | ||
| 176 | |||
| 177 | --quiet: ( | ||
| 178 | --label: fn.global-color(--text), | ||
| 179 | |||
| 180 | --hover: ( | ||
| 181 | --bg: fn.global-color(--border-mute), | ||
| 182 | --label: fn.global-color(--heading), | ||
| 183 | ), | ||
| 184 | --active: ( | ||
| 185 | --bg: fn.global-color(--border), | ||
| 186 | --label: fn.global-color(--heading), | ||
| 187 | ), | ||
| 188 | --disabled: ( | ||
| 189 | --label: fn.global-color(--border-strong), | ||
| 190 | ), | ||
| 191 | ), | ||
| 192 | ), | ||
| 193 | )); | ||
| 194 | 105 | ||
| 195 | @each $theme in $static-themes { | 106 | @include bem.object('action-button') { |
| 196 | @include iro.props-store(( | ||
| 197 | --colors: ( | ||
| 198 | --static-#{$theme}: ( | ||
| 199 | --bg: fn.global-color(--#{$theme}-transparent --100), | ||
| 200 | --label: fn.global-color(--#{$theme}-transparent --900), | ||
| 201 | --border: fn.global-color(--#{$theme}-transparent --400), | ||
| 202 | |||
| 203 | --hover: ( | ||
| 204 | --bg: fn.global-color(--#{$theme}-transparent --300), | ||
| 205 | --label: fn.global-color(--#{$theme}-transparent --900), | ||
| 206 | --border: fn.global-color(--#{$theme}-transparent --500), | ||
| 207 | ), | ||
| 208 | --active: ( | ||
| 209 | --bg: fn.global-color(--#{$theme}-transparent --400), | ||
| 210 | --label: fn.global-color(--#{$theme}-transparent --900), | ||
| 211 | --border: fn.global-color(--#{$theme}-transparent --600), | ||
| 212 | ), | ||
| 213 | --disabled: ( | ||
| 214 | --bg: fn.global-color(--#{$theme}-transparent --100), | ||
| 215 | --label: fn.global-color(--#{$theme}-transparent --500), | ||
| 216 | --border: fn.global-color(--#{$theme}-transparent --300), | ||
| 217 | ), | ||
| 218 | --key-focus: ( | ||
| 219 | --border: fn.global-color(--#{$theme}-transparent --900), | ||
| 220 | --outline: fn.global-color(--#{$theme}-transparent --300), | ||
| 221 | ), | ||
| 222 | |||
| 223 | --selected: ( | ||
| 224 | --bg: fn.global-color(--#{$theme}-transparent --800), | ||
| 225 | --label: fn.global-color(--#{$theme}-transparent --text), | ||
| 226 | --border: fn.global-color(--#{$theme}-transparent --100), | ||
| 227 | |||
| 228 | --hover: ( | ||
| 229 | --bg: fn.global-color(--#{$theme}-transparent --900), | ||
| 230 | --label: fn.global-color(--#{$theme}-transparent --text), | ||
| 231 | --border: fn.global-color(--#{$theme}-transparent --100), | ||
| 232 | ), | ||
| 233 | --active: ( | ||
| 234 | --bg: fn.global-color(--#{$theme}-transparent --900), | ||
| 235 | --label: fn.global-color(--#{$theme}-transparent --text), | ||
| 236 | --border: fn.global-color(--#{$theme}-transparent --100), | ||
| 237 | ), | ||
| 238 | --disabled: ( | ||
| 239 | --bg: fn.global-color(--#{$theme}-transparent --200), | ||
| 240 | --label: fn.global-color(--#{$theme}-transparent --500), | ||
| 241 | --border: fn.global-color(--#{$theme}-transparent --100), | ||
| 242 | ), | ||
| 243 | ), | ||
| 244 | |||
| 245 | --quiet: ( | ||
| 246 | --label: fn.global-color(--#{$theme}-transparent --900), | ||
| 247 | |||
| 248 | --hover: ( | ||
| 249 | --bg: fn.global-color(--#{$theme}-transparent --300), | ||
| 250 | --label: fn.global-color(--#{$theme}-transparent --900), | ||
| 251 | ), | ||
| 252 | --active: ( | ||
| 253 | --bg: fn.global-color(--#{$theme}-transparent --400), | ||
| 254 | --label: fn.global-color(--#{$theme}-transparent --900), | ||
| 255 | ), | ||
| 256 | --disabled: ( | ||
| 257 | --label: fn.global-color(--#{$theme}-transparent --500), | ||
| 258 | ), | ||
| 259 | ), | ||
| 260 | ), | ||
| 261 | ) | ||
| 262 | )); | ||
| 263 | } | ||
| 264 | |||
| 265 | @include iro.bem-object(iro.props-namespace()) { | ||
| 266 | display: inline-block; | ||
| 267 | position: relative; | 107 | position: relative; |
| 268 | padding-block: fn.dim(--pad-b); | 108 | display: inline-block; |
| 269 | padding-inline: fn.dim(--pad-i); | 109 | padding-block: props.get(vars.$pad-b); |
| 270 | border: fn.dim(--border) solid fn.color(--disabled --border); | 110 | padding-inline: props.get(vars.$pad-i); |
| 271 | border-radius: fn.dim(--rounding); | 111 | line-height: props.get(vars.$line-height); |
| 272 | background-color: fn.color(--disabled --bg); | ||
| 273 | color: fn.color(--disabled --label); | ||
| 274 | line-height: fn.dim(--line-height); | ||
| 275 | text-align: center; | 112 | text-align: center; |
| 276 | text-decoration: none; | 113 | text-decoration: none; |
| 277 | text-overflow: ellipsis; | 114 | text-overflow: ellipsis; |
| 278 | white-space: nowrap; | 115 | white-space: nowrap; |
| 116 | border: props.get(vars.$border-width) solid transparent; | ||
| 117 | border-radius: props.get(vars.$rounding); | ||
| 279 | 118 | ||
| 280 | &::after { | 119 | &::after { |
| 281 | content: ''; | ||
| 282 | display: none; | ||
| 283 | position: absolute; | 120 | position: absolute; |
| 121 | inset: calc(-1 * props.get(vars.$border-width) - props.get(vars.$key-focus--border-offset)); | ||
| 284 | z-index: 1; | 122 | z-index: 1; |
| 285 | inset: calc(-1 * fn.dim(--border) - fn.dim(--key-focus --border-offset)); | 123 | display: none; |
| 286 | border-radius: calc(fn.dim(--rounding) + fn.dim(--key-focus --border-offset)); | ||
| 287 | outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border); | ||
| 288 | box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline); | ||
| 289 | pointer-events: none; | 124 | pointer-events: none; |
| 125 | content: ''; | ||
| 126 | border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset)); | ||
| 127 | outline: transparent solid props.get(vars.$key-focus--border-width); | ||
| 290 | } | 128 | } |
| 291 | 129 | ||
| 292 | &:link, | 130 | &:link, |
| @@ -299,16 +137,20 @@ $static-themes: 'black' 'white' !default; | |||
| 299 | } | 137 | } |
| 300 | } | 138 | } |
| 301 | 139 | ||
| 302 | @include static-theme; | 140 | @include bem.elem('label') { |
| 141 | margin-inline: props.get(vars.$pad-i-label); | ||
| 142 | } | ||
| 143 | |||
| 144 | @include -apply-theme(vars.$default-theme); | ||
| 303 | 145 | ||
| 304 | @each $theme in $static-themes { | 146 | @each $theme in map.keys(props.get(vars.$themes)) { |
| 305 | @include iro.bem-modifier(static-#{$theme}) { | 147 | @include bem.modifier(string.slice($theme, 3)) { |
| 306 | @include static-theme(--static-#{$theme}); | 148 | @include -apply-theme(vars.$themes, $theme); |
| 307 | } | 149 | } |
| 308 | } | 150 | } |
| 309 | 151 | ||
| 310 | @include iro.bem-modifier('pill') { | 152 | @include bem.modifier('pill') { |
| 311 | padding-inline: fn.dim(--pad-i-pill); | 153 | padding-inline: props.get(vars.$pad-i-pill); |
| 312 | border-radius: 100em; | 154 | border-radius: 100em; |
| 313 | 155 | ||
| 314 | &::after { | 156 | &::after { |
| @@ -316,26 +158,54 @@ $static-themes: 'black' 'white' !default; | |||
| 316 | } | 158 | } |
| 317 | } | 159 | } |
| 318 | 160 | ||
| 319 | @each $size in $sizes { | 161 | @include bem.modifier('icon') { |
| 320 | @include iro.bem-modifier($size) { | 162 | inline-size: calc(1em * props.get(vars.$line-height) + 2 * props.get(vars.$pad-b)); |
| 321 | padding-block: fn.dim(--#{$size} --pad-b); | 163 | padding-inline: 0; |
| 322 | padding-inline: fn.dim(--#{$size} --pad-i); | 164 | } |
| 323 | font-size: fn.dim(--#{$size} --font-size); | 165 | |
| 166 | @each $mod, $pad-i, $pad-i-label, $pad-i-pill, $pad-b, $font-size in vars.$fixed-sizes { | ||
| 167 | @include bem.modifier($mod) { | ||
| 168 | padding-block: props.get($pad-b); | ||
| 169 | padding-inline: props.get($pad-i); | ||
| 170 | font-size: props.get($font-size); | ||
| 171 | |||
| 172 | @include bem.elem('label') { | ||
| 173 | margin-inline: props.get($pad-i-label); | ||
| 174 | } | ||
| 324 | 175 | ||
| 325 | @include iro.bem-modifier('pill') { | 176 | @include bem.modifier('pill') { |
| 326 | padding-inline: fn.dim(--#{$size} --pad-i-pill); | 177 | padding-inline: props.get($pad-i-pill); |
| 178 | } | ||
| 179 | |||
| 180 | @include bem.modifier('icon') { | ||
| 181 | inline-size: calc(1em * props.get(vars.$line-height) + 2 * props.get($pad-b)); | ||
| 182 | padding-inline: 0; | ||
| 327 | } | 183 | } |
| 328 | } | 184 | } |
| 329 | } | 185 | } |
| 330 | 186 | ||
| 331 | @include iro.bem-modifier('icon') { | 187 | @include bem.modifier('align-block') { |
| 332 | inline-size: calc(1em * fn.dim(--line-height) + 2 * fn.dim(--pad-b)); | 188 | margin-inline: calc(-1 * props.get(vars.$pad-i) - props.get(vars.$border-width)); |
| 333 | padding-inline: 0; | ||
| 334 | 189 | ||
| 335 | @each $size in $sizes { | 190 | @include bem.modifier('pill') { |
| 336 | @include iro.bem-modifier($size) { | 191 | margin-inline: calc(-1 * props.get(vars.$pad-i-pill) - props.get(vars.$border-width)); |
| 337 | inline-size: calc(1em * fn.dim(--line-height) + 2 * fn.dim(--#{$size} --pad-b)); | 192 | } |
| 338 | padding-inline: 0; | 193 | |
| 194 | @include bem.modifier('icon') { | ||
| 195 | margin-inline: calc(-1 * props.get(vars.$pad-b) - props.get(vars.$border-width) - .5em * (props.get(vars.$line-height) - 1)); | ||
| 196 | } | ||
| 197 | |||
| 198 | @each $mod, $pad-i, $pad-i-label, $pad-i-pill, $pad-b, $font-size in vars.$fixed-sizes { | ||
| 199 | @include bem.modifier($mod) { | ||
| 200 | margin-inline: calc(-1 * props.get($pad-i) - props.get(vars.$border-width)); | ||
| 201 | |||
| 202 | @include bem.modifier('pill') { | ||
| 203 | margin-inline: calc(-1 * props.get($pad-i-pill) - props.get(vars.$border-width)); | ||
| 204 | } | ||
| 205 | |||
| 206 | @include bem.modifier('icon') { | ||
| 207 | margin-inline: calc(-1 * props.get($pad-b) - props.get(vars.$border-width) - .5em * (props.get(vars.$line-height) - 1)); | ||
| 208 | } | ||
| 339 | } | 209 | } |
| 340 | } | 210 | } |
| 341 | } | 211 | } |
diff --git a/src/objects/_action-button.vars.scss b/src/objects/_action-button.vars.scss new file mode 100644 index 0000000..8c3d510 --- /dev/null +++ b/src/objects/_action-button.vars.scss | |||
| @@ -0,0 +1,193 @@ | |||
| 1 | @use 'sass:map'; | ||
| 2 | @use 'sass:string'; | ||
| 3 | @use 'iro-sass/src/props'; | ||
| 4 | @use '../core.vars' as core; | ||
| 5 | |||
| 6 | $line-height: props.def(--o-action-button--line-height, 1.4) !default; | ||
| 7 | $pad-i: props.def(--o-action-button--pad-i, props.get(core.$size--150)) !default; | ||
| 8 | $pad-i-label: props.def(--o-action-button--pad-i-label, props.get(core.$size--50)) !default; | ||
| 9 | $pad-i-pill: props.def(--o-action-button--pad-i-pill, props.get(core.$size--200)) !default; | ||
| 10 | $pad-b: props.def(--o-action-button--pad-b, props.get(core.$size--85)) !default; | ||
| 11 | $border-width: props.def(--o-action-button--border-width, props.get(core.$border-width--thin)) !default; | ||
| 12 | $rounding: props.def(--o-action-button--rounding, props.get(core.$rounding)) !default; | ||
| 13 | $font-size: props.def(--o-action-button--font-size, props.get(core.$font-size--100)) !default; | ||
| 14 | |||
| 15 | $pad-i--sm: props.def(--o-action-button--sm--pad-i, props.get(core.$size--100)) !default; | ||
| 16 | $pad-i-label--sm: props.def(--o-action-button--sm--pad-i-label, props.get(core.$size--25)) !default; | ||
| 17 | $pad-i-pill--sm: props.def(--o-action-button--sm--pad-i-pill, props.get(core.$size--150)) !default; | ||
| 18 | $pad-b--sm: props.def(--o-action-button--sm--pad-b, props.get(core.$size--40)) !default; | ||
| 19 | $font-size--sm: props.def(--o-action-button--sm--font-size, props.get(core.$font-size--75)) !default; | ||
| 20 | |||
| 21 | $pad-i--lg: props.def(--o-action-button--lg--pad-i, props.get(core.$size--175)) !default; | ||
| 22 | $pad-i-label--lg: props.def(--o-action-button--lg--pad-i-label, props.get(core.$size--100)) !default; | ||
| 23 | $pad-i-pill--lg: props.def(--o-action-button--lg--pad-i-pill, props.get(core.$size--250)) !default; | ||
| 24 | $pad-b--lg: props.def(--o-action-button--lg--pad-b, props.get(core.$size--115)) !default; | ||
| 25 | $font-size--lg: props.def(--o-action-button--lg--font-size, props.get(core.$font-size--150)) !default; | ||
| 26 | |||
| 27 | $pad-i--xl: props.def(--o-action-button--xl--pad-i, props.get(core.$size--225)) !default; | ||
| 28 | $pad-i-label--xl: props.def(--o-action-button--xl--pad-i-label, props.get(core.$size--150)) !default; | ||
| 29 | $pad-i-pill--xl: props.def(--o-action-button--xl--pad-i-pill, props.get(core.$size--300)) !default; | ||
| 30 | $pad-b--xl: props.def(--o-action-button--xl--pad-b, props.get(core.$size--150)) !default; | ||
| 31 | $font-size--xl: props.def(--o-action-button--xl--font-size, props.get(core.$font-size--200)) !default; | ||
| 32 | |||
| 33 | $key-focus--border-width: props.def(--o-action-button--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; | ||
| 34 | $key-focus--border-offset: props.def(--o-action-button--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; | ||
| 35 | $key-focus--outline-width: props.def(--o-action-button--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; | ||
| 36 | |||
| 37 | $fixed-sizes: ( | ||
| 38 | 'sm' $pad-i--sm $pad-i-label--sm $pad-i-pill--sm $pad-b--sm $font-size--sm, | ||
| 39 | 'lg' $pad-i--lg $pad-i-label--lg $pad-i-pill--lg $pad-b--lg $font-size--lg, | ||
| 40 | 'xl' $pad-i--xl $pad-i-label--xl $pad-i-pill--xl $pad-b--xl $font-size--xl, | ||
| 41 | ) !default; | ||
| 42 | |||
| 43 | $themes: props.def(--o-action-button, (), 'color'); | ||
| 44 | |||
| 45 | $default-theme-override: () !default; | ||
| 46 | $default-theme: map.deep-merge(( | ||
| 47 | --bg-color: props.get(core.$theme, --base, --75), | ||
| 48 | --label-color: props.get(core.$theme, --text), | ||
| 49 | --border-color: props.get(core.$theme, --border-strong), | ||
| 50 | |||
| 51 | --hover: ( | ||
| 52 | --bg-color: props.get(core.$theme, --border-mute), | ||
| 53 | --label-color: props.get(core.$theme, --heading), | ||
| 54 | --border-color: props.get(core.$theme, --text-mute-more), | ||
| 55 | ), | ||
| 56 | |||
| 57 | --active: ( | ||
| 58 | --bg-color: props.get(core.$theme, --border), | ||
| 59 | --label-color: props.get(core.$theme, --heading), | ||
| 60 | --border-color: props.get(core.$theme, --text-mute), | ||
| 61 | ), | ||
| 62 | |||
| 63 | --disabled: ( | ||
| 64 | --bg-color: props.get(core.$theme, --bg-l1), | ||
| 65 | --label-color: props.get(core.$theme, --border-strong), | ||
| 66 | --border-color: props.get(core.$theme, --border), | ||
| 67 | ), | ||
| 68 | |||
| 69 | --key-focus: ( | ||
| 70 | --border-color: props.get(core.$theme, --focus, --border), | ||
| 71 | --outline-color: props.get(core.$theme, --focus, --outline), | ||
| 72 | ), | ||
| 73 | |||
| 74 | --selected: ( | ||
| 75 | --bg-color: props.get(core.$theme, --heading), | ||
| 76 | --label-color: props.get(core.$theme, --base, --50), | ||
| 77 | --border-color: props.get(core.$theme, --heading), | ||
| 78 | |||
| 79 | --hover: ( | ||
| 80 | --bg-color: props.get(core.$theme, --text), | ||
| 81 | --label-color: props.get(core.$theme, --base, --50), | ||
| 82 | --border-color: props.get(core.$theme, --text), | ||
| 83 | ), | ||
| 84 | |||
| 85 | --active: ( | ||
| 86 | --bg-color: props.get(core.$theme, --text-mute), | ||
| 87 | --label-color: props.get(core.$theme, --base, --50), | ||
| 88 | --border-color: props.get(core.$theme, --text-mute), | ||
| 89 | ), | ||
| 90 | |||
| 91 | --disabled: ( | ||
| 92 | --bg-color: props.get(core.$theme, --border-mute), | ||
| 93 | --label-color: props.get(core.$theme, --border-strong), | ||
| 94 | --border-color: props.get(core.$theme, --border-mute), | ||
| 95 | ), | ||
| 96 | ), | ||
| 97 | |||
| 98 | --quiet: ( | ||
| 99 | --label-color: props.get(core.$theme, --text), | ||
| 100 | |||
| 101 | --hover: ( | ||
| 102 | --bg-color: props.get(core.$theme, --border-mute), | ||
| 103 | --label-color: props.get(core.$theme, --heading), | ||
| 104 | ), | ||
| 105 | |||
| 106 | --active: ( | ||
| 107 | --bg-color: props.get(core.$theme, --border), | ||
| 108 | --label-color: props.get(core.$theme, --heading), | ||
| 109 | ), | ||
| 110 | |||
| 111 | --disabled: ( | ||
| 112 | --label-color: props.get(core.$theme, --border-strong), | ||
| 113 | ), | ||
| 114 | ), | ||
| 115 | ), $default-theme-override) !default; | ||
| 116 | $default-theme: props.def(--o-action-button, $default-theme, 'color'); | ||
| 117 | |||
| 118 | @each $theme in map.keys(props.get(core.$transparent-colors)) { | ||
| 119 | $button-theme: --static-#{string.slice($theme, 3)}; | ||
| 120 | |||
| 121 | $themes: props.merge($themes, ( | ||
| 122 | $button-theme: ( | ||
| 123 | --bg-color: props.get(core.$transparent-colors, $theme, --100), | ||
| 124 | --label-color: props.get(core.$transparent-colors, $theme, --900), | ||
| 125 | --border-color: props.get(core.$transparent-colors, $theme, --400), | ||
| 126 | |||
| 127 | --hover: ( | ||
| 128 | --bg-color: props.get(core.$transparent-colors, $theme, --300), | ||
| 129 | --label-color: props.get(core.$transparent-colors, $theme, --900), | ||
| 130 | --border-color: props.get(core.$transparent-colors, $theme, --500), | ||
| 131 | ), | ||
| 132 | |||
| 133 | --active: ( | ||
| 134 | --bg-color: props.get(core.$transparent-colors, $theme, --400), | ||
| 135 | --label-color: props.get(core.$transparent-colors, $theme, --900), | ||
| 136 | --border-color: props.get(core.$transparent-colors, $theme, --600), | ||
| 137 | ), | ||
| 138 | |||
| 139 | --disabled: ( | ||
| 140 | --bg-color: props.get(core.$transparent-colors, $theme, --100), | ||
| 141 | --label-color: props.get(core.$transparent-colors, $theme, --500), | ||
| 142 | --border-color: props.get(core.$transparent-colors, $theme, --300), | ||
| 143 | ), | ||
| 144 | |||
| 145 | --key-focus: ( | ||
| 146 | --border-color: props.get(core.$transparent-colors, $theme, --900), | ||
| 147 | --outline-color: props.get(core.$transparent-colors, $theme, --300), | ||
| 148 | ), | ||
| 149 | |||
| 150 | --selected: ( | ||
| 151 | --bg-color: props.get(core.$transparent-colors, $theme, --800), | ||
| 152 | --label-color: props.get(core.$transparent-colors, $theme, --text), | ||
| 153 | --border-color: props.get(core.$transparent-colors, $theme, --100), | ||
| 154 | |||
| 155 | --hover: ( | ||
| 156 | --bg-color: props.get(core.$transparent-colors, $theme, --900), | ||
| 157 | --label-color: props.get(core.$transparent-colors, $theme, --text), | ||
| 158 | --border-color: props.get(core.$transparent-colors, $theme, --100), | ||
| 159 | ), | ||
| 160 | |||
| 161 | --active: ( | ||
| 162 | --bg-color: props.get(core.$transparent-colors, $theme, --900), | ||
| 163 | --label-color: props.get(core.$transparent-colors, $theme, --text), | ||
| 164 | --border-color: props.get(core.$transparent-colors, $theme, --100), | ||
| 165 | ), | ||
| 166 | |||
| 167 | --disabled: ( | ||
| 168 | --bg-color: props.get(core.$transparent-colors, $theme, --200), | ||
| 169 | --label-color: props.get(core.$transparent-colors, $theme, --500), | ||
| 170 | --border-color: props.get(core.$transparent-colors, $theme, --100), | ||
| 171 | ), | ||
| 172 | ), | ||
| 173 | |||
| 174 | --quiet: ( | ||
| 175 | --label-color: props.get(core.$transparent-colors, $theme, --900), | ||
| 176 | |||
| 177 | --hover: ( | ||
| 178 | --bg-color: props.get(core.$transparent-colors, $theme, --300), | ||
| 179 | --label-color: props.get(core.$transparent-colors, $theme, --900), | ||
| 180 | ), | ||
| 181 | |||
| 182 | --active: ( | ||
| 183 | --bg-color: props.get(core.$transparent-colors, $theme, --400), | ||
| 184 | --label-color: props.get(core.$transparent-colors, $theme, --900), | ||
| 185 | ), | ||
| 186 | |||
| 187 | --disabled: ( | ||
| 188 | --label-color: props.get(core.$transparent-colors, $theme, --500), | ||
| 189 | ), | ||
| 190 | ), | ||
| 191 | ) | ||
| 192 | )); | ||
| 193 | } | ||
diff --git a/src/objects/_alert.scss b/src/objects/_alert.scss index 067c00c..825f7ce 100644 --- a/src/objects/_alert.scss +++ b/src/objects/_alert.scss | |||
| @@ -1,42 +1,25 @@ | |||
| 1 | @use 'iro-sass/src/index' as iro; | 1 | @use 'sass:map'; |
| 2 | @use '../functions' as fn; | 2 | @use 'sass:meta'; |
| 3 | @use 'iro-sass/src/bem'; | ||
| 4 | @use 'iro-sass/src/props'; | ||
| 5 | @use '../props' as *; | ||
| 3 | 6 | ||
| 4 | $themes: 'accent' 'positive' 'negative' 'warning' !default; | 7 | @forward 'alert.vars'; |
| 8 | @use 'alert.vars' as vars; | ||
| 5 | 9 | ||
| 6 | @include iro.props-namespace('alert') { | 10 | @mixin styles { |
| 7 | @include iro.props-store(( | 11 | @include materialize-at-root(meta.module-variables('vars')); |
| 8 | --dims: ( | ||
| 9 | --border: fn.global-dim(--border --medium), | ||
| 10 | --pad-i: fn.global-dim(--size --250), | ||
| 11 | --pad-b: fn.global-dim(--size --200), | ||
| 12 | --rounding: fn.global-dim(--rounding), | ||
| 13 | ), | ||
| 14 | --colors: ( | ||
| 15 | --bg: fn.global-color(--bg-l2), | ||
| 16 | --border: fn.global-color(--text-mute-more), | ||
| 17 | ), | ||
| 18 | )); | ||
| 19 | 12 | ||
| 20 | @each $theme in $themes { | 13 | @include bem.object('alert') { |
| 21 | @include iro.props-store(( | 14 | padding-block: props.get(vars.$pad-b); |
| 22 | --colors: ( | 15 | padding-inline: props.get(vars.$pad-i); |
| 23 | --#{$theme}: ( | 16 | background-color: props.get(vars.$bg-color); |
| 24 | --border: fn.global-color(--#{$theme} --700), | 17 | border: props.get(vars.$border-width) solid props.get(vars.$border-color); |
| 25 | ), | 18 | border-radius: props.get(vars.$rounding); |
| 26 | ), | ||
| 27 | )); | ||
| 28 | } | ||
| 29 | |||
| 30 | @include iro.bem-object(iro.props-namespace()) { | ||
| 31 | padding-block: fn.dim(--pad-b); | ||
| 32 | padding-inline: fn.dim(--pad-i); | ||
| 33 | border: fn.dim(--border) solid fn.color(--border); | ||
| 34 | border-radius: fn.dim(--rounding); | ||
| 35 | background-color: fn.color(--bg); | ||
| 36 | 19 | ||
| 37 | @each $theme in $themes { | 20 | @each $mod, $theme in vars.$themes-config { |
| 38 | @include iro.bem-modifier($theme) { | 21 | @include bem.modifier($mod) { |
| 39 | border-color: fn.color(--#{$theme} --border); | 22 | border-color: props.get(vars.$themes, $theme, --border-color); |
| 40 | } | 23 | } |
| 41 | } | 24 | } |
| 42 | } | 25 | } |
diff --git a/src/objects/_alert.vars.scss b/src/objects/_alert.vars.scss new file mode 100644 index 0000000..53c9e68 --- /dev/null +++ b/src/objects/_alert.vars.scss | |||
| @@ -0,0 +1,27 @@ | |||
| 1 | @use 'iro-sass/src/props'; | ||
| 2 | @use '../core.vars' as core; | ||
| 3 | |||
| 4 | $border-width: props.def(--o-alert--border-width, props.get(core.$border-width--medium)) !default; | ||
| 5 | $pad-i: props.def(--o-alert--pad-i, props.get(core.$size--250)) !default; | ||
| 6 | $pad-b: props.def(--o-alert--pad-b, props.get(core.$size--200)) !default; | ||
| 7 | $rounding: props.def(--o-alert--rounding, props.get(core.$rounding)) !default; | ||
| 8 | |||
| 9 | $bg-color: props.def(--o-alert--bg-color, props.get(core.$theme, --bg-l2), 'color') !default; | ||
| 10 | $border-color: props.def(--o-alert--border-color, props.get(core.$theme, --text-mute-more), 'color') !default; | ||
| 11 | |||
| 12 | $themes-config: ( | ||
| 13 | accent: --accent, | ||
| 14 | positive: --positive, | ||
| 15 | negative: --negative, | ||
| 16 | warning: --warning, | ||
| 17 | ) !default; | ||
| 18 | |||
| 19 | $themes: props.def(--o-alert, (), 'color'); | ||
| 20 | |||
| 21 | @each $theme, $key in $themes-config { | ||
| 22 | $themes: props.merge($themes, ( | ||
| 23 | $key: ( | ||
| 24 | --border-color: props.get(core.$theme, $key, --700), | ||
| 25 | ) | ||
| 26 | )); | ||
| 27 | } | ||
diff --git a/src/objects/_avatar.scss b/src/objects/_avatar.scss index 19bff10..81396e3 100644 --- a/src/objects/_avatar.scss +++ b/src/objects/_avatar.scss | |||
| @@ -1,159 +1,118 @@ | |||
| 1 | @use 'sass:list'; | 1 | @use 'sass:meta'; |
| 2 | @use 'iro-sass/src/index' as iro; | 2 | @use 'iro-sass/src/bem'; |
| 3 | @use '../functions' as fn; | 3 | @use 'iro-sass/src/props'; |
| 4 | 4 | @use '../props' as *; | |
| 5 | $sizes: 'xs' 'sm' 'lg' 'xl' 'xxl' 'xxxl'; | 5 | |
| 6 | 6 | @forward 'avatar.vars'; | |
| 7 | @mixin status($size: ()) { | 7 | @use 'avatar.vars' as vars; |
| 8 | @include iro.bem-elem('status') { | 8 | |
| 9 | inline-size: fn.dim(list.join($size, --indicator-size)); | 9 | @mixin status($indicator-size) { |
| 10 | block-size: fn.dim(list.join($size, --indicator-size)); | 10 | @include bem.elem('status') { |
| 11 | 11 | inline-size: props.get($indicator-size); | |
| 12 | @include iro.bem-next-elem('content') { | 12 | block-size: props.get($indicator-size); |
| 13 | mask-image: radial-gradient( | 13 | |
| 14 | circle calc(.5 * fn.dim(list.join($size, --indicator-size)) + fn.dim(--indicator-spacing)) at | 14 | @include bem.sibling-elem('content') { |
| 15 | calc(100% - .5 * fn.dim(list.join($size, --indicator-size))) | 15 | mask-image: radial-gradient(circle calc(.5 * props.get($indicator-size) + props.get(vars.$indicator-spacing)) at |
| 16 | calc(100% - .5 * fn.dim(list.join($size, --indicator-size))), | 16 | calc(100% - .5 * props.get($indicator-size)) |
| 17 | transparent 95%, | 17 | calc(100% - .5 * props.get($indicator-size)), |
| 18 | #fff | 18 | transparent 95%, |
| 19 | ); | 19 | #fff); |
| 20 | } | 20 | } |
| 21 | } | 21 | } |
| 22 | } | 22 | } |
| 23 | 23 | ||
| 24 | @include iro.props-namespace('avatar') { | 24 | @mixin styles { |
| 25 | @include iro.props-store(( | 25 | @include materialize-at-root(meta.module-variables('vars')); |
| 26 | --dims: ( | 26 | |
| 27 | --size: fn.global-dim(--size --500), | 27 | @include bem.object('avatar') { |
| 28 | --font-size: fn.global-dim(--font-size --100), | ||
| 29 | --indicator-size: fn.global-dim(--size --150), | ||
| 30 | --indicator-spacing: fn.global-dim(--size --40), | ||
| 31 | --rounding: 25%, | ||
| 32 | |||
| 33 | --xxxl: ( | ||
| 34 | --size: fn.global-dim(--size --1600), | ||
| 35 | --font-size: fn.global-dim(--font-size --800), | ||
| 36 | --indicator-size: fn.global-dim(--size --400), | ||
| 37 | ), | ||
| 38 | --xxl: ( | ||
| 39 | --size: fn.global-dim(--size --1200), | ||
| 40 | --font-size: fn.global-dim(--font-size --600), | ||
| 41 | --indicator-size: fn.global-dim(--size --300), | ||
| 42 | ), | ||
| 43 | --xl: ( | ||
| 44 | --size: fn.global-dim(--size --800), | ||
| 45 | --font-size: fn.global-dim(--font-size --300), | ||
| 46 | --indicator-size: fn.global-dim(--size --225), | ||
| 47 | ), | ||
| 48 | --lg: ( | ||
| 49 | --size: fn.global-dim(--size --650), | ||
| 50 | --font-size: fn.global-dim(--font-size --200), | ||
| 51 | --indicator-size: fn.global-dim(--size --175), | ||
| 52 | ), | ||
| 53 | --sm: ( | ||
| 54 | --size: fn.global-dim(--size --375), | ||
| 55 | --font-size: fn.global-dim(--font-size --75), | ||
| 56 | --indicator-size: fn.global-dim(--size --125), | ||
| 57 | ), | ||
| 58 | --xs: ( | ||
| 59 | --size: fn.global-dim(--size --250), | ||
| 60 | --font-size: fn.global-dim(--font-size --50), | ||
| 61 | --indicator-size: fn.global-dim(--size --100), | ||
| 62 | ), | ||
| 63 | |||
| 64 | --key-focus: ( | ||
| 65 | --border: fn.global-dim(--key-focus --border), | ||
| 66 | --border-offset: fn.global-dim(--key-focus --border-offset), | ||
| 67 | --outline: fn.global-dim(--key-focus --outline), | ||
| 68 | ), | ||
| 69 | ), | ||
| 70 | --colors: ( | ||
| 71 | --h: 354, | ||
| 72 | --s: 44%, | ||
| 73 | --l: 45%, | ||
| 74 | |||
| 75 | --key-focus: ( | ||
| 76 | --border: fn.global-color(--focus --border), | ||
| 77 | --outline: fn.global-color(--focus --outline), | ||
| 78 | ), | ||
| 79 | ), | ||
| 80 | )); | ||
| 81 | |||
| 82 | @include iro.bem-object(iro.props-namespace()) { | ||
| 83 | display: inline-block; | ||
| 84 | position: relative; | 28 | position: relative; |
| 85 | border-radius: fn.dim(--rounding); | 29 | display: inline-block; |
| 86 | font-size: fn.dim(--font-size); | 30 | font-size: props.get(vars.$font-size); |
| 87 | font-style: normal; | 31 | font-style: normal; |
| 88 | vertical-align: .05em; | 32 | vertical-align: .05em; |
| 33 | border-radius: props.get(vars.$rounding); | ||
| 89 | 34 | ||
| 90 | &::after { | 35 | &::after { |
| 91 | content: ''; | ||
| 92 | display: none; | ||
| 93 | position: absolute; | 36 | position: absolute; |
| 37 | inset: calc(-1 * props.get(vars.$key-focus--border-offset)); | ||
| 94 | z-index: 1; | 38 | z-index: 1; |
| 95 | inset: calc(-1 * fn.dim(--key-focus --border-offset)); | 39 | display: none; |
| 96 | border: fn.dim(--key-focus --border-offset) solid transparent; | ||
| 97 | border-radius: fn.dim(--rounding); | ||
| 98 | outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border); | ||
| 99 | box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline); | ||
| 100 | pointer-events: none; | 40 | pointer-events: none; |
| 41 | content: ''; | ||
| 42 | border: props.get(vars.$key-focus--border-offset) solid transparent; | ||
| 43 | border-radius: props.get(vars.$rounding); | ||
| 44 | outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); | ||
| 45 | box-shadow: | ||
| 46 | 0 | ||
| 47 | 0 | ||
| 48 | 0 | ||
| 49 | calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) | ||
| 50 | props.get(vars.$key-focus--outline-color); | ||
| 101 | } | 51 | } |
| 102 | 52 | ||
| 103 | @include iro.bem-elem('status') { | 53 | @include bem.elem('status') { |
| 104 | position: absolute; | 54 | position: absolute; |
| 105 | inset-inline-end: 0; | ||
| 106 | inset-block-end: 0; | 55 | inset-block-end: 0; |
| 56 | inset-inline-end: 0; | ||
| 107 | } | 57 | } |
| 108 | 58 | ||
| 109 | @include status; | 59 | @include status(vars.$indicator-size); |
| 110 | 60 | ||
| 111 | @include iro.bem-elem('content') { | 61 | @include bem.elem('content') { |
| 112 | display: block; | 62 | display: block; |
| 113 | inline-size: fn.dim(--size); | 63 | inline-size: props.get(vars.$size); |
| 114 | block-size: fn.dim(--size); | 64 | block-size: props.get(vars.$size); |
| 115 | border-radius: fn.dim(--rounding); | 65 | line-height: props.get(vars.$size); |
| 116 | line-height: fn.dim(--size); | ||
| 117 | text-align: center; | 66 | text-align: center; |
| 118 | object-fit: cover; | 67 | object-fit: cover; |
| 119 | object-position: center center; | 68 | object-position: center center; |
| 69 | border-radius: props.get(vars.$rounding); | ||
| 120 | } | 70 | } |
| 121 | 71 | ||
| 122 | @include iro.bem-modifier('circle') { | 72 | @include bem.modifier('circle') { |
| 123 | border-radius: 100%; | 73 | border-radius: 100%; |
| 124 | 74 | ||
| 125 | &::after { | 75 | &::after { |
| 126 | border-radius: 100%; | 76 | border-radius: 100%; |
| 127 | } | 77 | } |
| 128 | 78 | ||
| 129 | @include iro.bem-elem('content') { | 79 | @include bem.elem('content') { |
| 130 | border-radius: 100%; | 80 | border-radius: 100%; |
| 131 | } | 81 | } |
| 132 | } | 82 | } |
| 133 | 83 | ||
| 134 | @include iro.bem-modifier('placeholder') { | 84 | @include bem.modifier('placeholder') { |
| 135 | @include iro.bem-elem('content') { | 85 | @include bem.elem('content') { |
| 136 | background-color: hsl(0, 0%, fn.color(--l)); | 86 | background-color: hsl(0, 0%, props.get(vars.$bg-color--l)); |
| 137 | } | 87 | } |
| 138 | } | 88 | } |
| 139 | 89 | ||
| 140 | @include iro.bem-modifier('colored') { | 90 | @include bem.modifier('colored') { |
| 141 | @include iro.bem-elem('content') { | 91 | @include bem.elem('content') { |
| 142 | background-color: hsl(fn.color(--h), fn.color(--s), fn.color(--l)); | ||
| 143 | color: #fff; | 92 | color: #fff; |
| 93 | background-color: hsl(props.get(vars.$bg-color--h), props.get(vars.$bg-color--s), props.get(vars.$bg-color--l)); | ||
| 94 | } | ||
| 95 | } | ||
| 96 | |||
| 97 | @include bem.modifier('colored-gradient') { | ||
| 98 | @include bem.elem('content') { | ||
| 99 | color: #fff; | ||
| 100 | background: linear-gradient(props.get(vars.$bg-angle), | ||
| 101 | hsl(props.get(vars.$bg-color--h), props.get(vars.$bg-color--s), props.get(vars.$bg-color--l)), | ||
| 102 | hsl(props.get(vars.$bg-color-2--h), props.get(vars.$bg-color-2--s), props.get(vars.$bg-color-2--l))); | ||
| 144 | } | 103 | } |
| 145 | } | 104 | } |
| 146 | 105 | ||
| 147 | @each $size in $sizes { | 106 | @each $mod, $size, $font-size, $indicator-size in vars.$sizes { |
| 148 | @include iro.bem-modifier($size) { | 107 | @include bem.modifier($mod) { |
| 149 | font-size: fn.dim(--#{$size} --font-size); | 108 | font-size: props.get($font-size); |
| 150 | 109 | ||
| 151 | @include status(--#{$size}); | 110 | @include status($indicator-size); |
| 152 | 111 | ||
| 153 | @include iro.bem-elem('content') { | 112 | @include bem.elem('content') { |
| 154 | inline-size: fn.dim(--#{$size} --size); | 113 | inline-size: props.get($size); |
| 155 | block-size: fn.dim(--#{$size} --size); | 114 | block-size: props.get($size); |
| 156 | line-height: fn.dim(--#{$size} --size); | 115 | line-height: props.get($size); |
| 157 | } | 116 | } |
| 158 | } | 117 | } |
| 159 | } | 118 | } |
diff --git a/src/objects/_avatar.vars.scss b/src/objects/_avatar.vars.scss new file mode 100644 index 0000000..9986de5 --- /dev/null +++ b/src/objects/_avatar.vars.scss | |||
| @@ -0,0 +1,58 @@ | |||
| 1 | @use 'iro-sass/src/props'; | ||
| 2 | @use '../core.vars' as core; | ||
| 3 | |||
| 4 | $size: props.def(--o-avatar--size, props.get(core.$size--500)) !default; | ||
| 5 | $font-size: props.def(--o-avatar--font-size, props.get(core.$font-size--100)) !default; | ||
| 6 | $indicator-size: props.def(--o-avatar--indicator-size, props.get(core.$size--150)) !default; | ||
| 7 | $indicator-spacing: props.def(--o-avatar--indicator-spacing, props.get(core.$size--40)) !default; | ||
| 8 | $rounding: props.def(--o-avatar--rounding, 25%) !default; | ||
| 9 | |||
| 10 | $size--xxxl: props.def(--o-avatar--xxxl--size, props.get(core.$size--1600)) !default; | ||
| 11 | $font-size--xxxl: props.def(--o-avatar--xxxl--font-size, props.get(core.$font-size--800)) !default; | ||
| 12 | $indicator-size--xxxl: props.def(--o-avatar--xxxl--indicator-size, props.get(core.$size--400)) !default; | ||
| 13 | |||
| 14 | $size--xxl: props.def(--o-avatar--xxl--size, props.get(core.$size--1200)) !default; | ||
| 15 | $font-size--xxl: props.def(--o-avatar--xxl--font-size, props.get(core.$font-size--600)) !default; | ||
| 16 | $indicator-size--xxl: props.def(--o-avatar--xxl--indicator-size, props.get(core.$size--300)) !default; | ||
| 17 | |||
| 18 | $size--xl: props.def(--o-avatar--xl--size, props.get(core.$size--800)) !default; | ||
| 19 | $font-size--xl: props.def(--o-avatar--xl--font-size, props.get(core.$font-size--300)) !default; | ||
| 20 | $indicator-size--xl: props.def(--o-avatar--xl--indicator-size, props.get(core.$size--225)) !default; | ||
| 21 | |||
| 22 | $size--lg: props.def(--o-avatar--lg--size, props.get(core.$size--650)) !default; | ||
| 23 | $font-size--lg: props.def(--o-avatar--lg--font-size, props.get(core.$font-size--200)) !default; | ||
| 24 | $indicator-size--lg: props.def(--o-avatar--lg--indicator-size, props.get(core.$size--175)) !default; | ||
| 25 | |||
| 26 | $size--sm: props.def(--o-avatar--sm--size, props.get(core.$size--375)) !default; | ||
| 27 | $font-size--sm: props.def(--o-avatar--sm--font-size, props.get(core.$font-size--75)) !default; | ||
| 28 | $indicator-size--sm: props.def(--o-avatar--sm--indicator-size, props.get(core.$size--125)) !default; | ||
| 29 | |||
| 30 | $size--xs: props.def(--o-avatar--xs--size, props.get(core.$size--250)) !default; | ||
| 31 | $font-size--xs: props.def(--o-avatar--xs--font-size, props.get(core.$font-size--50)) !default; | ||
| 32 | $indicator-size--xs: props.def(--o-avatar--xs--indicator-size, props.get(core.$size--100)) !default; | ||
| 33 | |||
| 34 | $key-focus--border-width: props.def(--o-avatar--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; | ||
| 35 | $key-focus--border-offset: props.def(--o-avatar--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; | ||
| 36 | $key-focus--outline-width: props.def(--o-avatar--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; | ||
| 37 | |||
| 38 | $bg-color--h: props.def(--o-avatar--bg-color--h, 354, 'color') !default; | ||
| 39 | $bg-color--s: props.def(--o-avatar--bg-color--s, 44%, 'color') !default; | ||
| 40 | $bg-color--l: props.def(--o-avatar--bg-color--l, 45%, 'color') !default; | ||
| 41 | |||
| 42 | $bg-color-2--h: props.def(--o-avatar--bg-color-2--h, 354, 'color') !default; | ||
| 43 | $bg-color-2--s: props.def(--o-avatar--bg-color-2--s, 44%, 'color') !default; | ||
| 44 | $bg-color-2--l: props.def(--o-avatar--bg-color-2--l, 45%, 'color') !default; | ||
| 45 | |||
| 46 | $bg-angle: props.def(--o-avatar--bg-angle, 180deg) !default; | ||
| 47 | |||
| 48 | $key-focus--border-color: props.def(--o-avatar--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default; | ||
| 49 | $key-focus--outline-color: props.def(--o-avatar--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default; | ||
| 50 | |||
| 51 | $sizes: ( | ||
| 52 | 'xs' $size--xs $font-size--xs $indicator-size--xs, | ||
| 53 | 'sm' $size--sm $font-size--sm $indicator-size--sm, | ||
| 54 | 'lg' $size--lg $font-size--lg $indicator-size--lg, | ||
| 55 | 'xl' $size--xl $font-size--xl $indicator-size--xl, | ||
| 56 | 'xxl' $size--xxl $font-size--xxl $indicator-size--xxl, | ||
| 57 | 'xxxl' $size--xxxl $font-size--xxxl $indicator-size--xxxl, | ||
| 58 | ) !default; | ||
diff --git a/src/objects/_backdrop.scss b/src/objects/_backdrop.scss index d0eaf52..9cc9e2e 100644 --- a/src/objects/_backdrop.scss +++ b/src/objects/_backdrop.scss | |||
| @@ -1,26 +1,23 @@ | |||
| 1 | @use 'iro-sass/src/index' as iro; | 1 | @use 'sass:meta'; |
| 2 | @use '../functions' as fn; | 2 | @use 'iro-sass/src/bem'; |
| 3 | @use 'iro-sass/src/props'; | ||
| 4 | @use '../props' as *; | ||
| 3 | 5 | ||
| 4 | @include iro.props-namespace('backdrop') { | 6 | @forward 'backdrop.vars'; |
| 5 | @include iro.props-store(( | 7 | @use 'backdrop.vars' as vars; |
| 6 | --dims: ( | ||
| 7 | --z-index: 10000, | ||
| 8 | --blur: 2em, | ||
| 9 | ), | ||
| 10 | --colors: ( | ||
| 11 | --bg: rgba(#000, .75), | ||
| 12 | ), | ||
| 13 | )); | ||
| 14 | 8 | ||
| 15 | @include iro.bem-object(iro.props-namespace()) { | 9 | @mixin styles { |
| 16 | display: flex; | 10 | @include materialize-at-root(meta.module-variables('vars')); |
| 11 | |||
| 12 | @include bem.object('backdrop') { | ||
| 17 | position: fixed; | 13 | position: fixed; |
| 18 | z-index: fn.dim(--z-index); | ||
| 19 | inset: 0; | 14 | inset: 0; |
| 15 | z-index: props.get(vars.$z-index); | ||
| 20 | box-sizing: border-box; | 16 | box-sizing: border-box; |
| 17 | display: flex; | ||
| 21 | flex-direction: column; | 18 | flex-direction: column; |
| 22 | overflow: auto; | 19 | overflow: auto; |
| 23 | background-color: fn.color(--bg); | 20 | background-color: props.get(vars.$bg-color); |
| 24 | backdrop-filter: blur(fn.dim(--blur)); | 21 | backdrop-filter: blur(props.get(vars.$blur)); |
| 25 | } | 22 | } |
| 26 | } | 23 | } |
diff --git a/src/objects/_backdrop.vars.scss b/src/objects/_backdrop.vars.scss new file mode 100644 index 0000000..8bae733 --- /dev/null +++ b/src/objects/_backdrop.vars.scss | |||
| @@ -0,0 +1,6 @@ | |||
| 1 | @use 'iro-sass/src/props'; | ||
| 2 | @use '../core.vars' as core; | ||
| 3 | |||
| 4 | $z-index: props.def(--o-backdrop--z-index, 10000) !default; | ||
| 5 | $blur: props.def(--o-backdrop--blur, 2em) !default; | ||
| 6 | $bg-color: props.def(--o-backdrop--bg-color, props.get(core.$transparent-colors, --black, --600), 'color') !default; | ||
diff --git a/src/objects/_badge.scss b/src/objects/_badge.scss index 4e1662f..9f3e307 100644 --- a/src/objects/_badge.scss +++ b/src/objects/_badge.scss | |||
| @@ -1,298 +1,142 @@ | |||
| 1 | @use 'sass:list'; | ||
| 2 | @use 'sass:map'; | ||
| 3 | @use 'sass:meta'; | ||
| 1 | @use 'sass:string'; | 4 | @use 'sass:string'; |
| 2 | @use 'iro-sass/src/index' as iro; | 5 | @use 'iro-sass/src/bem'; |
| 3 | @use '../functions' as fn; | 6 | @use 'iro-sass/src/props'; |
| 7 | @use '../props' as *; | ||
| 8 | @use '../core.vars' as core; | ||
| 4 | 9 | ||
| 5 | $sizes: 'sm' 'lg' 'xl' !default; | 10 | @forward 'badge.vars'; |
| 6 | $themes: 'accent' 'positive' 'negative' 'warning' !default; | 11 | @use 'badge.vars' as vars; |
| 7 | $static-themes: 'black' 'white' !default; | ||
| 8 | 12 | ||
| 9 | @mixin theme($theme) { | 13 | @mixin -apply-theme($theme, $key: (), $static: false) { |
| 10 | background-color: fn.color(--#{$theme} --bg); | 14 | color: props.get($theme, list.join($key, --label)...); |
| 11 | color: fn.color(--#{$theme} --label); | 15 | background-color: props.get($theme, list.join($key, --bg)...); |
| 12 | 16 | ||
| 13 | &:link, | 17 | &:link, |
| 14 | &:visited, | 18 | &:visited, |
| 15 | &:enabled { | 19 | &:enabled { |
| 16 | &:hover, | 20 | &:hover, |
| 17 | &:focus-visible { | 21 | &:focus-visible { |
| 18 | background-color: fn.color(--#{$theme} --hover --bg); | 22 | color: props.get($theme, list.join($key, --hover --label)...); |
| 19 | color: fn.color(--#{$theme} --hover --label); | 23 | background-color: props.get($theme, list.join($key, --hover --bg)...); |
| 20 | } | 24 | } |
| 21 | 25 | ||
| 22 | &:active { | 26 | &:active { |
| 23 | background-color: fn.color(--#{$theme} --active --bg); | 27 | color: props.get($theme, list.join($key, --active --label)...); |
| 24 | color: fn.color(--#{$theme} --active --label); | 28 | background-color: props.get($theme, list.join($key, --active --bg)...); |
| 25 | } | 29 | } |
| 26 | } | 30 | } |
| 27 | 31 | ||
| 28 | @include iro.bem-modifier('quiet') { | 32 | @include bem.modifier('quiet') { |
| 29 | background-color: fn.color(--#{$theme}-quiet --bg); | 33 | color: props.get($theme, list.join($key, --quiet --label)...); |
| 30 | color: fn.color(--#{$theme}-quiet --label); | 34 | background-color: props.get($theme, list.join($key, --quiet --bg)...); |
| 31 | 35 | ||
| 32 | &:link, | 36 | &:link, |
| 33 | &:visited, | 37 | &:visited, |
| 34 | &:enabled { | 38 | &:enabled { |
| 35 | &:hover, | 39 | &:hover, |
| 36 | &:focus-visible { | 40 | &:focus-visible { |
| 37 | background-color: fn.color(--#{$theme}-quiet --hover --bg); | 41 | color: props.get($theme, list.join($key, --quiet --hover --label)...); |
| 38 | color: fn.color(--#{$theme}-quiet --hover --label); | 42 | background-color: props.get($theme, list.join($key, --quiet --hover --bg)...); |
| 39 | } | 43 | } |
| 40 | 44 | ||
| 41 | &:active { | 45 | &:active { |
| 42 | background-color: fn.color(--#{$theme}-quiet --active --bg); | 46 | color: props.get($theme, list.join($key, --quiet --active --label)...); |
| 43 | color: fn.color(--#{$theme}-quiet --active --label); | 47 | background-color: props.get($theme, list.join($key, --quiet --active --bg)...); |
| 44 | } | 48 | } |
| 45 | } | 49 | } |
| 46 | } | 50 | } |
| 47 | 51 | ||
| 48 | @if string.slice($theme, 1, 7) == 'static-' { | 52 | @if $static { |
| 49 | &::after { | 53 | &::after { |
| 50 | outline: fn.color(--#{$theme} --key-focus --border) solid fn.dim(--key-focus --border); | 54 | outline-color: props.get($theme, list.join($key, --key-focus --border)...); |
| 51 | box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--#{$theme} --key-focus --outline); | 55 | box-shadow: |
| 56 | 0 | ||
| 57 | 0 | ||
| 58 | 0 | ||
| 59 | calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) | ||
| 60 | props.get($theme, list.join($key, --key-focus --outline)...); | ||
| 52 | } | 61 | } |
| 53 | } | 62 | } |
| 54 | } | 63 | } |
| 55 | 64 | ||
| 56 | @include iro.props-namespace('badge') { | 65 | @mixin styles { |
| 57 | @include iro.props-store(( | 66 | @include materialize-at-root(meta.module-variables('vars')); |
| 58 | --dims: ( | ||
| 59 | --pad-b: fn.global-dim(--size --50), | ||
| 60 | --pad-i: fn.global-dim(--size --100), | ||
| 61 | --pad-i-pill: fn.global-dim(--size --150), | ||
| 62 | --pad-i-label: fn.global-dim(--size --50), | ||
| 63 | --rounding: fn.global-dim(--rounding), | ||
| 64 | --font-size: fn.global-dim(--font-size --75), | ||
| 65 | 67 | ||
| 66 | --sm: ( | 68 | @include bem.object('badge') { |
| 67 | --pad-b: fn.global-dim(--size --25), | ||
| 68 | --pad-i: fn.global-dim(--size --75), | ||
| 69 | --pad-i-pill: fn.global-dim(--size --125), | ||
| 70 | --pad-i-label: fn.global-dim(--size --25), | ||
| 71 | --font-size: fn.global-dim(--font-size --50), | ||
| 72 | ), | ||
| 73 | --lg: ( | ||
| 74 | --pad-b: fn.global-dim(--size --75), | ||
| 75 | --pad-i: fn.global-dim(--size --125), | ||
| 76 | --pad-i-pill: fn.global-dim(--size --175), | ||
| 77 | --pad-i-label: fn.global-dim(--size --50), | ||
| 78 | --font-size: fn.global-dim(--font-size --100), | ||
| 79 | ), | ||
| 80 | --xl: ( | ||
| 81 | --pad-b: fn.global-dim(--size --100), | ||
| 82 | --pad-i: fn.global-dim(--size --150), | ||
| 83 | --pad-i-pill: fn.global-dim(--size --225), | ||
| 84 | --pad-i-label: fn.global-dim(--size --75), | ||
| 85 | --font-size: fn.global-dim(--font-size --150), | ||
| 86 | ), | ||
| 87 | |||
| 88 | --key-focus: ( | ||
| 89 | --border: fn.global-dim(--key-focus --border), | ||
| 90 | --border-offset: fn.global-dim(--key-focus --border-offset), | ||
| 91 | --outline: fn.global-dim(--key-focus --outline), | ||
| 92 | ), | ||
| 93 | ), | ||
| 94 | --colors: ( | ||
| 95 | --bg: fn.global-color(--text-mute), | ||
| 96 | --label: fn.global-color(--bg-l2), | ||
| 97 | --hover: ( | ||
| 98 | --bg: fn.global-color(--text), | ||
| 99 | ), | ||
| 100 | --active: ( | ||
| 101 | --bg: fn.global-color(--heading), | ||
| 102 | ), | ||
| 103 | --key-focus: ( | ||
| 104 | --label: fn.global-color(--focus --text), | ||
| 105 | --border: fn.global-color(--focus --border), | ||
| 106 | --outline: fn.global-color(--focus --outline), | ||
| 107 | ), | ||
| 108 | |||
| 109 | --quiet: ( | ||
| 110 | --bg: fn.global-color(--border-mute), | ||
| 111 | --label: fn.global-color(--heading), | ||
| 112 | --hover: ( | ||
| 113 | --bg: fn.global-color(--border), | ||
| 114 | ), | ||
| 115 | --active: ( | ||
| 116 | --bg: fn.global-color(--border-strong), | ||
| 117 | ), | ||
| 118 | ), | ||
| 119 | ), | ||
| 120 | )); | ||
| 121 | |||
| 122 | @each $theme in $themes { | ||
| 123 | @include iro.props-store(( | ||
| 124 | --colors: ( | ||
| 125 | --#{$theme}: ( | ||
| 126 | --bg: fn.global-color(--#{$theme}-static --900), | ||
| 127 | --label: fn.global-color(--#{$theme}-static --900-text), | ||
| 128 | --hover: ( | ||
| 129 | --bg: fn.global-color(--#{$theme}-static --1000), | ||
| 130 | --label: fn.global-color(--#{$theme}-static --1000-text), | ||
| 131 | ), | ||
| 132 | --active: ( | ||
| 133 | --bg: fn.global-color(--#{$theme}-static --1100), | ||
| 134 | --label: fn.global-color(--#{$theme}-static --1000-text), | ||
| 135 | ), | ||
| 136 | ), | ||
| 137 | |||
| 138 | --#{$theme}-quiet: ( | ||
| 139 | --bg: fn.global-color(--#{$theme} --200), | ||
| 140 | --label: fn.global-color(--#{$theme} --1100), | ||
| 141 | --hover: ( | ||
| 142 | --bg: fn.global-color(--#{$theme} --300), | ||
| 143 | --label: fn.global-color(--#{$theme} --1200), | ||
| 144 | ), | ||
| 145 | --active: ( | ||
| 146 | --bg: fn.global-color(--#{$theme} --400), | ||
| 147 | --label: fn.global-color(--#{$theme} --1300), | ||
| 148 | ), | ||
| 149 | ) | ||
| 150 | ), | ||
| 151 | )); | ||
| 152 | } | ||
| 153 | |||
| 154 | @each $theme in $static-themes { | ||
| 155 | @include iro.props-store(( | ||
| 156 | --colors: ( | ||
| 157 | --static-#{$theme}: ( | ||
| 158 | --bg: fn.global-color(--#{$theme}-transparent --800), | ||
| 159 | --label: fn.global-color(--#{$theme}-transparent --text), | ||
| 160 | --hover: ( | ||
| 161 | --bg: fn.global-color(--#{$theme}-transparent --900), | ||
| 162 | --label: fn.global-color(--#{$theme}-transparent --text), | ||
| 163 | ), | ||
| 164 | --active: ( | ||
| 165 | --bg: fn.global-color(--#{$theme}-transparent --900), | ||
| 166 | --label: fn.global-color(--#{$theme}-transparent --text), | ||
| 167 | ), | ||
| 168 | --key-focus: ( | ||
| 169 | --bg: fn.global-color(--#{$theme}-transparent --100), | ||
| 170 | --label: fn.global-color(--#{$theme}-transparent --900), | ||
| 171 | --border: fn.global-color(--#{$theme}-transparent --900), | ||
| 172 | --outline: fn.global-color(--#{$theme}-transparent --300), | ||
| 173 | ), | ||
| 174 | ), | ||
| 175 | |||
| 176 | --static-#{$theme}-quiet: ( | ||
| 177 | --bg: fn.global-color(--#{$theme}-transparent --200), | ||
| 178 | --label: fn.global-color(--#{$theme}-transparent --900), | ||
| 179 | --hover: ( | ||
| 180 | --bg: fn.global-color(--#{$theme}-transparent --300), | ||
| 181 | --label: fn.global-color(--#{$theme}-transparent --900), | ||
| 182 | ), | ||
| 183 | --active: ( | ||
| 184 | --bg: fn.global-color(--#{$theme}-transparent --400), | ||
| 185 | --label: fn.global-color(--#{$theme}-transparent --900), | ||
| 186 | ), | ||
| 187 | ) | ||
| 188 | ) | ||
| 189 | )); | ||
| 190 | } | ||
| 191 | |||
| 192 | @include iro.bem-object(iro.props-namespace()) { | ||
| 193 | display: inline-block; | ||
| 194 | position: relative; | 69 | position: relative; |
| 195 | padding-block: fn.dim(--pad-b); | 70 | display: inline-block; |
| 196 | padding-inline: fn.dim(--pad-i); | 71 | padding-block: props.get(vars.$pad-b); |
| 197 | border-radius: fn.dim(--rounding); | 72 | padding-inline: props.get(vars.$pad-i); |
| 198 | background-color: fn.color(--bg); | 73 | font-size: props.get(vars.$font-size); |
| 199 | background-clip: padding-box; | 74 | line-height: props.get(core.$font--standard--line-height); |
| 200 | color: fn.color(--label); | ||
| 201 | font-size: fn.dim(--font-size); | ||
| 202 | line-height: fn.global-dim(--font --standard --line-height); | ||
| 203 | text-align: center; | 75 | text-align: center; |
| 204 | text-decoration: none; | 76 | text-decoration: none; |
| 77 | background-clip: padding-box; | ||
| 78 | border-radius: props.get(vars.$rounding); | ||
| 205 | 79 | ||
| 206 | &::after { | 80 | &::after { |
| 207 | content: ''; | ||
| 208 | display: none; | ||
| 209 | position: absolute; | 81 | position: absolute; |
| 82 | inset: calc(-1 * props.get(vars.$key-focus--border-offset)); | ||
| 210 | z-index: 1; | 83 | z-index: 1; |
| 211 | inset: calc(-1 * fn.dim(--key-focus --border-offset)); | 84 | display: none; |
| 212 | border-radius: calc(fn.dim(--rounding) + fn.dim(--key-focus --border-offset)); | ||
| 213 | outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border); | ||
| 214 | box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline); | ||
| 215 | pointer-events: none; | 85 | pointer-events: none; |
| 86 | content: ''; | ||
| 87 | border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset)); | ||
| 88 | outline: transparent solid props.get(vars.$key-focus--border-width); | ||
| 216 | } | 89 | } |
| 217 | 90 | ||
| 218 | &:link, | 91 | &:link, |
| 219 | &:visited, | 92 | &:visited, |
| 220 | &:enabled { | 93 | &:enabled { |
| 221 | &:hover, | ||
| 222 | &:focus-visible { | 94 | &:focus-visible { |
| 223 | background-color: fn.color(--hover --bg); | 95 | &::after { |
| 224 | } | 96 | display: block; |
| 225 | 97 | } | |
| 226 | &:active { | ||
| 227 | background-color: fn.color(--active --bg); | ||
| 228 | } | 98 | } |
| 229 | } | 99 | } |
| 230 | 100 | ||
| 231 | @include iro.bem-elem('label') { | 101 | @include bem.elem('label') { |
| 232 | margin-inline: fn.dim(--pad-i-label); | 102 | margin-inline: props.get(vars.$pad-i-label); |
| 233 | } | 103 | } |
| 234 | 104 | ||
| 235 | @include iro.bem-modifier('quiet') { | 105 | @include -apply-theme(vars.$default-theme, $static: true); |
| 236 | background-color: fn.color(--quiet --bg); | ||
| 237 | color: fn.color(--quiet --label); | ||
| 238 | 106 | ||
| 239 | &:link, | 107 | @each $theme in map.keys(props.get(vars.$themes)) { |
| 240 | &:visited, | 108 | @include bem.modifier(string.slice($theme, 3)) { |
| 241 | &:enabled { | 109 | @include -apply-theme(vars.$themes, $theme); |
| 242 | &:hover, | ||
| 243 | &:focus-visible { | ||
| 244 | background-color: fn.color(--quiet --hover --bg); | ||
| 245 | } | ||
| 246 | |||
| 247 | &:active { | ||
| 248 | background-color: fn.color(--quiet --active --bg); | ||
| 249 | } | ||
| 250 | } | ||
| 251 | } | ||
| 252 | |||
| 253 | @each $theme in $themes { | ||
| 254 | @include iro.bem-modifier($theme) { | ||
| 255 | @include theme($theme); | ||
| 256 | } | 110 | } |
| 257 | } | 111 | } |
| 258 | 112 | ||
| 259 | &:link, | 113 | @each $theme in map.keys(props.get(vars.$static-themes)) { |
| 260 | &:visited, | 114 | @include bem.modifier(string.slice($theme, 3)) { |
| 261 | &:enabled { | 115 | @include -apply-theme(vars.$static-themes, $theme, true); |
| 262 | &:focus-visible { | ||
| 263 | &::after { | ||
| 264 | display: block; | ||
| 265 | } | ||
| 266 | } | 116 | } |
| 267 | } | 117 | } |
| 268 | 118 | ||
| 269 | @each $theme in $static-themes { | 119 | @include bem.modifier('pill') { |
| 270 | @include iro.bem-modifier(static-#{$theme}) { | 120 | padding-inline: props.get(vars.$pad-i-pill); |
| 271 | @include theme(static-#{$theme}); | ||
| 272 | } | ||
| 273 | } | ||
| 274 | |||
| 275 | @include iro.bem-modifier('pill') { | ||
| 276 | padding-inline: fn.dim(--pad-i-pill); | ||
| 277 | border-radius: 10em; | 121 | border-radius: 10em; |
| 278 | 122 | ||
| 279 | &::after { | 123 | &::after { |
| 280 | border-radius: 10em; | 124 | border-radius: 10em; |
| 281 | } | 125 | } |
| 282 | } | 126 | } |
| 283 | |||
| 284 | @each $size in $sizes { | ||
| 285 | @include iro.bem-modifier($size) { | ||
| 286 | padding-block: fn.dim(--#{$size} --pad-b); | ||
| 287 | padding-inline: fn.dim(--#{$size} --pad-i); | ||
| 288 | font-size: fn.dim(--#{$size} --font-size); | ||
| 289 | 127 | ||
| 290 | @include iro.bem-elem('label') { | 128 | @each $mod, $pad-b, $pad-i, $pad-i-pill, $pad-i-label, $font-size in vars.$sizes { |
| 291 | margin-inline: fn.dim(--#{$size} --pad-i-label); | 129 | @include bem.modifier($mod) { |
| 130 | padding-block: props.get($pad-b); | ||
| 131 | padding-inline: props.get($pad-i); | ||
| 132 | font-size: props.get($font-size); | ||
| 133 | |||
| 134 | @include bem.elem('label') { | ||
| 135 | margin-inline: props.get($pad-i-label); | ||
| 292 | } | 136 | } |
| 293 | 137 | ||
| 294 | @include iro.bem-modifier('pill') { | 138 | @include bem.modifier('pill') { |
| 295 | padding-inline: fn.dim(--#{$size} --pad-i-pill); | 139 | padding-inline: props.get($pad-i-pill); |
| 296 | } | 140 | } |
| 297 | } | 141 | } |
| 298 | } | 142 | } |
diff --git a/src/objects/_badge.vars.scss b/src/objects/_badge.vars.scss new file mode 100644 index 0000000..ff07148 --- /dev/null +++ b/src/objects/_badge.vars.scss | |||
| @@ -0,0 +1,161 @@ | |||
| 1 | @use 'sass:map'; | ||
| 2 | @use 'sass:string'; | ||
| 3 | @use 'iro-sass/src/props'; | ||
| 4 | @use '../core.vars' as core; | ||
| 5 | |||
| 6 | $pad-b: props.def(--o-badge--pad-b, props.get(core.$size--50)) !default; | ||
| 7 | $pad-i: props.def(--o-badge--pad-i, props.get(core.$size--100)) !default; | ||
| 8 | $pad-i-pill: props.def(--o-badge--pad-i-pill, props.get(core.$size--150)) !default; | ||
| 9 | $pad-i-label: props.def(--o-badge--pad-i-label, props.get(core.$size--50)) !default; | ||
| 10 | $rounding: props.def(--o-badge--rounding, props.get(core.$rounding)) !default; | ||
| 11 | $font-size: props.def(--o-badge--font-size, props.get(core.$font-size--75)) !default; | ||
| 12 | |||
| 13 | $pad-b--sm: props.def(--o-badge--sm--pad-b, props.get(core.$size--25)) !default; | ||
| 14 | $pad-i--sm: props.def(--o-badge--sm--pad-i, props.get(core.$size--75)) !default; | ||
| 15 | $pad-i-pill--sm: props.def(--o-badge--sm--pad-i-pill, props.get(core.$size--125)) !default; | ||
| 16 | $pad-i-label--sm: props.def(--o-badge--sm--pad-i-label, props.get(core.$size--25)) !default; | ||
| 17 | $font-size--sm: props.def(--o-badge--sm--font-size, props.get(core.$font-size--50)) !default; | ||
| 18 | |||
| 19 | $pad-b--lg: props.def(--o-badge--lg--pad-b, props.get(core.$size--75)) !default; | ||
| 20 | $pad-i--lg: props.def(--o-badge--lg--pad-i, props.get(core.$size--125)) !default; | ||
| 21 | $pad-i-pill--lg: props.def(--o-badge--lg--pad-i-pill, props.get(core.$size--175)) !default; | ||
| 22 | $pad-i-label--lg: props.def(--o-badge--lg--pad-i-label, props.get(core.$size--50)) !default; | ||
| 23 | $font-size--lg: props.def(--o-badge--lg--font-size, props.get(core.$font-size--100)) !default; | ||
| 24 | |||
| 25 | $pad-b--xl: props.def(--o-badge--xl--pad-b, props.get(core.$size--100)) !default; | ||
| 26 | $pad-i--xl: props.def(--o-badge--xl--pad-i, props.get(core.$size--150)) !default; | ||
| 27 | $pad-i-pill--xl: props.def(--o-badge--xl--pad-i-pill, props.get(core.$size--225)) !default; | ||
| 28 | $pad-i-label--xl: props.def(--o-badge--xl--pad-i-label, props.get(core.$size--75)) !default; | ||
| 29 | $font-size--xl: props.def(--o-badge--xl--font-size, props.get(core.$font-size--150)) !default; | ||
| 30 | |||
| 31 | $key-focus--border-width: props.def(--o-badge--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; | ||
| 32 | $key-focus--border-offset: props.def(--o-badge--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; | ||
| 33 | $key-focus--outline-width: props.def(--o-badge--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; | ||
| 34 | |||
| 35 | $sizes: ( | ||
| 36 | 'sm' $pad-b--sm $pad-i--sm $pad-i-pill--sm $pad-i-label--sm $font-size--sm, | ||
| 37 | 'lg' $pad-b--lg $pad-i--lg $pad-i-pill--lg $pad-i-label--lg $font-size--lg, | ||
| 38 | 'xl' $pad-b--xl $pad-i--xl $pad-i-pill--xl $pad-i-label--xl $font-size--xl, | ||
| 39 | ) !default; | ||
| 40 | |||
| 41 | $default-theme-override: () !default; | ||
| 42 | $default-theme: props.def(--o-badge, ( | ||
| 43 | --bg: props.get(core.$theme, --heading), | ||
| 44 | --label: props.get(core.$theme, --bg-l2), | ||
| 45 | |||
| 46 | --hover: ( | ||
| 47 | --bg: props.get(core.$theme, --text), | ||
| 48 | --label: props.get(core.$theme, --bg-l2), | ||
| 49 | ), | ||
| 50 | |||
| 51 | --active: ( | ||
| 52 | --bg: props.get(core.$theme, --text-mute), | ||
| 53 | --label: props.get(core.$theme, --bg-l2), | ||
| 54 | ), | ||
| 55 | |||
| 56 | --key-focus: ( | ||
| 57 | --label: props.get(core.$theme, --focus, --text), | ||
| 58 | --border: props.get(core.$theme, --focus, --border), | ||
| 59 | --outline: props.get(core.$theme, --focus, --outline), | ||
| 60 | ), | ||
| 61 | |||
| 62 | --quiet: ( | ||
| 63 | --bg: props.get(core.$theme, --border-mute), | ||
| 64 | --label: props.get(core.$theme, --heading), | ||
| 65 | |||
| 66 | --hover: ( | ||
| 67 | --bg: props.get(core.$theme, --border), | ||
| 68 | --label: props.get(core.$theme, --heading), | ||
| 69 | ), | ||
| 70 | |||
| 71 | --active: ( | ||
| 72 | --bg: props.get(core.$theme, --border-strong), | ||
| 73 | --label: props.get(core.$theme, --heading), | ||
| 74 | ), | ||
| 75 | ) | ||
| 76 | ), 'color') !default; | ||
| 77 | $default-theme: props.merge($default-theme, $default-theme-override); | ||
| 78 | |||
| 79 | $static-themes: props.def(--o-badge, (), 'color'); | ||
| 80 | |||
| 81 | @each $theme in map.keys(props.get(core.$transparent-colors)) { | ||
| 82 | $badge-theme: --static-#{string.slice($theme, 3)}; | ||
| 83 | |||
| 84 | $static-themes: props.merge($static-themes, ( | ||
| 85 | $badge-theme: ( | ||
| 86 | --bg: props.get(core.$transparent-colors, $theme, --800), | ||
| 87 | --label: props.get(core.$transparent-colors, $theme, --text), | ||
| 88 | |||
| 89 | --hover: ( | ||
| 90 | --bg: props.get(core.$transparent-colors, $theme, --900), | ||
| 91 | --label: props.get(core.$transparent-colors, $theme, --text), | ||
| 92 | ), | ||
| 93 | |||
| 94 | --active: ( | ||
| 95 | --bg: props.get(core.$transparent-colors, $theme, --900), | ||
| 96 | --label: props.get(core.$transparent-colors, $theme, --text), | ||
| 97 | ), | ||
| 98 | |||
| 99 | --key-focus: ( | ||
| 100 | --bg: props.get(core.$transparent-colors, $theme, --100), | ||
| 101 | --label: props.get(core.$transparent-colors, $theme, --900), | ||
| 102 | --border: props.get(core.$transparent-colors, $theme, --900), | ||
| 103 | --outline: props.get(core.$transparent-colors, $theme, --300), | ||
| 104 | ), | ||
| 105 | |||
| 106 | --quiet: ( | ||
| 107 | --bg: props.get(core.$transparent-colors, $theme, --200), | ||
| 108 | --label: props.get(core.$transparent-colors, $theme, --900), | ||
| 109 | --hover: ( | ||
| 110 | --bg: props.get(core.$transparent-colors, $theme, --300), | ||
| 111 | --label: props.get(core.$transparent-colors, $theme, --900), | ||
| 112 | ), | ||
| 113 | --active: ( | ||
| 114 | --bg: props.get(core.$transparent-colors, $theme, --400), | ||
| 115 | --label: props.get(core.$transparent-colors, $theme, --900), | ||
| 116 | ), | ||
| 117 | ) | ||
| 118 | ) | ||
| 119 | )); | ||
| 120 | } | ||
| 121 | |||
| 122 | $themes-config: ( | ||
| 123 | accent: --accent, | ||
| 124 | positive: --positive, | ||
| 125 | negative: --negative, | ||
| 126 | warning: --warning, | ||
| 127 | ) !default; | ||
| 128 | |||
| 129 | $themes: props.def(--o-badge, (), 'color'); | ||
| 130 | |||
| 131 | @each $theme, $key in $themes-config { | ||
| 132 | $themes: props.merge($themes, ( | ||
| 133 | --#{$theme}: ( | ||
| 134 | --bg: props.get(core.$theme, #{$key}-static, --900), | ||
| 135 | --label: props.get(core.$theme, #{$key}-static, --900-text), | ||
| 136 | |||
| 137 | --hover: ( | ||
| 138 | --bg: props.get(core.$theme, #{$key}-static, --1000), | ||
| 139 | --label: props.get(core.$theme, #{$key}-static, --1000-text), | ||
| 140 | ), | ||
| 141 | |||
| 142 | --active: ( | ||
| 143 | --bg: props.get(core.$theme, #{$key}-static, --1100), | ||
| 144 | --label: props.get(core.$theme, #{$key}-static, --1000-text), | ||
| 145 | ), | ||
| 146 | |||
| 147 | --quiet: ( | ||
| 148 | --bg: props.get(core.$theme, $key, --200), | ||
| 149 | --label: props.get(core.$theme, $key, --1100), | ||
| 150 | --hover: ( | ||
| 151 | --bg: props.get(core.$theme, $key, --300), | ||
| 152 | --label: props.get(core.$theme, $key, --1200), | ||
| 153 | ), | ||
| 154 | --active: ( | ||
| 155 | --bg: props.get(core.$theme, $key, --400), | ||
| 156 | --label: props.get(core.$theme, $key, --1300), | ||
| 157 | ), | ||
| 158 | ) | ||
| 159 | ) | ||
| 160 | )); | ||
| 161 | } | ||
diff --git a/src/objects/_button.scss b/src/objects/_button.scss index 3ef4813..aaf55b5 100644 --- a/src/objects/_button.scss +++ b/src/objects/_button.scss | |||
| @@ -1,27 +1,31 @@ | |||
| 1 | @use 'sass:list'; | 1 | @use 'sass:list'; |
| 2 | @use 'iro-sass/src/index' as iro; | 2 | @use 'sass:map'; |
| 3 | @use '../functions' as fn; | 3 | @use 'sass:meta'; |
| 4 | 4 | @use 'sass:string'; | |
| 5 | $sizes: 'sm' 'lg' 'xl' !default; | 5 | @use 'iro-sass/src/bem'; |
| 6 | $themes: 'accent' 'negative' !default; | 6 | @use 'iro-sass/src/props'; |
| 7 | $static-themes: 'black' 'white' !default; | 7 | @use '../props' as *; |
| 8 | 8 | @use '../core.vars' as core; | |
| 9 | @mixin theme($theme: ()) { | 9 | |
| 10 | @forward 'button.vars'; | ||
| 11 | @use 'button.vars' as vars; | ||
| 12 | |||
| 13 | @mixin -apply-theme($theme, $key: ()) { | ||
| 10 | &:link, | 14 | &:link, |
| 11 | &:visited, | 15 | &:visited, |
| 12 | &:enabled { | 16 | &:enabled { |
| 17 | color: props.get($theme, list.join($key, --label)...); | ||
| 18 | background-color: props.get($theme, list.join($key, --bg)...); | ||
| 13 | border-color: transparent; | 19 | border-color: transparent; |
| 14 | background-color: fn.color(list.join($theme, --bg)); | ||
| 15 | color: fn.color(list.join($theme, --label)); | ||
| 16 | } | 20 | } |
| 17 | 21 | ||
| 18 | @include iro.bem-modifier('outline') { | 22 | @include bem.modifier('outline') { |
| 19 | &:link, | 23 | &:link, |
| 20 | &:visited, | 24 | &:visited, |
| 21 | &:enabled { | 25 | &:enabled { |
| 22 | border-color: fn.color(list.join($theme, --outline-border)); | 26 | color: props.get($theme, list.join($key, --outline-label)...); |
| 23 | background-color: transparent; | 27 | background-color: transparent; |
| 24 | color: fn.color(list.join($theme, --outline-label)); | 28 | border-color: props.get($theme, list.join($key, --outline-border)...); |
| 25 | } | 29 | } |
| 26 | } | 30 | } |
| 27 | 31 | ||
| @@ -30,217 +34,71 @@ $static-themes: 'black' 'white' !default; | |||
| 30 | &:enabled { | 34 | &:enabled { |
| 31 | &:hover, | 35 | &:hover, |
| 32 | &:focus-visible { | 36 | &:focus-visible { |
| 37 | color: props.get($theme, list.join($key, --hover --label)...); | ||
| 38 | background-color: props.get($theme, list.join($key, --hover --bg)...); | ||
| 33 | border-color: transparent; | 39 | border-color: transparent; |
| 34 | background-color: fn.color(list.join($theme, --hover --bg)); | ||
| 35 | color: fn.color(list.join($theme, --hover --label)); | ||
| 36 | } | 40 | } |
| 37 | 41 | ||
| 38 | &:active { | 42 | &:active { |
| 43 | color: props.get($theme, list.join($key, --active --label)...); | ||
| 44 | background-color: props.get($theme, list.join($key, --active --bg)...); | ||
| 39 | border-color: transparent; | 45 | border-color: transparent; |
| 40 | background-color: fn.color(list.join($theme, --active --bg)); | ||
| 41 | color: fn.color(list.join($theme, --active --label)); | ||
| 42 | } | 46 | } |
| 43 | } | 47 | } |
| 44 | } | 48 | } |
| 45 | 49 | ||
| 46 | @mixin static-theme($theme: ()) { | 50 | @mixin -apply-static-theme($theme, $key: ()) { |
| 51 | color: props.get($theme, list.join($key, --disabled --label)...); | ||
| 52 | background-color: props.get($theme, list.join($key, --disabled --bg)...); | ||
| 47 | border-color: transparent; | 53 | border-color: transparent; |
| 48 | background-color: fn.color(list.join($theme, --disabled --bg)); | ||
| 49 | color: fn.color(list.join($theme, --disabled --label)); | ||
| 50 | 54 | ||
| 51 | &::after { | 55 | &::after { |
| 52 | outline: fn.color(list.join($theme, --key-focus --border)) solid fn.dim(--key-focus --border); | 56 | outline-color: props.get($theme, list.join($key, --key-focus --border)...); |
| 53 | box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(list.join($theme, --key-focus --outline)); | 57 | box-shadow: |
| 58 | 0 | ||
| 59 | 0 | ||
| 60 | 0 | ||
| 61 | calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) | ||
| 62 | props.get($theme, list.join($key, --key-focus --outline)...); | ||
| 54 | } | 63 | } |
| 55 | 64 | ||
| 56 | @include iro.bem-modifier('outline') { | 65 | @include bem.modifier('outline') { |
| 57 | border-color: fn.color(list.join($theme, --disabled --outline-border)); | ||
| 58 | background-color: transparent; | 66 | background-color: transparent; |
| 67 | border-color: props.get($theme, list.join($key, --disabled --outline-border)...); | ||
| 59 | } | 68 | } |
| 60 | 69 | ||
| 61 | @include theme($theme); | 70 | @include -apply-theme($theme, $key); |
| 62 | 71 | ||
| 63 | @include iro.bem-modifier('primary') { | 72 | @include bem.modifier('primary') { |
| 64 | @include theme(list.join($theme, --primary)); | 73 | @include -apply-theme($theme, list.join($key, --primary)); |
| 65 | } | 74 | } |
| 66 | } | 75 | } |
| 67 | 76 | ||
| 68 | @include iro.props-namespace('button') { | 77 | @mixin styles { |
| 69 | @include iro.props-store(( | 78 | @include materialize-at-root(meta.module-variables('vars')); |
| 70 | --dims: ( | ||
| 71 | --line-height: 1.4, | ||
| 72 | --pad-i: fn.global-dim(--size --200), | ||
| 73 | --pad-i-label: fn.global-dim(--size --75), | ||
| 74 | --pad-b: fn.global-dim(--size --65), | ||
| 75 | --border: fn.global-dim(--border --medium), | ||
| 76 | --rounding: 10em, | ||
| 77 | --font-size: fn.global-dim(--font-size --100), | ||
| 78 | |||
| 79 | --sm: ( | ||
| 80 | --pad-i: fn.global-dim(--size --150), | ||
| 81 | --pad-i-label: fn.global-dim(--size --50), | ||
| 82 | --pad-b: fn.global-dim(--size --25), | ||
| 83 | --font-size: fn.global-dim(--font-size --75), | ||
| 84 | ), | ||
| 85 | --lg: ( | ||
| 86 | --pad-i: fn.global-dim(--size --250), | ||
| 87 | --pad-i-label: fn.global-dim(--size --100), | ||
| 88 | --pad-b: fn.global-dim(--size --100), | ||
| 89 | --font-size: fn.global-dim(--font-size --150), | ||
| 90 | ), | ||
| 91 | --xl: ( | ||
| 92 | --pad-i: fn.global-dim(--size --300), | ||
| 93 | --pad-i-label: fn.global-dim(--size --150), | ||
| 94 | --pad-b: fn.global-dim(--size --150), | ||
| 95 | --font-size: fn.global-dim(--font-size --200), | ||
| 96 | ), | ||
| 97 | |||
| 98 | --key-focus: ( | ||
| 99 | --border: fn.global-dim(--key-focus --border), | ||
| 100 | --border-offset: fn.global-dim(--key-focus --border-offset), | ||
| 101 | --outline: fn.global-dim(--key-focus --outline), | ||
| 102 | ), | ||
| 103 | ), | ||
| 104 | --colors: ( | ||
| 105 | --bg: fn.global-color(--border-mute), | ||
| 106 | --label: fn.global-color(--text), | ||
| 107 | --outline-border: fn.global-color(--border), | ||
| 108 | --outline-label: fn.global-color(--text), | ||
| 109 | |||
| 110 | --hover: ( | ||
| 111 | --bg: fn.global-color(--border), | ||
| 112 | --label: fn.global-color(--heading), | ||
| 113 | ), | ||
| 114 | --active: ( | ||
| 115 | --bg: fn.global-color(--border-strong), | ||
| 116 | --label: fn.global-color(--heading), | ||
| 117 | ), | ||
| 118 | --disabled: ( | ||
| 119 | --bg: fn.global-color(--border-mute), | ||
| 120 | --outline-border: fn.global-color(--border), | ||
| 121 | --label: fn.global-color(--text-disabled), | ||
| 122 | ), | ||
| 123 | --key-focus: ( | ||
| 124 | --label: fn.global-color(--focus --text), | ||
| 125 | --border: fn.global-color(--focus --border), | ||
| 126 | --outline: fn.global-color(--focus --outline), | ||
| 127 | ), | ||
| 128 | |||
| 129 | --primary: ( | ||
| 130 | --bg: fn.global-color(--base --800), | ||
| 131 | --label: fn.global-color(--base --800-text), | ||
| 132 | --outline-border: fn.global-color(--base --800), | ||
| 133 | --outline-label: fn.global-color(--text), | ||
| 134 | |||
| 135 | --hover: ( | ||
| 136 | --bg: fn.global-color(--base --900), | ||
| 137 | --label: fn.global-color(--base --900-text), | ||
| 138 | ), | ||
| 139 | --active: ( | ||
| 140 | --bg: fn.global-color(--base --900), | ||
| 141 | --label: fn.global-color(--base --900-text), | ||
| 142 | ), | ||
| 143 | ), | ||
| 144 | ), | ||
| 145 | )); | ||
| 146 | |||
| 147 | @each $theme in $themes { | ||
| 148 | @include iro.props-store(( | ||
| 149 | --colors: ( | ||
| 150 | --#{$theme}: ( | ||
| 151 | --bg: fn.global-color(--#{$theme}-static --900), | ||
| 152 | --label: fn.global-color(--#{$theme}-static --900-text), | ||
| 153 | --outline-border: fn.global-color(--#{$theme} --900), | ||
| 154 | --outline-label: fn.global-color(--#{$theme} --1000), | ||
| 155 | 79 | ||
| 156 | --hover: ( | 80 | @include bem.object('button') { |
| 157 | --bg: fn.global-color(--#{$theme}-static --1000), | ||
| 158 | --label: fn.global-color(--#{$theme}-static --1000-text), | ||
| 159 | ), | ||
| 160 | --active: ( | ||
| 161 | --bg: fn.global-color(--#{$theme}-static --1100), | ||
| 162 | --label: fn.global-color(--#{$theme}-static --1100-text), | ||
| 163 | ), | ||
| 164 | ), | ||
| 165 | ), | ||
| 166 | )); | ||
| 167 | } | ||
| 168 | |||
| 169 | @each $theme in $static-themes { | ||
| 170 | @include iro.props-store(( | ||
| 171 | --colors: ( | ||
| 172 | --static-#{$theme}: ( | ||
| 173 | --bg: fn.global-color(--#{$theme}-transparent --200), | ||
| 174 | --label: fn.global-color(--#{$theme}-transparent --900), | ||
| 175 | --outline-border: fn.global-color(--#{$theme}-transparent --300), | ||
| 176 | --outline-label: fn.global-color(--#{$theme}-transparent --900), | ||
| 177 | |||
| 178 | --hover: ( | ||
| 179 | --bg: fn.global-color(--#{$theme}-transparent --300), | ||
| 180 | --label: fn.global-color(--#{$theme}-transparent --900), | ||
| 181 | ), | ||
| 182 | --active: ( | ||
| 183 | --bg: fn.global-color(--#{$theme}-transparent --400), | ||
| 184 | --label: fn.global-color(--#{$theme}-transparent --900), | ||
| 185 | ), | ||
| 186 | --disabled: ( | ||
| 187 | --bg: fn.global-color(--#{$theme}-transparent --200), | ||
| 188 | --outline-border: fn.global-color(--#{$theme}-transparent --300), | ||
| 189 | --label: fn.global-color(--#{$theme}-transparent --500), | ||
| 190 | ), | ||
| 191 | --key-focus: ( | ||
| 192 | --bg: fn.global-color(--#{$theme}-transparent --100), | ||
| 193 | --label: fn.global-color(--#{$theme}-transparent --900), | ||
| 194 | --border: fn.global-color(--#{$theme}-transparent --900), | ||
| 195 | --outline: fn.global-color(--#{$theme}-transparent --300), | ||
| 196 | ), | ||
| 197 | |||
| 198 | --primary: ( | ||
| 199 | --bg: fn.global-color(--#{$theme}-transparent --800), | ||
| 200 | --label: fn.global-color(--#{$theme}-transparent --text), | ||
| 201 | --outline-border: fn.global-color(--#{$theme}-transparent --800), | ||
| 202 | --outline-label: fn.global-color(--#{$theme}-transparent --900), | ||
| 203 | |||
| 204 | --hover: ( | ||
| 205 | --bg: fn.global-color(--#{$theme}-transparent --900), | ||
| 206 | --label: fn.global-color(--#{$theme}-transparent --text), | ||
| 207 | ), | ||
| 208 | --active: ( | ||
| 209 | --bg: fn.global-color(--#{$theme}-transparent --900), | ||
| 210 | --label: fn.global-color(--#{$theme}-transparent --text), | ||
| 211 | ), | ||
| 212 | ), | ||
| 213 | ), | ||
| 214 | ), | ||
| 215 | )); | ||
| 216 | } | ||
| 217 | |||
| 218 | @include iro.bem-object(iro.props-namespace()) { | ||
| 219 | display: inline-block; | ||
| 220 | position: relative; | 81 | position: relative; |
| 221 | padding-block: fn.dim(--pad-b); | 82 | display: inline-block; |
| 222 | padding-inline: fn.dim(--pad-i); | 83 | padding-block: props.get(vars.$pad-b); |
| 223 | border: fn.dim(--border) solid transparent; | 84 | padding-inline: props.get(vars.$pad-i); |
| 224 | border-radius: fn.dim(--rounding); | 85 | font-size: props.get(vars.$font-size); |
| 225 | border-color: fn.color(--disabled --bg); | ||
| 226 | background-color: fn.color(--disabled --bg); | ||
| 227 | color: fn.color(--disabled --label); | ||
| 228 | font-size: fn.dim(--font-size); | ||
| 229 | font-weight: 500; | 86 | font-weight: 500; |
| 230 | line-height: fn.dim(--line-height); | 87 | line-height: props.get(vars.$line-height); |
| 231 | text-align: center; | 88 | text-align: center; |
| 232 | text-decoration: none; | 89 | text-decoration: none; |
| 90 | border: props.get(vars.$border-width) solid transparent; | ||
| 91 | border-radius: props.get(vars.$rounding); | ||
| 233 | 92 | ||
| 234 | &::after { | 93 | &::after { |
| 235 | content: ''; | ||
| 236 | display: none; | ||
| 237 | position: absolute; | 94 | position: absolute; |
| 95 | inset: calc(-1 * props.get(vars.$border-width) - props.get(vars.$key-focus--border-offset)); | ||
| 238 | z-index: 1; | 96 | z-index: 1; |
| 239 | inset: calc(-1 * fn.dim(--border) - fn.dim(--key-focus --border-offset)); | 97 | display: none; |
| 240 | border-radius: calc(fn.dim(--rounding) + fn.dim(--key-focus --border-offset)); | ||
| 241 | outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border); | ||
| 242 | box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline); | ||
| 243 | pointer-events: none; | 98 | pointer-events: none; |
| 99 | content: ''; | ||
| 100 | border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset)); | ||
| 101 | outline: transparent solid props.get(vars.$key-focus--border-width); | ||
| 244 | } | 102 | } |
| 245 | 103 | ||
| 246 | &:link, | 104 | &:link, |
| @@ -253,47 +111,46 @@ $static-themes: 'black' 'white' !default; | |||
| 253 | } | 111 | } |
| 254 | } | 112 | } |
| 255 | 113 | ||
| 256 | @include iro.bem-elem('label') { | 114 | @include bem.elem('label') { |
| 257 | margin-inline: fn.dim(--pad-i-label); | 115 | margin-inline: props.get(vars.$pad-i-label); |
| 258 | } | 116 | } |
| 259 | 117 | ||
| 260 | @include iro.bem-modifier('block') { | 118 | @include bem.modifier('block') { |
| 261 | display: block; | 119 | display: block; |
| 262 | } | 120 | } |
| 263 | 121 | ||
| 264 | @include iro.bem-modifier('outline') { | 122 | @include bem.modifier('outline') { |
| 265 | border-color: fn.color(--disabled --outline-border); | ||
| 266 | background-color: transparent; | 123 | background-color: transparent; |
| 267 | } | 124 | } |
| 268 | 125 | ||
| 269 | @each $size in $sizes { | 126 | @each $mod, $pad-i, $pad-i-label, $pad-b, $font-size in vars.$sizes { |
| 270 | @include iro.bem-modifier($size) { | 127 | @include bem.modifier($mod) { |
| 271 | padding-block: fn.dim(--#{$size} --pad-b); | 128 | padding-block: props.get($pad-b); |
| 272 | padding-inline: fn.dim(--#{$size} --pad-i); | 129 | padding-inline: props.get($pad-i); |
| 273 | font-size: fn.dim(--#{$size} --font-size); | 130 | font-size: props.get($font-size); |
| 274 | 131 | ||
| 275 | @include iro.bem-elem('label') { | 132 | @include bem.elem('label') { |
| 276 | margin-inline: fn.dim(--#{$size} --pad-i-label); | 133 | margin-inline: props.get($pad-i-label); |
| 277 | } | 134 | } |
| 278 | } | 135 | } |
| 279 | } | 136 | } |
| 280 | 137 | ||
| 281 | @include static-theme; | 138 | @include -apply-static-theme(vars.$default-theme); |
| 282 | 139 | ||
| 283 | @each $theme in $themes { | 140 | @each $theme in map.keys(props.get(vars.$themes)) { |
| 284 | @include iro.bem-modifier($theme) { | 141 | @include bem.modifier(string.slice($theme, 3)) { |
| 285 | @include theme(--#{$theme}); | 142 | @include -apply-theme(vars.$themes, $theme); |
| 286 | } | 143 | } |
| 287 | } | 144 | } |
| 288 | 145 | ||
| 289 | @each $theme in $static-themes { | 146 | @each $theme in map.keys(props.get(vars.$static-themes)) { |
| 290 | @include iro.bem-modifier(static-#{$theme}) { | 147 | @include bem.modifier(string.slice($theme, 3)) { |
| 291 | @include static-theme(--static-#{$theme}); | 148 | @include -apply-static-theme(vars.$static-themes, $theme); |
| 292 | } | 149 | } |
| 293 | } | 150 | } |
| 294 | 151 | ||
| 295 | @include iro.bem-modifier('round') { | 152 | @include bem.modifier('round') { |
| 296 | inline-size: calc(1em * fn.dim(--line-height) + 2 * fn.dim(--pad-b)); | 153 | inline-size: calc(1em * props.get(vars.$line-height) + 2 * props.get(vars.$pad-b)); |
| 297 | padding-inline: 0; | 154 | padding-inline: 0; |
| 298 | border-radius: 100em; | 155 | border-radius: 100em; |
| 299 | } | 156 | } |
diff --git a/src/objects/_button.vars.scss b/src/objects/_button.vars.scss new file mode 100644 index 0000000..4f7b552 --- /dev/null +++ b/src/objects/_button.vars.scss | |||
| @@ -0,0 +1,168 @@ | |||
| 1 | @use 'sass:map'; | ||
| 2 | @use 'sass:string'; | ||
| 3 | @use 'iro-sass/src/props'; | ||
| 4 | @use '../core.vars' as core; | ||
| 5 | |||
| 6 | $line-height: props.def(--o-button--line-height, 1.4) !default; | ||
| 7 | $pad-i: props.def(--o-button--pad-i, props.get(core.$size--200)) !default; | ||
| 8 | $pad-i-label: props.def(--o-button--pad-i-label, props.get(core.$size--50)) !default; | ||
| 9 | $pad-b: props.def(--o-button--pad-b, props.get(core.$size--65)) !default; | ||
| 10 | $border-width: props.def(--o-button--border-width, props.get(core.$border-width--medium)) !default; | ||
| 11 | $rounding: props.def(--o-button--rounding, 10em) !default; | ||
| 12 | $font-size: props.def(--o-button--font-size, props.get(core.$font-size--100)) !default; | ||
| 13 | |||
| 14 | $pad-i--sm: props.def(--o-button--sm--pad-i, props.get(core.$size--150)) !default; | ||
| 15 | $pad-i-label--sm: props.def(--o-button--sm--pad-i-label, props.get(core.$size--25)) !default; | ||
| 16 | $pad-b--sm: props.def(--o-button--sm--pad-b, props.get(core.$size--25)) !default; | ||
| 17 | $font-size--sm: props.def(--o-button--sm--font-size, props.get(core.$font-size--75)) !default; | ||
| 18 | |||
| 19 | $pad-i--lg: props.def(--o-button--lg--pad-i, props.get(core.$size--250)) !default; | ||
| 20 | $pad-i-label--lg: props.def(--o-button--lg--pad-i-label, props.get(core.$size--100)) !default; | ||
| 21 | $pad-b--lg: props.def(--o-button--lg--pad-b, props.get(core.$size--100)) !default; | ||
| 22 | $font-size--lg: props.def(--o-button--lg--font-size, props.get(core.$font-size--150)) !default; | ||
| 23 | |||
| 24 | $pad-i--xl: props.def(--o-button--xl--pad-i, props.get(core.$size--300)) !default; | ||
| 25 | $pad-i-label--xl: props.def(--o-button--xl--pad-i-label, props.get(core.$size--150)) !default; | ||
| 26 | $pad-b--xl: props.def(--o-button--xl--pad-b, props.get(core.$size--150)) !default; | ||
| 27 | $font-size--xl: props.def(--o-button--xl--font-size, props.get(core.$font-size--200)) !default; | ||
| 28 | |||
| 29 | $key-focus--border-width: props.def(--o-button--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; | ||
| 30 | $key-focus--border-offset: props.def(--o-button--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; | ||
| 31 | $key-focus--outline-width: props.def(--o-button--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; | ||
| 32 | |||
| 33 | $sizes: ( | ||
| 34 | 'sm' $pad-i--sm $pad-i-label--sm $pad-b--sm $font-size--sm, | ||
| 35 | 'lg' $pad-i--lg $pad-i-label--lg $pad-b--lg $font-size--lg, | ||
| 36 | 'xl' $pad-i--xl $pad-i-label--xl $pad-b--xl $font-size--xl, | ||
| 37 | ) !default; | ||
| 38 | |||
| 39 | $default-theme-override: () !default; | ||
| 40 | $default-theme: props.def(--o-button, ( | ||
| 41 | --bg: props.get(core.$theme, --border-mute), | ||
| 42 | --label: props.get(core.$theme, --text), | ||
| 43 | --outline-border: props.get(core.$theme, --border), | ||
| 44 | --outline-label: props.get(core.$theme, --text), | ||
| 45 | |||
| 46 | --hover: ( | ||
| 47 | --bg: props.get(core.$theme, --border), | ||
| 48 | --label: props.get(core.$theme, --heading), | ||
| 49 | ), | ||
| 50 | |||
| 51 | --active: ( | ||
| 52 | --bg: props.get(core.$theme, --border-strong), | ||
| 53 | --label: props.get(core.$theme, --heading), | ||
| 54 | ), | ||
| 55 | |||
| 56 | --disabled: ( | ||
| 57 | --bg: props.get(core.$theme, --border-mute), | ||
| 58 | --outline-border: props.get(core.$theme, --border), | ||
| 59 | --label: props.get(core.$theme, --text-disabled), | ||
| 60 | ), | ||
| 61 | |||
| 62 | --key-focus: ( | ||
| 63 | --label: props.get(core.$theme, --focus, --text), | ||
| 64 | --border: props.get(core.$theme, --focus, --border), | ||
| 65 | --outline: props.get(core.$theme, --focus, --outline), | ||
| 66 | ), | ||
| 67 | |||
| 68 | --primary: ( | ||
| 69 | --bg: props.get(core.$theme, --base, --900), | ||
| 70 | --label: props.get(core.$theme, --base, --900-text), | ||
| 71 | --outline-border: props.get(core.$theme, --base, --900), | ||
| 72 | --outline-label: props.get(core.$theme, --text), | ||
| 73 | |||
| 74 | --hover: ( | ||
| 75 | --bg: props.get(core.$theme, --base, --800), | ||
| 76 | --label: props.get(core.$theme, --base, --800-text), | ||
| 77 | ), | ||
| 78 | |||
| 79 | --active: ( | ||
| 80 | --bg: props.get(core.$theme, --base, --700), | ||
| 81 | --label: props.get(core.$theme, --base, --700-text), | ||
| 82 | ), | ||
| 83 | ), | ||
| 84 | ), 'color') !default; | ||
| 85 | $default-theme: props.merge($default-theme, $default-theme-override); | ||
| 86 | |||
| 87 | $static-themes: props.def(--o-button, (), 'color'); | ||
| 88 | |||
| 89 | @each $theme in map.keys(props.get(core.$transparent-colors)) { | ||
| 90 | $button-theme: --static-#{string.slice($theme, 3)}; | ||
| 91 | |||
| 92 | $static-themes: props.merge($static-themes, ( | ||
| 93 | $button-theme: ( | ||
| 94 | --bg: props.get(core.$transparent-colors, $theme, --200), | ||
| 95 | --label: props.get(core.$transparent-colors, $theme, --900), | ||
| 96 | --outline-border: props.get(core.$transparent-colors, $theme, --300), | ||
| 97 | --outline-label: props.get(core.$transparent-colors, $theme, --900), | ||
| 98 | |||
| 99 | --hover: ( | ||
| 100 | --bg: props.get(core.$transparent-colors, $theme, --300), | ||
| 101 | --label: props.get(core.$transparent-colors, $theme, --900), | ||
| 102 | ), | ||
| 103 | |||
| 104 | --active: ( | ||
| 105 | --bg: props.get(core.$transparent-colors, $theme, --400), | ||
| 106 | --label: props.get(core.$transparent-colors, $theme, --900), | ||
| 107 | ), | ||
| 108 | |||
| 109 | --disabled: ( | ||
| 110 | --bg: props.get(core.$transparent-colors, $theme, --200), | ||
| 111 | --outline-border: props.get(core.$transparent-colors, $theme, --300), | ||
| 112 | --label: props.get(core.$transparent-colors, $theme, --500), | ||
| 113 | ), | ||
| 114 | |||
| 115 | --key-focus: ( | ||
| 116 | --bg: props.get(core.$transparent-colors, $theme, --100), | ||
| 117 | --label: props.get(core.$transparent-colors, $theme, --900), | ||
| 118 | --border: props.get(core.$transparent-colors, $theme, --900), | ||
| 119 | --outline: props.get(core.$transparent-colors, $theme, --300), | ||
| 120 | ), | ||
| 121 | |||
| 122 | --primary: ( | ||
| 123 | --bg: props.get(core.$transparent-colors, $theme, --800), | ||
| 124 | --label: props.get(core.$transparent-colors, $theme, --text), | ||
| 125 | --outline-border: props.get(core.$transparent-colors, $theme, --800), | ||
| 126 | --outline-label: props.get(core.$transparent-colors, $theme, --900), | ||
| 127 | |||
| 128 | --hover: ( | ||
| 129 | --bg: props.get(core.$transparent-colors, $theme, --900), | ||
| 130 | --label: props.get(core.$transparent-colors, $theme, --text), | ||
| 131 | ), | ||
| 132 | |||
| 133 | --active: ( | ||
| 134 | --bg: props.get(core.$transparent-colors, $theme, --900), | ||
| 135 | --label: props.get(core.$transparent-colors, $theme, --text), | ||
| 136 | ), | ||
| 137 | ) | ||
| 138 | ) | ||
| 139 | )); | ||
| 140 | } | ||
| 141 | |||
| 142 | $themes-config: ( | ||
| 143 | accent: --accent, | ||
| 144 | negative: --negative, | ||
| 145 | ) !default; | ||
| 146 | |||
| 147 | $themes: props.def(--o-button, (), 'color'); | ||
| 148 | |||
| 149 | @each $theme, $key in $themes-config { | ||
| 150 | $themes: props.merge($themes, ( | ||
| 151 | --#{$theme}: ( | ||
| 152 | --bg: props.get(core.$theme, #{$key}-static, --900), | ||
| 153 | --label: props.get(core.$theme, #{$key}-static, --900-text), | ||
| 154 | --outline-border: props.get(core.$theme, $key, --900), | ||
| 155 | --outline-label: props.get(core.$theme, $key, --1000), | ||
| 156 | |||
| 157 | --hover: ( | ||
| 158 | --bg: props.get(core.$theme, #{$key}-static, --1000), | ||
| 159 | --label: props.get(core.$theme, #{$key}-static, --1000-text), | ||
| 160 | ), | ||
| 161 | |||
| 162 | --active: ( | ||
| 163 | --bg: props.get(core.$theme, #{$key}-static, --1100), | ||
| 164 | --label: props.get(core.$theme, #{$key}-static, --1100-text), | ||
| 165 | ), | ||
| 166 | ) | ||
| 167 | )); | ||
| 168 | } | ||
diff --git a/src/objects/_card.scss b/src/objects/_card.scss index f56a96c..c87e676 100644 --- a/src/objects/_card.scss +++ b/src/objects/_card.scss | |||
| @@ -1,132 +1,170 @@ | |||
| 1 | @use 'iro-sass/src/index' as iro; | 1 | @use 'sass:meta'; |
| 2 | @use '../functions' as fn; | 2 | @use 'iro-sass/src/bem'; |
| 3 | 3 | @use 'iro-sass/src/props'; | |
| 4 | @include iro.props-namespace('card') { | 4 | @use '../props' as *; |
| 5 | @include iro.props-store(( | 5 | @use 'avatar.vars' as avatar; |
| 6 | --dims: ( | 6 | |
| 7 | --border: fn.global-dim(--border --thin), | 7 | @forward 'card.vars'; |
| 8 | --divider: fn.global-dim(--border --thin), | 8 | @use 'card.vars' as vars; |
| 9 | --pad-i: fn.global-dim(--size --300), | 9 | |
| 10 | --pad-b: fn.global-dim(--size --250), | 10 | @mixin styles { |
| 11 | --spacing: fn.global-dim(--size --200), | 11 | @include materialize-at-root(meta.module-variables('vars')); |
| 12 | --rounding: fn.global-dim(--rounding), | 12 | |
| 13 | 13 | @include bem.object('card') { | |
| 14 | --key-focus: ( | 14 | position: relative; |
| 15 | --border: fn.global-dim(--key-focus --border), | 15 | display: flex; |
| 16 | --border-offset: fn.global-dim(--key-focus --border-offset), | 16 | flex-direction: column; |
| 17 | --outline: fn.global-dim(--key-focus --outline), | 17 | margin: calc(-1 * props.get(vars.$key-focus--border-width)); |
| 18 | ), | 18 | background-color: props.get(vars.$bg-color); |
| 19 | ), | 19 | background-clip: content-box; |
| 20 | --colors: ( | 20 | border: props.get(vars.$key-focus--border-offset) solid transparent; |
| 21 | --bg: fn.global-color(--bg-l2), | 21 | border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset)); |
| 22 | --border: fn.global-color(--border-mute), | 22 | transition: transform .2s; |
| 23 | --divider: fn.global-color(--border-mute), | 23 | |
| 24 | 24 | @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') { | |
| 25 | --hover: ( | ||
| 26 | --border: fn.global-color(--border), | ||
| 27 | ), | ||
| 28 | |||
| 29 | --key-focus: ( | ||
| 30 | --label: fn.global-color(--focus --text), | ||
| 31 | --border: fn.global-color(--focus --border), | ||
| 32 | --outline: fn.global-color(--focus --outline), | ||
| 33 | ), | ||
| 34 | |||
| 35 | --quiet: ( | ||
| 36 | --image: fn.global-color(--bg-base), | ||
| 37 | |||
| 38 | --hover: ( | ||
| 39 | --image: fn.global-color(--border), | ||
| 40 | ), | ||
| 41 | ) | ||
| 42 | ), | ||
| 43 | )); | ||
| 44 | |||
| 45 | @include iro.bem-object(iro.props-namespace()) { | ||
| 46 | display: block; | ||
| 47 | border: fn.dim(--border) solid fn.color(--border); | ||
| 48 | border-radius: fn.dim(--rounding); | ||
| 49 | background-color: fn.color(--bg); | ||
| 50 | |||
| 51 | @include iro.bem-multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') { | ||
| 52 | &:hover, | 25 | &:hover, |
| 53 | &:focus-visible, | 26 | &:active, |
| 54 | &:active { | 27 | &:focus-visible { |
| 55 | border-color: fn.color(--hover --border); | 28 | transform: translateY(props.get(vars.$hover--offset-b)); |
| 29 | |||
| 30 | @include bem.elem('body') { | ||
| 31 | @include bem.modifier('hidden') { | ||
| 32 | visibility: visible; | ||
| 33 | opacity: 1; | ||
| 34 | transition: | ||
| 35 | opacity .2s ease, | ||
| 36 | visibility .2s linear; | ||
| 37 | } | ||
| 38 | } | ||
| 56 | } | 39 | } |
| 57 | 40 | ||
| 58 | &:focus-visible { | 41 | &:focus-visible { |
| 59 | border-color: fn.color(--key-focus --border); | 42 | outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); |
| 60 | outline: fn.color(--key-focus --border) solid calc(fn.dim(--key-focus --border) - fn.dim(--border)); | 43 | box-shadow: |
| 61 | box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline); | 44 | 0 |
| 45 | 0 | ||
| 46 | 0 | ||
| 47 | calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) | ||
| 48 | props.get(vars.$key-focus--outline-color); | ||
| 62 | } | 49 | } |
| 63 | } | 50 | } |
| 64 | 51 | ||
| 65 | @include iro.bem-elem('avatar') { | 52 | @include bem.elem('avatar') { |
| 66 | margin-block-start: fn.dim(--pad-b); | 53 | margin-block-start: props.get(vars.$pad-b); |
| 67 | margin-inline-start: fn.dim(--pad-i); | 54 | margin-inline-start: props.get(vars.$pad-i); |
| 68 | } | 55 | } |
| 69 | 56 | ||
| 70 | @include iro.bem-elem('image') { | 57 | @include bem.elem('image') { |
| 71 | display: block; | 58 | position: relative; |
| 72 | inline-size: 100%; | 59 | display: block; |
| 73 | object-fit: cover; | 60 | flex: 0 0 auto; |
| 61 | inline-size: 100%; | ||
| 62 | overflow: hidden; | ||
| 63 | object-fit: cover; | ||
| 64 | transition: background-color .2s, transform .2s, opacity .2s; | ||
| 74 | 65 | ||
| 75 | &:first-child { | 66 | &:first-child { |
| 76 | border-start-start-radius: calc(fn.dim(--rounding) - fn.dim(--border)); | 67 | border-start-start-radius: props.get(vars.$rounding); |
| 77 | border-start-end-radius: calc(fn.dim(--rounding) - fn.dim(--border)); | 68 | border-start-end-radius: props.get(vars.$rounding); |
| 78 | } | 69 | } |
| 79 | 70 | ||
| 80 | &:last-child { | 71 | &:last-child { |
| 81 | border-end-start-radius: calc(fn.dim(--rounding) - fn.dim(--border)); | 72 | border-end-start-radius: props.get(vars.$rounding); |
| 82 | border-end-end-radius: calc(fn.dim(--rounding) - fn.dim(--border)); | 73 | border-end-end-radius: props.get(vars.$rounding); |
| 83 | } | 74 | } |
| 84 | 75 | ||
| 85 | @include iro.bem-next-elem('avatar') { | 76 | @include bem.next-elem('avatar') { |
| 86 | margin-block-start: calc(-.7 * fn.foreign-dim(--avatar, --xl --size)); | 77 | margin-block-start: calc(-.7 * props.get(avatar.$size--xl)); |
| 87 | } | 78 | } |
| 88 | } | 79 | } |
| 89 | 80 | ||
| 90 | @include iro.bem-elem('body') { | 81 | @include bem.elem('image-img') { |
| 91 | padding-block: fn.dim(--pad-b); | 82 | display: block; |
| 92 | padding-inline: fn.dim(--pad-i); | 83 | inline-size: 100%; |
| 84 | object-fit: cover; | ||
| 85 | } | ||
| 86 | |||
| 87 | @include bem.elem('image-overlay') { | ||
| 88 | position: absolute; | ||
| 89 | inset-block-end: 0; | ||
| 90 | inset-inline: 0; | ||
| 91 | z-index: 5; | ||
| 92 | padding-block: props.get(vars.$image-overlay--pad-b); | ||
| 93 | padding-inline: props.get(vars.$image-overlay--pad-i); | ||
| 94 | } | ||
| 95 | |||
| 96 | @include bem.elem('body') { | ||
| 97 | flex: 1 0 auto; | ||
| 98 | padding-block: props.get(vars.$pad-b); | ||
| 99 | padding-inline: props.get(vars.$pad-i); | ||
| 93 | 100 | ||
| 94 | &::before { | 101 | &::before { |
| 95 | content: ''; | ||
| 96 | display: block; | 102 | display: block; |
| 97 | margin-block: -100em 100em; | 103 | margin-block: -100em 100em; |
| 104 | content: ''; | ||
| 105 | } | ||
| 106 | |||
| 107 | @include bem.modifier('hidden') { | ||
| 108 | position: absolute; | ||
| 109 | inset-block-end: 0; | ||
| 110 | inset-inline: 0; | ||
| 111 | z-index: 10; | ||
| 112 | visibility: hidden; | ||
| 113 | background-color: props.get(vars.$bg-color); | ||
| 114 | //border-end-start-radius: props.get(vars.$rounding); | ||
| 115 | //border-end-end-radius: props.get(vars.$rounding); | ||
| 116 | opacity: 0; | ||
| 117 | transition: | ||
| 118 | opacity .2s ease, | ||
| 119 | visibility 0s .2s linear; | ||
| 120 | |||
| 121 | @include bem.next-elem('image') { | ||
| 122 | border-start-start-radius: props.get(vars.$rounding); | ||
| 123 | border-start-end-radius: props.get(vars.$rounding); | ||
| 124 | } | ||
| 98 | } | 125 | } |
| 99 | } | 126 | } |
| 100 | 127 | ||
| 101 | @include iro.bem-elem('content') { | 128 | @include bem.elem('content') { |
| 102 | margin-block-start: fn.dim(--spacing); | 129 | margin-block-start: props.get(vars.$spacing); |
| 103 | } | 130 | } |
| 104 | 131 | ||
| 105 | @include iro.bem-elem('footer') { | 132 | @include bem.elem('footer') { |
| 106 | padding-block: 0 fn.dim(--pad-b); | 133 | flex: 0 0 auto; |
| 107 | padding-inline: fn.dim(--pad-i); | 134 | padding-block: 0 props.get(vars.$pad-b); |
| 108 | margin-block-start: calc(-1 * fn.dim(--pad-b)); | 135 | padding-inline: props.get(vars.$pad-i); |
| 136 | margin-block-start: calc(-1 * props.get(vars.$pad-b)); | ||
| 109 | 137 | ||
| 110 | &::before { | 138 | &::before { |
| 111 | content: ''; | ||
| 112 | display: block; | 139 | display: block; |
| 113 | block-size: fn.dim(--divider); | 140 | block-size: props.get(vars.$divider-width); |
| 114 | margin-block: fn.dim(--spacing); | 141 | margin-block: props.get(vars.$spacing); |
| 115 | background-color: fn.color(--divider); | 142 | content: ''; |
| 143 | background-color: props.get(vars.$divider-width); | ||
| 116 | } | 144 | } |
| 117 | } | 145 | } |
| 118 | 146 | ||
| 119 | @include iro.bem-modifier('quiet') { | 147 | @include bem.modifier('quiet') { |
| 120 | position: relative; | 148 | margin-inline: 0; |
| 121 | border: 0; | ||
| 122 | background-color: transparent; | 149 | background-color: transparent; |
| 150 | border: 0; | ||
| 123 | 151 | ||
| 124 | @include iro.bem-multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') { | 152 | @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') { |
| 125 | &:hover, | 153 | &:hover, |
| 126 | &:active { | 154 | &:active, |
| 127 | @include iro.bem-elem('image') { | 155 | &:focus-visible { |
| 156 | transform: none; | ||
| 157 | |||
| 158 | @include bem.elem('image') { | ||
| 159 | background-color: props.get(vars.$quiet--hover--image-color); | ||
| 128 | opacity: .75; | 160 | opacity: .75; |
| 129 | background-color: fn.color(--quiet --hover --image); | 161 | transform: translateY(props.get(vars.$hover--offset-b)); |
| 162 | } | ||
| 163 | |||
| 164 | @include bem.elem('body') { | ||
| 165 | @include bem.modifier('hidden') { | ||
| 166 | transform: translateY(props.get(vars.$hover--offset-b)); | ||
| 167 | } | ||
| 130 | } | 168 | } |
| 131 | } | 169 | } |
| 132 | 170 | ||
| @@ -134,32 +172,72 @@ | |||
| 134 | outline: none; | 172 | outline: none; |
| 135 | box-shadow: none; | 173 | box-shadow: none; |
| 136 | 174 | ||
| 137 | @include iro.bem-elem('image') { | 175 | @include bem.elem('image') { |
| 138 | outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border); | 176 | background-color: props.get(vars.$quiet--hover--image-color); |
| 177 | outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); | ||
| 178 | box-shadow: | ||
| 179 | 0 | ||
| 180 | 0 | ||
| 181 | 0 | ||
| 182 | calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) | ||
| 183 | props.get(vars.$key-focus--outline-color); | ||
| 139 | opacity: 1; | 184 | opacity: 1; |
| 140 | background-color: fn.color(--quiet --hover --image); | ||
| 141 | box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline); | ||
| 142 | } | 185 | } |
| 143 | } | 186 | } |
| 144 | } | 187 | } |
| 145 | 188 | ||
| 146 | @include iro.bem-elem('image') { | 189 | @include bem.elem('image') { |
| 147 | position: relative; | 190 | position: relative; |
| 148 | margin: calc(-1 * fn.dim(--key-focus --border)); | 191 | margin: calc(-1 * props.get(vars.$key-focus--border-width)); |
| 149 | border: fn.dim(--key-focus --border-offset) solid transparent; | 192 | background-color: props.get(vars.$quiet--image-color); |
| 150 | border-radius: calc(fn.dim(--rounding) + fn.dim(--key-focus --border-offset)); | ||
| 151 | background-color: fn.color(--quiet --image); | ||
| 152 | background-clip: padding-box; | 193 | background-clip: padding-box; |
| 194 | border: props.get(vars.$key-focus--border-offset) solid transparent; | ||
| 195 | border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset)); | ||
| 153 | } | 196 | } |
| 154 | 197 | ||
| 155 | @include iro.bem-elem('body') { | 198 | @include bem.elem('body') { |
| 156 | padding: 0; | 199 | padding: 0; |
| 157 | padding-block-start: fn.dim(--spacing); | 200 | padding-block-start: props.get(vars.$spacing); |
| 201 | |||
| 202 | @include bem.modifier('hidden') { | ||
| 203 | padding-block: props.get(vars.$pad-b); | ||
| 204 | padding-inline: props.get(vars.$pad-i); | ||
| 205 | } | ||
| 158 | } | 206 | } |
| 159 | 207 | ||
| 160 | @include iro.bem-elem('footer') { | 208 | @include bem.elem('footer') { |
| 161 | padding-inline: 0; | 209 | padding-inline: 0; |
| 162 | } | 210 | } |
| 163 | } | 211 | } |
| 212 | |||
| 213 | @include bem.modifier('horizontal') { | ||
| 214 | flex-direction: row; | ||
| 215 | align-items: center; | ||
| 216 | |||
| 217 | @include bem.elem('image') { | ||
| 218 | align-self: stretch; | ||
| 219 | inline-size: auto; | ||
| 220 | |||
| 221 | &:first-child { | ||
| 222 | border-start-end-radius: 0; | ||
| 223 | border-end-start-radius: props.get(vars.$rounding); | ||
| 224 | } | ||
| 225 | |||
| 226 | &:last-child { | ||
| 227 | border-start-end-radius: props.get(vars.$rounding); | ||
| 228 | border-end-start-radius: 0; | ||
| 229 | } | ||
| 230 | } | ||
| 231 | |||
| 232 | @include bem.elem('body') { | ||
| 233 | flex: 0 0 auto; | ||
| 234 | |||
| 235 | @include bem.modifier('main') { | ||
| 236 | flex-shrink: 1; | ||
| 237 | inline-size: 100%; | ||
| 238 | min-inline-size: 0; | ||
| 239 | } | ||
| 240 | } | ||
| 241 | } | ||
| 164 | } | 242 | } |
| 165 | } | 243 | } |
diff --git a/src/objects/_card.vars.scss b/src/objects/_card.vars.scss new file mode 100644 index 0000000..8adbcde --- /dev/null +++ b/src/objects/_card.vars.scss | |||
| @@ -0,0 +1,27 @@ | |||
| 1 | @use 'sass:map'; | ||
| 2 | @use 'iro-sass/src/props'; | ||
| 3 | @use '../core.vars' as core; | ||
| 4 | |||
| 5 | $divider-width: props.def(--o-card--divider-width, props.get(core.$border-width--thin)) !default; | ||
| 6 | $pad-i: props.def(--o-card--pad-i, props.get(core.$size--300)) !default; | ||
| 7 | $pad-b: props.def(--o-card--pad-b, props.get(core.$size--250)) !default; | ||
| 8 | $spacing: props.def(--o-card--spacing, props.get(core.$size--200)) !default; | ||
| 9 | $rounding: props.def(--o-card--rounding, props.get(core.$rounding)) !default; | ||
| 10 | $image-overlay--pad-i: props.def(--o-card--image-overlay--pad-i, props.get($pad-i)) !default; | ||
| 11 | $image-overlay--pad-b: props.def(--o-card--image-overlay--pad-b, props.get($pad-b)) !default; | ||
| 12 | |||
| 13 | $hover--offset-b: props.def(--o-card--hover--offset-b, calc(-1 * props.get(core.$size--65))) !default; | ||
| 14 | |||
| 15 | $key-focus--border-width: props.def(--o-card--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; | ||
| 16 | $key-focus--border-offset: props.def(--o-card--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; | ||
| 17 | $key-focus--outline-width: props.def(--o-card--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; | ||
| 18 | |||
| 19 | $bg-color: props.def(--o-card--bg-color, props.get(core.$theme, --bg-l2), 'color') !default; | ||
| 20 | $divider-color: props.def(--o-card--divider-color, props.get(core.$theme, --border-mute), 'color') !default; | ||
| 21 | |||
| 22 | $key-focus--label-color: props.def(--o-card--key-focus--label-color, props.get(core.$theme, --focus, --text), 'color') !default; | ||
| 23 | $key-focus--border-color: props.def(--o-card--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default; | ||
| 24 | $key-focus--outline-color: props.def(--o-card--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default; | ||
| 25 | |||
| 26 | $quiet--image-color: props.def(--o-card--quiet--image-color, props.get(core.$theme, --bg-base), 'color') !default; | ||
| 27 | $quiet--hover--image-color: props.def(--o-card--quiet--hover--image-color, props.get(core.$theme, --border), 'color') !default; | ||
diff --git a/src/objects/_checkbox.scss b/src/objects/_checkbox.scss index 8527948..82dd596 100644 --- a/src/objects/_checkbox.scss +++ b/src/objects/_checkbox.scss | |||
| @@ -1,165 +1,130 @@ | |||
| 1 | @use 'iro-sass/src/index' as iro; | 1 | @use 'sass:meta'; |
| 2 | @use '../functions' as fn; | 2 | @use 'iro-sass/src/bem'; |
| 3 | @use 'iro-sass/src/functions' as fn; | ||
| 4 | @use 'iro-sass/src/props'; | ||
| 5 | @use '../props' as *; | ||
| 6 | @use '../core.vars' as core; | ||
| 3 | 7 | ||
| 4 | @include iro.props-namespace('checkbox') { | 8 | @forward 'checkbox.vars'; |
| 5 | @include iro.props-store(( | 9 | @use 'checkbox.vars' as vars; |
| 6 | --dims: ( | ||
| 7 | --size: fn.global-dim(--size --175), | ||
| 8 | --label-gap: fn.global-dim(--size --125), | ||
| 9 | --border: fn.global-dim(--border --medium), | ||
| 10 | --pad-i: fn.global-dim(--size --65), | ||
| 11 | --pad-b: fn.global-dim(--size --65), | ||
| 12 | --rounding: fn.global-dim(--rounding), | ||
| 13 | --spacing-sibling: fn.global-dim(--size --300), | ||
| 14 | 10 | ||
| 15 | --key-focus: ( | 11 | @mixin styles { |
| 16 | --border: fn.global-dim(--key-focus --border), | 12 | @include materialize-at-root(meta.module-variables('vars')); |
| 17 | --border-offset: fn.global-dim(--key-focus --border-offset), | ||
| 18 | --outline: fn.global-dim(--key-focus --outline), | ||
| 19 | ), | ||
| 20 | ), | ||
| 21 | --colors: ( | ||
| 22 | --box-border: fn.global-color(--text-mute-more), | ||
| 23 | --box-bg: fn.global-color(--base --75), | ||
| 24 | |||
| 25 | --hover: ( | ||
| 26 | --label: fn.global-color(--heading), | ||
| 27 | --box-border: fn.global-color(--text-mute), | ||
| 28 | ), | ||
| 29 | --accent: ( | ||
| 30 | --box-border: fn.global-color(--accent --900), | ||
| 31 | |||
| 32 | --hover: ( | ||
| 33 | --box-border: fn.global-color(--accent --1000), | ||
| 34 | ), | ||
| 35 | ), | ||
| 36 | --disabled: ( | ||
| 37 | --label: fn.global-color(--text-disabled), | ||
| 38 | --box-border: fn.global-color(--border-strong), | ||
| 39 | --box-bg: fn.global-color(--base --75), | ||
| 40 | ), | ||
| 41 | --key-focus: ( | ||
| 42 | --label: fn.global-color(--focus --text), | ||
| 43 | --border: fn.global-color(--focus --border), | ||
| 44 | --outline: fn.global-color(--focus --outline), | ||
| 45 | ), | ||
| 46 | ), | ||
| 47 | )); | ||
| 48 | 13 | ||
| 49 | @include iro.bem-object(iro.props-namespace()) { | 14 | @include bem.object('checkbox') { |
| 50 | display: inline-block; | ||
| 51 | position: relative; | 15 | position: relative; |
| 16 | display: inline-block; | ||
| 17 | padding-block: props.get(vars.$pad-b); | ||
| 18 | padding-inline: props.get(vars.$pad-i); | ||
| 52 | margin-inline: | 19 | margin-inline: |
| 53 | calc(-1 * fn.dim(--pad-i) - fn.dim(--key-focus --border-offset)) | 20 | calc(-1 * props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset)) |
| 54 | calc(fn.dim(--spacing-sibling) - fn.dim(--pad-b) - fn.dim(--key-focus --border-offset)); | 21 | calc(props.get(vars.$spacing-sibling) - props.get(vars.$pad-b) - props.get(vars.$key-focus--border-offset)); |
| 55 | padding-block: fn.dim(--pad-b); | ||
| 56 | padding-inline: fn.dim(--pad-i); | ||
| 57 | 22 | ||
| 58 | @include iro.bem-elem('box') { | 23 | @include bem.elem('box') { |
| 59 | display: inline-block; | ||
| 60 | position: relative; | 24 | position: relative; |
| 25 | display: inline-block; | ||
| 61 | flex: 0 0 auto; | 26 | flex: 0 0 auto; |
| 62 | inline-size: fn.dim(--size); | 27 | inline-size: props.get(vars.$size); |
| 63 | block-size: fn.dim(--size); | 28 | block-size: props.get(vars.$size); |
| 64 | margin-block-start: calc(.5em * fn.global-dim(--font --standard --line-height) - .5 * fn.dim(--size) - fn.dim(--key-focus --border-offset)); | 29 | margin-block-start: calc(.5em * props.get(core.$font--standard--line-height) - .5 * props.get(vars.$size) - props.get(vars.$key-focus--border-offset)); |
| 65 | border: fn.dim(--key-focus --border-offset) solid transparent; | ||
| 66 | border-radius: calc(fn.dim(--border) + fn.dim(--key-focus --border-offset)); | ||
| 67 | background-color: fn.color(--box-border); | ||
| 68 | background-clip: padding-box; | ||
| 69 | vertical-align: top; | 30 | vertical-align: top; |
| 31 | background-color: props.get(vars.$box-border-color); | ||
| 32 | background-clip: padding-box; | ||
| 33 | border: props.get(vars.$key-focus--border-offset) solid transparent; | ||
| 34 | border-radius: calc(props.get(vars.$border-width) + props.get(vars.$key-focus--border-offset)); | ||
| 70 | 35 | ||
| 71 | &::before, | 36 | &::before, |
| 72 | &::after { | 37 | &::after { |
| 73 | content: ''; | ||
| 74 | display: block; | ||
| 75 | position: absolute; | 38 | position: absolute; |
| 39 | display: block; | ||
| 40 | content: ''; | ||
| 76 | } | 41 | } |
| 77 | 42 | ||
| 78 | &::before { | 43 | &::before { |
| 44 | inset-block-start: props.get(vars.$border-width); | ||
| 45 | inset-inline-start: props.get(vars.$border-width); | ||
| 79 | z-index: 2; | 46 | z-index: 2; |
| 80 | inset-block-start: fn.dim(--border); | 47 | inline-size: calc(props.get(vars.$size) - 2 * props.get(vars.$border-width)); |
| 81 | inset-inline-start: fn.dim(--border); | 48 | block-size: calc(props.get(vars.$size) - 2 * props.get(vars.$border-width)); |
| 82 | inline-size: calc(fn.dim(--size) - 2 * fn.dim(--border)); | 49 | background-color: props.get(vars.$box-bg-color); |
| 83 | block-size: calc(fn.dim(--size) - 2 * fn.dim(--border)); | ||
| 84 | transition: transform .2s ease; | 50 | transition: transform .2s ease; |
| 85 | background-color: fn.color(--box-bg); | ||
| 86 | } | 51 | } |
| 87 | 52 | ||
| 88 | &::after { | 53 | &::after { |
| 54 | inset-block-start: calc(.5 * props.get(vars.$size) - 1px); | ||
| 55 | inset-inline-start: calc(1.5 * props.get(vars.$border-width)); | ||
| 89 | z-index: 3; | 56 | z-index: 3; |
| 90 | inset-block-start: calc(.5 * fn.dim(--size) - 1px); | ||
| 91 | inset-inline-start: calc(1.5 * fn.dim(--border)); | ||
| 92 | box-sizing: border-box; | 57 | box-sizing: border-box; |
| 93 | inline-size: calc(fn.dim(--size) - 3 * fn.dim(--border)); | 58 | inline-size: calc(props.get(vars.$size) - 3 * props.get(vars.$border-width)); |
| 94 | block-size: 0; | 59 | block-size: 0; |
| 95 | transform: scale(0); | 60 | border-color: props.get(vars.$box-bg-color); |
| 61 | border-style: solid; | ||
| 62 | border-radius: 2px; | ||
| 96 | transition: transform .2s ease; | 63 | transition: transform .2s ease; |
| 64 | transform: scale(0); | ||
| 97 | border-block-width: 0 2px; | 65 | border-block-width: 0 2px; |
| 98 | border-inline-width: 0 2px; | 66 | border-inline-width: 0 2px; |
| 99 | border-style: solid; | ||
| 100 | border-radius: 2px; | ||
| 101 | border-color: fn.color(--box-bg); | ||
| 102 | } | 67 | } |
| 103 | } | 68 | } |
| 104 | 69 | ||
| 105 | @include iro.bem-elem('check-icon') { | 70 | @include bem.elem('check-icon') { |
| 106 | display: block; | ||
| 107 | position: absolute; | 71 | position: absolute; |
| 72 | inset-block-start: calc(1 * props.get(vars.$border-width)); | ||
| 73 | inset-inline-start: calc(1 * props.get(vars.$border-width)); | ||
| 108 | z-index: 2; | 74 | z-index: 2; |
| 109 | inset-block-start: calc(1 * fn.dim(--border)); | 75 | display: block; |
| 110 | inset-inline-start: calc(1 * fn.dim(--border)); | 76 | inline-size: calc(100% - 2 * props.get(vars.$border-width)); |
| 111 | inline-size: calc(100% - 2 * fn.dim(--border)); | 77 | block-size: calc(100% - 2 * props.get(vars.$border-width)); |
| 112 | block-size: calc(100% - 2 * fn.dim(--border)); | ||
| 113 | margin: 0; | 78 | margin: 0; |
| 79 | color: props.get(vars.$box-bg-color); | ||
| 80 | stroke-width: fn.px-to-rem(3px); | ||
| 81 | transition: transform .2s ease; | ||
| 114 | transform: scale(0); | 82 | transform: scale(0); |
| 115 | transform-origin: 40% 90%; | 83 | transform-origin: 40% 90%; |
| 116 | transition: transform .2s ease; | ||
| 117 | stroke-width: iro.fn-px-to-rem(3px); | ||
| 118 | color: fn.color(--box-bg); | ||
| 119 | } | 84 | } |
| 120 | 85 | ||
| 121 | @include iro.bem-elem('label') { | 86 | @include bem.elem('label') { |
| 122 | margin-inline-start: calc(fn.dim(--label-gap) - fn.dim(--key-focus --border-offset)); | 87 | margin-inline-start: calc(props.get(vars.$label-gap) - props.get(vars.$key-focus--border-offset)); |
| 123 | } | 88 | } |
| 124 | 89 | ||
| 125 | @include iro.bem-elem('native') { | 90 | @include bem.elem('native') { |
| 126 | appearance: none; | ||
| 127 | position: absolute; | 91 | position: absolute; |
| 128 | z-index: -1; | ||
| 129 | inset-block-start: 0; | 92 | inset-block-start: 0; |
| 130 | inset-inline-start: 0; | 93 | inset-inline-start: 0; |
| 94 | z-index: -1; | ||
| 131 | inline-size: 100%; | 95 | inline-size: 100%; |
| 132 | block-size: 100%; | 96 | block-size: 100%; |
| 133 | margin: 0; | ||
| 134 | padding: 0; | 97 | padding: 0; |
| 98 | margin: 0; | ||
| 135 | overflow: hidden; | 99 | overflow: hidden; |
| 136 | border-radius: fn.dim(--rounding); | 100 | appearance: none; |
| 101 | border-radius: props.get(vars.$rounding); | ||
| 137 | 102 | ||
| 138 | &:hover, | 103 | &:hover, |
| 139 | &:focus-visible { | 104 | &:focus-visible { |
| 140 | @include iro.bem-sibling-elem('label') { | 105 | @include bem.sibling-elem('label') { |
| 141 | color: fn.color(--hover --label); | 106 | color: props.get(vars.$hover--label-color); |
| 142 | } | 107 | } |
| 143 | 108 | ||
| 144 | @include iro.bem-sibling-elem('box') { | 109 | @include bem.sibling-elem('box') { |
| 145 | background-color: fn.color(--hover --box-border); | 110 | background-color: props.get(vars.$hover--box-border-color); |
| 146 | } | 111 | } |
| 147 | } | 112 | } |
| 148 | 113 | ||
| 149 | &:checked { | 114 | &:checked { |
| 150 | @include iro.bem-sibling-elem('box') { | 115 | @include bem.sibling-elem('box') { |
| 151 | &::before { | 116 | &::before { |
| 152 | transform: scale(0); | 117 | transform: scale(0); |
| 153 | } | 118 | } |
| 154 | 119 | ||
| 155 | @include iro.bem-elem('check-icon') { | 120 | @include bem.elem('check-icon') { |
| 156 | transform: scale(1); | 121 | transform: scale(1); |
| 157 | } | 122 | } |
| 158 | } | 123 | } |
| 159 | } | 124 | } |
| 160 | 125 | ||
| 161 | &:indeterminate { | 126 | &:indeterminate { |
| 162 | @include iro.bem-sibling-elem('box') { | 127 | @include bem.sibling-elem('box') { |
| 163 | &::before { | 128 | &::before { |
| 164 | transform: scale(0); | 129 | transform: scale(0); |
| 165 | } | 130 | } |
| @@ -168,90 +133,95 @@ | |||
| 168 | transform: scale(1); | 133 | transform: scale(1); |
| 169 | } | 134 | } |
| 170 | 135 | ||
| 171 | @include iro.bem-elem('check-icon') { | 136 | @include bem.elem('check-icon') { |
| 172 | transform: scale(0); | 137 | transform: scale(0); |
| 173 | } | 138 | } |
| 174 | } | 139 | } |
| 175 | } | 140 | } |
| 176 | 141 | ||
| 177 | &:disabled { | 142 | &:disabled { |
| 178 | @include iro.bem-sibling-elem('label') { | 143 | @include bem.sibling-elem('label') { |
| 179 | color: fn.color(--disabled --label); | 144 | color: props.get(vars.$disabled--label-color); |
| 180 | } | 145 | } |
| 181 | 146 | ||
| 182 | @include iro.bem-sibling-elem('box') { | 147 | @include bem.sibling-elem('box') { |
| 183 | background-color: fn.color(--disabled --box-border); | 148 | background-color: props.get(vars.$disabled--box-border-color); |
| 184 | 149 | ||
| 185 | &::before { | 150 | &::before { |
| 186 | background-color: fn.color(--disabled --box-bg); | 151 | background-color: props.get(vars.$disabled--box-bg-color); |
| 187 | } | 152 | } |
| 188 | } | 153 | } |
| 189 | } | 154 | } |
| 190 | 155 | ||
| 191 | &:focus-visible { | 156 | &:focus-visible { |
| 192 | @include iro.bem-sibling-elem('label') { | 157 | @include bem.sibling-elem('label') { |
| 193 | color: fn.color(--key-focus --label); | 158 | color: props.get(vars.$key-focus--label-color); |
| 194 | } | 159 | } |
| 195 | 160 | ||
| 196 | @include iro.bem-sibling-elem('box') { | 161 | @include bem.sibling-elem('box') { |
| 197 | outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border); | 162 | outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); |
| 198 | box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline); | 163 | box-shadow: |
| 164 | 0 | ||
| 165 | 0 | ||
| 166 | 0 | ||
| 167 | calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) | ||
| 168 | props.get(vars.$key-focus--outline-color); | ||
| 199 | } | 169 | } |
| 200 | } | 170 | } |
| 201 | } | 171 | } |
| 202 | 172 | ||
| 203 | @include iro.bem-modifier('standalone') { | 173 | @include bem.modifier('standalone') { |
| 204 | @include iro.bem-elem('box') { | 174 | @include bem.elem('box') { |
| 205 | margin-block-start: 0; | 175 | margin-block-start: 0; |
| 206 | } | 176 | } |
| 207 | } | 177 | } |
| 208 | 178 | ||
| 209 | @include iro.bem-modifier('accent') { | 179 | @include bem.modifier('accent') { |
| 210 | @include iro.bem-elem('native') { | 180 | @include bem.elem('native') { |
| 211 | &:checked { | 181 | &:checked { |
| 212 | @include iro.bem-sibling-elem('box') { | 182 | @include bem.sibling-elem('box') { |
| 213 | background-color: fn.color(--accent --box-border); | 183 | background-color: props.get(vars.$accent--box-border-color); |
| 214 | } | 184 | } |
| 215 | 185 | ||
| 216 | &:hover, | 186 | &:hover, |
| 217 | &:focus-visible { | 187 | &:focus-visible { |
| 218 | @include iro.bem-sibling-elem('box') { | 188 | @include bem.sibling-elem('box') { |
| 219 | background-color: fn.color(--accent --hover --box-border); | 189 | background-color: props.get(vars.$accent--hover--box-border-color); |
| 220 | } | 190 | } |
| 221 | } | 191 | } |
| 222 | } | 192 | } |
| 223 | 193 | ||
| 224 | &:indeterminate { | 194 | &:indeterminate { |
| 225 | @include iro.bem-sibling-elem('box') { | 195 | @include bem.sibling-elem('box') { |
| 226 | background-color: fn.color(--accent --box-border); | 196 | background-color: props.get(vars.$accent--box-border-color); |
| 227 | } | 197 | } |
| 228 | 198 | ||
| 229 | &:hover, | 199 | &:hover, |
| 230 | &:focus-visible { | 200 | &:focus-visible { |
| 231 | @include iro.bem-sibling-elem('box') { | 201 | @include bem.sibling-elem('box') { |
| 232 | background-color: fn.color(--accent --hover --box-border); | 202 | background-color: props.get(vars.$accent--hover--box-border-color); |
| 233 | } | 203 | } |
| 234 | } | 204 | } |
| 235 | } | 205 | } |
| 236 | 206 | ||
| 237 | &:disabled { | 207 | &:disabled { |
| 238 | @include iro.bem-sibling-elem('box') { | 208 | @include bem.sibling-elem('box') { |
| 239 | background-color: fn.color(--disabled --box-border); | 209 | background-color: props.get(vars.$disabled--box-border-color); |
| 240 | 210 | ||
| 241 | &::before { | 211 | &::before { |
| 242 | background-color: fn.color(--disabled --box-bg); | 212 | background-color: props.get(vars.$disabled--box-bg-color); |
| 243 | } | 213 | } |
| 244 | } | 214 | } |
| 245 | 215 | ||
| 246 | &:checked { | 216 | &:checked { |
| 247 | @include iro.bem-sibling-elem('box') { | 217 | @include bem.sibling-elem('box') { |
| 248 | background-color: fn.color(--disabled --box-border); | 218 | background-color: props.get(vars.$disabled--box-border-color); |
| 249 | } | 219 | } |
| 250 | } | 220 | } |
| 251 | 221 | ||
| 252 | &:indeterminate { | 222 | &:indeterminate { |
| 253 | @include iro.bem-sibling-elem('box') { | 223 | @include bem.sibling-elem('box') { |
| 254 | background-color: fn.color(--disabled --box-border); | 224 | background-color: props.get(vars.$disabled--box-border-color); |
| 255 | } | 225 | } |
| 256 | } | 226 | } |
| 257 | } | 227 | } |
diff --git a/src/objects/_checkbox.vars.scss b/src/objects/_checkbox.vars.scss new file mode 100644 index 0000000..aee26e6 --- /dev/null +++ b/src/objects/_checkbox.vars.scss | |||
| @@ -0,0 +1,32 @@ | |||
| 1 | @use 'sass:map'; | ||
| 2 | @use 'iro-sass/src/props'; | ||
| 3 | @use '../core.vars' as core; | ||
| 4 | |||
| 5 | $size: props.def(--o-checkbox--size, props.get(core.$size--175)) !default; | ||
| 6 | $label-gap: props.def(--o-checkbox--label-gap, props.get(core.$size--125)) !default; | ||
| 7 | $border-width: props.def(--o-checkbox--border-width, props.get(core.$border-width--medium)) !default; | ||
| 8 | $pad-i: props.def(--o-checkbox--pad-i, props.get(core.$size--65)) !default; | ||
| 9 | $pad-b: props.def(--o-checkbox--pad-b, props.get(core.$size--65)) !default; | ||
| 10 | $rounding: props.def(--o-checkbox--rounding, props.get(core.$rounding)) !default; | ||
| 11 | $spacing-sibling: props.def(--o-checkbox--spacing-sibling, props.get(core.$size--300)) !default; | ||
| 12 | |||
| 13 | $key-focus--border-width: props.def(--o-checkbox--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; | ||
| 14 | $key-focus--border-offset: props.def(--o-checkbox--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; | ||
| 15 | $key-focus--outline-width: props.def(--o-checkbox--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; | ||
| 16 | |||
| 17 | $box-border-color: props.def(--o-checkbox--box-border-color, props.get(core.$theme, --text-mute-more), 'color') !default; | ||
| 18 | $box-bg-color: props.def(--o-checkbox--box-bg-color, props.get(core.$theme, --base, --75), 'color') !default; | ||
| 19 | |||
| 20 | $hover--label-color: props.def(--o-checkbox--hover--label-color, props.get(core.$theme, --heading), 'color') !default; | ||
| 21 | $hover--box-border-color: props.def(--o-checkbox--hover--box-border-color, props.get(core.$theme, --text-mute), 'color') !default; | ||
| 22 | |||
| 23 | $accent--box-border-color: props.def(--o-checkbox--accent--box-border-color, props.get(core.$theme, --accent, --900), 'color') !default; | ||
| 24 | $accent--hover--box-border-color: props.def(--o-checkbox--accent--hover--box-border-color, props.get(core.$theme, --accent, --1000), 'color') !default; | ||
| 25 | |||
| 26 | $disabled--label-color: props.def(--o-checkbox--disabled--label-color, props.get(core.$theme, --text-disabled), 'color') !default; | ||
| 27 | $disabled--box-border-color: props.def(--o-checkbox--disabled--box-border-color, props.get(core.$theme, --border-strong), 'color') !default; | ||
| 28 | $disabled--box-bg-color: props.def(--o-checkbox--disabled--box-bg-color, props.get(core.$theme, --base, --75), 'color') !default; | ||
| 29 | |||
| 30 | $key-focus--label-color: props.def(--o-checkbox--key-focus--label-color, props.get(core.$theme, --focus, --text), 'color') !default; | ||
| 31 | $key-focus--border-color: props.def(--o-checkbox--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default; | ||
| 32 | $key-focus--outline-color: props.def(--o-checkbox--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default; | ||
diff --git a/src/objects/_divider.scss b/src/objects/_divider.scss index d1e2897..4ed8092 100644 --- a/src/objects/_divider.scss +++ b/src/objects/_divider.scss | |||
| @@ -1,115 +1,69 @@ | |||
| 1 | @use 'sass:map'; | 1 | @use 'sass:map'; |
| 2 | @use 'iro-sass/src/index' as iro; | 2 | @use 'sass:meta'; |
| 3 | @use '../functions' as fn; | 3 | @use 'sass:string'; |
| 4 | @use '../config'; | 4 | @use 'iro-sass/src/bem'; |
| 5 | 5 | @use 'iro-sass/src/props'; | |
| 6 | $static-themes: 'black' 'white' !default; | 6 | @use '../props' as *; |
| 7 | 7 | @use '../core.vars' as core; | |
| 8 | @include iro.props-namespace('divider') { | 8 | |
| 9 | @include iro.props-store(( | 9 | @forward 'divider.vars'; |
| 10 | --dims: ( | 10 | @use 'divider.vars' as vars; |
| 11 | --margin-b: fn.global-dim(--size --85), | 11 | |
| 12 | 12 | @mixin styles { | |
| 13 | --strong: ( | 13 | @include materialize-at-root(meta.module-variables('vars')); |
| 14 | --border: fn.global-dim(--border --thick), | 14 | |
| 15 | --label-font-size: fn.global-dim(--font-size --100), | 15 | @include bem.object('divider') { |
| 16 | ), | 16 | display: flex; |
| 17 | --medium: ( | 17 | flex: 0 0 auto; |
| 18 | --border: fn.global-dim(--border --medium), | 18 | flex-direction: row; |
| 19 | --label-font-size: fn.global-dim(--font-size --75), | 19 | align-items: center; |
| 20 | ), | 20 | block-size: 1em; |
| 21 | --faint: ( | 21 | margin-block: props.get(vars.$margin-b); |
| 22 | --border: fn.global-dim(--border --thin), | 22 | font-size: props.get(vars.$strong--label-font-size); |
| 23 | --label-font-size: fn.global-dim(--font-size --50), | 23 | font-weight: 700; |
| 24 | ), | 24 | line-height: 1; |
| 25 | ), | 25 | color: props.get(vars.$strong--label-color); |
| 26 | --colors: ( | 26 | text-transform: uppercase; |
| 27 | --strong: ( | 27 | letter-spacing: .5px; |
| 28 | --bg: fn.global-color(--text), | 28 | background-color: transparent; |
| 29 | --label: fn.global-color(--text), | ||
| 30 | ), | ||
| 31 | --medium: ( | ||
| 32 | --bg: fn.global-color(--border), | ||
| 33 | --label: fn.global-color(--text-mute), | ||
| 34 | ), | ||
| 35 | --faint: ( | ||
| 36 | --bg: fn.global-color(--border), | ||
| 37 | --label: fn.global-color(--text-mute-more), | ||
| 38 | ), | ||
| 39 | ), | ||
| 40 | )); | ||
| 41 | |||
| 42 | @each $color in map.keys(map.get(config.$themes, config.$theme-default, --palettes)) { | ||
| 43 | @if $color != '--base' { | ||
| 44 | @include iro.props-store(( | ||
| 45 | --colors: ( | ||
| 46 | $color: ( | ||
| 47 | --bg: fn.global-color($color --800), | ||
| 48 | --label: fn.global-color($color --1000), | ||
| 49 | ) | ||
| 50 | ), | ||
| 51 | )); | ||
| 52 | } | ||
| 53 | } | ||
| 54 | |||
| 55 | @each $theme in $static-themes { | ||
| 56 | @include iro.props-store(( | ||
| 57 | --colors: ( | ||
| 58 | --static-#{$theme}: ( | ||
| 59 | --strong: ( | ||
| 60 | --bg: fn.global-color(--#{$theme}-transparent --800), | ||
| 61 | --label: fn.global-color(--#{$theme}-transparent --900), | ||
| 62 | ), | ||
| 63 | --medium: ( | ||
| 64 | --bg: fn.global-color(--#{$theme}-transparent --300), | ||
| 65 | --label: fn.global-color(--#{$theme}-transparent --500), | ||
| 66 | ), | ||
| 67 | --faint: ( | ||
| 68 | --bg: fn.global-color(--#{$theme}-transparent --300), | ||
| 69 | --label: fn.global-color(--#{$theme}-transparent --500), | ||
| 70 | ), | ||
| 71 | ) | ||
| 72 | ), | ||
| 73 | )); | ||
| 74 | } | ||
| 75 | |||
| 76 | @include iro.bem-object(iro.props-namespace()) { | ||
| 77 | display: flex; | ||
| 78 | flex: 0 0 auto; | ||
| 79 | flex-direction: row; | ||
| 80 | align-items: center; | ||
| 81 | block-size: 1em; | ||
| 82 | margin-block: fn.dim(--margin-b); | ||
| 83 | color: fn.color(--strong --label); | ||
| 84 | font-size: fn.dim(--strong --label-font-size); | ||
| 85 | font-weight: 700; | ||
| 86 | letter-spacing: .5px; | ||
| 87 | line-height: 1; | ||
| 88 | text-transform: uppercase; | ||
| 89 | 29 | ||
| 90 | &::before, | 30 | &::before, |
| 91 | &::after { | 31 | &::after { |
| 92 | content: ''; | ||
| 93 | flex: 1 1 auto; | 32 | flex: 1 1 auto; |
| 94 | inline-size: 100%; | 33 | inline-size: 100%; |
| 95 | block-size: fn.dim(--strong --border); | 34 | block-size: props.get(vars.$strong--border-width); |
| 96 | background-color: fn.color(--strong --bg); | 35 | content: ''; |
| 36 | background-color: props.get(vars.$strong--bg-color); | ||
| 97 | } | 37 | } |
| 98 | 38 | ||
| 99 | &::before { | 39 | &::before { |
| 100 | display: block; | 40 | display: block; |
| 101 | } | 41 | } |
| 102 | 42 | ||
| 103 | @include iro.bem-elem('label') { | 43 | @include bem.elem('label') { |
| 104 | flex: 0 0 auto; | 44 | flex: 0 0 auto; |
| 105 | } | 45 | } |
| 106 | 46 | ||
| 107 | @include iro.bem-modifier('vertical') { | 47 | @include bem.modifier('vertical') { |
| 108 | align-self: stretch; | 48 | align-self: stretch; |
| 109 | inline-size: 1px; | 49 | inline-size: props.get(vars.$vertical--border-width); |
| 110 | block-size: auto; | 50 | block-size: auto; |
| 111 | margin-block: 0; | 51 | margin-block: 0; |
| 112 | background-color: fn.color(--faint --bg); | 52 | background-color: props.get(vars.$strong--bg-color); |
| 53 | |||
| 54 | &::before, | ||
| 55 | &::after { | ||
| 56 | display: none; | ||
| 57 | } | ||
| 58 | } | ||
| 59 | |||
| 60 | @include bem.modifier('dot') { | ||
| 61 | align-self: center; | ||
| 62 | inline-size: props.get(vars.$dot--size); | ||
| 63 | block-size: props.get(vars.$dot--size); | ||
| 64 | margin-block: 0; | ||
| 65 | background-color: props.get(vars.$strong--bg-color); | ||
| 66 | border-radius: props.get(vars.$dot--size); | ||
| 113 | 67 | ||
| 114 | &::before, | 68 | &::before, |
| 115 | &::after { | 69 | &::after { |
| @@ -117,31 +71,47 @@ $static-themes: 'black' 'white' !default; | |||
| 117 | } | 71 | } |
| 118 | } | 72 | } |
| 119 | 73 | ||
| 120 | @include iro.bem-modifier('medium') { | 74 | @include bem.modifier('medium') { |
| 121 | color: fn.color(--medium --label); | 75 | font-size: props.get(vars.$medium--label-font-size); |
| 122 | font-size: fn.dim(--medium --label-font-size); | ||
| 123 | font-weight: 500; | 76 | font-weight: 500; |
| 77 | color: props.get(vars.$medium--label-color); | ||
| 124 | 78 | ||
| 125 | &::before, | 79 | &::before, |
| 126 | &::after { | 80 | &::after { |
| 127 | block-size: fn.dim(--medium --border); | 81 | block-size: props.get(vars.$medium--border-width); |
| 128 | background-color: fn.color(--medium --bg); | 82 | background-color: props.get(vars.$medium--bg-color); |
| 83 | } | ||
| 84 | |||
| 85 | @include bem.modifier('vertical') { | ||
| 86 | background-color: props.get(vars.$medium--bg-color); | ||
| 87 | } | ||
| 88 | |||
| 89 | @include bem.modifier('dot') { | ||
| 90 | background-color: props.get(vars.$medium--bg-color); | ||
| 129 | } | 91 | } |
| 130 | } | 92 | } |
| 131 | 93 | ||
| 132 | @include iro.bem-modifier('faint') { | 94 | @include bem.modifier('faint') { |
| 133 | color: fn.color(--faint --label); | 95 | font-size: props.get(vars.$faint--label-font-size); |
| 134 | font-size: fn.dim(--faint --label-font-size); | ||
| 135 | font-weight: 500; | 96 | font-weight: 500; |
| 97 | color: props.get(vars.$faint--label-color); | ||
| 136 | 98 | ||
| 137 | &::before, | 99 | &::before, |
| 138 | &::after { | 100 | &::after { |
| 139 | block-size: fn.dim(--faint --border); | 101 | block-size: props.get(vars.$faint--border-width); |
| 140 | background-color: fn.color(--faint --bg); | 102 | background-color: props.get(vars.$faint--bg-color); |
| 103 | } | ||
| 104 | |||
| 105 | @include bem.modifier('vertical') { | ||
| 106 | background-color: props.get(vars.$vertical--faint--bg-color); | ||
| 107 | } | ||
| 108 | |||
| 109 | @include bem.modifier('dot') { | ||
| 110 | background-color: props.get(vars.$dot--faint--bg-color); | ||
| 141 | } | 111 | } |
| 142 | } | 112 | } |
| 143 | 113 | ||
| 144 | @include iro.bem-modifier('labelled') { | 114 | @include bem.modifier('labelled') { |
| 145 | &::before { | 115 | &::before { |
| 146 | margin-inline-end: 1em; | 116 | margin-inline-end: 1em; |
| 147 | } | 117 | } |
| @@ -152,49 +122,49 @@ $static-themes: 'black' 'white' !default; | |||
| 152 | } | 122 | } |
| 153 | } | 123 | } |
| 154 | 124 | ||
| 155 | @each $color in 'blue' 'purple' 'red' 'green' 'yellow' { | 125 | @each $theme in map.keys(props.get(vars.$themes)) { |
| 156 | @include iro.bem-modifier($color) { | 126 | @include bem.modifier(string.slice($theme, 3)) { |
| 157 | &::before, | 127 | &::before, |
| 158 | &::after { | 128 | &::after { |
| 159 | background-color: fn.color(--#{$color} --bg); | 129 | background-color: props.get(vars.$themes, $theme, --bg); |
| 160 | } | 130 | } |
| 161 | 131 | ||
| 162 | @include iro.bem-elem('label') { | 132 | @include bem.elem('label') { |
| 163 | color: fn.color(--#{$color} --label); | 133 | color: props.get(vars.$themes, $theme, --label); |
| 164 | } | 134 | } |
| 165 | } | 135 | } |
| 166 | } | 136 | } |
| 167 | 137 | ||
| 168 | @each $theme in $static-themes { | 138 | @each $theme in map.keys(props.get(vars.$static-themes)) { |
| 169 | @include iro.bem-modifier(static-#{$theme}) { | 139 | @include bem.modifier(string.slice($theme, 3)) { |
| 170 | &::before, | 140 | &::before, |
| 171 | &::after { | 141 | &::after { |
| 172 | background-color: fn.color(--static-#{$theme} --strong --bg); | 142 | background-color: props.get(vars.$static-themes, $theme, --strong, --bg); |
| 173 | } | 143 | } |
| 174 | 144 | ||
| 175 | @include iro.bem-elem('label') { | 145 | @include bem.elem('label') { |
| 176 | color: fn.color(--static-#{$theme} --strong --label); | 146 | color: props.get(vars.$static-themes, $theme, --strong, --label); |
| 177 | } | 147 | } |
| 178 | 148 | ||
| 179 | @include iro.bem-modifier('medium') { | 149 | @include bem.modifier('medium') { |
| 180 | &::before, | 150 | &::before, |
| 181 | &::after { | 151 | &::after { |
| 182 | background-color: fn.color(--static-#{$theme} --medium --bg); | 152 | background-color: props.get(vars.$static-themes, $theme, --medium, --bg); |
| 183 | } | 153 | } |
| 184 | 154 | ||
| 185 | @include iro.bem-elem('label') { | 155 | @include bem.elem('label') { |
| 186 | color: fn.color(--static-#{$theme} --medium --label); | 156 | color: props.get(vars.$static-themes, $theme, --medium, --label); |
| 187 | } | 157 | } |
| 188 | } | 158 | } |
| 189 | 159 | ||
| 190 | @include iro.bem-modifier('faint') { | 160 | @include bem.modifier('faint') { |
| 191 | &::before, | 161 | &::before, |
| 192 | &::after { | 162 | &::after { |
| 193 | background-color: fn.color(--static-#{$theme} --faint --bg); | 163 | background-color: props.get(vars.$static-themes, $theme, --faint, --bg); |
| 194 | } | 164 | } |
| 195 | 165 | ||
| 196 | @include iro.bem-elem('label') { | 166 | @include bem.elem('label') { |
| 197 | color: fn.color(--static-#{$theme} --faint --label); | 167 | color: props.get(vars.$static-themes, $theme, --faint, --label); |
| 198 | } | 168 | } |
| 199 | } | 169 | } |
| 200 | } | 170 | } |
diff --git a/src/objects/_divider.vars.scss b/src/objects/_divider.vars.scss new file mode 100644 index 0000000..5cd68c1 --- /dev/null +++ b/src/objects/_divider.vars.scss | |||
| @@ -0,0 +1,69 @@ | |||
| 1 | @use 'sass:map'; | ||
| 2 | @use 'sass:string'; | ||
| 3 | @use 'iro-sass/src/props'; | ||
| 4 | @use '../core.vars' as core; | ||
| 5 | |||
| 6 | $margin-b: props.def(--o-divider--size, props.get(core.$size--85)) !default; | ||
| 7 | $vertical--border-width: props.def(--o-divider--vertical--width, props.get(core.$border-width--thin)) !default; | ||
| 8 | $dot--size: props.def(--o-divider--dot--size, props.get(core.$size--50)) !default; | ||
| 9 | |||
| 10 | $strong--border-width: props.def(--o-divider--strong--border-width, props.get(core.$border-width--thick)) !default; | ||
| 11 | $strong--label-font-size: props.def(--o-divider--strong--label-font-size, props.get(core.$font-size--100)) !default; | ||
| 12 | |||
| 13 | $medium--border-width: props.def(--o-divider--medium--border-width, props.get(core.$border-width--medium)) !default; | ||
| 14 | $medium--label-font-size: props.def(--o-divider--medium--label-font-size, props.get(core.$font-size--75)) !default; | ||
| 15 | |||
| 16 | $faint--border-width: props.def(--o-divider--faint--border-width, props.get(core.$border-width--thin)) !default; | ||
| 17 | $faint--label-font-size: props.def(--o-divider--faint--label-font-size, props.get(core.$font-size--50)) !default; | ||
| 18 | |||
| 19 | $strong--bg-color: props.def(--o-divider--strong--bg-color, props.get(core.$theme, --text), 'color') !default; | ||
| 20 | $strong--label-color: props.def(--o-divider--strong--label-color, props.get(core.$theme, --text), 'color') !default; | ||
| 21 | |||
| 22 | $medium--bg-color: props.def(--o-divider--medium--bg-color, props.get(core.$theme, --border), 'color') !default; | ||
| 23 | $medium--label-color: props.def(--o-divider--medium--label-color, props.get(core.$theme, --text-mute), 'color') !default; | ||
| 24 | |||
| 25 | $faint--bg-color: props.def(--o-divider--faint--bg-color, props.get(core.$theme, --border), 'color') !default; | ||
| 26 | $faint--label-color: props.def(--o-divider--faint--label-color, props.get(core.$theme, --text-mute-more), 'color') !default; | ||
| 27 | |||
| 28 | $vertical--faint--bg-color: props.def(--o-divider--vertical--faint--bg-color, props.get(core.$theme, --border-mute), 'color') !default; | ||
| 29 | |||
| 30 | $dot--faint--bg-color: props.def(--o-divider--dot--faint--bg-color, props.get(core.$theme, --border-mute), 'color') !default; | ||
| 31 | |||
| 32 | $static-themes: props.def(--o-divider, (), 'color'); | ||
| 33 | |||
| 34 | @each $theme in map.keys(props.get(core.$transparent-colors)) { | ||
| 35 | $button-theme: --static-#{string.slice($theme, 3)}; | ||
| 36 | |||
| 37 | $static-themes: props.merge($static-themes, ( | ||
| 38 | $button-theme: ( | ||
| 39 | --strong: ( | ||
| 40 | --bg: props.get(core.$transparent-colors, $theme, --800), | ||
| 41 | --label: props.get(core.$transparent-colors, $theme, --900), | ||
| 42 | ), | ||
| 43 | --medium: ( | ||
| 44 | --bg: props.get(core.$transparent-colors, $theme, --300), | ||
| 45 | --label: props.get(core.$transparent-colors, $theme, --500), | ||
| 46 | ), | ||
| 47 | --faint: ( | ||
| 48 | --bg: props.get(core.$transparent-colors, $theme, --300), | ||
| 49 | --label: props.get(core.$transparent-colors, $theme, --500), | ||
| 50 | ), | ||
| 51 | ) | ||
| 52 | )); | ||
| 53 | } | ||
| 54 | |||
| 55 | $themes-config: ( | ||
| 56 | accent: --accent, | ||
| 57 | negative: --negative, | ||
| 58 | ) !default; | ||
| 59 | |||
| 60 | $themes: props.def(--o-divider, (), 'color'); | ||
| 61 | |||
| 62 | @each $theme, $key in $themes-config { | ||
| 63 | $themes: props.merge($themes, ( | ||
| 64 | --#{$theme}: ( | ||
| 65 | --bg: props.get(core.$theme, $key, --800), | ||
| 66 | --label: props.get(core.$theme, $key, --1000), | ||
| 67 | ) | ||
| 68 | )); | ||
| 69 | } | ||
diff --git a/src/objects/_emoji.scss b/src/objects/_emoji.scss index d8d1289..ce2dfa7 100644 --- a/src/objects/_emoji.scss +++ b/src/objects/_emoji.scss | |||
| @@ -1,72 +1,49 @@ | |||
| 1 | @use 'iro-sass/src/index' as iro; | 1 | @use 'sass:meta'; |
| 2 | @use '../functions' as fn; | 2 | @use 'iro-sass/src/bem'; |
| 3 | @use 'sass:math'; | 3 | @use 'iro-sass/src/props'; |
| 4 | @use '../props' as *; | ||
| 5 | @use 'icon.vars' as icon; | ||
| 4 | 6 | ||
| 5 | @use 'icon'; | 7 | @forward 'emoji.vars'; |
| 8 | @use 'emoji.vars' as vars; | ||
| 6 | 9 | ||
| 7 | @include iro.props-namespace('emoji') { | 10 | @mixin styles { |
| 8 | @include iro.props-store(( | 11 | @include materialize-at-root(meta.module-variables('vars')); |
| 9 | --dims: ( | ||
| 10 | --size: calc(1 / 14 * 18em), | ||
| 11 | --pad: .3em, | ||
| 12 | --rounding: fn.global-dim(--rounding), | ||
| 13 | --zoom: 3, | ||
| 14 | --valign: -.25em, | ||
| 15 | 12 | ||
| 16 | --125: ( | 13 | @include bem.object('emoji') { |
| 17 | --size: calc(1 / 14 * 23em), | ||
| 18 | --valign: -.45em, | ||
| 19 | ), | ||
| 20 | |||
| 21 | --150: ( | ||
| 22 | --size: calc(1 / 14 * 28em), | ||
| 23 | --valign: -.65em, | ||
| 24 | ), | ||
| 25 | |||
| 26 | --200: ( | ||
| 27 | --size: calc(1 / 14 * 38em), | ||
| 28 | --valign: -1em, | ||
| 29 | ) | ||
| 30 | ), | ||
| 31 | --colors: ( | ||
| 32 | --bg: fn.global-color(--border-mute), | ||
| 33 | ) | ||
| 34 | )); | ||
| 35 | |||
| 36 | @include iro.bem-object(iro.props-namespace()) { | ||
| 37 | display: inline-block; | ||
| 38 | position: relative; | 14 | position: relative; |
| 39 | inline-size: calc(fn.dim(--size)); | 15 | display: inline-block; |
| 40 | block-size: calc(fn.dim(--size)); | 16 | inline-size: calc(props.get(vars.$size)); |
| 41 | margin: calc(-1 * fn.dim(--pad)); | 17 | block-size: calc(props.get(vars.$size)); |
| 42 | padding: calc(fn.dim(--pad)); | 18 | padding: calc(props.get(vars.$pad)); |
| 43 | vertical-align: fn.dim(--valign); | 19 | margin: calc(-1 * props.get(vars.$pad)); |
| 20 | vertical-align: props.get(vars.$valign); | ||
| 44 | object-fit: contain; | 21 | object-fit: contain; |
| 45 | 22 | ||
| 46 | @include iro.bem-modifier('icon') { | 23 | @include bem.modifier('icon') { |
| 47 | margin: calc(-1 * fn.dim(--pad) - .5 * (fn.dim(--size) - fn.foreign-dim(--icon, --size))); | 24 | margin: calc(-1 * props.get(vars.$pad) - .5 * (props.get(vars.$size) - props.get(icon.$size))); |
| 48 | vertical-align: fn.foreign-dim(--icon, --valign); | 25 | vertical-align: props.get(icon.$valign); |
| 49 | } | 26 | } |
| 50 | 27 | ||
| 51 | @each $size in '125' '150' '200' { | 28 | @each $mod, $size, $valign in vars.$sizes { |
| 52 | @include iro.bem-modifier($size) { | 29 | @include bem.modifier($mod) { |
| 53 | inline-size: fn.dim(--#{$size} --size); | 30 | inline-size: props.get($size); |
| 54 | block-size: fn.dim(--#{$size} --size); | 31 | block-size: props.get($size); |
| 55 | vertical-align: fn.dim(--#{$size} --valign); | 32 | vertical-align: props.get($valign); |
| 56 | 33 | ||
| 57 | @include iro.bem-modifier('icon') { | 34 | @include bem.modifier('icon') { |
| 58 | margin: calc(-1 * fn.dim(--pad) - .5 * (fn.dim(--#{$size} --size) - fn.foreign-dim(--icon, --size))); | 35 | margin: calc(-1 * props.get(vars.$pad) - .5 * (props.get($size) - props.get(icon.$size))); |
| 59 | } | 36 | } |
| 60 | } | 37 | } |
| 61 | } | 38 | } |
| 62 | 39 | ||
| 63 | @include iro.bem-modifier('zoomable') { | 40 | @include bem.modifier('zoomable') { |
| 41 | border-radius: calc(props.get(vars.$rounding) / props.get(vars.$zoom)); | ||
| 64 | transition: transform .2s ease, background-color .2s ease; | 42 | transition: transform .2s ease, background-color .2s ease; |
| 65 | border-radius: calc(fn.dim(--rounding) / fn.dim(--zoom)); | ||
| 66 | 43 | ||
| 67 | &:hover { | 44 | &:hover { |
| 68 | transform: scale(fn.dim(--zoom)); | 45 | background-color: props.get(vars.$bg-color); |
| 69 | background-color: fn.color(--bg); | 46 | transform: scale(props.get(vars.$zoom)); |
| 70 | } | 47 | } |
| 71 | } | 48 | } |
| 72 | } | 49 | } |
diff --git a/src/objects/_emoji.vars.scss b/src/objects/_emoji.vars.scss new file mode 100644 index 0000000..fbfb935 --- /dev/null +++ b/src/objects/_emoji.vars.scss | |||
| @@ -0,0 +1,26 @@ | |||
| 1 | @use 'sass:map'; | ||
| 2 | @use 'iro-sass/src/props'; | ||
| 3 | @use '../core.vars' as core; | ||
| 4 | |||
| 5 | $size: props.def(--o-emoji--size, calc(1 / 14 * 18em)) !default; | ||
| 6 | $pad: props.def(--o-emoji--pad, .3em) !default; | ||
| 7 | $rounding: props.def(--o-emoji--rounding, props.get(core.$rounding)) !default; | ||
| 8 | $zoom: props.def(--o-emoji--zoom, 3) !default; | ||
| 9 | $valign: props.def(--o-emoji--valign, -.25em) !default; | ||
| 10 | |||
| 11 | $size--125: props.def(--o-emoji--125--size, calc(1 / 14 * 23em)) !default; | ||
| 12 | $valign--125: props.def(--o-emoji--125--valign, -.45em) !default; | ||
| 13 | |||
| 14 | $size--150: props.def(--o-emoji--150--size, calc(1 / 14 * 28em)) !default; | ||
| 15 | $valign--150: props.def(--o-emoji--150--valign, -.65em) !default; | ||
| 16 | |||
| 17 | $size--200: props.def(--o-emoji--200--size, calc(1 / 14 * 38em)) !default; | ||
| 18 | $valign--200: props.def(--o-emoji--200--valign, -1em) !default; | ||
| 19 | |||
| 20 | $sizes: ( | ||
| 21 | '125' $size--125 $valign--125, | ||
| 22 | '150' $size--150 $valign--150, | ||
| 23 | '200' $size--200 $valign--200, | ||
| 24 | ) !default; | ||
| 25 | |||
| 26 | $bg-color: props.def(--o-emoji--bg-color, props.get(core.$theme, --border-mute), 'color') !default; | ||
diff --git a/src/objects/_field-label.scss b/src/objects/_field-label.scss index 1518ea6..564ab2b 100644 --- a/src/objects/_field-label.scss +++ b/src/objects/_field-label.scss | |||
| @@ -1,84 +1,74 @@ | |||
| 1 | @use 'iro-sass/src/index' as iro; | 1 | @use 'sass:meta'; |
| 2 | @use '../functions' as fn; | 2 | @use 'iro-sass/src/bem'; |
| 3 | @use 'iro-sass/src/props'; | ||
| 4 | @use '../props' as *; | ||
| 3 | 5 | ||
| 4 | @include iro.props-namespace('field-label') { | 6 | @forward 'field-label.vars'; |
| 5 | @include iro.props-store(( | 7 | @use 'field-label.vars' as vars; |
| 6 | --dims: ( | ||
| 7 | --spacing-i: fn.global-dim(--size --150), | ||
| 8 | --spacing-b: fn.global-dim(--size --85), | ||
| 9 | --label-font-size: fn.global-dim(--font-size --75), | ||
| 10 | --hint-font-size: fn.global-dim(--font-size --75), | ||
| 11 | ), | ||
| 12 | --colors: ( | ||
| 13 | --label: fn.global-color(--text-mute), | ||
| 14 | --hint: fn.global-color(--text-mute), | ||
| 15 | --error-hint: fn.global-color(--negative --900), | ||
| 16 | --disabled: fn.global-color(--text-disabled), | ||
| 17 | ), | ||
| 18 | )); | ||
| 19 | 8 | ||
| 20 | @include iro.bem-object(iro.props-namespace()) { | 9 | @mixin styles { |
| 21 | display: block; | 10 | @include materialize-at-root(meta.module-variables('vars')); |
| 22 | 11 | ||
| 23 | @include iro.bem-elem('label') { | 12 | @include bem.object('field-label') { |
| 13 | @include bem.elem('label') { | ||
| 24 | display: block; | 14 | display: block; |
| 25 | flex: 0 0 auto; | 15 | flex: 0 0 auto; |
| 26 | padding-inline-end: fn.dim(--spacing-i); | 16 | padding-inline-end: props.get(vars.$spacing-i); |
| 27 | color: fn.color(--label); | 17 | font-size: props.get(vars.$label-font-size); |
| 28 | font-size: fn.dim(--label-font-size); | ||
| 29 | font-weight: 400; | 18 | font-weight: 400; |
| 30 | line-height: 1.3; | 19 | line-height: 1.3; |
| 20 | color: props.get(vars.$label-color); | ||
| 31 | 21 | ||
| 32 | @include iro.bem-next-elem('content') { | 22 | @include bem.next-elem('content') { |
| 33 | margin-block-start: fn.dim(--spacing-b); | 23 | margin-block-start: props.get(vars.$spacing-b); |
| 34 | } | 24 | } |
| 35 | } | 25 | } |
| 36 | 26 | ||
| 37 | @include iro.bem-elem('content') { | 27 | @include bem.elem('content') { |
| 38 | display: block; | 28 | display: block; |
| 39 | flex: 1 1 auto; | 29 | flex: 1 1 auto; |
| 40 | } | 30 | } |
| 41 | 31 | ||
| 42 | @include iro.bem-elem('hint') { | 32 | @include bem.elem('hint') { |
| 43 | display: block; | 33 | display: block; |
| 44 | margin-block-start: fn.dim(--spacing-b); | 34 | margin-block-start: props.get(vars.$spacing-b); |
| 45 | color: fn.color(--hint); | 35 | font-size: props.get(vars.$hint-font-size); |
| 46 | font-size: fn.dim(--hint-font-size); | 36 | color: props.get(vars.$hint-color); |
| 47 | } | 37 | } |
| 48 | 38 | ||
| 49 | @include iro.bem-is('invalid') { | 39 | @include bem.is('invalid') { |
| 50 | @include iro.bem-elem('hint') { | 40 | @include bem.elem('hint') { |
| 51 | color: fn.color(--error-hint); | 41 | color: props.get(vars.$error-hint-color); |
| 52 | } | 42 | } |
| 53 | } | 43 | } |
| 54 | 44 | ||
| 55 | @include iro.bem-is('disabled') { | 45 | @include bem.is('disabled') { |
| 56 | @include iro.bem-elem('label', 'hint') { | 46 | @include bem.elem('label', 'hint') { |
| 57 | color: fn.color(--disabled); | 47 | color: props.get(vars.$disabled-color); |
| 58 | } | 48 | } |
| 59 | } | 49 | } |
| 60 | 50 | ||
| 61 | @include iro.bem-modifier('align-start', 'align-end') { | 51 | @include bem.modifier('align-start', 'align-end') { |
| 62 | display: flex; | 52 | display: flex; |
| 63 | align-items: baseline; | 53 | align-items: baseline; |
| 64 | 54 | ||
| 65 | @include iro.bem-elem('label') { | 55 | @include bem.elem('label') { |
| 66 | display: inline-block; | 56 | display: inline-block; |
| 67 | 57 | ||
| 68 | @include iro.bem-next-elem('content') { | 58 | @include bem.next-elem('content') { |
| 69 | margin-block-start: 0; | 59 | margin-block-start: 0; |
| 70 | } | 60 | } |
| 71 | } | 61 | } |
| 72 | } | 62 | } |
| 73 | 63 | ||
| 74 | @include iro.bem-modifier('align-start') { | 64 | @include bem.modifier('align-start') { |
| 75 | @include iro.bem-elem('label') { | 65 | @include bem.elem('label') { |
| 76 | text-align: start; | 66 | text-align: start; |
| 77 | } | 67 | } |
| 78 | } | 68 | } |
| 79 | 69 | ||
| 80 | @include iro.bem-modifier('align-end') { | 70 | @include bem.modifier('align-end') { |
| 81 | @include iro.bem-elem('label') { | 71 | @include bem.elem('label') { |
| 82 | text-align: end; | 72 | text-align: end; |
| 83 | } | 73 | } |
| 84 | } | 74 | } |
diff --git a/src/objects/_field-label.vars.scss b/src/objects/_field-label.vars.scss new file mode 100644 index 0000000..844a10b --- /dev/null +++ b/src/objects/_field-label.vars.scss | |||
| @@ -0,0 +1,12 @@ | |||
| 1 | @use 'iro-sass/src/props'; | ||
| 2 | @use '../core.vars' as core; | ||
| 3 | |||
| 4 | $spacing-i: props.def(--o-field-label--spacing-i, props.get(core.$size--150)) !default; | ||
| 5 | $spacing-b: props.def(--o-field-label--spacing-b, props.get(core.$size--85)) !default; | ||
| 6 | $label-font-size: props.def(--o-field-label--label-font-size, props.get(core.$font-size--75)) !default; | ||
| 7 | $hint-font-size: props.def(--o-field-label--hint-font-size, props.get(core.$font-size--75)) !default; | ||
| 8 | |||
| 9 | $label-color: props.def(--o-field-label--label-color, props.get(core.$theme, --text-mute), 'color') !default; | ||
| 10 | $hint-color: props.def(--o-field-label--hint-color, props.get(core.$theme, --text-mute), 'color') !default; | ||
| 11 | $error-hint-color: props.def(--o-field-label--error-hint-color, props.get(core.$theme, --negative, --900), 'color') !default; | ||
| 12 | $disabled-color: props.def(--o-field-label--disabled-color, props.get(core.$theme, --text-disabled), 'color') !default; | ||
diff --git a/src/objects/_figure.scss b/src/objects/_figure.scss new file mode 100644 index 0000000..38837be --- /dev/null +++ b/src/objects/_figure.scss | |||
| @@ -0,0 +1,26 @@ | |||
| 1 | @use 'sass:meta'; | ||
| 2 | @use 'iro-sass/src/bem'; | ||
| 3 | @use 'iro-sass/src/props'; | ||
| 4 | @use '../props' as *; | ||
| 5 | |||
| 6 | @forward 'figure.vars'; | ||
| 7 | @use 'figure.vars' as vars; | ||
| 8 | |||
| 9 | @mixin styles { | ||
| 10 | @include materialize-at-root(meta.module-variables('vars')); | ||
| 11 | |||
| 12 | @include bem.object('figure') { | ||
| 13 | @include bem.elem('caption') { | ||
| 14 | padding-block: props.get(vars.$pad-b); | ||
| 15 | font-size: props.get(vars.$font-size); | ||
| 16 | color: props.get(vars.$text-color); | ||
| 17 | border-block-end: props.get(vars.$border-width) solid props.get(vars.$border-color); | ||
| 18 | |||
| 19 | &::before { | ||
| 20 | display: block; | ||
| 21 | margin-block: -100em 100em; | ||
| 22 | content: ''; | ||
| 23 | } | ||
| 24 | } | ||
| 25 | } | ||
| 26 | } | ||
diff --git a/src/objects/_figure.vars.scss b/src/objects/_figure.vars.scss new file mode 100644 index 0000000..78f5d15 --- /dev/null +++ b/src/objects/_figure.vars.scss | |||
| @@ -0,0 +1,9 @@ | |||
| 1 | @use 'iro-sass/src/props'; | ||
| 2 | @use '../core.vars' as core; | ||
| 3 | |||
| 4 | $pad-b: props.def(--o-figure--pad-b, props.get(core.$size--100)) !default; | ||
| 5 | $border-width: props.def(--o-figure--border-width, props.get(core.$border-width--thin)) !default; | ||
| 6 | $font-size: props.def(--o-figure--font-size, props.get(core.$font-size--100)) !default; | ||
| 7 | |||
| 8 | $text-color: props.def(--o-figure--text-color, props.get(core.$theme, --text-mute-more), 'color') !default; | ||
| 9 | $border-color: props.def(--o-figure--border-color, props.get(core.$theme, --border), 'color') !default; | ||
diff --git a/src/objects/_heading.scss b/src/objects/_heading.scss index 7990a6b..bdc7027 100644 --- a/src/objects/_heading.scss +++ b/src/objects/_heading.scss | |||
| @@ -1,116 +1,58 @@ | |||
| 1 | @use 'iro-sass/src/index' as iro; | 1 | @use 'sass:meta'; |
| 2 | @use '../functions' as fn; | 2 | @use 'iro-sass/src/bem'; |
| 3 | @use '../mixins' as mx; | 3 | @use 'iro-sass/src/props'; |
| 4 | @use '../config'; | 4 | @use '../props' as *; |
| 5 | @use 'include-media/dist/include-media' as media; | 5 | |
| 6 | 6 | @forward 'heading.vars'; | |
| 7 | $sizes: 'xxl' 'xl' 'lg' 'md' 'sm' 'xs'; | 7 | @use 'heading.vars' as vars; |
| 8 | 8 | ||
| 9 | @include iro.props-namespace('heading') { | 9 | @mixin styles { |
| 10 | @include iro.props-store(( | 10 | @include materialize-at-root(meta.module-variables('vars')); |
| 11 | --dims: ( | 11 | |
| 12 | --offset: -.02em, | 12 | @include bem.object('heading') { |
| 13 | ), | 13 | display: block; |
| 14 | --colors: ( | 14 | margin-block-start: props.get(vars.$margin-bs); |
| 15 | --bg: fn.global-color(--base --50), | 15 | font-family: props.get(vars.$font-family); |
| 16 | ), | 16 | font-weight: props.get(vars.$font-weight); |
| 17 | )); | 17 | font-feature-settings: props.get(vars.$feature-settings); |
| 18 | 18 | line-height: props.get(vars.$line-height); | |
| 19 | @include iro.bem-object(iro.props-namespace()) { | 19 | color: props.get(vars.$text-color); |
| 20 | @include mx.set-font(--headline); | 20 | text-transform: none; |
| 21 | 21 | letter-spacing: normal; | |
| 22 | display: block; | ||
| 23 | margin-block-start: fn.global-dim(--heading --margin-bs); | ||
| 24 | transform: translateX(fn.dim(--offset)); | ||
| 25 | letter-spacing: normal; | ||
| 26 | text-transform: none; | ||
| 27 | 22 | ||
| 28 | & + & { | 23 | & + & { |
| 29 | margin-block-start: fn.global-dim(--heading --margin-bs-sibling); | 24 | margin-block-start: props.get(vars.$margin-bs-sibling); |
| 30 | } | ||
| 31 | |||
| 32 | @include iro.bem-elem('highlight') { | ||
| 33 | background-image: linear-gradient( | ||
| 34 | to top, | ||
| 35 | transparent .05em, | ||
| 36 | fn.color(--bg) .05em, | ||
| 37 | fn.color(--bg) .5em, | ||
| 38 | transparent .5em | ||
| 39 | ); | ||
| 40 | } | ||
| 41 | |||
| 42 | @include iro.bem-modifier('xxl') { | ||
| 43 | @include mx.heading-strong(--xxl); | ||
| 44 | } | ||
| 45 | |||
| 46 | @include iro.bem-modifier('xl') { | ||
| 47 | @include mx.heading-strong(--xl); | ||
| 48 | } | ||
| 49 | |||
| 50 | @include iro.bem-modifier('lg') { | ||
| 51 | @include mx.heading-medium(--lg); | ||
| 52 | } | ||
| 53 | |||
| 54 | @include iro.bem-modifier('md') { | ||
| 55 | @include mx.heading-medium(--md); | ||
| 56 | } | ||
| 57 | |||
| 58 | @include iro.bem-modifier('sm') { | ||
| 59 | @include mx.heading-faint(--sm); | ||
| 60 | } | 25 | } |
| 61 | 26 | ||
| 62 | @include iro.bem-modifier('xs') { | 27 | @include bem.elem('highlight') { |
| 63 | @include mx.heading-faint(--xs); | 28 | background-image: linear-gradient(to top, |
| 29 | transparent .05em, | ||
| 30 | props.get(vars.$bg-color) .05em, | ||
| 31 | props.get(vars.$bg-color) .5em, | ||
| 32 | transparent .5em); | ||
| 64 | } | 33 | } |
| 65 | 34 | ||
| 66 | @include iro.bem-modifier('display') { | 35 | @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings in vars.$sizes { |
| 67 | @include mx.set-font(--headline); | 36 | @include bem.modifier($mod) { |
| 68 | 37 | font-family: props.get($font-family); | |
| 69 | @include iro.bem-modifier('xxl') { | 38 | font-size: props.get($font-size); |
| 70 | @include mx.heading-strong(--display --xxl); | 39 | font-weight: props.get($font-weight); |
| 71 | 40 | font-feature-settings: props.get($feature-settings); | |
| 72 | @include media.media('<=md') { | 41 | line-height: props.get($line-height); |
| 73 | @include mx.heading-strong(--display-sm --xxl); | 42 | letter-spacing: props.get($letter-spacing); |
| 74 | } | ||
| 75 | } | ||
| 76 | |||
| 77 | @include iro.bem-modifier('xl') { | ||
| 78 | @include mx.heading-strong(--display --xl); | ||
| 79 | |||
| 80 | @include media.media('<=md') { | ||
| 81 | @include mx.heading-strong(--display-sm --xl); | ||
| 82 | } | ||
| 83 | } | ||
| 84 | |||
| 85 | @include iro.bem-modifier('lg') { | ||
| 86 | @include mx.heading-strong(--display --lg); | ||
| 87 | |||
| 88 | @include media.media('<=md') { | ||
| 89 | @include mx.heading-strong(--display-sm --lg); | ||
| 90 | } | ||
| 91 | } | ||
| 92 | |||
| 93 | @include iro.bem-modifier('md') { | ||
| 94 | @include mx.heading-strong(--display --md); | ||
| 95 | |||
| 96 | @include media.media('<=md') { | ||
| 97 | @include mx.heading-strong(--display-sm --md); | ||
| 98 | } | ||
| 99 | } | 43 | } |
| 100 | 44 | } | |
| 101 | @include iro.bem-modifier('sm') { | ||
| 102 | @include mx.heading-medium(--display --sm); | ||
| 103 | |||
| 104 | @include media.media('<=md') { | ||
| 105 | @include mx.heading-medium(--display-sm --sm); | ||
| 106 | } | ||
| 107 | } | ||
| 108 | |||
| 109 | @include iro.bem-modifier('xs') { | ||
| 110 | @include mx.heading-faint(--display --xs); | ||
| 111 | 45 | ||
| 112 | @include media.media('<=md') { | 46 | @include bem.modifier('display') { |
| 113 | @include mx.heading-faint(--display-sm --xs); | 47 | @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings in vars.$display--sizes { |
| 48 | @include bem.modifier($mod) { | ||
| 49 | font-family: props.get($font-family); | ||
| 50 | font-size: props.get($font-size); | ||
| 51 | font-weight: props.get($font-weight); | ||
| 52 | font-feature-settings: props.get($feature-settings); | ||
| 53 | line-height: props.get($line-height); | ||
| 54 | letter-spacing: props.get($letter-spacing); | ||
| 55 | transform: translateX(props.get(vars.$offset)); | ||
| 114 | } | 56 | } |
| 115 | } | 57 | } |
| 116 | } | 58 | } |
diff --git a/src/objects/_heading.vars.scss b/src/objects/_heading.vars.scss new file mode 100644 index 0000000..90278c8 --- /dev/null +++ b/src/objects/_heading.vars.scss | |||
| @@ -0,0 +1,123 @@ | |||
| 1 | @use 'iro-sass/src/props'; | ||
| 2 | @use '../core.vars' as core; | ||
| 3 | |||
| 4 | $offset: props.def(--o-heading--offset, -.02em) !default; | ||
| 5 | $margin-bs: props.def(--o-heading--margin-bs, props.get(core.$size--700)) !default; | ||
| 6 | $margin-bs-sibling: props.def(--o-heading--margin-bs-sibling, props.get(core.$size--325)) !default; | ||
| 7 | |||
| 8 | $text-color: props.def(--o-heading--text-color, props.get(core.$theme, --heading), 'color') !default; | ||
| 9 | $bg-color: props.def(--o-heading--bg-color, props.get(core.$theme, --base, --50), 'color') !default; | ||
| 10 | |||
| 11 | $font-family: props.def(--o-heading--font-family, props.get(core.$font--standard--family)) !default; | ||
| 12 | $line-height: props.def(--o-heading--line-height, props.get(core.$font--standard--line-height)) !default; | ||
| 13 | $font-weight: props.def(--o-heading--font-weight, bold) !default; | ||
| 14 | $feature-settings: props.def(--o-heading--feature-settings, props.get(core.$font--standard--feature-settings)) !default; | ||
| 15 | |||
| 16 | $font-family--xxl: props.def(--o-heading--xxl--font-family, props.get(core.$font--headline--family)) !default; | ||
| 17 | $line-height--xxl: props.def(--o-heading--xxl--line-height, props.get(core.$font--headline--line-height)) !default; | ||
| 18 | $font-size--xxl: props.def(--o-heading--xxl--font-size, props.get(core.$font-size--300)) !default; | ||
| 19 | $font-weight--xxl: props.def(--o-heading--xxl--font-weight, props.get(core.$font--headline--weight)) !default; | ||
| 20 | $letter-spacing--xxl: props.def(--o-heading--xxl--letter-spacing, 0) !default; | ||
| 21 | $feature-settings--xxl: props.def(--o-heading--xxl--feature-settings, props.get(core.$font--headline--feature-settings)) !default; | ||
| 22 | |||
| 23 | $font-family--xl: props.def(--o-heading--xl--font-family, props.get(core.$font--headline--family)) !default; | ||
| 24 | $line-height--xl: props.def(--o-heading--xl--line-height, props.get(core.$font--headline--line-height)) !default; | ||
| 25 | $font-size--xl: props.def(--o-heading--xl--font-size, props.get(core.$font-size--200)) !default; | ||
| 26 | $font-weight--xl: props.def(--o-heading--xl--font-weight, props.get(core.$font--headline--weight)) !default; | ||
| 27 | $letter-spacing--xl: props.def(--o-heading--xl--letter-spacing, 0) !default; | ||
| 28 | $feature-settings--xl: props.def(--o-heading--xl--feature-settings, props.get(core.$font--headline--feature-settings)) !default; | ||
| 29 | |||
| 30 | $font-family--lg: props.def(--o-heading--lg--font-family, props.get(core.$font--standard--family)) !default; | ||
| 31 | $line-height--lg: props.def(--o-heading--lg--line-height, props.get(core.$font--standard--line-height)) !default; | ||
| 32 | $font-size--lg: props.def(--o-heading--lg--font-size, props.get(core.$font-size--150)) !default; | ||
| 33 | $font-weight--lg: props.def(--o-heading--lg--font-weight, bold) !default; | ||
| 34 | $letter-spacing--lg: props.def(--o-heading--lg--letter-spacing, 0) !default; | ||
| 35 | $feature-settings--lg: props.def(--o-heading--lg--feature-settings, props.get(core.$font--standard--feature-settings)) !default; | ||
| 36 | |||
| 37 | $font-family--md: props.def(--o-heading--md--font-family, props.get(core.$font--standard--family)) !default; | ||
| 38 | $line-height--md: props.def(--o-heading--md--line-height, props.get(core.$font--standard--line-height)) !default; | ||
| 39 | $font-size--md: props.def(--o-heading--md--font-size, props.get(core.$font-size--100)) !default; | ||
| 40 | $font-weight--md: props.def(--o-heading--md--font-weight, bold) !default; | ||
| 41 | $letter-spacing--md: props.def(--o-heading--md--letter-spacing, 0) !default; | ||
| 42 | $feature-settings--md: props.def(--o-heading--md--feature-settings, props.get(core.$font--standard--feature-settings)) !default; | ||
| 43 | |||
| 44 | $font-family--sm: props.def(--o-heading--sm--font-family, props.get(core.$font--standard--family)) !default; | ||
| 45 | $line-height--sm: props.def(--o-heading--sm--line-height, props.get(core.$font--standard--line-height)) !default; | ||
| 46 | $font-size--sm: props.def(--o-heading--sm--font-size, props.get(core.$font-size--75)) !default; | ||
| 47 | $font-weight--sm: props.def(--o-heading--sm--font-weight, 500) !default; | ||
| 48 | $letter-spacing--sm: props.def(--o-heading--sm--letter-spacing, 1px) !default; | ||
| 49 | $feature-settings--sm: props.def(--o-heading--sm--feature-settings, props.get(core.$font--standard--feature-settings)) !default; | ||
| 50 | |||
| 51 | $font-family--xs: props.def(--o-heading--xs--font-family, props.get(core.$font--standard--family)) !default; | ||
| 52 | $line-height--xs: props.def(--o-heading--xs--line-height, props.get(core.$font--standard--line-height)) !default; | ||
| 53 | $font-size--xs: props.def(--o-heading--xs--font-size, props.get(core.$font-size--50)) !default; | ||
| 54 | $font-weight--xs: props.def(--o-heading--xs--font-weight, 500) !default; | ||
| 55 | $letter-spacing--xs: props.def(--o-heading--xs--letter-spacing, 1px) !default; | ||
| 56 | $feature-settings--xs: props.def(--o-heading--xs--feature-settings, props.get(core.$font--standard--feature-settings)) !default; | ||
| 57 | |||
| 58 | $sizes: ( | ||
| 59 | 'xs' $font-family--xs $line-height--xs $font-size--xs $font-weight--xs $letter-spacing--xs $feature-settings--xs, | ||
| 60 | 'sm' $font-family--sm $line-height--sm $font-size--sm $font-weight--sm $letter-spacing--sm $feature-settings--sm, | ||
| 61 | 'md' $font-family--md $line-height--md $font-size--md $font-weight--md $letter-spacing--md $feature-settings--md, | ||
| 62 | 'lg' $font-family--lg $line-height--lg $font-size--lg $font-weight--lg $letter-spacing--lg $feature-settings--lg, | ||
| 63 | 'xl' $font-family--xl $line-height--xl $font-size--xl $font-weight--xl $letter-spacing--xl $feature-settings--xl, | ||
| 64 | 'xxl' $font-family--xxl $line-height--xxl $font-size--xxl $font-weight--xxl $letter-spacing--xxl $feature-settings--xxl, | ||
| 65 | ) !default; | ||
| 66 | |||
| 67 | $display--font-family--xxl: props.def(--o-heading--display--xxl--font-family, props.get(core.$font--headline--family)) !default; | ||
| 68 | $display--line-height--xxl: props.def(--o-heading--display--xxl--line-height, props.get(core.$font--headline--line-height)) !default; | ||
| 69 | $display--font-size--xxl: props.def(--o-heading--display--xxl--font-size, props.get(core.$font-size--1100)) !default; | ||
| 70 | $display--font-weight--xxl: props.def(--o-heading--display--xxl--font-weight, props.get(core.$font--headline--weight)) !default; | ||
| 71 | $display--letter-spacing--xxl: props.def(--o-heading--display--xxl--letter-spacing, 0) !default; | ||
| 72 | $display--feature-settings--xxl: props.def(--o-heading--display--xxl--feature-settings, props.get(core.$font--headline--feature-settings)) !default; | ||
| 73 | |||
| 74 | $display--font-family--xl: props.def(--o-heading--display--xl--font-family, props.get(core.$font--headline--family)) !default; | ||
| 75 | $display--line-height--xl: props.def(--o-heading--display--xl--line-height, props.get(core.$font--headline--line-height)) !default; | ||
| 76 | $display--font-size--xl: props.def(--o-heading--display--xl--font-size, props.get(core.$font-size--700)) !default; | ||
| 77 | $display--font-weight--xl: props.def(--o-heading--display--xl--font-weight, props.get(core.$font--headline--weight)) !default; | ||
| 78 | $display--letter-spacing--xl: props.def(--o-heading--display--xl--letter-spacing, 0) !default; | ||
| 79 | $display--feature-settings--xl: props.def(--o-heading--display--xl--feature-settings, props.get(core.$font--headline--feature-settings)) !default; | ||
| 80 | |||
| 81 | $display--font-family--lg: props.def(--o-heading--display--lg--font-family, props.get(core.$font--headline--family)) !default; | ||
| 82 | $display--line-height--lg: props.def(--o-heading--display--lg--line-height, props.get(core.$font--headline--line-height)) !default; | ||
| 83 | $display--font-size--lg: props.def(--o-heading--display--lg--font-size, props.get(core.$font-size--300)) !default; | ||
| 84 | $display--font-weight--lg: props.def(--o-heading--display--lg--font-weight, props.get(core.$font--headline--weight)) !default; | ||
| 85 | $display--letter-spacing--lg: props.def(--o-heading--display--lg--letter-spacing, 0) !default; | ||
| 86 | $display--feature-settings--lg: props.def(--o-heading--display--lg--feature-settings, props.get(core.$font--headline--feature-settings)) !default; | ||
| 87 | |||
| 88 | $display--font-family--md: props.def(--o-heading--display--md--font-family, props.get(core.$font--headline--family)) !default; | ||
| 89 | $display--line-height--md: props.def(--o-heading--display--md--line-height, props.get(core.$font--headline--line-height)) !default; | ||
| 90 | $display--font-size--md: props.def(--o-heading--display--md--font-size, props.get(core.$font-size--150)) !default; | ||
| 91 | $display--font-weight--md: props.def(--o-heading--display--md--font-weight, props.get(core.$font--headline--weight)) !default; | ||
| 92 | $display--letter-spacing--md: props.def(--o-heading--display--md--letter-spacing, 0) !default; | ||
| 93 | $display--feature-settings--md: props.def(--o-heading--display--md--feature-settings, props.get(core.$font--headline--feature-settings)) !default; | ||
| 94 | |||
| 95 | $display--font-family--sm: props.def(--o-heading--display--sm--font-family, props.get(core.$font--standard--family)) !default; | ||
| 96 | $display--line-height--sm: props.def(--o-heading--display--sm--line-height, props.get(core.$font--standard--line-height)) !default; | ||
| 97 | $display--font-size--sm: props.def(--o-heading--display--sm--font-size, props.get(core.$font-size--75)) !default; | ||
| 98 | $display--font-weight--sm: props.def(--o-heading--display--sm--font-weight, bold) !default; | ||
| 99 | $display--letter-spacing--sm: props.def(--o-heading--display--sm--letter-spacing, 0) !default; | ||
| 100 | $display--feature-settings--sm: props.def(--o-heading--display--sm--feature-settings, props.get(core.$font--standard--feature-settings)) !default; | ||
| 101 | |||
| 102 | $display--font-family--xs: props.def(--o-heading--display--xs--font-family, props.get(core.$font--standard--family)) !default; | ||
| 103 | $display--line-height--xs: props.def(--o-heading--display--xs--line-height, props.get(core.$font--standard--line-height)) !default; | ||
| 104 | $display--font-size--xs: props.def(--o-heading--display--xs--font-size, props.get(core.$font-size--50)) !default; | ||
| 105 | $display--font-weight--xs: props.def(--o-heading--display--xs--font-weight, 500) !default; | ||
| 106 | $display--letter-spacing--xs: props.def(--o-heading--display--xs--letter-spacing, 1px) !default; | ||
| 107 | $display--feature-settings--xs: props.def(--o-heading--display--xs--feature-settings, props.get(core.$font--standard--feature-settings)) !default; | ||
| 108 | |||
| 109 | $display--font-size--xxl--md: props.def(--o-heading--display--xxl--font-size, props.get(core.$font-size--900), 'md') !default; | ||
| 110 | $display--font-size--xl--md: props.def(--o-heading--display--xl--font-size, props.get(core.$font-size--600), 'md') !default; | ||
| 111 | $display--font-size--lg--md: props.def(--o-heading--display--lg--font-size, props.get(core.$font-size--200), 'md') !default; | ||
| 112 | $display--font-size--md--md: props.def(--o-heading--display--md--font-size, props.get(core.$font-size--100), 'md') !default; | ||
| 113 | $display--font-size--sm--md: props.def(--o-heading--display--sm--font-size, props.get(core.$font-size--75), 'md') !default; | ||
| 114 | $display--font-size--xs--md: props.def(--o-heading--display--xs--font-size, props.get(core.$font-size--50), 'md') !default; | ||
| 115 | |||
| 116 | $display--sizes: ( | ||
| 117 | 'xs' $display--font-family--xs $display--line-height--xs $display--font-size--xs $display--font-weight--xs $display--letter-spacing--xs $display--feature-settings--xs, | ||
| 118 | 'sm' $display--font-family--sm $display--line-height--sm $display--font-size--sm $display--font-weight--sm $display--letter-spacing--sm $display--feature-settings--sm, | ||
| 119 | 'md' $display--font-family--md $display--line-height--md $display--font-size--md $display--font-weight--md $display--letter-spacing--md $display--feature-settings--md, | ||
| 120 | 'lg' $display--font-family--lg $display--line-height--lg $display--font-size--lg $display--font-weight--lg $display--letter-spacing--lg $display--feature-settings--lg, | ||
| 121 | 'xl' $display--font-family--xl $display--line-height--xl $display--font-size--xl $display--font-weight--xl $display--letter-spacing--xl $display--feature-settings--xl, | ||
| 122 | 'xxl' $display--font-family--xxl $display--line-height--xxl $display--font-size--xxl $display--font-weight--xxl $display--letter-spacing--xxl $display--feature-settings--xxl, | ||
| 123 | ) !default; | ||
diff --git a/src/objects/_icon.scss b/src/objects/_icon.scss index 1491dd9..187938e 100644 --- a/src/objects/_icon.scss +++ b/src/objects/_icon.scss | |||
| @@ -1,25 +1,24 @@ | |||
| 1 | @use 'iro-sass/src/index' as iro; | 1 | @use 'sass:meta'; |
| 2 | @use '../functions' as fn; | 2 | @use 'iro-sass/src/bem'; |
| 3 | @use 'iro-sass/src/props'; | ||
| 4 | @use '../props' as *; | ||
| 3 | 5 | ||
| 4 | @include iro.props-namespace('icon') { | 6 | @forward 'icon.vars'; |
| 5 | @include iro.props-store(( | 7 | @use 'icon.vars' as vars; |
| 6 | --dims: ( | ||
| 7 | --stroke: 1.5px, | ||
| 8 | --size: calc(1 / 14 * 16em), | ||
| 9 | --valign: -.2em, | ||
| 10 | ) | ||
| 11 | )); | ||
| 12 | 8 | ||
| 13 | @include iro.bem-object(iro.props-namespace()) { | 9 | @mixin styles { |
| 10 | @include materialize-at-root(meta.module-variables('vars')); | ||
| 11 | |||
| 12 | @include bem.object('icon') { | ||
| 14 | display: inline; | 13 | display: inline; |
| 15 | inline-size: fn.dim(--size); | 14 | inline-size: props.get(vars.$size); |
| 16 | block-size: fn.dim(--size); | 15 | block-size: props.get(vars.$size); |
| 17 | stroke-width: fn.dim(--stroke); | 16 | vertical-align: props.get(vars.$valign); |
| 18 | stroke-linecap: round; | 17 | stroke-linecap: round; |
| 19 | stroke-linejoin: round; | 18 | stroke-linejoin: round; |
| 20 | vertical-align: fn.dim(--valign); | 19 | stroke-width: props.get(vars.$stroke-width); |
| 21 | 20 | ||
| 22 | @include iro.bem-modifier('block') { | 21 | @include bem.modifier('block') { |
| 23 | display: block; | 22 | display: block; |
| 24 | } | 23 | } |
| 25 | } | 24 | } |
diff --git a/src/objects/_icon.vars.scss b/src/objects/_icon.vars.scss new file mode 100644 index 0000000..ff1541d --- /dev/null +++ b/src/objects/_icon.vars.scss | |||
| @@ -0,0 +1,5 @@ | |||
| 1 | @use 'iro-sass/src/props'; | ||
| 2 | |||
| 3 | $stroke-width: props.def(--o-icon--stroke-width, 1.5px) !default; | ||
| 4 | $size: props.def(--o-icon--size, calc(1 / 14 * 16em)) !default; | ||
| 5 | $valign: props.def(--o-icon--valign, -.18em) !default; | ||
diff --git a/src/objects/_lightbox.scss b/src/objects/_lightbox.scss index 8ad8584..b62c353 100644 --- a/src/objects/_lightbox.scss +++ b/src/objects/_lightbox.scss | |||
| @@ -1,313 +1,135 @@ | |||
| 1 | @use 'iro-sass/src/index' as iro; | 1 | @use 'sass:map'; |
| 2 | @use '../functions' as fn; | 2 | @use 'sass:meta'; |
| 3 | @use 'sass:string'; | ||
| 4 | @use 'iro-sass/src/bem'; | ||
| 5 | @use 'iro-sass/src/props'; | ||
| 6 | @use '../props' as *; | ||
| 3 | 7 | ||
| 4 | @use 'action-button'; | 8 | @forward 'lightbox.vars'; |
| 9 | @use 'lightbox.vars' as vars; | ||
| 5 | 10 | ||
| 6 | $static-themes: 'black' 'white' !default; | 11 | @mixin styles { |
| 12 | @include materialize-at-root(meta.module-variables('vars')); | ||
| 7 | 13 | ||
| 8 | @include iro.props-namespace('lightbox') { | 14 | @include bem.object('lightbox') { |
| 9 | @include iro.props-store(( | 15 | flex: 1 1 auto; |
| 10 | --dims: ( | 16 | min-block-size: 0; |
| 11 | --pad: fn.global-dim(--size --150), | ||
| 12 | 17 | ||
| 13 | --thumbnail: ( | 18 | @include bem.elem('header') { |
| 14 | --size: fn.global-dim(--size --700), | ||
| 15 | --rounding: fn.global-dim(--rounding), | ||
| 16 | --spacing: fn.global-dim(--size --100), | ||
| 17 | --border: fn.global-dim(--border --thin), | ||
| 18 | |||
| 19 | --selected: ( | ||
| 20 | --border: fn.global-dim(--border --medium), | ||
| 21 | ), | ||
| 22 | |||
| 23 | --key-focus: ( | ||
| 24 | --border: fn.global-dim(--key-focus --border), | ||
| 25 | --border-offset: fn.global-dim(--key-focus --border-offset), | ||
| 26 | --outline: fn.global-dim(--key-focus --outline), | ||
| 27 | ), | ||
| 28 | ), | ||
| 29 | |||
| 30 | --close-button: ( | ||
| 31 | --font-size: fn.global-dim(--font-size --200), | ||
| 32 | ), | ||
| 33 | |||
| 34 | --nav-button: ( | ||
| 35 | --width: fn.global-dim(--size --2000), | ||
| 36 | --height: fn.global-dim(--size --3800), | ||
| 37 | --font-size: fn.global-dim(--font-size --200), | ||
| 38 | ), | ||
| 39 | ), | ||
| 40 | --colors: ( | ||
| 41 | --thumbnail: ( | ||
| 42 | --border: fn.global-color(--border-strong), | ||
| 43 | |||
| 44 | --hover: ( | ||
| 45 | --border: fn.global-color(--text-mute-more), | ||
| 46 | ), | ||
| 47 | |||
| 48 | --selected: ( | ||
| 49 | --border: fn.global-color(--heading), | ||
| 50 | ), | ||
| 51 | |||
| 52 | --key-focus: ( | ||
| 53 | --border: fn.global-color(--focus --border), | ||
| 54 | --outline: fn.global-color(--focus --outline), | ||
| 55 | ), | ||
| 56 | ), | ||
| 57 | ), | ||
| 58 | )); | ||
| 59 | |||
| 60 | @each $theme in $static-themes { | ||
| 61 | @include iro.props-store(( | ||
| 62 | --colors: ( | ||
| 63 | --static-#{$theme}: ( | ||
| 64 | --text: fn.global-color(--white-transparent --800), | ||
| 65 | --thumbnail: ( | ||
| 66 | --border: fn.global-color(--white-transparent --400), | ||
| 67 | |||
| 68 | --hover: ( | ||
| 69 | --border: fn.global-color(--white-transparent --500), | ||
| 70 | ), | ||
| 71 | |||
| 72 | --selected: ( | ||
| 73 | --border: fn.global-color(--white-transparent --900), | ||
| 74 | ), | ||
| 75 | |||
| 76 | --key-focus: ( | ||
| 77 | --border: fn.global-color(--#{$theme}-transparent --900), | ||
| 78 | --outline: fn.global-color(--#{$theme}-transparent --300), | ||
| 79 | ), | ||
| 80 | ), | ||
| 81 | ) | ||
| 82 | ) | ||
| 83 | )); | ||
| 84 | } | ||
| 85 | |||
| 86 | @include iro.props-store(( | ||
| 87 | --dims: ( | ||
| 88 | --thumbnail: ( | ||
| 89 | --size: fn.global-dim(--size --600), | ||
| 90 | ), | ||
| 91 | --nav-button: ( | ||
| 92 | --width: fn.global-dim(--size --2500), | ||
| 93 | --height: fn.global-dim(--size --2500), | ||
| 94 | ), | ||
| 95 | ), | ||
| 96 | ), 'md'); | ||
| 97 | |||
| 98 | @include iro.bem-object(iro.props-namespace()) { | ||
| 99 | display: grid; | ||
| 100 | grid-template-rows: auto minmax(0, 1fr) auto auto; | ||
| 101 | grid-template-columns: auto minmax(0, 1fr) auto; | ||
| 102 | grid-template-areas: | ||
| 103 | 'header header header' | ||
| 104 | 'prev content next' | ||
| 105 | 'thumbnails thumbnails thumbnails' | ||
| 106 | 'footer footer footer'; | ||
| 107 | box-sizing: border-box; | ||
| 108 | min-block-size: 0; | ||
| 109 | flex: 1 1 auto; | ||
| 110 | |||
| 111 | @include iro.bem-elem('header') { | ||
| 112 | grid-area: header; | ||
| 113 | display: flex; | 19 | display: flex; |
| 20 | grid-area: header; | ||
| 114 | align-items: flex-start; | 21 | align-items: flex-start; |
| 115 | padding-block-start: fn.dim(--pad); | 22 | padding-block-start: props.get(vars.$pad); |
| 116 | padding-inline: fn.dim(--pad); | 23 | padding-inline: props.get(vars.$pad); |
| 117 | } | 24 | } |
| 118 | 25 | ||
| 119 | @include iro.bem-elem('img') { | 26 | @include bem.elem('img') { |
| 120 | display: none; | ||
| 121 | box-sizing: border-box; | 27 | box-sizing: border-box; |
| 28 | display: block; | ||
| 122 | grid-area: content; | 29 | grid-area: content; |
| 123 | max-inline-size: 100%; | ||
| 124 | max-block-size: 100%; | ||
| 125 | place-self: center; | 30 | place-self: center; |
| 126 | padding: fn.dim(--pad); | 31 | inline-size: auto; |
| 127 | 32 | max-inline-size: 100%; | |
| 128 | @include iro.bem-sibling-elem('img') { | 33 | block-size: auto; |
| 129 | @include iro.bem-modifier('default') { | 34 | max-block-size: props.get(vars.$image--max-height); |
| 130 | display: block; | 35 | padding: props.get(vars.$pad); |
| 131 | 36 | margin-inline: auto; | |
| 132 | @include iro.bem-next-elem('nav-btn') { | 37 | border-radius: calc(props.get(vars.$pad) + props.get(vars.$image--border-radius)); |
| 133 | display: block; | ||
| 134 | |||
| 135 | @include iro.bem-next-elem('nav-btn') { | ||
| 136 | display: block; | ||
| 137 | } | ||
| 138 | } | ||
| 139 | } | ||
| 140 | } | ||
| 141 | |||
| 142 | @include iro.bem-multi('&:target', 'is' 'visible') { | ||
| 143 | display: block; | ||
| 144 | |||
| 145 | @include iro.bem-next-elem('nav-btn') { | ||
| 146 | display: block; | ||
| 147 | |||
| 148 | @include iro.bem-next-elem('nav-btn') { | ||
| 149 | display: block; | ||
| 150 | } | ||
| 151 | } | ||
| 152 | |||
| 153 | @include iro.bem-sibling-elem('img') { | ||
| 154 | @include iro.bem-modifier('default') { | ||
| 155 | display: none; | ||
| 156 | |||
| 157 | @include iro.bem-next-elem('nav-btn') { | ||
| 158 | display: none; | ||
| 159 | |||
| 160 | @include iro.bem-next-elem('nav-btn') { | ||
| 161 | display: none; | ||
| 162 | } | ||
| 163 | } | ||
| 164 | } | ||
| 165 | } | ||
| 166 | } | ||
| 167 | } | 38 | } |
| 168 | 39 | ||
| 169 | @include iro.bem-elem('thumbnails') { | 40 | @include bem.elem('thumbnails') { |
| 41 | display: none; | ||
| 170 | grid-area: thumbnails; | 42 | grid-area: thumbnails; |
| 171 | display: flex; | 43 | gap: props.get(vars.$thumbnails--spacing); |
| 172 | gap: fn.dim(--thumbnail --spacing); | 44 | padding: props.get(vars.$pad); |
| 173 | padding: fn.dim(--pad); | 45 | margin-block-start: calc(-1 * props.get(vars.$pad)); |
| 174 | margin-block-start: calc(-1 * fn.dim(--pad)); | ||
| 175 | overflow: auto; | 46 | overflow: auto; |
| 176 | } | 47 | } |
| 177 | 48 | ||
| 178 | @include iro.bem-elem('footer') { | 49 | @include bem.elem('close-btn') { |
| 179 | grid-area: footer; | 50 | display: none; |
| 180 | display: flex; | ||
| 181 | align-items: flex-start; | ||
| 182 | padding-block: 0 fn.dim(--pad); | ||
| 183 | padding-inline: fn.dim(--pad); | ||
| 184 | } | ||
| 185 | |||
| 186 | @include iro.bem-elem('thumbnail') { | ||
| 187 | position: relative; | ||
| 188 | flex: 0 0 auto; | ||
| 189 | inline-size: fn.dim(--thumbnail --size); | ||
| 190 | block-size: fn.dim(--thumbnail --size); | ||
| 191 | overflow: hidden; | ||
| 192 | border-radius: fn.dim(--thumbnail --rounding); | ||
| 193 | outline: fn.dim(--thumbnail --border) solid fn.color(--thumbnail --border); | ||
| 194 | outline-offset: calc(-1 * fn.dim(--thumbnail --border)); | ||
| 195 | opacity: .75; | ||
| 196 | |||
| 197 | &:hover, | ||
| 198 | &:active, | ||
| 199 | &:focus-visible { | ||
| 200 | outline-color: fn.color(--thumbnail --hover --border); | ||
| 201 | opacity: 1; | ||
| 202 | } | ||
| 203 | |||
| 204 | @include iro.bem-is('selected') { | ||
| 205 | $focus-border-offset: calc(-1 * fn.dim(--thumbnail --selected --border)); | ||
| 206 | |||
| 207 | margin: $focus-border-offset; | ||
| 208 | border: fn.dim(--thumbnail --selected --border) solid fn.color(--thumbnail --selected --border); | ||
| 209 | border-radius: calc(fn.dim(--thumbnail --rounding) - $focus-border-offset); | ||
| 210 | outline: none; | ||
| 211 | opacity: 1; | ||
| 212 | } | ||
| 213 | |||
| 214 | &:focus-visible { | ||
| 215 | $focus-border-offset: calc(-1 * fn.dim(--thumbnail --key-focus --border-offset)); | ||
| 216 | |||
| 217 | margin: $focus-border-offset; | ||
| 218 | border: fn.dim(--thumbnail --key-focus --border-offset) solid transparent; | ||
| 219 | border-radius: calc(fn.dim(--thumbnail --rounding) - $focus-border-offset); | ||
| 220 | outline: fn.dim(--thumbnail --key-focus --border) solid fn.color(--thumbnail --key-focus --border); | ||
| 221 | outline-offset: 0; | ||
| 222 | box-shadow: 0 0 0 calc(fn.dim(--thumbnail --key-focus --outline) + fn.dim(--thumbnail --key-focus --border)) fn.color(--thumbnail --key-focus --outline); | ||
| 223 | } | ||
| 224 | } | ||
| 225 | |||
| 226 | @include iro.bem-elem('thumbnail-img') { | ||
| 227 | display: block; | ||
| 228 | position: absolute; | ||
| 229 | inset-block-start: 0; | ||
| 230 | inset-inline-start: 0; | ||
| 231 | inline-size: 100%; | ||
| 232 | block-size: 100%; | ||
| 233 | object-fit: cover; | ||
| 234 | object-position: center center; | ||
| 235 | } | ||
| 236 | |||
| 237 | @include iro.bem-elem('thumbnail-icon') { | ||
| 238 | position: absolute; | ||
| 239 | inset-block-start: 50%; | ||
| 240 | inset-inline-start: 50%; | ||
| 241 | transform: translate(-50%, -50%); | ||
| 242 | } | ||
| 243 | |||
| 244 | @include iro.bem-elem('close-btn') { | ||
| 245 | flex: 0 0 auto; | 51 | flex: 0 0 auto; |
| 246 | margin-block-start: calc(-.5 * fn.dim(--pad)); | 52 | margin-block-start: calc(-.5 * props.get(vars.$pad)); |
| 247 | margin-inline: auto calc(-.5 * fn.dim(--pad)); | 53 | margin-inline: auto calc(-.5 * props.get(vars.$pad)); |
| 248 | font-size: fn.dim(--close-button --font-size); | 54 | font-size: props.get(vars.$close-button--font-size); |
| 249 | } | 55 | } |
| 250 | 56 | ||
| 251 | @include iro.bem-elem('nav-btn') { | 57 | @include bem.elem('nav-btn') { |
| 252 | display: none; | ||
| 253 | position: relative; | 58 | position: relative; |
| 59 | display: none; | ||
| 254 | align-self: center; | 60 | align-self: center; |
| 255 | overflow: visible; | 61 | overflow: visible; |
| 256 | font-size: fn.dim(--nav-button --font-size); | 62 | font-size: props.get(vars.$nav-button--font-size); |
| 257 | 63 | ||
| 258 | &::before { | 64 | &::before { |
| 259 | content: ''; | ||
| 260 | display: block; | ||
| 261 | position: absolute; | 65 | position: absolute; |
| 262 | inset-block-start: 50%; | 66 | inset-block-start: 50%; |
| 263 | inline-size: fn.dim(--nav-button --width); | 67 | display: block; |
| 264 | block-size: fn.dim(--nav-button --height); | 68 | inline-size: props.get(vars.$nav-button--inline-size); |
| 69 | block-size: props.get(vars.$nav-button--block-size); | ||
| 70 | content: ''; | ||
| 265 | transform: translateY(-50%); | 71 | transform: translateY(-50%); |
| 266 | } | 72 | } |
| 267 | 73 | ||
| 268 | @include iro.bem-modifier('prev') { | 74 | @include bem.modifier('prev') { |
| 269 | grid-area: prev; | 75 | grid-area: prev; |
| 270 | margin-inline: calc(.5 * fn.dim(--pad)) calc(-1 * fn.dim(--pad)); | 76 | margin-inline: calc(.5 * props.get(vars.$pad)) calc(-1 * props.get(vars.$pad)); |
| 271 | 77 | ||
| 272 | &::before { | 78 | &::before { |
| 273 | inset-inline-start: 0; | 79 | inset-inline-start: 0; |
| 274 | } | 80 | } |
| 275 | } | 81 | } |
| 276 | 82 | ||
| 277 | @include iro.bem-modifier('next') { | 83 | @include bem.modifier('next') { |
| 278 | grid-area: next; | 84 | grid-area: next; |
| 279 | margin-inline: calc(-1 * fn.dim(--pad)) calc(.5 * fn.dim(--pad)); | 85 | margin-inline: calc(-1 * props.get(vars.$pad)) calc(.5 * props.get(vars.$pad)); |
| 280 | 86 | ||
| 281 | &::before { | 87 | &::before { |
| 282 | inset-inline-end: 0; | 88 | inset-inline-end: 0; |
| 283 | } | 89 | } |
| 284 | } | 90 | } |
| 285 | } | 91 | } |
| 286 | |||
| 287 | @each $theme in $static-themes { | ||
| 288 | @include iro.bem-modifier(static-#{$theme}) { | ||
| 289 | color: fn.color(--static-#{$theme} --text); | ||
| 290 | 92 | ||
| 291 | @include iro.bem-elem('thumbnail') { | 93 | @include bem.modifier('interactive') { |
| 292 | outline-color: fn.color(--static-#{$theme} --thumbnail --border); | 94 | display: grid; |
| 95 | grid-template-areas: | ||
| 96 | 'header header header' | ||
| 97 | 'prev content next' | ||
| 98 | 'thumbnails thumbnails thumbnails'; | ||
| 99 | grid-template-rows: auto minmax(0, 1fr) auto auto; | ||
| 100 | grid-template-columns: auto minmax(0, 1fr) auto; | ||
| 101 | |||
| 102 | @include bem.modifier('fullscreen') { | ||
| 103 | block-size: props.get(vars.$fullscreen--height); | ||
| 104 | } | ||
| 293 | 105 | ||
| 294 | &:hover, | 106 | @include bem.elem('img') { |
| 295 | &:active, | 107 | display: none; |
| 296 | &:focus-visible { | 108 | max-block-size: 100%; |
| 297 | outline-color: fn.color(--static-#{$theme} --thumbnail --hover --border); | 109 | margin-inline: 0; |
| 298 | } | ||
| 299 | |||
| 300 | @include iro.bem-is('selected') { | ||
| 301 | border-color: fn.color(--static-#{$theme} --thumbnail --selected --border); | ||
| 302 | } | ||
| 303 | 110 | ||
| 304 | &:focus-visible { | 111 | @include bem.multi('&:target', 'is' 'visible') { |
| 305 | border-color: transparent; | 112 | display: block; |
| 306 | outline-color: fn.color(--static-#{$theme} --thumbnail --key-focus --border); | ||
| 307 | box-shadow: 0 0 0 calc(fn.dim(--thumbnail --key-focus --outline) + fn.dim(--thumbnail --key-focus --border)) fn.color(--static-#{$theme} --thumbnail --key-focus --outline); | ||
| 308 | } | ||
| 309 | } | 113 | } |
| 310 | } | 114 | } |
| 115 | |||
| 116 | @include bem.elem('thumbnails') { | ||
| 117 | display: flex; | ||
| 118 | } | ||
| 119 | |||
| 120 | @include bem.elem('close-btn') { | ||
| 121 | display: block; | ||
| 122 | } | ||
| 123 | |||
| 124 | @include bem.elem('nav-btn') { | ||
| 125 | display: block; | ||
| 126 | } | ||
| 127 | } | ||
| 128 | |||
| 129 | @each $theme in map.keys(props.get(vars.$static-themes)) { | ||
| 130 | @include bem.modifier(string.slice($theme, 3)) { | ||
| 131 | color: props.get(vars.$static-themes, $theme, --text); | ||
| 132 | } | ||
| 311 | } | 133 | } |
| 312 | } | 134 | } |
| 313 | } | 135 | } |
diff --git a/src/objects/_lightbox.vars.scss b/src/objects/_lightbox.vars.scss new file mode 100644 index 0000000..cc926e4 --- /dev/null +++ b/src/objects/_lightbox.vars.scss | |||
| @@ -0,0 +1,33 @@ | |||
| 1 | @use 'sass:map'; | ||
| 2 | @use 'sass:string'; | ||
| 3 | @use 'iro-sass/src/props'; | ||
| 4 | @use '../core.vars' as core; | ||
| 5 | |||
| 6 | $pad: props.def(--o-lightbox--pad, props.get(core.$size--150)) !default; | ||
| 7 | $fullscreen--height: props.def(--o-lightbox--fullscreen--height, 100vh) !default; | ||
| 8 | |||
| 9 | $image--max-height: props.def(--o-lightbox--image--max-height, calc(100vh - props.get(core.$size--600))) !default; | ||
| 10 | $image--border-radius: props.def(--o-lightbox--image--border-radius, props.get(core.$rounding)) !default; | ||
| 11 | |||
| 12 | $close-button--font-size: props.def(--o-lightbox--close-button--font-size, props.get(core.$font-size--200)) !default; | ||
| 13 | |||
| 14 | $nav-button--inline-size: props.def(--o-lightbox--nav-button--inline-size, props.get(core.$size--2000)) !default; | ||
| 15 | $nav-button--block-size: props.def(--o-lightbox--nav-button--block-size, props.get(core.$size--3800)) !default; | ||
| 16 | $nav-button--font-size: props.def(--o-lightbox--nav-button--font-size, props.get(core.$font-size--200)) !default; | ||
| 17 | |||
| 18 | $nav-button--inline-size--md: props.def(--o-lightbox--nav-button--inline-size, props.get(core.$size--2500), 'md') !default; | ||
| 19 | $nav-button--block-size--md: props.def(--o-lightbox--nav-button--block-size, props.get(core.$size--2500), 'md') !default; | ||
| 20 | |||
| 21 | $thumbnails--spacing: props.def(--o-lightbox--thumbnails--spacing, props.get(core.$size--100)) !default; | ||
| 22 | |||
| 23 | $static-themes: props.def(--o-lightbox, (), 'color'); | ||
| 24 | |||
| 25 | @each $theme in map.keys(props.get(core.$transparent-colors)) { | ||
| 26 | $lightbox-theme: --static-#{string.slice($theme, 3)}; | ||
| 27 | |||
| 28 | $static-themes: props.merge($static-themes, ( | ||
| 29 | $lightbox-theme: ( | ||
| 30 | --text: props.get(core.$transparent-colors, $theme, --800), | ||
| 31 | ) | ||
| 32 | )); | ||
| 33 | } | ||
diff --git a/src/objects/_menu.scss b/src/objects/_menu.scss index 0f691a2..4d31874 100644 --- a/src/objects/_menu.scss +++ b/src/objects/_menu.scss | |||
| @@ -1,137 +1,102 @@ | |||
| 1 | /* stylelint-disable length-zero-no-unit */ | 1 | @use 'sass:meta'; |
| 2 | 2 | @use 'iro-sass/src/bem'; | |
| 3 | @use 'iro-sass/src/index' as iro; | 3 | @use 'iro-sass/src/props'; |
| 4 | @use '../functions' as fn; | 4 | @use '../props' as *; |
| 5 | 5 | @use 'icon.vars' as icon; | |
| 6 | @use './icon'; | 6 | |
| 7 | 7 | @forward 'menu.vars'; | |
| 8 | @include iro.props-namespace('menu') { | 8 | @use 'menu.vars' as vars; |
| 9 | @include iro.props-store(( | 9 | |
| 10 | --dims: ( | 10 | @mixin styles { |
| 11 | --spacing: 0em, | 11 | @include materialize-at-root(meta.module-variables('vars')); |
| 12 | --header: ( | 12 | |
| 13 | --font-size: fn.global-dim(--font-size --50), | 13 | @include bem.object('menu') { |
| 14 | ), | ||
| 15 | --separator: fn.global-dim(--size --100), | ||
| 16 | --item: ( | ||
| 17 | --pad-i: fn.global-dim(--size --150), | ||
| 18 | --pad-b: fn.global-dim(--size --100), | ||
| 19 | --rounding: 0em, | ||
| 20 | |||
| 21 | --key-focus: ( | ||
| 22 | --border: fn.global-dim(--key-focus --border), | ||
| 23 | --border-offset: fn.global-dim(--key-focus --border-offset), | ||
| 24 | --outline: fn.global-dim(--key-focus --outline), | ||
| 25 | ), | ||
| 26 | ), | ||
| 27 | ), | ||
| 28 | --colors: ( | ||
| 29 | --separator: fn.global-color(--border), | ||
| 30 | --header: ( | ||
| 31 | --label: fn.global-color(--heading), | ||
| 32 | ), | ||
| 33 | --item: ( | ||
| 34 | --hover: ( | ||
| 35 | --bg: fn.global-color(--border-mute), | ||
| 36 | --label: fn.global-color(--heading), | ||
| 37 | ), | ||
| 38 | --active: ( | ||
| 39 | --bg: fn.global-color(--border), | ||
| 40 | --label: fn.global-color(--heading), | ||
| 41 | ), | ||
| 42 | --disabled: ( | ||
| 43 | --label: fn.global-color(--text-disabled), | ||
| 44 | ), | ||
| 45 | --key-focus: ( | ||
| 46 | --border: fn.global-color(--focus --border), | ||
| 47 | --outline: fn.global-color(--focus --outline), | ||
| 48 | ), | ||
| 49 | ), | ||
| 50 | ), | ||
| 51 | )); | ||
| 52 | |||
| 53 | @include iro.bem-object(iro.props-namespace()) { | ||
| 54 | display: flex; | 14 | display: flex; |
| 55 | flex-direction: column; | 15 | flex-direction: column; |
| 56 | gap: fn.dim(--spacing); | 16 | gap: props.get(vars.$spacing); |
| 57 | 17 | ||
| 58 | @include iro.bem-elem('header') { | 18 | @include bem.elem('header') { |
| 59 | padding-block: fn.dim(--item --pad-b); | 19 | padding-block: props.get(vars.$item--pad-b); |
| 60 | padding-inline: fn.dim(--item --pad-i); | 20 | padding-inline: props.get(vars.$item--pad-i); |
| 61 | color: fn.color(--header --label); | 21 | font-size: props.get(vars.$header--font-size); |
| 62 | font-size: fn.dim(--header --font-size); | ||
| 63 | font-weight: 500; | 22 | font-weight: 500; |
| 64 | letter-spacing: .5px; | 23 | color: props.get(vars.$header--label-color); |
| 65 | text-transform: uppercase; | 24 | text-transform: uppercase; |
| 25 | letter-spacing: .5px; | ||
| 66 | 26 | ||
| 67 | @include iro.bem-next-twin-elem { | 27 | @include bem.next-twin-elem { |
| 68 | margin-block-start: calc(fn.dim(--separator) + fn.dim(--spacing)); | 28 | margin-block-start: calc(props.get(vars.$separator-width) + props.get(vars.$spacing)); |
| 69 | } | 29 | } |
| 70 | } | 30 | } |
| 71 | 31 | ||
| 72 | @include iro.bem-elem('item') { | 32 | @include bem.elem('item') { |
| 73 | padding-block: fn.dim(--item --pad-b); | 33 | padding-block: props.get(vars.$item--pad-b); |
| 74 | padding-inline: fn.dim(--item --pad-i); | 34 | padding-inline: props.get(vars.$item--pad-i); |
| 75 | margin: calc(-1 * fn.dim(--item --key-focus --outline)); | 35 | margin: calc(-1 * props.get(vars.$item--key-focus--outline-width)); |
| 76 | border: fn.dim(--item --key-focus --outline) solid transparent; | 36 | color: props.get(vars.$item--disabled--label-color); |
| 77 | border-radius: calc(fn.dim(--item --rounding) + fn.dim(--item --key-focus --outline)); | ||
| 78 | color: fn.color(--item --disabled --label); | ||
| 79 | background-clip: padding-box; | 37 | background-clip: padding-box; |
| 38 | border: props.get(vars.$item--key-focus--outline-width) solid transparent; | ||
| 39 | border-radius: calc(props.get(vars.$item--rounding) + props.get(vars.$item--key-focus--outline-width)); | ||
| 80 | 40 | ||
| 81 | &:link, | 41 | &:link, |
| 82 | &:visited, | 42 | &:visited, |
| 83 | &:enabled { | 43 | &:enabled { |
| 84 | color: currentColor; | 44 | color: currentColor; |
| 85 | 45 | ||
| 86 | @include iro.bem-multi('&:hover, &:focus-visible', 'is' 'selected') { | 46 | @include bem.multi('&:hover, &:focus-visible', 'is' 'selected') { |
| 87 | background-color: fn.color(--item --hover --bg); | 47 | color: props.get(vars.$item--hover--label-color); |
| 88 | color: fn.color(--item --hover --label); | 48 | background-color: props.get(vars.$item--hover--bg-color); |
| 89 | } | 49 | } |
| 90 | 50 | ||
| 91 | &:active { | 51 | &:active { |
| 92 | background-color: fn.color(--item --active --bg); | 52 | color: props.get(vars.$item--active--label-color); |
| 93 | color: fn.color(--item --active --label); | 53 | background-color: props.get(vars.$item--active--bg-color); |
| 94 | } | 54 | } |
| 95 | 55 | ||
| 96 | &:focus-visible { | 56 | &:focus-visible { |
| 97 | outline: fn.color(--item --key-focus --border) solid fn.dim(--item --key-focus --border); | 57 | outline: props.get(vars.$item--key-focus--border-color) solid props.get(vars.$item--key-focus--border-width); |
| 98 | box-shadow: 0 0 0 calc(fn.dim(--item --key-focus --border) + fn.dim(--item --key-focus --outline)) fn.color(--item --key-focus --outline); | 58 | box-shadow: |
| 59 | 0 | ||
| 60 | 0 | ||
| 61 | 0 | ||
| 62 | calc(props.get(vars.$item--key-focus--border-width) + props.get(vars.$item--key-focus--outline-width)) | ||
| 63 | props.get(vars.$item--key-focus--outline-color); | ||
| 99 | } | 64 | } |
| 100 | } | 65 | } |
| 101 | 66 | ||
| 102 | @include iro.bem-next-elem('header') { | 67 | @include bem.next-elem('header') { |
| 103 | margin-block-start: calc(fn.dim(--separator) + fn.dim(--spacing)); | 68 | margin-block-start: calc(props.get(vars.$separator-width) + props.get(vars.$spacing)); |
| 104 | } | 69 | } |
| 105 | } | 70 | } |
| 106 | 71 | ||
| 107 | @include iro.bem-elem('header') { | 72 | @include bem.elem('header') { |
| 108 | &:link, | 73 | &:link, |
| 109 | &:visited, | 74 | &:visited, |
| 110 | &:enabled { | 75 | &:enabled { |
| 111 | color: fn.color(--header --label); | 76 | color: props.get(vars.$header--label-color); |
| 112 | } | 77 | } |
| 113 | } | 78 | } |
| 114 | 79 | ||
| 115 | @include iro.bem-elem('separator') { | 80 | @include bem.elem('separator') { |
| 116 | block-size: 1px; | 81 | block-size: 1px; |
| 117 | margin-block: fn.dim(--separator); | 82 | margin-block: props.get(vars.$separator-width); |
| 118 | margin-inline: fn.dim(--item --pad-i); | 83 | margin-inline: props.get(vars.$item--pad-i); |
| 119 | background-color: fn.color(--separator); | 84 | background-color: props.get(vars.$separator-color); |
| 120 | } | 85 | } |
| 121 | 86 | ||
| 122 | @include iro.bem-elem('slot') { | 87 | @include bem.elem('slot') { |
| 123 | padding-block: fn.dim(--item --pad-b); | 88 | padding-block: props.get(vars.$item--pad-b); |
| 124 | padding-inline: fn.dim(--item --pad-i); | 89 | padding-inline: props.get(vars.$item--pad-i); |
| 125 | } | 90 | } |
| 126 | 91 | ||
| 127 | @include iro.bem-elem('icon-slot') { | 92 | @include bem.elem('icon-slot') { |
| 128 | display: flex; | 93 | display: flex; |
| 129 | justify-content: center; | 94 | justify-content: center; |
| 130 | inline-size: fn.foreign-dim(--icon, --size); | 95 | inline-size: props.get(icon.$size); |
| 131 | } | 96 | } |
| 132 | 97 | ||
| 133 | @include iro.bem-modifier('pull') { | 98 | @include bem.modifier('pull') { |
| 134 | margin: calc(-1 * fn.dim(--item --pad-i)); | 99 | margin: calc(-1 * props.get(vars.$item--pad-i)); |
| 135 | } | 100 | } |
| 136 | } | 101 | } |
| 137 | } | 102 | } |
diff --git a/src/objects/_menu.vars.scss b/src/objects/_menu.vars.scss new file mode 100644 index 0000000..d242a1f --- /dev/null +++ b/src/objects/_menu.vars.scss | |||
| @@ -0,0 +1,29 @@ | |||
| 1 | @use 'sass:map'; | ||
| 2 | @use 'iro-sass/src/props'; | ||
| 3 | @use '../core.vars' as core; | ||
| 4 | |||
| 5 | $spacing: props.def(--o-menu--spacing, 0em) !default; | ||
| 6 | $header--font-size: props.def(--o-menu--header--font-size, props.get(core.$font-size--50)) !default; | ||
| 7 | $separator-width: props.def(--o-menu--separator-width, props.get(core.$size--100)) !default; | ||
| 8 | |||
| 9 | $item--pad-i: props.def(--o-menu--item--pad-i, props.get(core.$size--150)) !default; | ||
| 10 | $item--pad-b: props.def(--o-menu--item--pad-b, props.get(core.$size--100)) !default; | ||
| 11 | $item--rounding: props.def(--o-menu--item--rounding, 0em) !default; | ||
| 12 | |||
| 13 | $item--key-focus--border-width: props.def(--o-menu--item--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; | ||
| 14 | $item--key-focus--border-offset: props.def(--o-menu--item--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; | ||
| 15 | $item--key-focus--outline-width: props.def(--o-menu--item--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; | ||
| 16 | |||
| 17 | $separator-color: props.def(--o-menu--separator-color, props.get(core.$theme, --border), 'color') !default; | ||
| 18 | $header--label-color: props.def(--o-menu--header--label-color, props.get(core.$theme, --heading), 'color') !default; | ||
| 19 | |||
| 20 | $item--hover--bg-color: props.def(--o-menu--item--hover--bg-color, props.get(core.$theme, --border-mute), 'color') !default; | ||
| 21 | $item--hover--label-color: props.def(--o-menu--item--hover--label-color, props.get(core.$theme, --heading), 'color') !default; | ||
| 22 | |||
| 23 | $item--active--bg-color: props.def(--o-menu--item--active--bg-color, props.get(core.$theme, --border), 'color') !default; | ||
| 24 | $item--active--label-color: props.def(--o-menu--item--active--label-color, props.get(core.$theme, --heading), 'color') !default; | ||
| 25 | |||
| 26 | $item--disabled--label-color: props.def(--o-menu--item--disabled--label-color, props.get(core.$theme, --text-disabled), 'color') !default; | ||
| 27 | |||
| 28 | $item--key-focus--border-color: props.def(--o-menu--item--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default; | ||
| 29 | $item--key-focus--outline-color: props.def(--o-menu--item--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default; | ||
diff --git a/src/objects/_navbar.scss b/src/objects/_navbar.scss new file mode 100644 index 0000000..59d4c51 --- /dev/null +++ b/src/objects/_navbar.scss | |||
| @@ -0,0 +1,191 @@ | |||
| 1 | @use 'sass:map'; | ||
| 2 | @use 'sass:meta'; | ||
| 3 | @use 'sass:string'; | ||
| 4 | @use 'iro-sass/src/bem'; | ||
| 5 | @use 'iro-sass/src/props'; | ||
| 6 | @use '../props' as *; | ||
| 7 | |||
| 8 | @forward 'navbar.vars'; | ||
| 9 | @use 'navbar.vars' as vars; | ||
| 10 | |||
| 11 | @mixin styles { | ||
| 12 | @include materialize-at-root(meta.module-variables('vars')); | ||
| 13 | |||
| 14 | @include bem.object('navbar') { | ||
| 15 | display: flex; | ||
| 16 | block-size: props.get(vars.$block-size); | ||
| 17 | |||
| 18 | @include bem.elem('item-content-text') { | ||
| 19 | margin-inline: props.get(vars.$item--pad-i-label); | ||
| 20 | } | ||
| 21 | |||
| 22 | @include bem.elem('item-content') { | ||
| 23 | position: relative; | ||
| 24 | padding-block: props.get(vars.$item--pad-b); | ||
| 25 | padding-inline: props.get(vars.$item--pad-i); | ||
| 26 | font-size: props.get(vars.$item--font-size); | ||
| 27 | color: currentColor; | ||
| 28 | white-space: nowrap; | ||
| 29 | border-radius: 100em; | ||
| 30 | |||
| 31 | &::after { | ||
| 32 | position: absolute; | ||
| 33 | inset: calc(-1 * props.get(vars.$key-focus--border-offset)); | ||
| 34 | z-index: -10; | ||
| 35 | display: block; | ||
| 36 | pointer-events: none; | ||
| 37 | visibility: hidden; | ||
| 38 | content: ''; | ||
| 39 | border-radius: 100em; | ||
| 40 | outline: props.get(vars.$default-theme, --key-focus, --border) solid props.get(vars.$key-focus--border-width); | ||
| 41 | box-shadow: | ||
| 42 | 0 | ||
| 43 | 0 | ||
| 44 | 0 | ||
| 45 | calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) | ||
| 46 | props.get(vars.$default-theme, --key-focus, --outline); | ||
| 47 | } | ||
| 48 | } | ||
| 49 | |||
| 50 | @include bem.elem('item') { | ||
| 51 | display: flex; | ||
| 52 | flex-direction: column; | ||
| 53 | align-items: center; | ||
| 54 | justify-content: center; | ||
| 55 | inline-size: 100%; | ||
| 56 | padding-inline: calc(.5 * props.get(vars.$spacing)); | ||
| 57 | font-weight: 500; | ||
| 58 | color: props.get(vars.$default-theme, --disabled, --label-color); | ||
| 59 | |||
| 60 | &:link, | ||
| 61 | &:visited, | ||
| 62 | &:enabled { | ||
| 63 | color: props.get(vars.$default-theme, --label-color); | ||
| 64 | |||
| 65 | &:hover, | ||
| 66 | &:focus-visible { | ||
| 67 | color: props.get(vars.$default-theme, --hover, --label-color); | ||
| 68 | |||
| 69 | @include bem.elem('item-content') { | ||
| 70 | background-color: props.get(vars.$default-theme, --hover, --bg-color); | ||
| 71 | } | ||
| 72 | } | ||
| 73 | |||
| 74 | &:focus-visible { | ||
| 75 | @include bem.elem('item-content') { | ||
| 76 | &::after { | ||
| 77 | visibility: visible; | ||
| 78 | } | ||
| 79 | } | ||
| 80 | } | ||
| 81 | |||
| 82 | &:active { | ||
| 83 | color: props.get(vars.$default-theme, --active, --label-color); | ||
| 84 | |||
| 85 | @include bem.elem('item-content') { | ||
| 86 | background-color: props.get(vars.$default-theme, --active, --bg-color); | ||
| 87 | } | ||
| 88 | } | ||
| 89 | } | ||
| 90 | |||
| 91 | @include bem.is('selected') { | ||
| 92 | font-weight: bold; | ||
| 93 | color: props.get(vars.$default-theme, --selected, --disabled, --label-color); | ||
| 94 | |||
| 95 | @include bem.elem('item-content') { | ||
| 96 | background-color: props.get(vars.$default-theme, --selected, --disabled, --bg-color); | ||
| 97 | } | ||
| 98 | |||
| 99 | &:link, | ||
| 100 | &:visited, | ||
| 101 | &:enabled { | ||
| 102 | color: props.get(vars.$default-theme, --selected, --label-color); | ||
| 103 | |||
| 104 | @include bem.elem('item-content') { | ||
| 105 | background-color: props.get(vars.$default-theme, --selected, --bg-color); | ||
| 106 | } | ||
| 107 | |||
| 108 | &:hover, | ||
| 109 | &:focus-visible { | ||
| 110 | color: props.get(vars.$default-theme, --selected, --hover, --label-color); | ||
| 111 | |||
| 112 | @include bem.elem('item-content') { | ||
| 113 | background-color: props.get(vars.$default-theme, --selected, --hover, --bg-color); | ||
| 114 | } | ||
| 115 | } | ||
| 116 | |||
| 117 | &:active { | ||
| 118 | color: props.get(vars.$default-theme, --selected, --active, --label-color); | ||
| 119 | |||
| 120 | @include bem.elem('item-content') { | ||
| 121 | background-color: props.get(vars.$default-theme, --selected, --active, --bg-color); | ||
| 122 | } | ||
| 123 | } | ||
| 124 | } | ||
| 125 | } | ||
| 126 | } | ||
| 127 | |||
| 128 | @include bem.modifier('hide-unselected') { | ||
| 129 | @include bem.elem('item') { | ||
| 130 | display: none; | ||
| 131 | |||
| 132 | @include bem.is('selected') { | ||
| 133 | display: flex; | ||
| 134 | } | ||
| 135 | } | ||
| 136 | } | ||
| 137 | |||
| 138 | @include bem.modifier('adapt') { | ||
| 139 | gap: props.get(vars.$spacing); | ||
| 140 | block-size: 100%; | ||
| 141 | |||
| 142 | @include bem.elem('item') { | ||
| 143 | padding-inline: 0; | ||
| 144 | } | ||
| 145 | } | ||
| 146 | |||
| 147 | |||
| 148 | @include bem.modifier('align-block') { | ||
| 149 | margin-inline: calc(-1 * props.get(vars.$item--pad-i)); | ||
| 150 | } | ||
| 151 | |||
| 152 | @include bem.modifier('quiet') { | ||
| 153 | @include bem.elem('item') { | ||
| 154 | @include bem.is('selected') { | ||
| 155 | color: props.get(vars.$default-theme, --quiet, --selected, --disabled, --label-color); | ||
| 156 | |||
| 157 | @include bem.elem('item-content') { | ||
| 158 | background-color: props.get(vars.$default-theme, --quiet, --selected, --disabled, --bg-color); | ||
| 159 | } | ||
| 160 | |||
| 161 | &:link, | ||
| 162 | &:visited, | ||
| 163 | &:enabled { | ||
| 164 | color: props.get(vars.$default-theme, --quiet, --selected, --label-color); | ||
| 165 | |||
| 166 | @include bem.elem('item-content') { | ||
| 167 | background-color: props.get(vars.$default-theme, --quiet, --selected, --bg-color); | ||
| 168 | } | ||
| 169 | |||
| 170 | &:hover, | ||
| 171 | &:focus-visible { | ||
| 172 | color: props.get(vars.$default-theme, --quiet, --selected, --hover, --label-color); | ||
| 173 | |||
| 174 | @include bem.elem('item-content') { | ||
| 175 | background-color: props.get(vars.$default-theme, --quiet, --selected, --hover, --bg-color); | ||
| 176 | } | ||
| 177 | } | ||
| 178 | |||
| 179 | &:active { | ||
| 180 | color: props.get(vars.$default-theme, --quiet, --selected, --active, --label-color); | ||
| 181 | |||
| 182 | @include bem.elem('item-content') { | ||
| 183 | background-color: props.get(vars.$default-theme, --quiet, --selected, --active, --bg-color); | ||
| 184 | } | ||
| 185 | } | ||
| 186 | } | ||
| 187 | } | ||
| 188 | } | ||
| 189 | } | ||
| 190 | } | ||
| 191 | } | ||
diff --git a/src/objects/_navbar.vars.scss b/src/objects/_navbar.vars.scss new file mode 100644 index 0000000..fcdac80 --- /dev/null +++ b/src/objects/_navbar.vars.scss | |||
| @@ -0,0 +1,84 @@ | |||
| 1 | @use 'sass:map'; | ||
| 2 | @use 'sass:string'; | ||
| 3 | @use 'iro-sass/src/props'; | ||
| 4 | @use '../core.vars' as core; | ||
| 5 | |||
| 6 | $block-size: props.def(--o-navbar--block-size, props.get(core.$size--800)) !default; | ||
| 7 | $spacing: props.def(--o-navbar--spacing, props.get(core.$size--200)) !default; | ||
| 8 | |||
| 9 | $item--pad-i: props.def(--o-navbar--item--pad-i, props.get(core.$size--150)) !default; | ||
| 10 | $item--pad-i-label: props.def(--o-navbar--item--pad-i-label, props.get(core.$size--25)) !default; | ||
| 11 | $item--pad-b: props.def(--o-navbar--item--pad-b, props.get(core.$size--40)) !default; | ||
| 12 | $item--font-size: props.def(--o-navbar--item--font-size, props.get(core.$font-size--75)) !default; | ||
| 13 | |||
| 14 | $key-focus--border-width: props.def(--o-navbar--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; | ||
| 15 | $key-focus--border-offset: props.def(--o-navbar--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; | ||
| 16 | $key-focus--outline-width: props.def(--o-navbar--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; | ||
| 17 | |||
| 18 | $default-theme-override: () !default; | ||
| 19 | $default-theme: map.deep-merge(( | ||
| 20 | --label-color: props.get(core.$theme, --text), | ||
| 21 | |||
| 22 | --hover: ( | ||
| 23 | --bg-color: props.get(core.$theme, --border-mute), | ||
| 24 | --label-color: props.get(core.$theme, --heading), | ||
| 25 | ), | ||
| 26 | |||
| 27 | --active: ( | ||
| 28 | --bg-color: props.get(core.$theme, --border), | ||
| 29 | --label-color: props.get(core.$theme, --heading), | ||
| 30 | ), | ||
| 31 | |||
| 32 | --disabled: ( | ||
| 33 | --label-color: props.get(core.$theme, --border-strong), | ||
| 34 | ), | ||
| 35 | |||
| 36 | --key-focus: ( | ||
| 37 | --label: props.get(core.$theme, --focus, --text), | ||
| 38 | --border: props.get(core.$theme, --focus, --border), | ||
| 39 | --outline: props.get(core.$theme, --focus, --outline), | ||
| 40 | ), | ||
| 41 | |||
| 42 | --selected: ( | ||
| 43 | --bg-color: props.get(core.$theme, --heading), | ||
| 44 | --label-color: props.get(core.$theme, --base, --50), | ||
| 45 | |||
| 46 | --hover: ( | ||
| 47 | --bg-color: props.get(core.$theme, --text), | ||
| 48 | --label-color: props.get(core.$theme, --base, --50), | ||
| 49 | ), | ||
| 50 | |||
| 51 | --active: ( | ||
| 52 | --bg-color: props.get(core.$theme, --text-mute), | ||
| 53 | --label-color: props.get(core.$theme, --base, --50), | ||
| 54 | ), | ||
| 55 | |||
| 56 | --disabled: ( | ||
| 57 | --bg-color: props.get(core.$theme, --border-mute), | ||
| 58 | --label-color: props.get(core.$theme, --border-strong), | ||
| 59 | ), | ||
| 60 | ), | ||
| 61 | |||
| 62 | --quiet: ( | ||
| 63 | --selected: ( | ||
| 64 | --bg-color: props.get(core.$theme, --accent, --200), | ||
| 65 | --label-color: props.get(core.$theme, --accent, --1100), | ||
| 66 | |||
| 67 | --hover: ( | ||
| 68 | --bg-color: props.get(core.$theme, --accent, --300), | ||
| 69 | --label-color: props.get(core.$theme, --accent, --1200), | ||
| 70 | ), | ||
| 71 | |||
| 72 | --active: ( | ||
| 73 | --bg-color: props.get(core.$theme, --accent, --400), | ||
| 74 | --label-color: props.get(core.$theme, --accent, --1300), | ||
| 75 | ), | ||
| 76 | |||
| 77 | --disabled: ( | ||
| 78 | --bg-color: props.get(core.$theme, --accent, --200), | ||
| 79 | --label-color: props.get(core.$theme, --accent, --800), | ||
| 80 | ), | ||
| 81 | ) | ||
| 82 | ) | ||
| 83 | ), $default-theme-override) !default; | ||
| 84 | $default-theme: props.def(--o-navbar, $default-theme, 'color'); | ||
diff --git a/src/objects/_palette.scss b/src/objects/_palette.scss index 19f282f..8a6cdb2 100644 --- a/src/objects/_palette.scss +++ b/src/objects/_palette.scss | |||
| @@ -1,57 +1,58 @@ | |||
| 1 | @use 'sass:map'; | ||
| 2 | @use 'sass:list'; | 1 | @use 'sass:list'; |
| 2 | @use 'sass:map'; | ||
| 3 | @use 'sass:string'; | 3 | @use 'sass:string'; |
| 4 | @use 'iro-sass/src/index' as iro; | 4 | @use 'iro-sass/src/bem'; |
| 5 | @use '../functions' as fn; | ||
| 6 | @use '../config'; | 5 | @use '../config'; |
| 6 | @use 'iro-sass/src/props'; | ||
| 7 | @use '../core.vars' as core; | ||
| 7 | 8 | ||
| 8 | @include iro.props-namespace('palette') { | 9 | @mixin styles { |
| 9 | @include iro.bem-object(iro.props-namespace()) { | 10 | @include bem.object('palette') { |
| 10 | display: flex; | 11 | display: flex; |
| 11 | block-size: 3em; | 12 | block-size: 3em; |
| 12 | 13 | ||
| 13 | @include iro.bem-elem('item') { | 14 | @include bem.elem('item') { |
| 14 | flex: 1 1 auto; | 15 | flex: 1 1 auto; |
| 15 | 16 | ||
| 16 | $palette: map.get(config.$themes, config.$theme-default, --palettes, --base); | 17 | $palette: map.get(config.$themes, config.$theme-default, light, --palettes, --base); |
| 17 | $contrasts: map.get(config.$themes, config.$theme-default, --contrasts, list.nth($palette, 2)); | 18 | $levels: map.get(config.$themes, config.$theme-default, light, --levels, list.nth($palette, 2)); |
| 18 | 19 | ||
| 19 | @for $i from 1 through list.length($contrasts) { | 20 | @for $i from 1 through list.length($levels) { |
| 20 | $key: list.nth(map.keys($contrasts), $i); | 21 | $key: list.nth(map.keys($levels), $i); |
| 21 | 22 | ||
| 22 | &:nth-child(#{$i}) { | 23 | &:nth-child(#{$i}) { |
| 23 | background-color: fn.global-color(--base $key); | 24 | background-color: props.get(core.$theme, --base, $key); |
| 24 | } | 25 | } |
| 25 | } | 26 | } |
| 26 | } | 27 | } |
| 27 | 28 | ||
| 28 | @each $palette-name, $palette in map.get(config.$themes, config.$theme-default, --palettes) { | 29 | @each $palette-name, $palette in map.get(config.$themes, config.$theme-default, light, --palettes) { |
| 29 | $contrasts: map.get(config.$themes, config.$theme-default, --contrasts, list.nth($palette, 2)); | 30 | $levels: map.get(config.$themes, config.$theme-default, light, --levels, list.nth($palette, 2)); |
| 30 | 31 | ||
| 31 | @include iro.bem-modifier(string.slice($palette-name, 3)) { | 32 | @include bem.modifier(string.slice($palette-name, 3)) { |
| 32 | @include iro.bem-elem('item') { | 33 | @include bem.elem('item') { |
| 33 | @for $i from 1 through list.length($contrasts) { | 34 | @for $i from 1 through list.length($levels) { |
| 34 | $key: list.nth(map.keys($contrasts), $i); | 35 | $key: list.nth(map.keys($levels), $i); |
| 35 | 36 | ||
| 36 | &:nth-child(#{$i}) { | 37 | &:nth-child(#{$i}) { |
| 37 | background-color: fn.global-color($palette-name $key); | 38 | background-color: props.get(core.$theme, $palette-name, $key); |
| 38 | } | 39 | } |
| 39 | } | 40 | } |
| 40 | } | 41 | } |
| 41 | } | 42 | } |
| 42 | } | 43 | } |
| 43 | 44 | ||
| 44 | @include iro.bem-modifier('static') { | 45 | @include bem.modifier('static') { |
| 45 | @each $palette-name, $palette in map.get(config.$static-colors, --palettes) { | 46 | @each $palette-name, $palette in map.get(config.$static-colors, --palettes) { |
| 46 | $contrasts: map.get(config.$static-colors, --contrasts); | 47 | $levels: map.get(config.$static-colors, --levels); |
| 47 | 48 | ||
| 48 | @include iro.bem-modifier(string.slice($palette-name, 3)) { | 49 | @include bem.modifier(string.slice($palette-name, 3)) { |
| 49 | @include iro.bem-elem('item') { | 50 | @include bem.elem('item') { |
| 50 | @for $i from 1 through list.length($contrasts) { | 51 | @for $i from 1 through list.length($levels) { |
| 51 | $key: list.nth(map.keys($contrasts), $i); | 52 | $key: list.nth(map.keys($levels), $i); |
| 52 | 53 | ||
| 53 | &:nth-child(#{$i}) { | 54 | &:nth-child(#{$i}) { |
| 54 | background-color: fn.global-color(#{$palette-name}-static $key); | 55 | background-color: props.get(core.$theme, #{$palette-name}-static, $key); |
| 55 | } | 56 | } |
| 56 | } | 57 | } |
| 57 | } | 58 | } |
diff --git a/src/objects/_placeholders.scss b/src/objects/_placeholders.scss new file mode 100644 index 0000000..e148f21 --- /dev/null +++ b/src/objects/_placeholders.scss | |||
| @@ -0,0 +1,22 @@ | |||
| 1 | @use 'sass:meta'; | ||
| 2 | @use 'iro-sass/src/bem'; | ||
| 3 | @use 'iro-sass/src/props'; | ||
| 4 | @use '../props' as *; | ||
| 5 | |||
| 6 | @forward 'placeholders.vars'; | ||
| 7 | @use 'placeholders.vars' as vars; | ||
| 8 | |||
| 9 | @mixin styles { | ||
| 10 | @include materialize-at-root(meta.module-variables('vars')); | ||
| 11 | |||
| 12 | @include bem.object('placeholders') { | ||
| 13 | @include bem.elem('placeholder') { | ||
| 14 | display: inline-block; | ||
| 15 | min-block-size: props.get(vars.$min-block-size); | ||
| 16 | vertical-align: middle; | ||
| 17 | background-color: currentColor; | ||
| 18 | border-radius: props.get(vars.$rounding); | ||
| 19 | opacity: props.get(vars.$opacity); | ||
| 20 | } | ||
| 21 | } | ||
| 22 | } | ||
diff --git a/src/objects/_placeholders.vars.scss b/src/objects/_placeholders.vars.scss new file mode 100644 index 0000000..a2e41e2 --- /dev/null +++ b/src/objects/_placeholders.vars.scss | |||
| @@ -0,0 +1,6 @@ | |||
| 1 | @use 'iro-sass/src/props'; | ||
| 2 | @use '../core.vars' as core; | ||
| 3 | |||
| 4 | $min-block-size: props.def(--o-placeholder--min-block-size, 1em) !default; | ||
| 5 | $rounding: props.def(--o-placeholder--rounding, props.get(core.$rounding)) !default; | ||
| 6 | $opacity: props.def(--o-placeholder--opacity, .5) !default; | ||
diff --git a/src/objects/_popover.scss b/src/objects/_popover.scss index 5ad58ec..3fe6310 100644 --- a/src/objects/_popover.scss +++ b/src/objects/_popover.scss | |||
| @@ -1,50 +1,38 @@ | |||
| 1 | @use 'iro-sass/src/index' as iro; | 1 | @use 'sass:meta'; |
| 2 | @use '../functions' as fn; | 2 | @use 'iro-sass/src/bem'; |
| 3 | @use 'iro-sass/src/props'; | ||
| 4 | @use '../props' as *; | ||
| 3 | 5 | ||
| 4 | @include iro.props-namespace('popover') { | 6 | @forward 'popover.vars'; |
| 5 | @include iro.props-store(( | 7 | @use 'popover.vars' as vars; |
| 6 | --dims: ( | ||
| 7 | --z-index: 10000, | ||
| 8 | --pad-i: 0, | ||
| 9 | --pad-b: fn.global-dim(--size --85), | ||
| 10 | --separator: fn.global-dim(--size --85), | ||
| 11 | --rounding: fn.global-dim(--rounding), | ||
| 12 | --border: fn.global-dim(--border --thin), | ||
| 13 | ), | ||
| 14 | --colors: ( | ||
| 15 | --bg: fn.global-color(--bg-l2), | ||
| 16 | --border: fn.global-color(--border), | ||
| 17 | --filter: drop-shadow( | ||
| 18 | fn.global-dim(--shadow --x) | ||
| 19 | fn.global-dim(--shadow --y) | ||
| 20 | fn.global-dim(--shadow --blur) | ||
| 21 | fn.global-color(--shadow) | ||
| 22 | ), | ||
| 23 | ), | ||
| 24 | )); | ||
| 25 | 8 | ||
| 26 | @include iro.bem-object(iro.props-namespace()) { | 9 | @mixin styles { |
| 27 | position: absolute; | 10 | @include materialize-at-root(meta.module-variables('vars')); |
| 28 | z-index: fn.dim(--z-index); | 11 | |
| 12 | @include bem.object('popover') { | ||
| 13 | position: fixed; | ||
| 29 | inset-block-start: 0; | 14 | inset-block-start: 0; |
| 30 | inset-inline-start: 0; | 15 | inset-inline-start: 0; |
| 31 | padding-block: fn.dim(--pad-b); | 16 | z-index: props.get(vars.$z-index); |
| 32 | padding-inline: fn.dim(--pad-i); | 17 | padding-block: props.get(vars.$pad-b); |
| 18 | padding-inline: props.get(vars.$pad-i); | ||
| 19 | margin: 0; | ||
| 20 | color: currentColor; | ||
| 21 | background-color: props.get(vars.$bg-color); | ||
| 22 | filter: props.get(vars.$filter); | ||
| 23 | border: props.get(vars.$border-width) solid props.get(vars.$border-color); | ||
| 24 | border-radius: props.get(vars.$rounding); | ||
| 33 | transform: translate(var(--x), var(--y)); | 25 | transform: translate(var(--x), var(--y)); |
| 34 | border: fn.dim(--border) solid fn.color(--border); | ||
| 35 | border-radius: fn.dim(--rounding); | ||
| 36 | background-color: fn.color(--bg); | ||
| 37 | filter: fn.color(--filter); | ||
| 38 | 26 | ||
| 39 | @include iro.bem-modifier('up-left') { | 27 | @include bem.modifier('up-left') { |
| 40 | transform: translate(var(--x), calc(var(--y) - 100%)); | 28 | transform: translate(var(--x), calc(var(--y) - 100%)); |
| 41 | } | 29 | } |
| 42 | 30 | ||
| 43 | @include iro.bem-modifier('up-right') { | 31 | @include bem.modifier('up-right') { |
| 44 | transform: translate(calc(var(--x) - 100%), calc(var(--y) - 100%)); | 32 | transform: translate(calc(var(--x) - 100%), calc(var(--y) - 100%)); |
| 45 | } | 33 | } |
| 46 | 34 | ||
| 47 | @include iro.bem-modifier('down-right') { | 35 | @include bem.modifier('down-right') { |
| 48 | transform: translate(calc(var(--x) - 100%), var(--y)); | 36 | transform: translate(calc(var(--x) - 100%), var(--y)); |
| 49 | } | 37 | } |
| 50 | } | 38 | } |
diff --git a/src/objects/_popover.vars.scss b/src/objects/_popover.vars.scss new file mode 100644 index 0000000..b76112e --- /dev/null +++ b/src/objects/_popover.vars.scss | |||
| @@ -0,0 +1,14 @@ | |||
| 1 | @use 'sass:map'; | ||
| 2 | @use 'iro-sass/src/props'; | ||
| 3 | @use '../core.vars' as core; | ||
| 4 | |||
| 5 | $z-index: props.def(--o-popover--z-index, 11000) !default; | ||
| 6 | $pad-i: props.def(--o-popover--pad-i, 0) !default; | ||
| 7 | $pad-b: props.def(--o-popover--pad-b, props.get(core.$size--85)) !default; | ||
| 8 | $separator-width: props.def(--o-popover--separator-width, props.get(core.$size--85)) !default; | ||
| 9 | $rounding: props.def(--o-popover--rounding, props.get(core.$rounding)) !default; | ||
| 10 | $border-width: props.def(--o-popover--border-width, props.get(core.$border-width--thin)) !default; | ||
| 11 | |||
| 12 | $bg-color: props.def(--o-popover--bg-color, props.get(core.$theme, --bg-l2), 'color') !default; | ||
| 13 | $border-color: props.def(--o-popover--border-color, props.get(core.$theme, --border), 'color') !default; | ||
| 14 | $filter: props.def(--o-popover--filter, drop-shadow(props.get(core.$shadow--x) props.get(core.$shadow--y) props.get(core.$shadow--blur) props.get(core.$theme, --shadow)), 'color') !default; | ||
diff --git a/src/objects/_radio.scss b/src/objects/_radio.scss index 9fa937d..aef6b92 100644 --- a/src/objects/_radio.scss +++ b/src/objects/_radio.scss | |||
| @@ -1,116 +1,80 @@ | |||
| 1 | @use 'iro-sass/src/index' as iro; | 1 | @use 'sass:meta'; |
| 2 | @use '../functions' as fn; | 2 | @use 'iro-sass/src/bem'; |
| 3 | @use 'iro-sass/src/props'; | ||
| 4 | @use '../props' as *; | ||
| 5 | @use '../core.vars' as core; | ||
| 3 | 6 | ||
| 4 | @include iro.props-namespace('radio') { | 7 | @forward 'radio.vars'; |
| 5 | @include iro.props-store(( | 8 | @use 'radio.vars' as vars; |
| 6 | --dims: ( | ||
| 7 | --diameter: fn.global-dim(--size --200), | ||
| 8 | --label-gap: fn.global-dim(--size --125), | ||
| 9 | --border: fn.global-dim(--border --medium), | ||
| 10 | --pad-i: fn.global-dim(--size --65), | ||
| 11 | --pad-b: fn.global-dim(--size --65), | ||
| 12 | --rounding: fn.global-dim(--rounding), | ||
| 13 | --spacing-sibling: fn.global-dim(--size --300), | ||
| 14 | 9 | ||
| 15 | --key-focus: ( | 10 | @mixin styles { |
| 16 | --border: fn.global-dim(--key-focus --border), | 11 | @include materialize-at-root(meta.module-variables('vars')); |
| 17 | --border-offset: fn.global-dim(--key-focus --border-offset), | ||
| 18 | --outline: fn.global-dim(--key-focus --outline), | ||
| 19 | ), | ||
| 20 | ), | ||
| 21 | --colors: ( | ||
| 22 | --circle-border: fn.global-color(--text-mute-more), | ||
| 23 | --circle-bg: fn.global-color(--base --75), | ||
| 24 | |||
| 25 | --hover: ( | ||
| 26 | --label: fn.global-color(--heading), | ||
| 27 | --circle-border: fn.global-color(--text-mute), | ||
| 28 | ), | ||
| 29 | --accent: ( | ||
| 30 | --circle-border: fn.global-color(--accent --900), | ||
| 31 | |||
| 32 | --hover: ( | ||
| 33 | --circle-border: fn.global-color(--accent --1000), | ||
| 34 | ), | ||
| 35 | ), | ||
| 36 | --disabled: ( | ||
| 37 | --label: fn.global-color(--text-disabled), | ||
| 38 | --circle-border: fn.global-color(--border-strong), | ||
| 39 | --circle-bg: fn.global-color(--base --75), | ||
| 40 | ), | ||
| 41 | --key-focus: ( | ||
| 42 | --label: fn.global-color(--focus --text), | ||
| 43 | --border: fn.global-color(--focus --border), | ||
| 44 | --outline: fn.global-color(--focus --outline), | ||
| 45 | ), | ||
| 46 | ), | ||
| 47 | )); | ||
| 48 | 12 | ||
| 49 | @include iro.bem-object(iro.props-namespace()) { | 13 | @include bem.object('radio') { |
| 50 | display: inline-block; | ||
| 51 | position: relative; | 14 | position: relative; |
| 15 | display: inline-block; | ||
| 16 | padding-block: props.get(vars.$pad-b); | ||
| 17 | padding-inline: props.get(vars.$pad-i); | ||
| 52 | margin-inline: | 18 | margin-inline: |
| 53 | calc(-1 * fn.dim(--pad-i) - fn.dim(--key-focus --border-offset)) | 19 | calc(-1 * props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset)) |
| 54 | calc(fn.dim(--spacing-sibling) - fn.dim(--pad-i) - fn.dim(--key-focus --border-offset)); | 20 | calc(props.get(vars.$spacing-sibling) - props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset)); |
| 55 | padding-block: fn.dim(--pad-b); | ||
| 56 | padding-inline: fn.dim(--pad-i); | ||
| 57 | 21 | ||
| 58 | @include iro.bem-elem('circle') { | 22 | @include bem.elem('circle') { |
| 59 | display: inline-block; | 23 | display: inline-block; |
| 60 | flex: 0 0 auto; | 24 | flex: 0 0 auto; |
| 61 | inline-size: fn.dim(--diameter); | 25 | inline-size: props.get(vars.$diameter); |
| 62 | block-size: fn.dim(--diameter); | 26 | block-size: props.get(vars.$diameter); |
| 63 | margin-block-start: calc(.5em * fn.global-dim(--font --standard --line-height) - .5 * fn.dim(--diameter) - fn.dim(--key-focus --border-offset)); | 27 | margin-block-start: calc(.5em * props.get(core.$font--standard--line-height) - .5 * props.get(vars.$diameter) - props.get(vars.$key-focus--border-offset)); |
| 64 | border: fn.dim(--key-focus --border-offset) solid transparent; | ||
| 65 | border-radius: 2em; | ||
| 66 | background-color: fn.color(--circle-border); | ||
| 67 | background-clip: padding-box; | ||
| 68 | vertical-align: top; | 28 | vertical-align: top; |
| 29 | background-color: props.get(vars.$circle-border-color); | ||
| 30 | background-clip: padding-box; | ||
| 31 | border: props.get(vars.$key-focus--border-offset) solid transparent; | ||
| 32 | border-radius: 2em; | ||
| 69 | 33 | ||
| 70 | &::after { | 34 | &::after { |
| 71 | content: ''; | ||
| 72 | display: block; | ||
| 73 | position: relative; | 35 | position: relative; |
| 74 | inset-block-start: fn.dim(--border); | 36 | inset-block-start: props.get(vars.$border-width); |
| 75 | inset-inline-start: fn.dim(--border); | 37 | inset-inline-start: props.get(vars.$border-width); |
| 76 | inline-size: calc(fn.dim(--diameter) - 2 * fn.dim(--border)); | 38 | display: block; |
| 77 | block-size: calc(fn.dim(--diameter) - 2 * fn.dim(--border)); | 39 | inline-size: calc(props.get(vars.$diameter) - 2 * props.get(vars.$border-width)); |
| 40 | block-size: calc(props.get(vars.$diameter) - 2 * props.get(vars.$border-width)); | ||
| 41 | content: ''; | ||
| 42 | background-color: props.get(vars.$circle-bg-color); | ||
| 43 | border-radius: props.get(vars.$diameter); | ||
| 78 | transition: transform .2s ease; | 44 | transition: transform .2s ease; |
| 79 | border-radius: fn.dim(--diameter); | ||
| 80 | background-color: fn.color(--circle-bg); | ||
| 81 | } | 45 | } |
| 82 | } | 46 | } |
| 83 | 47 | ||
| 84 | @include iro.bem-elem('label') { | 48 | @include bem.elem('label') { |
| 85 | margin-inline-start: calc(fn.dim(--label-gap) - fn.dim(--key-focus --border-offset)); | 49 | margin-inline-start: calc(props.get(vars.$label-gap) - props.get(vars.$key-focus--border-offset)); |
| 86 | } | 50 | } |
| 87 | 51 | ||
| 88 | @include iro.bem-elem('native') { | 52 | @include bem.elem('native') { |
| 89 | appearance: none; | ||
| 90 | position: absolute; | 53 | position: absolute; |
| 91 | z-index: -1; | ||
| 92 | inset-block-start: 0; | 54 | inset-block-start: 0; |
| 93 | inset-inline-start: 0; | 55 | inset-inline-start: 0; |
| 56 | z-index: -1; | ||
| 94 | inline-size: 100%; | 57 | inline-size: 100%; |
| 95 | block-size: 100%; | 58 | block-size: 100%; |
| 96 | margin: 0; | ||
| 97 | padding: 0; | 59 | padding: 0; |
| 60 | margin: 0; | ||
| 98 | overflow: hidden; | 61 | overflow: hidden; |
| 99 | border-radius: fn.dim(--rounding); | 62 | appearance: none; |
| 63 | border-radius: props.get(vars.$rounding); | ||
| 100 | 64 | ||
| 101 | &:hover, | 65 | &:hover, |
| 102 | &:focus-visible { | 66 | &:focus-visible { |
| 103 | @include iro.bem-sibling-elem('label') { | 67 | @include bem.sibling-elem('label') { |
| 104 | color: fn.color(--hover --label); | 68 | color: props.get(vars.$hover--label-color); |
| 105 | } | 69 | } |
| 106 | 70 | ||
| 107 | @include iro.bem-sibling-elem('circle') { | 71 | @include bem.sibling-elem('circle') { |
| 108 | background-color: fn.color(--hover --circle-border); | 72 | background-color: props.get(vars.$hover--circle-border-color); |
| 109 | } | 73 | } |
| 110 | } | 74 | } |
| 111 | 75 | ||
| 112 | &:checked { | 76 | &:checked { |
| 113 | @include iro.bem-sibling-elem('circle') { | 77 | @include bem.sibling-elem('circle') { |
| 114 | &::after { | 78 | &::after { |
| 115 | transform: scale(.44); | 79 | transform: scale(.44); |
| 116 | } | 80 | } |
| @@ -118,64 +82,69 @@ | |||
| 118 | } | 82 | } |
| 119 | 83 | ||
| 120 | &:disabled { | 84 | &:disabled { |
| 121 | @include iro.bem-sibling-elem('label') { | 85 | @include bem.sibling-elem('label') { |
| 122 | color: fn.color(--disabled --label); | 86 | color: props.get(vars.$disabled--label-color); |
| 123 | } | 87 | } |
| 124 | 88 | ||
| 125 | @include iro.bem-sibling-elem('circle') { | 89 | @include bem.sibling-elem('circle') { |
| 126 | background-color: fn.color(--disabled --circle-border); | 90 | background-color: props.get(vars.$disabled--circle-border-color); |
| 127 | 91 | ||
| 128 | &::after { | 92 | &::after { |
| 129 | background-color: fn.color(--disabled --circle-bg); | 93 | background-color: props.get(vars.$disabled--circle-bg-color); |
| 130 | } | 94 | } |
| 131 | } | 95 | } |
| 132 | } | 96 | } |
| 133 | 97 | ||
| 134 | &:focus-visible { | 98 | &:focus-visible { |
| 135 | @include iro.bem-sibling-elem('label') { | 99 | @include bem.sibling-elem('label') { |
| 136 | color: fn.color(--key-focus --label); | 100 | color: props.get(vars.$key-focus--label-color); |
| 137 | } | 101 | } |
| 138 | 102 | ||
| 139 | @include iro.bem-sibling-elem('circle') { | 103 | @include bem.sibling-elem('circle') { |
| 140 | outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border); | 104 | outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); |
| 141 | box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline); | 105 | box-shadow: |
| 106 | 0 | ||
| 107 | 0 | ||
| 108 | 0 | ||
| 109 | calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) | ||
| 110 | props.get(vars.$key-focus--outline-color); | ||
| 142 | } | 111 | } |
| 143 | } | 112 | } |
| 144 | } | 113 | } |
| 145 | 114 | ||
| 146 | @include iro.bem-modifier('standalone') { | 115 | @include bem.modifier('standalone') { |
| 147 | @include iro.bem-elem('circle') { | 116 | @include bem.elem('circle') { |
| 148 | margin-block-start: 0; | 117 | margin-block-start: 0; |
| 149 | } | 118 | } |
| 150 | } | 119 | } |
| 151 | 120 | ||
| 152 | @include iro.bem-modifier('accent') { | 121 | @include bem.modifier('accent') { |
| 153 | @include iro.bem-elem('native') { | 122 | @include bem.elem('native') { |
| 154 | &:checked { | 123 | &:checked { |
| 155 | @include iro.bem-sibling-elem('circle') { | 124 | @include bem.sibling-elem('circle') { |
| 156 | background-color: fn.color(--accent --circle-border); | 125 | background-color: props.get(vars.$accent--circle-border-color); |
| 157 | } | 126 | } |
| 158 | 127 | ||
| 159 | &:hover, | 128 | &:hover, |
| 160 | &:focus-visible { | 129 | &:focus-visible { |
| 161 | @include iro.bem-sibling-elem('circle') { | 130 | @include bem.sibling-elem('circle') { |
| 162 | background-color: fn.color(--accent --hover --circle-border); | 131 | background-color: props.get(vars.$accent--hover--circle-border-color); |
| 163 | } | 132 | } |
| 164 | } | 133 | } |
| 165 | } | 134 | } |
| 166 | 135 | ||
| 167 | &:disabled { | 136 | &:disabled { |
| 168 | @include iro.bem-sibling-elem('circle') { | 137 | @include bem.sibling-elem('circle') { |
| 169 | background-color: fn.color(--disabled --circle-border); | 138 | background-color: props.get(vars.$disabled--circle-border-color); |
| 170 | 139 | ||
| 171 | &::after { | 140 | &::after { |
| 172 | background-color: fn.color(--disabled --circle-bg); | 141 | background-color: props.get(vars.$disabled--circle-bg-color); |
| 173 | } | 142 | } |
| 174 | } | 143 | } |
| 175 | 144 | ||
| 176 | &:checked { | 145 | &:checked { |
| 177 | @include iro.bem-sibling-elem('circle') { | 146 | @include bem.sibling-elem('circle') { |
| 178 | background-color: fn.color(--disabled --circle-border); | 147 | background-color: props.get(vars.$disabled--circle-border-color); |
| 179 | } | 148 | } |
| 180 | } | 149 | } |
| 181 | } | 150 | } |
diff --git a/src/objects/_radio.vars.scss b/src/objects/_radio.vars.scss new file mode 100644 index 0000000..51ea581 --- /dev/null +++ b/src/objects/_radio.vars.scss | |||
| @@ -0,0 +1,33 @@ | |||
| 1 | @use 'sass:map'; | ||
| 2 | @use 'iro-sass/src/props'; | ||
| 3 | @use '../core.vars' as core; | ||
| 4 | |||
| 5 | $diameter: props.def(--o-radio--diameter, props.get(core.$size--200)) !default; | ||
| 6 | $label-gap: props.def(--o-radio--label-gap, props.get(core.$size--125)) !default; | ||
| 7 | $border-width: props.def(--o-radio--border-width, props.get(core.$border-width--medium)) !default; | ||
| 8 | $pad-i: props.def(--o-radio--pad-i, props.get(core.$size--65)) !default; | ||
| 9 | $pad-b: props.def(--o-radio--pad-b, props.get(core.$size--65)) !default; | ||
| 10 | $rounding: props.def(--o-radio--rounding, props.get(core.$rounding)) !default; | ||
| 11 | $spacing-sibling: props.def(--o-radio--spacing-sibling, props.get(core.$size--300)) !default; | ||
| 12 | |||
| 13 | $key-focus--border-width: props.def(--o-radio--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; | ||
| 14 | $key-focus--border-offset: props.def(--o-radio--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; | ||
| 15 | $key-focus--outline-width: props.def(--o-radio--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; | ||
| 16 | |||
| 17 | $circle-border-color: props.def(--o-radio--circle-border-color, props.get(core.$theme, --text-mute-more), 'color') !default; | ||
| 18 | $circle-bg-color: props.def(--o-radio--circle-bg-color, props.get(core.$theme, --base, --75), 'color') !default; | ||
| 19 | |||
| 20 | $hover--label-color: props.def(--o-radio--hover--label-color, props.get(core.$theme, --heading), 'color') !default; | ||
| 21 | $hover--circle-border-color: props.def(--o-radio--hover--circle-border-color, props.get(core.$theme, --text-mute), 'color') !default; | ||
| 22 | |||
| 23 | $accent--circle-border-color: props.def(--o-radio--accent--circle-border-color, props.get(core.$theme, --accent, --900), 'color') !default; | ||
| 24 | |||
| 25 | $accent--hover--circle-border-color: props.def(--o-radio--accent--hover--circle-border-color, props.get(core.$theme, --accent, --1000), 'color') !default; | ||
| 26 | |||
| 27 | $disabled--label-color: props.def(--o-radio--disabled--label-color, props.get(core.$theme, --text-disabled), 'color') !default; | ||
| 28 | $disabled--circle-border-color: props.def(--o-radio--disabled--circle-border-color, props.get(core.$theme, --border-strong), 'color') !default; | ||
| 29 | $disabled--circle-bg-color: props.def(--o-radio--disabled--circle-bg-color, props.get(core.$theme, --base, --75), 'color') !default; | ||
| 30 | |||
| 31 | $key-focus--label-color: props.def(--o-radio--key-focus--label-color, props.get(core.$theme, --focus, --text), 'color') !default; | ||
| 32 | $key-focus--border-color: props.def(--o-radio--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default; | ||
| 33 | $key-focus--outline-color: props.def(--o-radio--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default; | ||
diff --git a/src/objects/_side-nav.scss b/src/objects/_side-nav.scss index 8e4e131..6c60777 100644 --- a/src/objects/_side-nav.scss +++ b/src/objects/_side-nav.scss | |||
| @@ -1,122 +1,90 @@ | |||
| 1 | @use 'iro-sass/src/index' as iro; | 1 | @use 'sass:meta'; |
| 2 | @use '../functions' as fn; | 2 | @use 'iro-sass/src/bem'; |
| 3 | @use 'iro-sass/src/props'; | ||
| 4 | @use '../props' as *; | ||
| 5 | @use 'icon.vars' as icon; | ||
| 3 | 6 | ||
| 4 | @use './icon'; | 7 | @forward 'side-nav.vars'; |
| 8 | @use 'side-nav.vars' as vars; | ||
| 5 | 9 | ||
| 6 | @include iro.props-namespace('side-nav') { | 10 | @mixin styles { |
| 7 | @include iro.props-store(( | 11 | @include materialize-at-root(meta.module-variables('vars')); |
| 8 | --dims: ( | ||
| 9 | --spacing: fn.global-dim(--size --50), | ||
| 10 | --header: ( | ||
| 11 | --font-size: fn.global-dim(--font-size --50), | ||
| 12 | ), | ||
| 13 | --separator: fn.global-dim(--size --200), | ||
| 14 | --item: ( | ||
| 15 | --pad-i: fn.global-dim(--size --150), | ||
| 16 | --pad-b: fn.global-dim(--size --100), | ||
| 17 | --rounding: fn.global-dim(--rounding), | ||
| 18 | |||
| 19 | --key-focus: ( | ||
| 20 | --border: fn.global-dim(--key-focus --border), | ||
| 21 | --border-offset: fn.global-dim(--key-focus --border-offset), | ||
| 22 | --outline: fn.global-dim(--key-focus --outline), | ||
| 23 | ), | ||
| 24 | ), | ||
| 25 | ), | ||
| 26 | --colors: ( | ||
| 27 | --header: ( | ||
| 28 | --label: fn.global-color(--text-mute-more), | ||
| 29 | ), | ||
| 30 | --item: ( | ||
| 31 | --hover: ( | ||
| 32 | --bg: fn.global-color(--border-mute), | ||
| 33 | --label: fn.global-color(--heading), | ||
| 34 | ), | ||
| 35 | --active: ( | ||
| 36 | --bg: fn.global-color(--border), | ||
| 37 | --label: fn.global-color(--heading), | ||
| 38 | ), | ||
| 39 | --disabled: ( | ||
| 40 | --label: fn.global-color(--text-disabled), | ||
| 41 | ), | ||
| 42 | --key-focus: ( | ||
| 43 | --border: fn.global-color(--focus --border), | ||
| 44 | --outline: fn.global-color(--focus --outline), | ||
| 45 | ), | ||
| 46 | ), | ||
| 47 | ), | ||
| 48 | )); | ||
| 49 | 12 | ||
| 50 | @include iro.bem-object(iro.props-namespace()) { | 13 | @include bem.object('side-nav') { |
| 51 | display: flex; | 14 | display: flex; |
| 52 | flex-direction: column; | 15 | flex-direction: column; |
| 53 | gap: fn.dim(--spacing); | 16 | gap: props.get(vars.$spacing); |
| 54 | 17 | ||
| 55 | @include iro.bem-elem('header') { | 18 | @include bem.elem('header') { |
| 56 | padding-block: fn.dim(--item --pad-b); | 19 | padding-block: props.get(vars.$item--pad-b); |
| 57 | padding-inline: fn.dim(--item --pad-i); | 20 | padding-inline: props.get(vars.$item--pad-i); |
| 58 | color: fn.color(--header --label); | 21 | font-size: props.get(vars.$header--font-size); |
| 59 | font-size: fn.dim(--header --font-size); | ||
| 60 | font-weight: 500; | 22 | font-weight: 500; |
| 61 | letter-spacing: .5px; | 23 | color: props.get(vars.$header--label-color); |
| 62 | text-transform: uppercase; | 24 | text-transform: uppercase; |
| 25 | letter-spacing: .5px; | ||
| 63 | 26 | ||
| 64 | @include iro.bem-next-twin-elem { | 27 | @include bem.next-twin-elem { |
| 65 | margin-block-start: calc(fn.dim(--separator) + fn.dim(--spacing)); | 28 | margin-block-start: calc(props.get(vars.$separator) + props.get(vars.$spacing)); |
| 66 | } | 29 | } |
| 67 | } | 30 | } |
| 68 | 31 | ||
| 69 | @include iro.bem-elem('item') { | 32 | @include bem.elem('item') { |
| 70 | padding-block: fn.dim(--item --pad-b); | 33 | padding-block: props.get(vars.$item--pad-b); |
| 71 | padding-inline: fn.dim(--item --pad-i); | 34 | padding-inline: props.get(vars.$item--pad-i); |
| 72 | margin: calc(-1 * fn.dim(--item --key-focus --border-offset)); | 35 | margin: calc(-1 * props.get(vars.$item--key-focus--border-offset)); |
| 73 | border: fn.dim(--item --key-focus --border-offset) solid transparent; | 36 | color: props.get(vars.$item--disabled--label-color); |
| 74 | border-radius: calc(fn.dim(--item --rounding) + fn.dim(--item --key-focus --border-offset)); | ||
| 75 | color: fn.color(--item --disabled --label); | ||
| 76 | background-clip: padding-box; | 37 | background-clip: padding-box; |
| 38 | border: props.get(vars.$item--key-focus--border-offset) solid transparent; | ||
| 39 | border-radius: calc(props.get(vars.$item--rounding) + props.get(vars.$item--key-focus--border-offset)); | ||
| 77 | 40 | ||
| 78 | &:link, | 41 | &:link, |
| 79 | &:visited, | 42 | &:visited, |
| 80 | &:enabled { | 43 | &:enabled { |
| 81 | color: currentColor; | 44 | color: currentColor; |
| 82 | 45 | ||
| 83 | @include iro.bem-multi('&:hover, &:focus-visible', 'is' 'selected') { | 46 | @include bem.multi('&:hover, &:focus-visible', 'is' 'selected') { |
| 84 | background-color: fn.color(--item --hover --bg); | 47 | color: props.get(vars.$item--hover--label-color); |
| 85 | color: fn.color(--item --hover --label); | 48 | background-color: props.get(vars.$item--hover--bg-color); |
| 86 | } | 49 | } |
| 87 | 50 | ||
| 88 | &:active { | 51 | &:active { |
| 89 | background-color: fn.color(--item --active --bg); | 52 | color: props.get(vars.$item--active--label-color); |
| 90 | color: fn.color(--item --active --label); | 53 | background-color: props.get(vars.$item--active--bg-color); |
| 91 | } | 54 | } |
| 92 | 55 | ||
| 93 | &:focus-visible { | 56 | &:focus-visible { |
| 94 | outline: fn.color(--item --key-focus --border) solid fn.dim(--item --key-focus --border); | 57 | outline: props.get(vars.$item--key-focus--border-color) solid props.get(vars.$item--key-focus--border-width); |
| 95 | box-shadow: 0 0 0 calc(fn.dim(--item --key-focus --border) + fn.dim(--item --key-focus --outline)) fn.color(--item --key-focus --outline); | 58 | box-shadow: |
| 59 | 0 | ||
| 60 | 0 | ||
| 61 | 0 | ||
| 62 | calc(props.get(vars.$item--key-focus--border-width) + props.get(vars.$item--key-focus--outline-width)) | ||
| 63 | props.get(vars.$item--key-focus--outline-color); | ||
| 96 | } | 64 | } |
| 97 | } | 65 | } |
| 98 | 66 | ||
| 99 | @include iro.bem-next-elem('header') { | 67 | @include bem.next-elem('header') { |
| 100 | margin-block-start: calc(fn.dim(--separator) + fn.dim(--spacing)); | 68 | margin-block-start: calc(props.get(vars.$separator) + props.get(vars.$spacing)); |
| 101 | } | 69 | } |
| 102 | } | 70 | } |
| 103 | 71 | ||
| 104 | @include iro.bem-elem('header') { | 72 | @include bem.elem('header') { |
| 105 | &:link, | 73 | &:link, |
| 106 | &:visited, | 74 | &:visited, |
| 107 | &:enabled { | 75 | &:enabled { |
| 108 | color: fn.color(--header --label); | 76 | color: props.get(vars.$header--label-color); |
| 109 | } | 77 | } |
| 110 | } | 78 | } |
| 111 | 79 | ||
| 112 | @include iro.bem-elem('separator') { | 80 | @include bem.elem('separator') { |
| 113 | block-size: fn.dim(--separator); | 81 | block-size: props.get(vars.$separator); |
| 114 | } | 82 | } |
| 115 | 83 | ||
| 116 | @include iro.bem-elem('icon-slot') { | 84 | @include bem.elem('icon-slot') { |
| 117 | display: flex; | 85 | display: flex; |
| 118 | justify-content: center; | 86 | justify-content: center; |
| 119 | inline-size: fn.foreign-dim(--icon, --size); | 87 | inline-size: props.get(icon.$size); |
| 120 | } | 88 | } |
| 121 | } | 89 | } |
| 122 | } | 90 | } |
diff --git a/src/objects/_side-nav.vars.scss b/src/objects/_side-nav.vars.scss new file mode 100644 index 0000000..122dba6 --- /dev/null +++ b/src/objects/_side-nav.vars.scss | |||
| @@ -0,0 +1,28 @@ | |||
| 1 | @use 'sass:map'; | ||
| 2 | @use 'iro-sass/src/props'; | ||
| 3 | @use '../core.vars' as core; | ||
| 4 | |||
| 5 | $spacing: props.def(--o-side-nav--spacing, props.get(core.$size--50)) !default; | ||
| 6 | $header--font-size: props.def(--o-side-nav--header--font-size, props.get(core.$font-size--50)) !default; | ||
| 7 | $separator: props.def(--o-side-nav--separator, props.get(core.$size--200)) !default; | ||
| 8 | |||
| 9 | $item--pad-i: props.def(--o-side-nav--item--pad-i, props.get(core.$size--150)) !default; | ||
| 10 | $item--pad-b: props.def(--o-side-nav--item--pad-b, props.get(core.$size--100)) !default; | ||
| 11 | $item--rounding: props.def(--o-side-nav--item--rounding, props.get(core.$rounding)) !default; | ||
| 12 | |||
| 13 | $item--key-focus--border-width: props.def(--o-side-nav--item--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; | ||
| 14 | $item--key-focus--border-offset: props.def(--o-side-nav--item--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; | ||
| 15 | $item--key-focus--outline-width: props.def(--o-side-nav--item--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; | ||
| 16 | |||
| 17 | $header--label-color: props.def(--o-side-nav--header--label-color, props.get(core.$theme, --text-mute-more), 'color') !default; | ||
| 18 | |||
| 19 | $item--hover--bg-color: props.def(--o-side-nav--item--hover--bg-color, props.get(core.$theme, --border-mute), 'color') !default; | ||
| 20 | $item--hover--label-color: props.def(--o-side-nav--item--hover--label-color, props.get(core.$theme, --heading), 'color') !default; | ||
| 21 | |||
| 22 | $item--active--bg-color: props.def(--o-side-nav--item--active--bg-color, props.get(core.$theme, --border), 'color') !default; | ||
| 23 | $item--active--label-color: props.def(--o-side-nav--item--active--label-color, props.get(core.$theme, --heading), 'color') !default; | ||
| 24 | |||
| 25 | $item--disabled--label-color: props.def(--o-side-nav--item--disabled--label-color, props.get(core.$theme, --text-disabled), 'color') !default; | ||
| 26 | |||
| 27 | $item--key-focus--border-color: props.def(--o-side-nav--item--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default; | ||
| 28 | $item--key-focus--outline-color: props.def(--o-side-nav--item--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default; | ||
diff --git a/src/objects/_status-indicator.scss b/src/objects/_status-indicator.scss index 416e65e..1fcdf02 100644 --- a/src/objects/_status-indicator.scss +++ b/src/objects/_status-indicator.scss | |||
| @@ -1,38 +1,26 @@ | |||
| 1 | @use 'iro-sass/src/index' as iro; | 1 | @use 'sass:map'; |
| 2 | @use '../functions' as fn; | 2 | @use 'sass:meta'; |
| 3 | @use 'sass:string'; | ||
| 4 | @use 'iro-sass/src/bem'; | ||
| 5 | @use 'iro-sass/src/props'; | ||
| 6 | @use '../props' as *; | ||
| 3 | 7 | ||
| 4 | $themes: 'accent' 'positive' 'negative' 'warning' !default; | 8 | @forward 'status-indicator.vars'; |
| 9 | @use 'status-indicator.vars' as vars; | ||
| 5 | 10 | ||
| 6 | @include iro.props-namespace('status-indicator') { | 11 | @mixin styles { |
| 7 | @include iro.props-store(( | 12 | @include materialize-at-root(meta.module-variables('vars')); |
| 8 | --dims: ( | ||
| 9 | --size: fn.global-dim(--size --125), | ||
| 10 | ), | ||
| 11 | --colors: ( | ||
| 12 | --default: fn.global-color(--border-strong), | ||
| 13 | --primary: fn.global-color(--text), | ||
| 14 | ), | ||
| 15 | )); | ||
| 16 | 13 | ||
| 17 | @each $theme in $themes { | 14 | @include bem.object('status-indicator') { |
| 18 | @include iro.props-store(( | ||
| 19 | --colors: ( | ||
| 20 | --#{$theme}: fn.global-color(--#{$theme} --700), | ||
| 21 | ), | ||
| 22 | )); | ||
| 23 | } | ||
| 24 | |||
| 25 | @include iro.bem-object(iro.props-namespace()) { | ||
| 26 | display: inline-block; | 15 | display: inline-block; |
| 27 | inline-size: fn.dim(--size); | 16 | inline-size: props.get(vars.$size); |
| 28 | block-size: fn.dim(--size); | 17 | block-size: props.get(vars.$size); |
| 18 | background-color: props.get(vars.$default); | ||
| 29 | border-radius: 10em; | 19 | border-radius: 10em; |
| 30 | background-color: fn.color(--default); | ||
| 31 | vertical-align: middle; | ||
| 32 | 20 | ||
| 33 | @each $theme in $themes { | 21 | @each $theme in map.keys(props.get(vars.$themes)) { |
| 34 | @include iro.bem-is($theme) { | 22 | @include bem.is(string.slice($theme, 3)) { |
| 35 | background-color: fn.color(--#{$theme}); | 23 | background-color: props.get(vars.$themes, $theme); |
| 36 | } | 24 | } |
| 37 | } | 25 | } |
| 38 | } | 26 | } |
diff --git a/src/objects/_status-indicator.vars.scss b/src/objects/_status-indicator.vars.scss new file mode 100644 index 0000000..6289145 --- /dev/null +++ b/src/objects/_status-indicator.vars.scss | |||
| @@ -0,0 +1,26 @@ | |||
| 1 | @use 'sass:map'; | ||
| 2 | @use 'iro-sass/src/props'; | ||
| 3 | @use '../config'; | ||
| 4 | @use '../core.vars' as core; | ||
| 5 | |||
| 6 | $size: props.def(--o-status-indicator--size, props.get(core.$size--125)) !default; | ||
| 7 | |||
| 8 | $default: props.def(--o-status-indicator--default, props.get(core.$theme, --border-strong), 'color') !default; | ||
| 9 | $primary: props.def(--o-status-indicator--primary, props.get(core.$theme, --text), 'color') !default; | ||
| 10 | |||
| 11 | $themes-config: ( | ||
| 12 | accent: --accent, | ||
| 13 | positive: --positive, | ||
| 14 | negative: --negative, | ||
| 15 | warning: --warning, | ||
| 16 | ) !default; | ||
| 17 | |||
| 18 | $themes: props.def(--o-status-indicator, (), 'color'); | ||
| 19 | |||
| 20 | @each $theme, $key in $themes-config { | ||
| 21 | @if $theme != --base { | ||
| 22 | $themes: props.merge($themes, ( | ||
| 23 | --#{$theme}: props.get(core.$theme, $key, --700), | ||
| 24 | )); | ||
| 25 | } | ||
| 26 | } | ||
diff --git a/src/objects/_switch.scss b/src/objects/_switch.scss index e1f1132..8612d31 100644 --- a/src/objects/_switch.scss +++ b/src/objects/_switch.scss | |||
| @@ -1,217 +1,183 @@ | |||
| 1 | @use 'iro-sass/src/index' as iro; | 1 | @use 'sass:meta'; |
| 2 | @use '../functions' as fn; | 2 | @use 'iro-sass/src/bem'; |
| 3 | @use 'iro-sass/src/props'; | ||
| 4 | @use '../props' as *; | ||
| 5 | @use '../core.vars' as core; | ||
| 3 | 6 | ||
| 4 | @include iro.props-namespace('switch') { | 7 | @forward 'switch.vars'; |
| 5 | @include iro.props-store(( | 8 | @use 'switch.vars' as vars; |
| 6 | --dims: ( | ||
| 7 | --width: fn.global-dim(--size --350), | ||
| 8 | --height: fn.global-dim(--size --200), | ||
| 9 | --label-gap: fn.global-dim(--size --125), | ||
| 10 | --border: fn.global-dim(--border --medium), | ||
| 11 | --pad-i: fn.global-dim(--size --65), | ||
| 12 | --pad-b: fn.global-dim(--size --65), | ||
| 13 | --rounding: fn.global-dim(--rounding), | ||
| 14 | --spacing-sibling: fn.global-dim(--size --300), | ||
| 15 | 9 | ||
| 16 | --key-focus: ( | 10 | @mixin styles { |
| 17 | --border: fn.global-dim(--key-focus --border), | 11 | @include materialize-at-root(meta.module-variables('vars')); |
| 18 | --border-offset: fn.global-dim(--key-focus --border-offset), | ||
| 19 | --outline: fn.global-dim(--key-focus --outline), | ||
| 20 | ), | ||
| 21 | ), | ||
| 22 | --colors: ( | ||
| 23 | --track-bg: fn.global-color(--border), | ||
| 24 | --handle-border: fn.global-color(--text-mute-more), | ||
| 25 | --handle-bg: fn.global-color(--base --50), | ||
| 26 | |||
| 27 | --hover: ( | ||
| 28 | --label: fn.global-color(--heading), | ||
| 29 | --handle-border: fn.global-color(--text-mute), | ||
| 30 | ), | ||
| 31 | --accent: ( | ||
| 32 | --handle-border: fn.global-color(--accent --900), | ||
| 33 | |||
| 34 | --hover: ( | ||
| 35 | --handle-border: fn.global-color(--accent --1000), | ||
| 36 | ), | ||
| 37 | ), | ||
| 38 | --disabled: ( | ||
| 39 | --label: fn.global-color(--text-disabled), | ||
| 40 | --track-bg: fn.global-color(--border), | ||
| 41 | --handle-border: fn.global-color(--border-strong), | ||
| 42 | --handle-bg: fn.global-color(--base --50), | ||
| 43 | ), | ||
| 44 | --key-focus: ( | ||
| 45 | --label: fn.global-color(--focus --text), | ||
| 46 | --border: fn.global-color(--focus --border), | ||
| 47 | --outline: fn.global-color(--focus --outline), | ||
| 48 | ), | ||
| 49 | ), | ||
| 50 | )); | ||
| 51 | 12 | ||
| 52 | @include iro.bem-object(iro.props-namespace()) { | 13 | @include bem.object('switch') { |
| 53 | display: inline-block; | ||
| 54 | position: relative; | 14 | position: relative; |
| 15 | display: inline-block; | ||
| 16 | padding-block: props.get(vars.$pad-b); | ||
| 17 | padding-inline: props.get(vars.$pad-i); | ||
| 55 | margin-inline: | 18 | margin-inline: |
| 56 | calc(-1 * fn.dim(--pad-i) - fn.dim(--key-focus --border-offset)) | 19 | calc(-1 * props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset)) |
| 57 | calc(fn.dim(--spacing-sibling) - fn.dim(--pad-i) - fn.dim(--key-focus --border-offset)); | 20 | calc(props.get(vars.$spacing-sibling) - props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset)); |
| 58 | padding-inline: fn.dim(--pad-i); | ||
| 59 | padding-block: fn.dim(--pad-b); | ||
| 60 | 21 | ||
| 61 | @include iro.bem-elem('indicator') { | 22 | @include bem.elem('indicator') { |
| 62 | display: inline-block; | 23 | display: inline-block; |
| 63 | flex: 0 0 auto; | 24 | flex: 0 0 auto; |
| 64 | inline-size: fn.dim(--width); | 25 | inline-size: props.get(vars.$inline-size); |
| 65 | block-size: fn.dim(--height); | 26 | block-size: props.get(vars.$block-size); |
| 66 | margin-block-start: calc(.5em * fn.global-dim(--font --standard --line-height) - .5 * fn.dim(--height) - fn.dim(--key-focus --border-offset)); | 27 | margin-block-start: calc(.5em * props.get(core.$font--standard--line-height) - .5 * props.get(vars.$block-size) - props.get(vars.$key-focus--border-offset)); |
| 67 | transition: background-color .2s ease; | ||
| 68 | border: fn.dim(--key-focus --border-offset) solid transparent; | ||
| 69 | border-radius: 2em; | ||
| 70 | background-color: fn.color(--track-bg); | ||
| 71 | background-clip: padding-box; | ||
| 72 | vertical-align: top; | 28 | vertical-align: top; |
| 29 | background-color: props.get(vars.$track-bg-color); | ||
| 30 | background-clip: padding-box; | ||
| 31 | border: props.get(vars.$key-focus--border-offset) solid transparent; | ||
| 32 | border-radius: 2em; | ||
| 33 | transition: background-color .2s ease; | ||
| 73 | 34 | ||
| 74 | &::after { | 35 | &::after { |
| 75 | content: ''; | ||
| 76 | display: block; | 36 | display: block; |
| 77 | inline-size: calc(fn.dim(--height) - 2 * fn.dim(--border)); | 37 | inline-size: calc(props.get(vars.$block-size) - 2 * props.get(vars.$border-width)); |
| 78 | block-size: calc(fn.dim(--height) - 2 * fn.dim(--border)); | 38 | block-size: calc(props.get(vars.$block-size) - 2 * props.get(vars.$border-width)); |
| 39 | content: ''; | ||
| 40 | background-color: props.get(vars.$handle-bg-color); | ||
| 41 | border: props.get(vars.$border-width) solid props.get(vars.$handle-border-color); | ||
| 42 | border-radius: props.get(vars.$inline-size); | ||
| 79 | transition: transform .2s ease; | 43 | transition: transform .2s ease; |
| 80 | border: fn.dim(--border) solid fn.color(--handle-border); | ||
| 81 | border-radius: fn.dim(--width); | ||
| 82 | background-color: fn.color(--handle-bg); | ||
| 83 | } | 44 | } |
| 84 | } | 45 | } |
| 85 | 46 | ||
| 86 | @include iro.bem-elem('label') { | 47 | @include bem.elem('label') { |
| 87 | margin-inline-start: fn.dim(--label-gap); | 48 | margin-inline-start: props.get(vars.$label-gap); |
| 88 | } | 49 | } |
| 89 | 50 | ||
| 90 | @include iro.bem-elem('native') { | 51 | @include bem.elem('native') { |
| 91 | appearance: none; | ||
| 92 | position: absolute; | 52 | position: absolute; |
| 93 | z-index: -1; | ||
| 94 | inset-block-start: 0; | 53 | inset-block-start: 0; |
| 95 | inset-inline-start: 0; | 54 | inset-inline-start: 0; |
| 55 | z-index: -1; | ||
| 96 | inline-size: 100%; | 56 | inline-size: 100%; |
| 97 | block-size: 100%; | 57 | block-size: 100%; |
| 98 | margin: 0; | ||
| 99 | padding: 0; | 58 | padding: 0; |
| 59 | margin: 0; | ||
| 100 | overflow: hidden; | 60 | overflow: hidden; |
| 101 | border-radius: fn.dim(--rounding); | 61 | appearance: none; |
| 62 | border-radius: props.get(vars.$rounding); | ||
| 102 | 63 | ||
| 103 | &:hover, | 64 | &:hover, |
| 104 | &:focus-visible { | 65 | &:focus-visible { |
| 105 | @include iro.bem-sibling-elem('label') { | 66 | @include bem.sibling-elem('label') { |
| 106 | color: fn.color(--hover --label); | 67 | color: props.get(vars.$hover--label-color); |
| 107 | } | 68 | } |
| 108 | 69 | ||
| 109 | @include iro.bem-sibling-elem('indicator') { | 70 | @include bem.sibling-elem('indicator') { |
| 110 | &::after { | 71 | &::after { |
| 111 | border-color: fn.color(--hover --handle-border); | 72 | border-color: props.get(vars.$hover--handle-border-color); |
| 112 | } | 73 | } |
| 113 | } | 74 | } |
| 114 | } | 75 | } |
| 115 | 76 | ||
| 116 | &:checked { | 77 | &:checked { |
| 117 | @include iro.bem-sibling-elem('indicator') { | 78 | @include bem.sibling-elem('indicator') { |
| 118 | background-color: fn.color(--handle-border); | 79 | background-color: props.get(vars.$handle-border-color); |
| 119 | 80 | ||
| 120 | &::after { | 81 | &::after { |
| 121 | transform: translate(calc(fn.dim(--width) - fn.dim(--height) + .5px), 0); | 82 | border-color: props.get(vars.$handle-border-color); |
| 122 | border-color: fn.color(--handle-border); | 83 | transform: translate(calc(props.get(vars.$inline-size) - props.get(vars.$block-size) + .5px), 0); |
| 123 | } | 84 | } |
| 124 | } | 85 | } |
| 125 | 86 | ||
| 126 | &:hover, | 87 | &:hover, |
| 127 | &:focus-visible { | 88 | &:focus-visible { |
| 128 | @include iro.bem-sibling-elem('indicator') { | 89 | @include bem.sibling-elem('indicator') { |
| 129 | background-color: fn.color(--hover --handle-border); | 90 | background-color: props.get(vars.$hover--handle-border-color); |
| 130 | 91 | ||
| 131 | &::after { | 92 | &::after { |
| 132 | border-color: fn.color(--hover --handle-border); | 93 | border-color: props.get(vars.$hover--handle-border-color); |
| 133 | } | 94 | } |
| 134 | } | 95 | } |
| 135 | } | 96 | } |
| 136 | } | 97 | } |
| 137 | 98 | ||
| 138 | &:disabled { | 99 | &:disabled { |
| 139 | @include iro.bem-sibling-elem('label') { | 100 | @include bem.sibling-elem('label') { |
| 140 | color: fn.color(--disabled --label); | 101 | color: props.get(vars.$disabled--label-color); |
| 141 | } | 102 | } |
| 142 | 103 | ||
| 143 | @include iro.bem-sibling-elem('indicator') { | 104 | @include bem.sibling-elem('indicator') { |
| 144 | background-color: fn.color(--disabled --track-bg); | 105 | background-color: props.get(vars.$disabled--track-bg-color); |
| 145 | 106 | ||
| 146 | &::after { | 107 | &::after { |
| 147 | border-color: fn.color(--disabled --handle-border); | 108 | background-color: props.get(vars.$disabled--handle-bg-color); |
| 148 | background-color: fn.color(--disabled --handle-bg); | 109 | border-color: props.get(vars.$disabled--handle-border-color); |
| 149 | } | 110 | } |
| 150 | } | 111 | } |
| 151 | 112 | ||
| 152 | &:checked { | 113 | &:checked { |
| 153 | @include iro.bem-sibling-elem('indicator') { | 114 | @include bem.sibling-elem('indicator') { |
| 154 | background-color: fn.color(--disabled --handle-border); | 115 | background-color: props.get(vars.$disabled--handle-border-color); |
| 155 | 116 | ||
| 156 | &::after { | 117 | &::after { |
| 157 | border-color: fn.color(--disabled --handle-border); | 118 | border-color: props.get(vars.$disabled--handle-border-color); |
| 158 | } | 119 | } |
| 159 | } | 120 | } |
| 160 | } | 121 | } |
| 161 | } | 122 | } |
| 162 | 123 | ||
| 163 | &:focus-visible { | 124 | &:focus-visible { |
| 164 | @include iro.bem-sibling-elem('label') { | 125 | @include bem.sibling-elem('label') { |
| 165 | color: fn.color(--key-focus --label); | 126 | color: props.get(vars.$key-focus--label-color); |
| 166 | } | 127 | } |
| 167 | 128 | ||
| 168 | @include iro.bem-sibling-elem('indicator') { | 129 | @include bem.sibling-elem('indicator') { |
| 169 | outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border); | 130 | outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); |
| 170 | box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline); | 131 | box-shadow: |
| 132 | 0 | ||
| 133 | 0 | ||
| 134 | 0 | ||
| 135 | calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) | ||
| 136 | props.get(vars.$key-focus--outline-color); | ||
| 171 | } | 137 | } |
| 172 | } | 138 | } |
| 173 | } | 139 | } |
| 174 | 140 | ||
| 175 | @include iro.bem-modifier('standalone') { | 141 | @include bem.modifier('standalone') { |
| 176 | @include iro.bem-elem('indicator') { | 142 | @include bem.elem('indicator') { |
| 177 | margin-block-start: 0; | 143 | margin-block-start: 0; |
| 178 | } | 144 | } |
| 179 | } | 145 | } |
| 180 | 146 | ||
| 181 | @include iro.bem-modifier('accent') { | 147 | @include bem.modifier('accent') { |
| 182 | @include iro.bem-elem('native') { | 148 | @include bem.elem('native') { |
| 183 | &:checked { | 149 | &:checked { |
| 184 | @include iro.bem-sibling-elem('indicator') { | 150 | @include bem.sibling-elem('indicator') { |
| 185 | background-color: fn.color(--accent --handle-border); | 151 | background-color: props.get(vars.$accent--handle-border-color); |
| 186 | 152 | ||
| 187 | &::after { | 153 | &::after { |
| 188 | border-color: fn.color(--accent --handle-border); | 154 | border-color: props.get(vars.$accent--handle-border-color); |
| 189 | } | 155 | } |
| 190 | } | 156 | } |
| 191 | 157 | ||
| 192 | &:hover, | 158 | &:hover, |
| 193 | &:focus-visible { | 159 | &:focus-visible { |
| 194 | @include iro.bem-sibling-elem('indicator') { | 160 | @include bem.sibling-elem('indicator') { |
| 195 | background-color: fn.color(--accent --hover --handle-border); | 161 | background-color: props.get(vars.$accent--hover--handle-border-color); |
| 196 | 162 | ||
| 197 | &::after { | 163 | &::after { |
| 198 | border-color: fn.color(--accent --hover --handle-border); | 164 | border-color: props.get(vars.$accent--hover--handle-border-color); |
| 199 | } | 165 | } |
| 200 | } | 166 | } |
| 201 | } | 167 | } |
| 202 | } | 168 | } |
| 203 | 169 | ||
| 204 | &:disabled { | 170 | &:disabled { |
| 205 | @include iro.bem-sibling-elem('label') { | 171 | @include bem.sibling-elem('label') { |
| 206 | color: fn.color(--disabled --label); | 172 | color: props.get(vars.$disabled--label-color); |
| 207 | } | 173 | } |
| 208 | 174 | ||
| 209 | &:checked { | 175 | &:checked { |
| 210 | @include iro.bem-sibling-elem('indicator') { | 176 | @include bem.sibling-elem('indicator') { |
| 211 | background-color: fn.color(--disabled --handle-border); | 177 | background-color: props.get(vars.$disabled--handle-border-color); |
| 212 | 178 | ||
| 213 | &::after { | 179 | &::after { |
| 214 | border-color: fn.color(--disabled --handle-border); | 180 | border-color: props.get(vars.$disabled--handle-border-color); |
| 215 | } | 181 | } |
| 216 | } | 182 | } |
| 217 | } | 183 | } |
diff --git a/src/objects/_switch.vars.scss b/src/objects/_switch.vars.scss new file mode 100644 index 0000000..85596af --- /dev/null +++ b/src/objects/_switch.vars.scss | |||
| @@ -0,0 +1,37 @@ | |||
| 1 | @use 'sass:map'; | ||
| 2 | @use 'iro-sass/src/props'; | ||
| 3 | @use '../core.vars' as core; | ||
| 4 | |||
| 5 | $inline-size: props.def(--o-switch--inline-size, props.get(core.$size--350)) !default; | ||
| 6 | $block-size: props.def(--o-switch--block-size, props.get(core.$size--200)) !default; | ||
| 7 | $label-gap: props.def(--o-switch--label-gap, props.get(core.$size--125)) !default; | ||
| 8 | $border-width: props.def(--o-switch--border-width, props.get(core.$border-width--medium)) !default; | ||
| 9 | $pad-i: props.def(--o-switch--pad-i, props.get(core.$size--65)) !default; | ||
| 10 | $pad-b: props.def(--o-switch--pad-b, props.get(core.$size--65)) !default; | ||
| 11 | $rounding: props.def(--o-switch--rounding, props.get(core.$rounding)) !default; | ||
| 12 | $spacing-sibling: props.def(--o-switch--spacing-sibling, props.get(core.$size--300)) !default; | ||
| 13 | |||
| 14 | $key-focus--border-width: props.def(--o-switch--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; | ||
| 15 | $key-focus--border-offset: props.def(--o-switch--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; | ||
| 16 | $key-focus--outline-width: props.def(--o-switch--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; | ||
| 17 | |||
| 18 | $track-bg-color: props.def(--o-switch--track-bg-color, props.get(core.$theme, --border), 'color') !default; | ||
| 19 | $handle-border-color: props.def(--o-switch--handle-border-color, props.get(core.$theme, --text-mute-more), 'color') !default; | ||
| 20 | $handle-bg-color: props.def(--o-switch--handle-bg-color, props.get(core.$theme, --base, --50), 'color') !default; | ||
| 21 | |||
| 22 | $hover--label-color: props.def(--o-switch--hover--label-color, props.get(core.$theme, --heading), 'color') !default; | ||
| 23 | $hover--handle-border-color: props.def(--o-switch--hover--handle-border-color, props.get(core.$theme, --text-mute), 'color') !default; | ||
| 24 | |||
| 25 | $accent--handle-border-color: props.def(--o-switch--accent--handle-border-color, props.get(core.$theme, --accent, --900), 'color') !default; | ||
| 26 | |||
| 27 | $accent--hover--handle-border-color: props.def(--o-switch--accent--hover--handle-border-color, props.get(core.$theme, --accent, --1000), 'color') !default; | ||
| 28 | |||
| 29 | $disabled--label-color: props.def(--o-switch--disabled--label-color, props.get(core.$theme, --text-disabled), 'color') !default; | ||
| 30 | $disabled--track-bg-color: props.def(--o-switch--disabled--track-bg-color, props.get(core.$theme, --border), 'color') !default; | ||
| 31 | $disabled--handle-border-color: props.def(--o-switch--disabled--handle-border-color, props.get(core.$theme, --border-strong), 'color') !default; | ||
| 32 | $disabled--handle-bg-color: props.def(--o-switch--disabled--handle-bg-color, props.get(core.$theme, --base, --50), 'color') !default; | ||
| 33 | |||
| 34 | $key-focus--label-color: props.def(--o-switch--key-focus--label-color, props.get(core.$theme, --focus, --text), 'color') !default; | ||
| 35 | $key-focus--border-color: props.def(--o-switch--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default; | ||
| 36 | $key-focus--outline-color: props.def(--o-switch--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default; | ||
| 37 | |||
diff --git a/src/objects/_tabbar.scss b/src/objects/_tabbar.scss new file mode 100644 index 0000000..131c832 --- /dev/null +++ b/src/objects/_tabbar.scss | |||
| @@ -0,0 +1,113 @@ | |||
| 1 | @use 'sass:map'; | ||
| 2 | @use 'sass:meta'; | ||
| 3 | @use 'sass:string'; | ||
| 4 | @use 'iro-sass/src/bem'; | ||
| 5 | @use 'iro-sass/src/props'; | ||
| 6 | @use '../props' as *; | ||
| 7 | |||
| 8 | @forward 'tabbar.vars'; | ||
| 9 | @use 'tabbar.vars' as vars; | ||
| 10 | |||
| 11 | @mixin styles { | ||
| 12 | @include materialize-at-root(meta.module-variables('vars')); | ||
| 13 | |||
| 14 | @include bem.object('tabbar') { | ||
| 15 | min-inline-size: 0; | ||
| 16 | block-size: props.get(vars.$block-size); | ||
| 17 | overflow: hidden; | ||
| 18 | |||
| 19 | &::after { | ||
| 20 | display: block; | ||
| 21 | block-size: props.get(vars.$indicator--width); | ||
| 22 | margin-block-start: calc(-1 * props.get(vars.$indicator--width)); | ||
| 23 | content: ''; | ||
| 24 | background-color: props.get(vars.$railing--bg-color); | ||
| 25 | } | ||
| 26 | |||
| 27 | @include bem.elem('tabs') { | ||
| 28 | display: flex; | ||
| 29 | block-size: 100%; | ||
| 30 | margin-inline: calc(-.5 * props.get(vars.$spacing)); | ||
| 31 | overflow-inline: auto; | ||
| 32 | } | ||
| 33 | |||
| 34 | @include bem.modifier('quiet') { | ||
| 35 | box-shadow: none; | ||
| 36 | } | ||
| 37 | |||
| 38 | @include bem.modifier('adapt') { | ||
| 39 | block-size: 100%; | ||
| 40 | } | ||
| 41 | |||
| 42 | @include bem.elem('tab') { | ||
| 43 | position: relative; | ||
| 44 | display: flex; | ||
| 45 | align-items: center; | ||
| 46 | padding-inline: calc(.5 * props.get(vars.$spacing)); | ||
| 47 | color: props.get(vars.$tab--text-color); | ||
| 48 | white-space: nowrap; | ||
| 49 | |||
| 50 | &::before { | ||
| 51 | position: absolute; | ||
| 52 | inset-block-start: 50%; | ||
| 53 | inset-inline: calc(-1 * props.get(vars.$tab--pad-i) + .5 * props.get(vars.$spacing)); | ||
| 54 | z-index: -10; | ||
| 55 | block-size: 1.5em; | ||
| 56 | content: ''; | ||
| 57 | border-radius: props.get(vars.$rounding); | ||
| 58 | transform: translateY(-50%); | ||
| 59 | } | ||
| 60 | |||
| 61 | &::after { | ||
| 62 | position: absolute; | ||
| 63 | inset-block-end: 0; | ||
| 64 | inset-inline: calc(.5 * props.get(vars.$spacing)); | ||
| 65 | z-index: 10; | ||
| 66 | display: none; | ||
| 67 | block-size: props.get(vars.$indicator--width); | ||
| 68 | content: ''; | ||
| 69 | background-color: props.get(vars.$tab--selected--text-color); | ||
| 70 | } | ||
| 71 | |||
| 72 | &:link, | ||
| 73 | &:visited { | ||
| 74 | &:hover, | ||
| 75 | &:active, | ||
| 76 | &:focus-visible { | ||
| 77 | color: props.get(vars.$tab--selected--text-color); | ||
| 78 | } | ||
| 79 | |||
| 80 | &:focus-visible { | ||
| 81 | &::before { | ||
| 82 | color: props.get(vars.$key-focus--text-color); | ||
| 83 | text-decoration: none; | ||
| 84 | outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); | ||
| 85 | box-shadow: 0 0 0 | ||
| 86 | calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) | ||
| 87 | props.get(vars.$key-focus--outline-color); | ||
| 88 | } | ||
| 89 | } | ||
| 90 | } | ||
| 91 | |||
| 92 | @include bem.is('selected') { | ||
| 93 | color: props.get(vars.$tab--selected--text-color); | ||
| 94 | |||
| 95 | &::after { | ||
| 96 | display: block; | ||
| 97 | } | ||
| 98 | } | ||
| 99 | } | ||
| 100 | |||
| 101 | @include bem.modifier('accent') { | ||
| 102 | @include bem.elem('tab') { | ||
| 103 | &::after { | ||
| 104 | background-color: props.get(vars.$tab--accent--text-color); | ||
| 105 | } | ||
| 106 | |||
| 107 | @include bem.is('selected') { | ||
| 108 | color: props.get(vars.$tab--accent--text-color); | ||
| 109 | } | ||
| 110 | } | ||
| 111 | } | ||
| 112 | } | ||
| 113 | } | ||
diff --git a/src/objects/_tabbar.vars.scss b/src/objects/_tabbar.vars.scss new file mode 100644 index 0000000..f4486d6 --- /dev/null +++ b/src/objects/_tabbar.vars.scss | |||
| @@ -0,0 +1,25 @@ | |||
| 1 | @use 'sass:map'; | ||
| 2 | @use 'sass:string'; | ||
| 3 | @use 'iro-sass/src/props'; | ||
| 4 | @use '../core.vars' as core; | ||
| 5 | |||
| 6 | $block-size: props.def(--o-tabbar--block-size, props.get(core.$size--700)) !default; | ||
| 7 | $rounding: props.def(--o-tabbar--rounding, props.get(core.$rounding)) !default; | ||
| 8 | $spacing: props.def(--o-tabbar--spacing, props.get(core.$size--400)) !default; | ||
| 9 | $tab--pad-i: props.def(--o-tabbar--tab--pad-i, props.get(core.$size--50)) !default; | ||
| 10 | |||
| 11 | $indicator--width: props.def(--o-tabbar--indicator--width, props.get(core.$border-width--medium)) !default; | ||
| 12 | |||
| 13 | $key-focus--border-width: props.def(--o-tabbar--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; | ||
| 14 | $key-focus--border-offset: props.def(--o-tabbar--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; | ||
| 15 | $key-focus--outline-width: props.def(--o-tabbar--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; | ||
| 16 | |||
| 17 | $tab--text-color: props.def(--o-tabbar--tab--text-color, props.get(core.$theme, --text-mute), 'color') !default; | ||
| 18 | $tab--selected--text-color: props.def(--o-tabbar--tab--selected--text-color, props.get(core.$theme, --heading), 'color') !default; | ||
| 19 | $tab--accent--text-color: props.def(--o-tabbar--tab--accent--text-color, props.get(core.$theme, --accent, --1100), 'color') !default; | ||
| 20 | |||
| 21 | $railing--bg-color: props.def(--o-tabbar--railing--bg-color, props.get(core.$theme, --border-mute), 'color') !default; | ||
| 22 | |||
| 23 | $key-focus--text-color: props.def(--o-tabbar--key-focus--text-color, props.get(core.$theme, --focus, --text), 'color') !default; | ||
| 24 | $key-focus--border-color: props.def(--o-tabbar--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default; | ||
| 25 | $key-focus--outline-color: props.def(--o-tabbar--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default; | ||
diff --git a/src/objects/_table.scss b/src/objects/_table.scss index 2c9f65b..2b63737 100644 --- a/src/objects/_table.scss +++ b/src/objects/_table.scss | |||
| @@ -1,78 +1,57 @@ | |||
| 1 | @use 'iro-sass/src/index' as iro; | 1 | @use 'sass:meta'; |
| 2 | @use '../functions' as fn; | 2 | @use 'iro-sass/src/bem'; |
| 3 | @use '../mixins' as mx; | 3 | @use 'iro-sass/src/props'; |
| 4 | @use '../props' as *; | ||
| 4 | 5 | ||
| 5 | @include iro.props-namespace('table') { | 6 | @forward 'table.vars'; |
| 6 | @include iro.props-store(( | 7 | @use 'table.vars' as vars; |
| 7 | --dims: ( | ||
| 8 | --pad-i: fn.global-dim(--size --175), | ||
| 9 | --pad-b: fn.global-dim(--size --125), | ||
| 10 | --rounding: fn.global-dim(--rounding), | ||
| 11 | --border: fn.global-dim(--border --thin), | ||
| 12 | 8 | ||
| 13 | --sm: ( | 9 | @mixin styles { |
| 14 | --pad-b: fn.global-dim(--size --75), | 10 | @include materialize-at-root(meta.module-variables('vars')); |
| 15 | ) | ||
| 16 | ), | ||
| 17 | --colors: ( | ||
| 18 | --border: fn.global-color(--border), | ||
| 19 | --heading: fn.global-color(--heading), | ||
| 20 | --hover: fn.global-color(--border-mute), | ||
| 21 | --active: fn.global-color(--border), | ||
| 22 | --box: ( | ||
| 23 | --bg: fn.global-color(--base --50), | ||
| 24 | --hover: fn.global-color(--bg-base), | ||
| 25 | --active: fn.global-color(--border-mute), | ||
| 26 | ) | ||
| 27 | ) | ||
| 28 | )); | ||
| 29 | 11 | ||
| 30 | @include iro.bem-object(iro.props-namespace()) { | 12 | @include bem.object('table') { |
| 31 | border-spacing: 0; | 13 | border-spacing: 0; |
| 32 | border-collapse: separate; | 14 | border-collapse: separate; |
| 33 | 15 | ||
| 34 | @include iro.bem-modifier('fixed') { | 16 | @include bem.modifier('fixed') { |
| 35 | table-layout: fixed; | 17 | table-layout: fixed; |
| 36 | } | 18 | } |
| 37 | 19 | ||
| 38 | @include iro.bem-elem('head-cell') { | 20 | @include bem.elem('head-cell') { |
| 39 | @include mx.set-font(--standard, ( | 21 | padding-block: props.get(vars.$pad-b); |
| 40 | --line-height: null, | 22 | padding-inline: props.get(vars.$pad-i); |
| 41 | --size: fn.global-dim(--font-size --50), | 23 | font-family: props.get(vars.$heading--font-family); |
| 42 | --weight: bold, | 24 | font-size: props.get(vars.$heading--font-size); |
| 43 | --transform: uppercase, | 25 | font-weight: props.get(vars.$heading--font-weight); |
| 44 | --spacing: .5px | 26 | color: props.get(vars.$heading-color); |
| 45 | )); | ||
| 46 | |||
| 47 | padding-inline: fn.dim(--pad-i); | ||
| 48 | padding-block: fn.dim(--pad-b); | ||
| 49 | color: fn.color(--heading); | ||
| 50 | text-align: start; | 27 | text-align: start; |
| 28 | text-transform: props.get(vars.$heading--text-transform); | ||
| 29 | letter-spacing: props.get(vars.$heading--letter-spacing); | ||
| 51 | } | 30 | } |
| 52 | 31 | ||
| 53 | @include iro.bem-elem('cell') { | 32 | @include bem.elem('cell') { |
| 54 | padding-inline: fn.dim(--pad-i); | 33 | padding-block: props.get(vars.$pad-b); |
| 55 | padding-block: fn.dim(--pad-b); | 34 | padding-inline: props.get(vars.$pad-i); |
| 56 | border-width: 0; | 35 | border-color: props.get(vars.$border-color); |
| 57 | border-block-start-width: fn.dim(--border); | ||
| 58 | border-style: solid; | 36 | border-style: solid; |
| 59 | border-color: fn.color(--border); | 37 | border-width: 0; |
| 38 | border-block-start-width: props.get(vars.$border-width); | ||
| 60 | 39 | ||
| 61 | @include iro.bem-modifier('divider') { | 40 | @include bem.modifier('divider') { |
| 62 | border-inline-end-width: fn.dim(--border); | 41 | border-inline-end-width: props.get(vars.$border-width); |
| 63 | } | 42 | } |
| 64 | } | 43 | } |
| 65 | 44 | ||
| 66 | @include iro.bem-elem('row') { | 45 | @include bem.elem('row') { |
| 67 | &:last-child { | 46 | &:last-child { |
| 68 | @include iro.bem-elem('cell') { | 47 | @include bem.elem('cell') { |
| 69 | border-block-end-width: fn.dim(--border); | 48 | border-block-end-width: props.get(vars.$border-width); |
| 70 | } | 49 | } |
| 71 | } | 50 | } |
| 72 | } | 51 | } |
| 73 | 52 | ||
| 74 | @include iro.bem-modifier('flush') { | 53 | @include bem.modifier('flush') { |
| 75 | @include iro.bem-elem('head-cell', 'cell') { | 54 | @include bem.elem('head-cell', 'cell') { |
| 76 | &:first-child { | 55 | &:first-child { |
| 77 | padding-inline-start: 0; | 56 | padding-inline-start: 0; |
| 78 | } | 57 | } |
| @@ -83,85 +62,85 @@ | |||
| 83 | } | 62 | } |
| 84 | } | 63 | } |
| 85 | 64 | ||
| 86 | @include iro.bem-modifier('box') { | 65 | @include bem.modifier('box') { |
| 87 | @include iro.bem-elem('cell') { | 66 | @include bem.elem('cell') { |
| 88 | background-color: fn.color(--box --bg); | 67 | background-color: props.get(vars.$box--bg-color); |
| 89 | 68 | ||
| 90 | &:first-child { | 69 | &:first-child { |
| 91 | border-inline-start-width: fn.dim(--border); | 70 | border-inline-start-width: props.get(vars.$border-width); |
| 92 | } | 71 | } |
| 93 | 72 | ||
| 94 | &:last-child { | 73 | &:last-child { |
| 95 | border-inline-end-width: fn.dim(--border); | 74 | border-inline-end-width: props.get(vars.$border-width); |
| 96 | } | 75 | } |
| 97 | } | 76 | } |
| 98 | 77 | ||
| 99 | @include iro.bem-elem('row') { | 78 | @include bem.elem('row') { |
| 100 | &:first-child { | 79 | &:first-child { |
| 101 | @include iro.bem-elem('cell') { | 80 | @include bem.elem('cell') { |
| 102 | &:first-child { | 81 | &:first-child { |
| 103 | border-start-start-radius: fn.dim(--rounding); | 82 | border-start-start-radius: props.get(vars.$rounding); |
| 104 | } | 83 | } |
| 105 | 84 | ||
| 106 | &:last-child { | 85 | &:last-child { |
| 107 | border-start-end-radius: fn.dim(--rounding); | 86 | border-start-end-radius: props.get(vars.$rounding); |
| 108 | } | 87 | } |
| 109 | } | 88 | } |
| 110 | } | 89 | } |
| 111 | 90 | ||
| 112 | &:last-child { | 91 | &:last-child { |
| 113 | @include iro.bem-elem('cell') { | 92 | @include bem.elem('cell') { |
| 114 | &:first-child { | 93 | &:first-child { |
| 115 | border-end-start-radius: fn.dim(--rounding); | 94 | border-end-start-radius: props.get(vars.$rounding); |
| 116 | } | 95 | } |
| 117 | 96 | ||
| 118 | &:last-child { | 97 | &:last-child { |
| 119 | border-end-end-radius: fn.dim(--rounding); | 98 | border-end-end-radius: props.get(vars.$rounding); |
| 120 | } | 99 | } |
| 121 | } | 100 | } |
| 122 | } | 101 | } |
| 123 | } | 102 | } |
| 124 | } | 103 | } |
| 125 | 104 | ||
| 126 | @include iro.bem-modifier('interactive') { | 105 | @include bem.modifier('interactive') { |
| 127 | @include iro.bem-elem('row') { | 106 | @include bem.elem('row') { |
| 128 | @include iro.bem-elem('cell') { | 107 | @include bem.elem('cell') { |
| 129 | cursor: pointer; | 108 | cursor: pointer; |
| 130 | } | 109 | } |
| 131 | 110 | ||
| 132 | &:hover { | 111 | &:hover { |
| 133 | @include iro.bem-elem('cell') { | 112 | @include bem.elem('cell') { |
| 134 | background-color: fn.color(--hover); | 113 | background-color: props.get(vars.$hover--bg-color); |
| 135 | } | 114 | } |
| 136 | } | 115 | } |
| 137 | 116 | ||
| 138 | &:active { | 117 | &:active { |
| 139 | @include iro.bem-elem('cell') { | 118 | @include bem.elem('cell') { |
| 140 | background-color: fn.color(--active); | 119 | background-color: props.get(vars.$active--bg-color); |
| 141 | } | 120 | } |
| 142 | } | 121 | } |
| 143 | } | 122 | } |
| 144 | 123 | ||
| 145 | @include iro.bem-modifier('box') { | 124 | @include bem.modifier('box') { |
| 146 | @include iro.bem-elem('row') { | 125 | @include bem.elem('row') { |
| 147 | &:hover { | 126 | &:hover { |
| 148 | @include iro.bem-elem('cell') { | 127 | @include bem.elem('cell') { |
| 149 | background-color: fn.color(--box --hover); | 128 | background-color: props.get(vars.$box--hover--bg-color); |
| 150 | } | 129 | } |
| 151 | } | 130 | } |
| 152 | 131 | ||
| 153 | &:active { | 132 | &:active { |
| 154 | @include iro.bem-elem('cell') { | 133 | @include bem.elem('cell') { |
| 155 | background-color: fn.color(--box --active); | 134 | background-color: props.get(vars.$box--active--bg-color); |
| 156 | } | 135 | } |
| 157 | } | 136 | } |
| 158 | } | 137 | } |
| 159 | } | 138 | } |
| 160 | } | 139 | } |
| 161 | 140 | ||
| 162 | @include iro.bem-modifier('sm') { | 141 | @include bem.modifier('sm') { |
| 163 | @include iro.bem-elem('head-cell', 'cell') { | 142 | @include bem.elem('head-cell', 'cell') { |
| 164 | padding-block: fn.dim(--sm --pad-b); | 143 | padding-block: props.get(vars.$pad-b--sm); |
| 165 | } | 144 | } |
| 166 | } | 145 | } |
| 167 | } | 146 | } |
diff --git a/src/objects/_table.vars.scss b/src/objects/_table.vars.scss new file mode 100644 index 0000000..d1d53d7 --- /dev/null +++ b/src/objects/_table.vars.scss | |||
| @@ -0,0 +1,25 @@ | |||
| 1 | @use 'sass:map'; | ||
| 2 | @use 'iro-sass/src/props'; | ||
| 3 | @use '../core.vars' as core; | ||
| 4 | |||
| 5 | $pad-i: props.def(--o-table--pad-i, props.get(core.$size--175)) !default; | ||
| 6 | $pad-b: props.def(--o-table--pad-b, props.get(core.$size--125)) !default; | ||
| 7 | $rounding: props.def(--o-table--rounding, props.get(core.$rounding)) !default; | ||
| 8 | $border-width: props.def(--o-table--border-width, props.get(core.$border-width--thin)) !default; | ||
| 9 | |||
| 10 | $heading--font-family: props.def(--o-table--heading--font-family, props.get(core.$font--standard--family)) !default; | ||
| 11 | $heading--font-size: props.def(--o-table--heading--font-size, props.get(core.$font-size--50)) !default; | ||
| 12 | $heading--font-weight: props.def(--o-table--heading--font-weight, bold) !default; | ||
| 13 | $heading--text-transform: props.def(--o-table--heading--text-transform, uppercase) !default; | ||
| 14 | $heading--letter-spacing: props.def(--o-table--heading--letter-spacing, .5px) !default; | ||
| 15 | |||
| 16 | $pad-b--sm: props.def(--o-table--sm--pad-b, props.get(core.$size--75)) !default; | ||
| 17 | |||
| 18 | $border-color: props.def(--o-table--border-color, props.get(core.$theme, --border), 'color') !default; | ||
| 19 | $heading-color: props.def(--o-table--heading-color, props.get(core.$theme, --heading), 'color') !default; | ||
| 20 | $hover--bg-color: props.def(--o-table--hover--bg-color, props.get(core.$theme, --border-mute), 'color') !default; | ||
| 21 | $active--bg-color: props.def(--o-table--active--bg-color, props.get(core.$theme, --border), 'color') !default; | ||
| 22 | |||
| 23 | $box--bg-color: props.def(--o-table--box--bg-color, props.get(core.$theme, --base, --50), 'color') !default; | ||
| 24 | $box--hover--bg-color: props.def(--o-table--box--hover--bg-color, props.get(core.$theme, --bg-base), 'color') !default; | ||
| 25 | $box--active--bg-color: props.def(--o-table--box--active--bg-color, props.get(core.$theme, --border-mute), 'color') !default; | ||
diff --git a/src/objects/_text-field.scss b/src/objects/_text-field.scss index 6611ea6..6c0e7d2 100644 --- a/src/objects/_text-field.scss +++ b/src/objects/_text-field.scss | |||
| @@ -1,210 +1,162 @@ | |||
| 1 | @use 'iro-sass/src/index' as iro; | 1 | @use 'sass:meta'; |
| 2 | @use '../functions' as fn; | 2 | @use 'iro-sass/src/bem'; |
| 3 | @use 'iro-sass/src/props'; | ||
| 4 | @use '../props' as *; | ||
| 3 | 5 | ||
| 4 | @mixin invalid { | 6 | @forward 'text-field.vars'; |
| 5 | $focus-border-offset: calc(fn.dim(--border) - fn.dim(--focus --border)); | 7 | @use 'text-field.vars' as vars; |
| 8 | |||
| 9 | @mixin -invalid { | ||
| 10 | $focus-border-offset: calc(props.get(vars.$border-width) - props.get(vars.$focus--border-width)); | ||
| 6 | 11 | ||
| 7 | @include iro.bem-sibling-elem('bg') { | 12 | @include bem.sibling-elem('bg') { |
| 8 | inset-block: $focus-border-offset; | 13 | inset-block: $focus-border-offset; |
| 9 | inset-inline: $focus-border-offset; | 14 | inset-inline: $focus-border-offset; |
| 10 | border: fn.dim(--focus --border) solid fn.color(--error --border); | 15 | border: props.get(vars.$focus--border-width) solid props.get(vars.$error--border-color); |
| 11 | border-radius: calc(fn.dim(--rounding) - $focus-border-offset); | 16 | border-radius: calc(props.get(vars.$rounding) - $focus-border-offset); |
| 12 | } | 17 | } |
| 13 | 18 | ||
| 14 | &:hover { | 19 | &:hover { |
| 15 | @include iro.bem-sibling-elem('bg') { | 20 | @include bem.sibling-elem('bg') { |
| 16 | border-color: fn.color(--error --hover --border); | 21 | border-color: props.get(vars.$error--hover--border-color); |
| 17 | } | 22 | } |
| 18 | } | 23 | } |
| 19 | 24 | ||
| 20 | &:focus { | 25 | &:focus { |
| 21 | @include iro.bem-sibling-elem('bg') { | 26 | @include bem.sibling-elem('bg') { |
| 22 | border-color: fn.color(--error --focus --border); | 27 | border-color: props.get(vars.$error--focus--border-color); |
| 23 | } | 28 | } |
| 24 | } | 29 | } |
| 25 | } | 30 | } |
| 26 | 31 | ||
| 27 | @mixin keyboard-focus { | 32 | @mixin -keyboard-focus { |
| 28 | @include iro.bem-sibling-elem('bg') { | 33 | @include bem.sibling-elem('bg') { |
| 29 | border-color: fn.color(--key-focus --border); | 34 | border-color: props.get(vars.$key-focus--border-color); |
| 30 | outline: fn.color(--key-focus --outline) solid fn.dim(--key-focus --border); | 35 | outline: props.get(vars.$key-focus--outline-color) solid props.get(vars.$key-focus--border-width); |
| 31 | //outline-offset: fn.dim(--focus --border); | 36 | //outline-offset: props.get(vars.$focus --border); |
| 32 | } | 37 | } |
| 33 | } | 38 | } |
| 34 | 39 | ||
| 35 | @include iro.props-namespace('text-field') { | 40 | @mixin styles { |
| 36 | @include iro.props-store(( | 41 | @include materialize-at-root(meta.module-variables('vars')); |
| 37 | --dims: ( | 42 | |
| 38 | --line-height: 1.4, | 43 | @include bem.object('text-field') { |
| 39 | --pad-i: fn.global-dim(--size --125), | 44 | $focus-border-offset: calc(props.get(vars.$border-width) - props.get(vars.$focus--border-width)); |
| 40 | --pad-b: fn.global-dim(--size --125), | ||
| 41 | --border: fn.global-dim(--border --thin), | ||
| 42 | --rounding: fn.global-dim(--rounding), | ||
| 43 | |||
| 44 | --extended: ( | ||
| 45 | --pad: fn.global-dim(--size --50), | ||
| 46 | ), | ||
| 47 | |||
| 48 | --focus: ( | ||
| 49 | --border: fn.global-dim(--border --medium), | ||
| 50 | ), | ||
| 51 | |||
| 52 | --key-focus: ( | ||
| 53 | --border: fn.global-dim(--key-focus --outline), | ||
| 54 | ), | ||
| 55 | ), | ||
| 56 | --colors: ( | ||
| 57 | --bg: fn.global-color(--base --50), | ||
| 58 | --placeholder: fn.global-color(--text-mute-more), | ||
| 59 | --text: fn.global-color(--text), | ||
| 60 | --border: fn.global-color(--border-strong), | ||
| 61 | |||
| 62 | --hover: ( | ||
| 63 | --border: fn.global-color(--text-mute-more), | ||
| 64 | ), | ||
| 65 | --focus: ( | ||
| 66 | --border: fn.global-color(--focus --border), | ||
| 67 | ), | ||
| 68 | --key-focus: ( | ||
| 69 | --border: fn.global-color(--focus --border), | ||
| 70 | --outline: fn.global-color(--focus --outline), | ||
| 71 | ), | ||
| 72 | --error: ( | ||
| 73 | --border: fn.global-color(--negative --700), | ||
| 74 | |||
| 75 | --hover: ( | ||
| 76 | --border: fn.global-color(--negative --900), | ||
| 77 | ), | ||
| 78 | --focus: ( | ||
| 79 | --border: fn.global-color(--negative --900), | ||
| 80 | ), | ||
| 81 | ), | ||
| 82 | --disabled: ( | ||
| 83 | --bg: fn.global-color(--border-mute), | ||
| 84 | --placeholder: fn.global-color(--text-disabled), | ||
| 85 | --text: fn.global-color(--text-disabled), | ||
| 86 | --border: fn.global-color(--border-mute), | ||
| 87 | ), | ||
| 88 | ), | ||
| 89 | )); | ||
| 90 | |||
| 91 | @include iro.bem-object(iro.props-namespace()) { | ||
| 92 | $focus-border-offset: calc(fn.dim(--border) - fn.dim(--focus --border)); | ||
| 93 | 45 | ||
| 94 | position: relative; | 46 | position: relative; |
| 95 | min-inline-size: 0; | 47 | min-inline-size: 0; |
| 96 | border-radius: fn.dim(--rounding); | 48 | background-color: props.get(vars.$bg-color); |
| 97 | background-color: fn.color(--bg); | 49 | border-radius: props.get(vars.$rounding); |
| 98 | 50 | ||
| 99 | @include iro.bem-elem('bg') { | 51 | @include bem.elem('bg') { |
| 100 | display: block; | ||
| 101 | position: absolute; | 52 | position: absolute; |
| 102 | inset-block: 0; | 53 | inset-block: 0; |
| 103 | inset-inline: 0; | 54 | inset-inline: 0; |
| 104 | border: fn.dim(--border) solid fn.color(--border); | 55 | display: block; |
| 105 | border-radius: fn.dim(--rounding); | ||
| 106 | pointer-events: none; | 56 | pointer-events: none; |
| 57 | border: props.get(vars.$border-width) solid props.get(vars.$border-color); | ||
| 58 | border-radius: props.get(vars.$rounding); | ||
| 107 | } | 59 | } |
| 108 | 60 | ||
| 109 | @include iro.bem-elem('native') { | 61 | @include bem.elem('native') { |
| 110 | box-sizing: border-box; | 62 | box-sizing: border-box; |
| 111 | inline-size: 100%; | 63 | inline-size: 100%; |
| 112 | padding-block: calc(fn.dim(--pad-b) - .5em * (fn.dim(--line-height) - 1)); | 64 | padding-block: calc(props.get(vars.$pad-b) - .5em * (props.get(vars.$line-height) - 1)); |
| 113 | padding-inline: fn.dim(--pad-i); | 65 | padding-inline: props.get(vars.$pad-i); |
| 114 | border: 1px solid transparent; | ||
| 115 | background-color: transparent; | ||
| 116 | color: fn.color(--text); | ||
| 117 | font: inherit; | 66 | font: inherit; |
| 118 | line-height: fn.dim(--line-height); | 67 | line-height: props.get(vars.$line-height); |
| 119 | resize: none; | 68 | color: props.get(vars.$text-color); |
| 120 | appearance: none; | 69 | appearance: none; |
| 70 | resize: none; | ||
| 71 | background-color: transparent; | ||
| 72 | border: 1px solid transparent; | ||
| 121 | 73 | ||
| 122 | &::placeholder { | 74 | &::placeholder { |
| 123 | opacity: 1; | ||
| 124 | color: fn.color(--placeholder); | ||
| 125 | font-style: italic; | 75 | font-style: italic; |
| 76 | color: props.get(vars.$placeholder-color); | ||
| 77 | opacity: 1; | ||
| 126 | } | 78 | } |
| 127 | 79 | ||
| 128 | &:hover { | 80 | &:hover { |
| 129 | @include iro.bem-sibling-elem('bg') { | 81 | @include bem.sibling-elem('bg') { |
| 130 | border-color: fn.color(--hover --border); | 82 | border-color: props.get(vars.$hover--border-color); |
| 131 | } | 83 | } |
| 132 | } | 84 | } |
| 133 | 85 | ||
| 134 | &:focus { | 86 | &:focus { |
| 135 | outline: 0; | 87 | outline: 0; |
| 136 | 88 | ||
| 137 | @include iro.bem-sibling-elem('bg') { | 89 | @include bem.sibling-elem('bg') { |
| 138 | inset-block: $focus-border-offset; | 90 | inset-block: $focus-border-offset; |
| 139 | inset-inline: $focus-border-offset; | 91 | inset-inline: $focus-border-offset; |
| 140 | border: fn.dim(--focus --border) solid fn.color(--focus --border); | 92 | border: props.get(vars.$focus--border-width) solid props.get(vars.$focus--border-color); |
| 141 | border-radius: calc(fn.dim(--rounding) - $focus-border-offset); | 93 | border-radius: calc(props.get(vars.$rounding) - $focus-border-offset); |
| 142 | } | 94 | } |
| 143 | } | 95 | } |
| 144 | 96 | ||
| 145 | &:invalid { | 97 | &:invalid { |
| 146 | @include invalid; | 98 | @include -invalid; |
| 147 | } | 99 | } |
| 148 | 100 | ||
| 149 | &:focus-visible, | 101 | &:focus-visible, |
| 150 | &:invalid:focus-visible { | 102 | &:invalid:focus-visible { |
| 151 | @include keyboard-focus; | 103 | @include -keyboard-focus; |
| 152 | } | 104 | } |
| 153 | } | 105 | } |
| 154 | 106 | ||
| 155 | @include iro.bem-modifier('extended') { | 107 | @include bem.modifier('extended') { |
| 156 | padding: fn.dim(--extended --pad); | 108 | padding: props.get(vars.$extended--pad); |
| 157 | 109 | ||
| 158 | @include iro.bem-multi('&', 'elem' 'bg') { | 110 | @include bem.multi('&', 'elem' 'bg') { |
| 159 | border-radius: calc(fn.dim(--rounding) + fn.dim(--extended --pad)); | 111 | border-radius: calc(props.get(vars.$rounding) + props.get(vars.$extended--pad)); |
| 160 | } | 112 | } |
| 161 | 113 | ||
| 162 | @include iro.bem-elem('native') { | 114 | @include bem.elem('native') { |
| 163 | &:focus { | 115 | &:focus { |
| 164 | @include iro.bem-sibling-elem('bg') { | 116 | @include bem.sibling-elem('bg') { |
| 165 | border-radius: calc(fn.dim(--rounding) + fn.dim(--extended --pad) - $focus-border-offset); | 117 | border-radius: calc(props.get(vars.$rounding) + props.get(vars.$extended--pad) - $focus-border-offset); |
| 166 | } | 118 | } |
| 167 | } | 119 | } |
| 168 | } | 120 | } |
| 169 | } | 121 | } |
| 170 | 122 | ||
| 171 | @include iro.bem-is('invalid') { | 123 | @include bem.is('invalid') { |
| 172 | @include iro.bem-elem('native') { | 124 | @include bem.elem('native') { |
| 173 | @include invalid; | 125 | @include -invalid; |
| 174 | 126 | ||
| 175 | &:focus-visible { | 127 | &:focus-visible { |
| 176 | @include keyboard-focus; | 128 | @include -keyboard-focus; |
| 177 | } | 129 | } |
| 178 | } | 130 | } |
| 179 | } | 131 | } |
| 180 | 132 | ||
| 181 | @include iro.bem-is('disabled') { | 133 | @include bem.is('disabled') { |
| 182 | background-color: fn.color(--disabled --bg); | 134 | background-color: props.get(vars.$disabled--bg-color); |
| 183 | 135 | ||
| 184 | @include iro.bem-elem('native') { | 136 | @include bem.elem('native') { |
| 185 | color: fn.color(--disabled --text); | 137 | color: props.get(vars.$disabled--text-color); |
| 186 | 138 | ||
| 187 | &::placeholder { | 139 | &::placeholder { |
| 188 | color: fn.color(--disabled --placeholder); | 140 | color: props.get(vars.$disabled--placeholder-color); |
| 189 | } | 141 | } |
| 190 | } | 142 | } |
| 191 | 143 | ||
| 192 | @include iro.bem-elem('bg') { | 144 | @include bem.elem('bg') { |
| 193 | border-color: fn.color(--disabled --border); | 145 | border-color: props.get(vars.$disabled--border-color); |
| 194 | } | 146 | } |
| 195 | 147 | ||
| 196 | @include iro.bem-is('invalid') { | 148 | @include bem.is('invalid') { |
| 197 | @include iro.bem-elem('native') { | 149 | @include bem.elem('native') { |
| 198 | @include iro.bem-sibling-elem('bg') { | 150 | @include bem.sibling-elem('bg') { |
| 199 | border-color: fn.color(--disabled --border); | 151 | border-color: props.get(vars.$disabled--border-color); |
| 200 | } | 152 | } |
| 201 | } | 153 | } |
| 202 | } | 154 | } |
| 203 | 155 | ||
| 204 | @include iro.bem-elem('native') { | 156 | @include bem.elem('native') { |
| 205 | &:invalid { | 157 | &:invalid { |
| 206 | @include iro.bem-sibling-elem('bg') { | 158 | @include bem.sibling-elem('bg') { |
| 207 | border-color: fn.color(--disabled --border); | 159 | border-color: props.get(vars.$disabled--border-color); |
| 208 | } | 160 | } |
| 209 | } | 161 | } |
| 210 | } | 162 | } |
diff --git a/src/objects/_text-field.vars.scss b/src/objects/_text-field.vars.scss new file mode 100644 index 0000000..833eacb --- /dev/null +++ b/src/objects/_text-field.vars.scss | |||
| @@ -0,0 +1,38 @@ | |||
| 1 | @use 'sass:map'; | ||
| 2 | @use 'iro-sass/src/props'; | ||
| 3 | @use '../core.vars' as core; | ||
| 4 | |||
| 5 | $line-height: props.def(--o-text-field--line-height, 1.4) !default; | ||
| 6 | $pad-i: props.def(--o-text-field--pad-i, props.get(core.$size--125)) !default; | ||
| 7 | $pad-b: props.def(--o-text-field--pad-b, props.get(core.$size--125)) !default; | ||
| 8 | $border-width: props.def(--o-text-field--border-width, props.get(core.$border-width--thin)) !default; | ||
| 9 | $rounding: props.def(--o-text-field--rounding, props.get(core.$rounding)) !default; | ||
| 10 | |||
| 11 | $extended--pad: props.def(--o-text-field--extended--pad, props.get(core.$size--50)) !default; | ||
| 12 | |||
| 13 | $focus--border-width: props.def(--o-text-field--focus--border-width, props.get(core.$border-width--medium)) !default; | ||
| 14 | |||
| 15 | $key-focus--border-width: props.def(--o-text-field--key-focus--border-width, props.get(core.$key-focus--outline-width)) !default; | ||
| 16 | |||
| 17 | $bg-color: props.def(--o-text-field--bg-color, props.get(core.$theme, --base, --50), 'color') !default; | ||
| 18 | $placeholder-color: props.def(--o-text-field--placeholder-color, props.get(core.$theme, --text-mute-more), 'color') !default; | ||
| 19 | $text-color: props.def(--o-text-field--text-color, props.get(core.$theme, --text), 'color') !default; | ||
| 20 | $border-color: props.def(--o-text-field--border-color, props.get(core.$theme, --border-strong), 'color') !default; | ||
| 21 | |||
| 22 | $hover--border-color: props.def(--o-text-field--hover--border-color, props.get(core.$theme, --text-mute-more), 'color') !default; | ||
| 23 | |||
| 24 | $focus--border-color: props.def(--o-text-field--focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default; | ||
| 25 | |||
| 26 | $key-focus--border-color: props.def(--o-text-field--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default; | ||
| 27 | $key-focus--outline-color: props.def(--o-text-field--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default; | ||
| 28 | |||
| 29 | $error--border-color: props.def(--o-text-field--error--border-color, props.get(core.$theme, --negative, --700), 'color') !default; | ||
| 30 | |||
| 31 | $error--hover--border-color: props.def(--o-text-field--error--hover--border-color, props.get(core.$theme, --negative, --900), 'color') !default; | ||
| 32 | |||
| 33 | $error--focus--border-color: props.def(--o-text-field--error--focus--border-color, props.get(core.$theme, --negative, --900), 'color') !default; | ||
| 34 | |||
| 35 | $disabled--bg-color: props.def(--o-text-field--disabled--bg-color, props.get(core.$theme, --border-mute), 'color') !default; | ||
| 36 | $disabled--placeholder-color: props.def(--o-text-field--disabled--placeholder-color, props.get(core.$theme, --text-disabled), 'color') !default; | ||
| 37 | $disabled--text-color: props.def(--o-text-field--disabled--text-color, props.get(core.$theme, --text-disabled), 'color') !default; | ||
| 38 | $disabled--border-color: props.def(--o-text-field--disabled--border-color, props.get(core.$theme, --border-mute), 'color') !default; | ||
diff --git a/src/objects/_thumbnail.scss b/src/objects/_thumbnail.scss new file mode 100644 index 0000000..73a8cb0 --- /dev/null +++ b/src/objects/_thumbnail.scss | |||
| @@ -0,0 +1,104 @@ | |||
| 1 | @use 'sass:map'; | ||
| 2 | @use 'sass:meta'; | ||
| 3 | @use 'sass:string'; | ||
| 4 | @use 'iro-sass/src/bem'; | ||
| 5 | @use 'iro-sass/src/props'; | ||
| 6 | @use '../props' as *; | ||
| 7 | |||
| 8 | @forward 'thumbnail.vars'; | ||
| 9 | @use 'thumbnail.vars' as vars; | ||
| 10 | |||
| 11 | @mixin styles { | ||
| 12 | @include materialize-at-root(meta.module-variables('vars')); | ||
| 13 | |||
| 14 | @include bem.object('thumbnail') { | ||
| 15 | position: relative; | ||
| 16 | display: block; | ||
| 17 | flex: 0 0 auto; | ||
| 18 | inline-size: props.get(vars.$size); | ||
| 19 | block-size: props.get(vars.$size); | ||
| 20 | overflow: hidden; | ||
| 21 | border-radius: props.get(vars.$rounding); | ||
| 22 | outline: props.get(vars.$border-color) solid props.get(vars.$border-width); | ||
| 23 | outline-offset: calc(-1 * props.get(vars.$border-width)); | ||
| 24 | opacity: .75; | ||
| 25 | |||
| 26 | &:hover, | ||
| 27 | &:active, | ||
| 28 | &:focus-visible { | ||
| 29 | outline-color: props.get(vars.$hover--border-color); | ||
| 30 | opacity: 1; | ||
| 31 | } | ||
| 32 | |||
| 33 | @include bem.is('selected') { | ||
| 34 | $focus-border-offset: calc(-1 * props.get(vars.$selected--border-width)); | ||
| 35 | |||
| 36 | margin: $focus-border-offset; | ||
| 37 | border: props.get(vars.$selected--border-width) solid props.get(vars.$selected--border-color); | ||
| 38 | border-radius: calc(props.get(vars.$rounding) - $focus-border-offset); | ||
| 39 | outline: none; | ||
| 40 | opacity: 1; | ||
| 41 | } | ||
| 42 | |||
| 43 | @include bem.elem('image') { | ||
| 44 | position: absolute; | ||
| 45 | inset-block-start: 0; | ||
| 46 | inset-inline-start: 0; | ||
| 47 | display: block; | ||
| 48 | inline-size: 100%; | ||
| 49 | block-size: 100%; | ||
| 50 | object-fit: cover; | ||
| 51 | object-position: center center; | ||
| 52 | } | ||
| 53 | |||
| 54 | @include bem.elem('icon') { | ||
| 55 | position: absolute; | ||
| 56 | inset-block-start: 50%; | ||
| 57 | inset-inline-start: 50%; | ||
| 58 | transform: translate(-50%, -50%); | ||
| 59 | } | ||
| 60 | |||
| 61 | &:focus-visible { | ||
| 62 | $focus-border-offset: calc(-1 * props.get(vars.$key-focus--border-offset)); | ||
| 63 | |||
| 64 | margin: $focus-border-offset; | ||
| 65 | border: props.get(vars.$key-focus--border-offset) solid transparent; | ||
| 66 | border-radius: calc(props.get(vars.$rounding) - $focus-border-offset); | ||
| 67 | outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); | ||
| 68 | outline-offset: 0; | ||
| 69 | box-shadow: | ||
| 70 | 0 | ||
| 71 | 0 | ||
| 72 | 0 | ||
| 73 | calc(props.get(vars.$key-focus--outline-width) + props.get(vars.$key-focus--border-width)) | ||
| 74 | props.get(vars.$key-focus--outline-color); | ||
| 75 | } | ||
| 76 | |||
| 77 | @each $theme in map.keys(props.get(vars.$static-themes)) { | ||
| 78 | @include bem.modifier(string.slice($theme, 3)) { | ||
| 79 | outline-color: props.get(vars.$static-themes, $theme, --border); | ||
| 80 | |||
| 81 | &:hover, | ||
| 82 | &:active, | ||
| 83 | &:focus-visible { | ||
| 84 | outline-color: props.get(vars.$static-themes, $theme, --hover, --border); | ||
| 85 | } | ||
| 86 | |||
| 87 | @include bem.is('selected') { | ||
| 88 | border-color: props.get(vars.$static-themes, $theme, --selected, --border); | ||
| 89 | } | ||
| 90 | |||
| 91 | &:focus-visible { | ||
| 92 | border-color: transparent; | ||
| 93 | outline-color: props.get(vars.$static-themes, $theme, --key-focus, --border); | ||
| 94 | box-shadow: | ||
| 95 | 0 | ||
| 96 | 0 | ||
| 97 | 0 | ||
| 98 | calc(props.get(vars.$key-focus--outline-width) + props.get(vars.$key-focus--border-width)) | ||
| 99 | props.get(vars.$static-themes, $theme, --key-focus, --outline); | ||
| 100 | } | ||
| 101 | } | ||
| 102 | } | ||
| 103 | } | ||
| 104 | } | ||
diff --git a/src/objects/_thumbnail.vars.scss b/src/objects/_thumbnail.vars.scss new file mode 100644 index 0000000..ba8cebe --- /dev/null +++ b/src/objects/_thumbnail.vars.scss | |||
| @@ -0,0 +1,51 @@ | |||
| 1 | @use 'sass:map'; | ||
| 2 | @use 'sass:string'; | ||
| 3 | @use 'iro-sass/src/props'; | ||
| 4 | @use '../core.vars' as core; | ||
| 5 | |||
| 6 | $size: props.def(--o-thumbnail--size, props.get(core.$size--700)) !default; | ||
| 7 | $rounding: props.def(--o-thumbnail--rounding, props.get(core.$rounding)) !default; | ||
| 8 | $spacing: props.def(--o-thumbnail--spacing, props.get(core.$size--100)) !default; | ||
| 9 | $border-width: props.def(--o-thumbnail--border-width, props.get(core.$border-width--thin)) !default; | ||
| 10 | |||
| 11 | $selected--border-width: props.def(--o-thumbnail--selected--border-width, props.get(core.$border-width--medium)) !default; | ||
| 12 | |||
| 13 | $key-focus--border-width: props.def(--o-thumbnail--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; | ||
| 14 | $key-focus--border-offset: props.def(--o-thumbnail--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; | ||
| 15 | $key-focus--outline-width: props.def(--o-thumbnail--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; | ||
| 16 | |||
| 17 | $border-color: props.def(--o-thumbnail--border-color, props.get(core.$theme, --border-strong), 'color') !default; | ||
| 18 | |||
| 19 | $hover--border-color: props.def(--o-thumbnail--hover--border-color, props.get(core.$theme, --text-mute-more), 'color') !default; | ||
| 20 | |||
| 21 | $selected--border-color: props.def(--o-thumbnail--selected--border-color, props.get(core.$theme, --heading), 'color') !default; | ||
| 22 | |||
| 23 | $key-focus--border-color: props.def(--o-thumbnail--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default; | ||
| 24 | $key-focus--outline-color: props.def(--o-thumbnail--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default; | ||
| 25 | |||
| 26 | $size--md: props.def(--o-thumbnail--size, props.get(core.$size--600), 'md') !default; | ||
| 27 | |||
| 28 | $static-themes: props.def(--o-thumbnail, (), 'color'); | ||
| 29 | |||
| 30 | @each $theme in map.keys(props.get(core.$transparent-colors)) { | ||
| 31 | $thumbnail-theme: --static-#{string.slice($theme, 3)}; | ||
| 32 | |||
| 33 | $static-themes: props.merge($static-themes, ( | ||
| 34 | $thumbnail-theme: ( | ||
| 35 | --border: props.get(core.$transparent-colors, $theme, --400), | ||
| 36 | |||
| 37 | --hover: ( | ||
| 38 | --border: props.get(core.$transparent-colors, $theme, --500), | ||
| 39 | ), | ||
| 40 | |||
| 41 | --selected: ( | ||
| 42 | --border: props.get(core.$transparent-colors, $theme, --900), | ||
| 43 | ), | ||
| 44 | |||
| 45 | --key-focus: ( | ||
| 46 | --border: props.get(core.$transparent-colors, $theme, --900), | ||
| 47 | --outline: props.get(core.$transparent-colors, $theme, --300), | ||
| 48 | ), | ||
| 49 | ) | ||
| 50 | )); | ||
| 51 | } | ||
diff --git a/src/scopes/_blockquotes.scss b/src/scopes/_blockquotes.scss index f6a13fe..91a7785 100644 --- a/src/scopes/_blockquotes.scss +++ b/src/scopes/_blockquotes.scss | |||
| @@ -1,33 +1,25 @@ | |||
| 1 | @use 'iro-sass/src/index' as iro; | 1 | @use 'sass:meta'; |
| 2 | @use '../functions' as fn; | 2 | @use 'iro-sass/src/bem'; |
| 3 | @use 'iro-sass/src/props'; | ||
| 4 | @use '../props' as *; | ||
| 3 | 5 | ||
| 4 | @include iro.props-namespace('blockquotes') { | 6 | @forward 'blockquotes.vars'; |
| 5 | @include iro.props-store(( | 7 | @use 'blockquotes.vars' as vars; |
| 6 | --dims: ( | ||
| 7 | --indent: fn.global-dim(--list --indent), | ||
| 8 | --margin-bs: fn.global-dim(--paragraph --margin-bs), | ||
| 9 | --border: fn.global-dim(--border --thick), | ||
| 10 | 8 | ||
| 11 | --compact: ( | 9 | @mixin styles { |
| 12 | --indent: fn.global-dim(--list --compact-indent), | 10 | @include materialize-at-root(meta.module-variables('vars')); |
| 13 | ), | ||
| 14 | ), | ||
| 15 | --colors: ( | ||
| 16 | --border: fn.global-color(--border), | ||
| 17 | ) | ||
| 18 | )); | ||
| 19 | 11 | ||
| 20 | @include iro.bem-scope(iro.props-namespace()) { | 12 | @include bem.scope('blockquotes') { |
| 21 | blockquote { | 13 | blockquote { |
| 22 | margin-block: fn.dim(--margin-bs); | 14 | padding-inline-start: calc(props.get(vars.$indent) - props.get(vars.$border-width)); |
| 15 | margin-block: props.get(vars.$margin-bs) 0; | ||
| 23 | margin-inline: 1px 0; | 16 | margin-inline: 1px 0; |
| 24 | padding-inline-start: calc(fn.dim(--indent) - fn.dim(--border)); | 17 | border-inline-start: props.get(vars.$border-width) solid props.get(vars.$border-color); |
| 25 | border-inline-start: fn.dim(--border) solid fn.color(--border); | ||
| 26 | } | 18 | } |
| 27 | 19 | ||
| 28 | @include iro.bem-modifier('compact') { | 20 | @include bem.modifier('compact') { |
| 29 | blockquote { | 21 | blockquote { |
| 30 | padding-inline-start: calc(fn.dim(--compact --indent) - fn.dim(--border)); | 22 | padding-inline-start: calc(props.get(vars.$compact--indent) - props.get(vars.$border-width)); |
| 31 | } | 23 | } |
| 32 | } | 24 | } |
| 33 | } | 25 | } |
diff --git a/src/scopes/_blockquotes.vars.scss b/src/scopes/_blockquotes.vars.scss new file mode 100644 index 0000000..6aae242 --- /dev/null +++ b/src/scopes/_blockquotes.vars.scss | |||
| @@ -0,0 +1,11 @@ | |||
| 1 | @use 'iro-sass/src/props'; | ||
| 2 | @use '../core.vars' as core; | ||
| 3 | @use './implicit.vars' as implicit; | ||
| 4 | |||
| 5 | $indent: props.def(--s-blockquotes--indent, props.get(core.$list--indent)) !default; | ||
| 6 | $margin-bs: props.def(--s-blockquotes--margin-bs, props.get(implicit.$paragraph--margin-bs)) !default; | ||
| 7 | $border-width: props.def(--s-blockquotes--border-width, props.get(core.$border-width--thick)) !default; | ||
| 8 | |||
| 9 | $compact--indent: props.def(--s-blockquotes--compact--indent, props.get(core.$list--compact-indent)) !default; | ||
| 10 | |||
| 11 | $border-color: props.def(--s-blockquotes--border-color, props.get(core.$theme, --border), 'color') !default; | ||
diff --git a/src/scopes/_body.scss b/src/scopes/_body.scss new file mode 100644 index 0000000..6d32212 --- /dev/null +++ b/src/scopes/_body.scss | |||
| @@ -0,0 +1,59 @@ | |||
| 1 | @use 'sass:meta'; | ||
| 2 | @use 'iro-sass/src/bem'; | ||
| 3 | @use 'iro-sass/src/props'; | ||
| 4 | @use '../props' as *; | ||
| 5 | |||
| 6 | @forward 'body.vars'; | ||
| 7 | @use 'body.vars' as vars; | ||
| 8 | |||
| 9 | @mixin styles { | ||
| 10 | @include materialize-at-root(meta.module-variables('vars')); | ||
| 11 | |||
| 12 | @include bem.scope('body') { | ||
| 13 | font-size: props.get(vars.$font-size); | ||
| 14 | line-height: props.get(vars.$line-height); | ||
| 15 | |||
| 16 | strong { | ||
| 17 | color: props.get(vars.$strong--text-color); | ||
| 18 | } | ||
| 19 | |||
| 20 | p, | ||
| 21 | ul, | ||
| 22 | ol { | ||
| 23 | max-inline-size: props.get(vars.$paragraph--max-inline-size); | ||
| 24 | margin-block-start: props.get(vars.$paragraph--margin-bs); | ||
| 25 | } | ||
| 26 | |||
| 27 | ul, | ||
| 28 | ol { | ||
| 29 | box-sizing: border-box; | ||
| 30 | } | ||
| 31 | |||
| 32 | img { | ||
| 33 | display: block; | ||
| 34 | inline-size: auto; | ||
| 35 | max-inline-size: 100%; | ||
| 36 | block-size: auto; | ||
| 37 | max-block-size: props.get(vars.$img--max-block-size); | ||
| 38 | margin-block-start: props.get(vars.$paragraph--margin-bs); | ||
| 39 | } | ||
| 40 | |||
| 41 | figure { | ||
| 42 | margin-block-start: props.get(vars.$paragraph--margin-bs); | ||
| 43 | |||
| 44 | img { | ||
| 45 | margin-block: 0; | ||
| 46 | } | ||
| 47 | } | ||
| 48 | |||
| 49 | hr { | ||
| 50 | margin-block: calc(2 * props.get(vars.$paragraph--margin-bs)); | ||
| 51 | } | ||
| 52 | |||
| 53 | table, | ||
| 54 | pre, | ||
| 55 | blockquote { | ||
| 56 | margin-block-start: props.get(vars.$paragraph--margin-bs); | ||
| 57 | } | ||
| 58 | } | ||
| 59 | } | ||
diff --git a/src/scopes/_body.vars.scss b/src/scopes/_body.vars.scss new file mode 100644 index 0000000..1de2cfd --- /dev/null +++ b/src/scopes/_body.vars.scss | |||
| @@ -0,0 +1,12 @@ | |||
| 1 | @use 'iro-sass/src/props'; | ||
| 2 | @use '../core.vars' as core; | ||
| 3 | |||
| 4 | @use '../layouts/container.vars' as container; | ||
| 5 | |||
| 6 | $font-size: props.def(--s-body--font-size, props.get(core.$font-size--150)) !default; | ||
| 7 | $line-height: props.def(--s-body--line-height, calc(props.get(core.$font--standard--line-height) + .1)) !default; | ||
| 8 | $paragraph--margin-bs: props.def(--s-body--paragraph--margin-bs, props.get(core.$size--300)) !default; | ||
| 9 | $paragraph--max-inline-size: props.def(--s-body--paragraph--max-inline-size, props.get(container.$fixed)) !default; | ||
| 10 | $img--max-block-size: props.def(--s-body--img--max-block-size, none) !default; | ||
| 11 | |||
| 12 | $strong--text-color: props.def(--s-body--strong--text-color, props.get(core.$theme, --heading), 'color') !default; | ||
diff --git a/src/scopes/_code.scss b/src/scopes/_code.scss index 4df711b..9b2a63d 100644 --- a/src/scopes/_code.scss +++ b/src/scopes/_code.scss | |||
| @@ -1,58 +1,39 @@ | |||
| 1 | @use 'iro-sass/src/index' as iro; | 1 | @use 'sass:meta'; |
| 2 | @use '../functions' as fn; | 2 | @use 'iro-sass/src/bem'; |
| 3 | @use 'iro-sass/src/props'; | ||
| 4 | @use '../props' as *; | ||
| 3 | 5 | ||
| 4 | @include iro.props-namespace('code') { | 6 | @forward 'code.vars'; |
| 5 | @include iro.props-store(( | 7 | @use 'code.vars' as vars; |
| 6 | --dims: ( | ||
| 7 | --inline: ( | ||
| 8 | --pad-i: fn.global-dim(--size --50), | ||
| 9 | --pad-b: fn.global-dim(--size --10), | ||
| 10 | --rounding: fn.global-dim(--rounding), | ||
| 11 | ), | ||
| 12 | --block: ( | ||
| 13 | --pad-i: fn.global-dim(--size --150), | ||
| 14 | --pad-b: fn.global-dim(--size --85), | ||
| 15 | --margin-bs: fn.global-dim(--paragraph --margin-bs), | ||
| 16 | --rounding: fn.global-dim(--rounding), | ||
| 17 | ) | ||
| 18 | ), | ||
| 19 | --colors: ( | ||
| 20 | --inline: ( | ||
| 21 | --fg: fn.global-color(--red --1200), | ||
| 22 | --bg: fn.global-color(--red --200), | ||
| 23 | ), | ||
| 24 | --block: ( | ||
| 25 | --fg: fn.global-color(--text), | ||
| 26 | --bg: fn.global-color(--base --50), | ||
| 27 | ) | ||
| 28 | ) | ||
| 29 | )); | ||
| 30 | 8 | ||
| 31 | @include iro.bem-scope(iro.props-namespace()) { | 9 | @mixin styles { |
| 10 | @include materialize-at-root(meta.module-variables('vars')); | ||
| 11 | |||
| 12 | @include bem.scope('code') { | ||
| 32 | code { | 13 | code { |
| 33 | padding-block: fn.dim(--inline --pad-b); | 14 | padding-block: props.get(vars.$inline--pad-b); |
| 34 | padding-inline: fn.dim(--inline --pad-i); | 15 | padding-inline: props.get(vars.$inline--pad-i); |
| 35 | border-radius: fn.dim(--inline --rounding); | 16 | color: props.get(vars.$inline--fg); |
| 36 | background-color: fn.color(--inline --bg); | 17 | background-color: props.get(vars.$inline--bg); |
| 37 | color: fn.color(--inline --fg); | 18 | border-radius: props.get(vars.$inline--rounding); |
| 38 | } | 19 | } |
| 39 | 20 | ||
| 40 | pre { | 21 | pre { |
| 41 | margin-block: fn.dim(--block --margin-bs) 0; | 22 | padding-block: props.get(vars.$block--pad-b); |
| 23 | padding-inline: props.get(vars.$block--pad-i); | ||
| 24 | margin-block: props.get(vars.$block--margin-bs) 0; | ||
| 42 | margin-inline: 0; | 25 | margin-inline: 0; |
| 43 | padding-block: fn.dim(--block --pad-b); | 26 | color: props.get(vars.$block--fg); |
| 44 | padding-inline: fn.dim(--block --pad-i); | 27 | background-color: props.get(vars.$block--bg); |
| 45 | border-radius: fn.dim(--block --rounding); | 28 | border-radius: props.get(vars.$block--rounding); |
| 46 | background-color: fn.color(--block --bg); | ||
| 47 | color: fn.color(--block --fg); | ||
| 48 | 29 | ||
| 49 | code { | 30 | code { |
| 50 | display: inline-block; | 31 | display: inline-block; |
| 51 | margin-inline-end: fn.dim(--block --pad-i); | ||
| 52 | padding: 0; | 32 | padding: 0; |
| 53 | border-radius: 0; | 33 | margin-inline-end: props.get(vars.$block--pad-i); |
| 54 | background-color: transparent; | ||
| 55 | color: currentColor; | 34 | color: currentColor; |
| 35 | background-color: transparent; | ||
| 36 | border-radius: 0; | ||
| 56 | } | 37 | } |
| 57 | } | 38 | } |
| 58 | } | 39 | } |
diff --git a/src/scopes/_code.vars.scss b/src/scopes/_code.vars.scss new file mode 100644 index 0000000..8a040c2 --- /dev/null +++ b/src/scopes/_code.vars.scss | |||
| @@ -0,0 +1,18 @@ | |||
| 1 | @use 'iro-sass/src/props'; | ||
| 2 | @use '../core.vars' as core; | ||
| 3 | @use './implicit.vars' as implicit; | ||
| 4 | |||
| 5 | $inline--pad-i: props.def(--s-code--inline--pad-i, props.get(core.$size--50)) !default; | ||
| 6 | $inline--pad-b: props.def(--s-code--inline--pad-b, props.get(core.$size--10)) !default; | ||
| 7 | $inline--rounding: props.def(--s-code--inline--rounding, props.get(core.$rounding)) !default; | ||
| 8 | |||
| 9 | $block--pad-i: props.def(--s-code--block--pad-i, props.get(core.$size--150)) !default; | ||
| 10 | $block--pad-b: props.def(--s-code--block--pad-b, props.get(core.$size--85)) !default; | ||
| 11 | $block--margin-bs: props.def(--s-code--block--margin-bs, props.get(implicit.$paragraph--margin-bs)) !default; | ||
| 12 | $block--rounding: props.def(--s-code--block--rounding, props.get(core.$rounding)) !default; | ||
| 13 | |||
| 14 | $inline--fg: props.def(--s-code--inline--fg, props.get(core.$theme, --heading), 'color') !default; | ||
| 15 | $inline--bg: props.def(--s-code--inline--bg, props.get(core.$theme, --base, --200), 'color') !default; | ||
| 16 | |||
| 17 | $block--fg: props.def(--s-code--block--fg, props.get(core.$theme, --text), 'color') !default; | ||
| 18 | $block--bg: props.def(--s-code--block--bg, props.get(core.$theme, --base, --50), 'color') !default; | ||
diff --git a/src/scopes/_figures.scss b/src/scopes/_figures.scss new file mode 100644 index 0000000..981a8b6 --- /dev/null +++ b/src/scopes/_figures.scss | |||
| @@ -0,0 +1,21 @@ | |||
| 1 | @use 'sass:meta'; | ||
| 2 | @use 'iro-sass/src/bem'; | ||
| 3 | @use 'iro-sass/src/props'; | ||
| 4 | @use '../objects/figure.vars' as figure; | ||
| 5 | |||
| 6 | @mixin styles { | ||
| 7 | @include bem.scope('figures') { | ||
| 8 | figcaption { | ||
| 9 | padding-block: props.get(figure.$pad-b); | ||
| 10 | font-size: props.get(figure.$font-size); | ||
| 11 | color: props.get(figure.$text-color); | ||
| 12 | border-block-end: props.get(figure.$border-width) solid props.get(figure.$border-color); | ||
| 13 | |||
| 14 | &::before { | ||
| 15 | display: block; | ||
| 16 | margin-block: -100em 100em; | ||
| 17 | content: ''; | ||
| 18 | } | ||
| 19 | } | ||
| 20 | } | ||
| 21 | } | ||
diff --git a/src/scopes/_headings.scss b/src/scopes/_headings.scss index 9593792..32559cd 100644 --- a/src/scopes/_headings.scss +++ b/src/scopes/_headings.scss | |||
| @@ -1,114 +1,65 @@ | |||
| 1 | @use 'iro-sass/src/index' as iro; | 1 | @use 'sass:map'; |
| 2 | @use '../functions' as fn; | 2 | @use 'iro-sass/src/bem'; |
| 3 | @use '../mixins' as mx; | 3 | @use 'iro-sass/src/props'; |
| 4 | @use 'include-media/dist/include-media' as media; | 4 | @use '../objects/heading.vars' as heading; |
| 5 | 5 | ||
| 6 | @include iro.props-namespace('headings') { | 6 | @mixin styles { |
| 7 | @include iro.bem-scope(iro.props-namespace()) { | 7 | /* stylelint-disable-next-line scss/dollar-variable-pattern */ |
| 8 | $-size-map: ( | ||
| 9 | xs: h6, | ||
| 10 | sm: h5, | ||
| 11 | md: h4, | ||
| 12 | lg: h3, | ||
| 13 | xl: h2, | ||
| 14 | xxl: h1, | ||
| 15 | ); | ||
| 16 | |||
| 17 | @include bem.scope('headings') { | ||
| 8 | h1, | 18 | h1, |
| 9 | h2, | 19 | h2, |
| 10 | h3, | 20 | h3, |
| 11 | h4, | 21 | h4, |
| 12 | h5, | 22 | h5, |
| 13 | h6 { | 23 | h6 { |
| 14 | @include mx.set-font(--headline); | 24 | display: block; |
| 15 | 25 | margin-block-start: props.get(heading.$margin-bs); | |
| 16 | display: block; | 26 | font-family: props.get(heading.$font-family); |
| 17 | transform: translateX(-.06em); | 27 | font-weight: props.get(heading.$font-weight); |
| 18 | letter-spacing: normal; | 28 | font-feature-settings: props.get(heading.$feature-settings); |
| 19 | text-transform: none; | 29 | line-height: props.get(heading.$line-height); |
| 20 | } | 30 | text-transform: none; |
| 21 | 31 | letter-spacing: normal; | |
| 22 | 32 | transform: translateX(props.get(heading.$offset)); | |
| 23 | h1 { | ||
| 24 | @include mx.heading-strong(--xxl); | ||
| 25 | } | ||
| 26 | |||
| 27 | h2 { | ||
| 28 | @include mx.heading-strong(--xl); | ||
| 29 | } | ||
| 30 | |||
| 31 | h3 { | ||
| 32 | @include mx.heading-medium(--lg); | ||
| 33 | } | ||
| 34 | |||
| 35 | h4 { | ||
| 36 | @include mx.heading-medium(--md); | ||
| 37 | } | ||
| 38 | |||
| 39 | h5 { | ||
| 40 | @include mx.heading-faint(--sm); | ||
| 41 | } | ||
| 42 | |||
| 43 | h6 { | ||
| 44 | @include mx.heading-faint(--xs); | ||
| 45 | } | 33 | } |
| 46 | 34 | ||
| 47 | @include iro.bem-elem('highlight') { | 35 | @include bem.elem('highlight') { |
| 48 | background-image: linear-gradient( | 36 | background-image: linear-gradient(to top, |
| 49 | to top, | 37 | transparent .15em, |
| 50 | transparent .15em, | 38 | props.get(heading.$bg-color) .15em, |
| 51 | fn.foreign-color(--heading, --bg) .15em, | 39 | props.get(heading.$bg-color) .6em, |
| 52 | fn.foreign-color(--heading, --bg) .6em, | 40 | transparent .6em); |
| 53 | transparent .6em | ||
| 54 | ); | ||
| 55 | } | 41 | } |
| 56 | 42 | ||
| 57 | @include iro.bem-modifier('display') { | 43 | @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings in heading.$sizes { |
| 58 | h1, | 44 | #{map.get($-size-map, $mod)} { |
| 59 | h2, | 45 | font-family: props.get($font-family); |
| 60 | h3, | 46 | font-size: props.get($font-size); |
| 61 | h4, | 47 | font-weight: props.get($font-weight); |
| 62 | h5, | 48 | font-feature-settings: props.get($feature-settings); |
| 63 | h6 { | 49 | line-height: props.get($line-height); |
| 64 | @include mx.set-font(--headline); | 50 | letter-spacing: props.get($letter-spacing); |
| 65 | } | 51 | } |
| 52 | } | ||
| 66 | 53 | ||
| 67 | h1 { | 54 | @include bem.modifier('display') { |
| 68 | @include mx.heading-strong(--display --xxl); | 55 | @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings in heading.$display--sizes { |
| 69 | 56 | #{map.get($-size-map, $mod)} { | |
| 70 | @include media.media('<=md') { | 57 | font-family: props.get($font-family); |
| 71 | @include mx.heading-strong(--display-sm --xxl); | 58 | font-size: props.get($font-size); |
| 72 | } | 59 | font-weight: props.get($font-weight); |
| 73 | } | 60 | font-feature-settings: props.get($feature-settings); |
| 74 | 61 | line-height: props.get($line-height); | |
| 75 | h2 { | 62 | letter-spacing: props.get($letter-spacing); |
| 76 | @include mx.heading-strong(--display --xl); | ||
| 77 | |||
| 78 | @include media.media('<=md') { | ||
| 79 | @include mx.heading-strong(--display-sm --xl); | ||
| 80 | } | ||
| 81 | } | ||
| 82 | |||
| 83 | h3 { | ||
| 84 | @include mx.heading-strong(--display --lg); | ||
| 85 | |||
| 86 | @include media.media('<=md') { | ||
| 87 | @include mx.heading-strong(--display-sm --lg); | ||
| 88 | } | ||
| 89 | } | ||
| 90 | |||
| 91 | h4 { | ||
| 92 | @include mx.heading-strong(--display --md); | ||
| 93 | |||
| 94 | @include media.media('<=md') { | ||
| 95 | @include mx.heading-strong(--display-sm --md); | ||
| 96 | } | ||
| 97 | } | ||
| 98 | |||
| 99 | h5 { | ||
| 100 | @include mx.heading-medium(--display --sm); | ||
| 101 | |||
| 102 | @include media.media('<=md') { | ||
| 103 | @include mx.heading-medium(--display-sm --sm); | ||
| 104 | } | ||
| 105 | } | ||
| 106 | |||
| 107 | h6 { | ||
| 108 | @include mx.heading-faint(--display --xs); | ||
| 109 | |||
| 110 | @include media.media('<=md') { | ||
| 111 | @include mx.heading-faint(--display-sm --xs); | ||
| 112 | } | 63 | } |
| 113 | } | 64 | } |
| 114 | } | 65 | } |
diff --git a/src/scopes/_implicit.scss b/src/scopes/_implicit.scss new file mode 100644 index 0000000..78f06be --- /dev/null +++ b/src/scopes/_implicit.scss | |||
| @@ -0,0 +1,180 @@ | |||
| 1 | @use 'sass:map'; | ||
| 2 | @use 'sass:math'; | ||
| 3 | @use 'sass:meta'; | ||
| 4 | @use 'sass:string'; | ||
| 5 | @use 'iro-sass/src/bem'; | ||
| 6 | @use 'iro-sass/src/props'; | ||
| 7 | @use '../props' as *; | ||
| 8 | @use '../core.vars' as core; | ||
| 9 | |||
| 10 | @forward 'implicit.vars'; | ||
| 11 | @use 'implicit.vars' as vars; | ||
| 12 | |||
| 13 | @mixin styles { | ||
| 14 | @include materialize-at-root(meta.module-variables('vars')); | ||
| 15 | |||
| 16 | @layer scope { | ||
| 17 | html { | ||
| 18 | accent-color: props.get(core.$theme, --accent, --600); | ||
| 19 | scrollbar-color: props.get(core.$theme, --text-disabled) transparent; | ||
| 20 | } | ||
| 21 | |||
| 22 | body { | ||
| 23 | padding: 0; | ||
| 24 | margin: 0; | ||
| 25 | font-family: props.get(vars.$body--font-family); | ||
| 26 | font-size: props.get(vars.$body--font-size); | ||
| 27 | font-feature-settings: props.get(vars.$body--feature-settings); | ||
| 28 | line-height: props.get(vars.$body--line-height); | ||
| 29 | color: props.get(core.$theme, --text); | ||
| 30 | background-color: props.get(core.$theme, --bg-base); | ||
| 31 | } | ||
| 32 | |||
| 33 | pre, | ||
| 34 | code { | ||
| 35 | font-family: props.get(vars.$code--font-family); | ||
| 36 | font-size: props.get(vars.$code--font-size); | ||
| 37 | font-feature-settings: props.get(vars.$code--feature-settings); | ||
| 38 | line-height: props.get(vars.$code--line-height); | ||
| 39 | } | ||
| 40 | |||
| 41 | pre { | ||
| 42 | margin: 0; | ||
| 43 | overflow-x: auto; | ||
| 44 | |||
| 45 | code { | ||
| 46 | font-size: 1em; | ||
| 47 | color: currentColor; | ||
| 48 | } | ||
| 49 | } | ||
| 50 | |||
| 51 | h1, | ||
| 52 | h2, | ||
| 53 | h3, | ||
| 54 | h4, | ||
| 55 | h5, | ||
| 56 | h6 { | ||
| 57 | margin-block: props.get(vars.$heading--margin-bs) 0; | ||
| 58 | font-family: props.get(vars.$heading--font-family); | ||
| 59 | font-size: props.get(vars.$heading--font-size); | ||
| 60 | font-weight: props.get(vars.$heading--font-weight); | ||
| 61 | font-feature-settings: props.get(vars.$heading--feature-settings); | ||
| 62 | line-height: props.get(vars.$heading--line-height); | ||
| 63 | color: props.get(vars.$heading--color); | ||
| 64 | |||
| 65 | & + & { | ||
| 66 | margin-block-start: props.get(vars.$heading--margin-bs-sibling); | ||
| 67 | } | ||
| 68 | } | ||
| 69 | |||
| 70 | p { | ||
| 71 | margin-block: props.get(vars.$paragraph--margin-bs) 0; | ||
| 72 | |||
| 73 | &:empty { | ||
| 74 | display: none; | ||
| 75 | } | ||
| 76 | } | ||
| 77 | |||
| 78 | strong { | ||
| 79 | font-weight: bold; | ||
| 80 | } | ||
| 81 | |||
| 82 | small { | ||
| 83 | font-size: props.get(vars.$small--font-size); | ||
| 84 | } | ||
| 85 | |||
| 86 | ul, | ||
| 87 | ol { | ||
| 88 | padding: 0; | ||
| 89 | margin: 0; | ||
| 90 | list-style: none; | ||
| 91 | } | ||
| 92 | |||
| 93 | li { | ||
| 94 | padding: 0; | ||
| 95 | margin: 0; | ||
| 96 | } | ||
| 97 | |||
| 98 | :focus, | ||
| 99 | :focus-visible { | ||
| 100 | outline: 0; | ||
| 101 | } | ||
| 102 | |||
| 103 | :link, | ||
| 104 | :visited { | ||
| 105 | color: currentColor; | ||
| 106 | text-decoration: none; | ||
| 107 | } | ||
| 108 | |||
| 109 | |||
| 110 | button, | ||
| 111 | input, | ||
| 112 | textarea { | ||
| 113 | box-sizing: content-box; | ||
| 114 | padding: 0; | ||
| 115 | margin: 0; | ||
| 116 | font-family: inherit; | ||
| 117 | font-size: 1em; | ||
| 118 | font-style: inherit; | ||
| 119 | font-weight: inherit; | ||
| 120 | line-height: inherit; | ||
| 121 | color: currentColor; | ||
| 122 | text-align: inherit; | ||
| 123 | text-transform: inherit; | ||
| 124 | appearance: none; | ||
| 125 | background: none; | ||
| 126 | border: 0; | ||
| 127 | |||
| 128 | &::-moz-focus-inner { | ||
| 129 | border: 0; | ||
| 130 | } | ||
| 131 | } | ||
| 132 | |||
| 133 | input, | ||
| 134 | textarea { | ||
| 135 | &::placeholder { | ||
| 136 | color: props.get(core.$theme, --text-mute); | ||
| 137 | opacity: 1; | ||
| 138 | } | ||
| 139 | |||
| 140 | &:disabled { | ||
| 141 | color: props.get(core.$theme, --text-disabled); | ||
| 142 | } | ||
| 143 | } | ||
| 144 | |||
| 145 | textarea { | ||
| 146 | block-size: calc(1em * props.get(core.$font--standard--line-height)); | ||
| 147 | } | ||
| 148 | |||
| 149 | hr { | ||
| 150 | block-size: props.get(core.$border-width--thin); | ||
| 151 | margin: 0; | ||
| 152 | background-color: props.get(core.$theme, --border); | ||
| 153 | border: 0; | ||
| 154 | } | ||
| 155 | |||
| 156 | figure { | ||
| 157 | padding: 0; | ||
| 158 | margin: 0; | ||
| 159 | } | ||
| 160 | |||
| 161 | @each $theme in map.keys(props.get(core.$transparent-colors)) { | ||
| 162 | .t-static-#{string.slice($theme, 3)} { | ||
| 163 | color: props.get(core.$transparent-colors, $theme, --800); | ||
| 164 | |||
| 165 | h1, | ||
| 166 | h2, | ||
| 167 | h3, | ||
| 168 | h4, | ||
| 169 | h5, | ||
| 170 | h6 { | ||
| 171 | color: props.get(core.$transparent-colors, $theme, --900); | ||
| 172 | } | ||
| 173 | |||
| 174 | hr { | ||
| 175 | color: props.get(core.$transparent-colors, $theme, --400); | ||
| 176 | } | ||
| 177 | } | ||
| 178 | } | ||
| 179 | } | ||
| 180 | } | ||
diff --git a/src/scopes/_implicit.vars.scss b/src/scopes/_implicit.vars.scss new file mode 100644 index 0000000..388f0af --- /dev/null +++ b/src/scopes/_implicit.vars.scss | |||
| @@ -0,0 +1,26 @@ | |||
| 1 | @use 'iro-sass/src/props'; | ||
| 2 | @use '../core.vars' as core; | ||
| 3 | |||
| 4 | $paragraph--margin-bs: props.def(--s-implicit--paragraph--margin-bs, props.get(core.$size--200)) !default; | ||
| 5 | |||
| 6 | $small--font-size: props.def(--s-implicit--small--font-size, props.get(core.$font-size--75)) !default; | ||
| 7 | |||
| 8 | $body--font-family: props.def(--s-implicit--body--font-family, props.get(core.$font--standard--family)) !default; | ||
| 9 | $body--line-height: props.def(--s-implicit--body--line-height, props.get(core.$font--standard--line-height)) !default; | ||
| 10 | $body--font-size: props.def(--s-implicit--body--font-size, props.get(core.$font-size--100)); | ||
| 11 | $body--feature-settings: props.def(--s-implicit--body--feature-settings, props.get(core.$font--standard--feature-settings)) !default; | ||
| 12 | |||
| 13 | $code--font-family: props.def(--s-implicit--code--font-family, props.get(core.$font--mono--family)) !default; | ||
| 14 | $code--line-height: props.def(--s-implicit--code--line-height, props.get(core.$font--mono--line-height)) !default; | ||
| 15 | $code--font-size: props.def(--s-implicit--code--font-size, .93em); | ||
| 16 | $code--feature-settings: props.def(--s-implicit--code--feature-settings, props.get(core.$font--mono--feature-settings)) !default; | ||
| 17 | |||
| 18 | $heading--margin-bs: props.def(--s-implicit--heading--margin-bs, props.get(core.$size--700)) !default; | ||
| 19 | $heading--margin-bs-sibling: props.def(--s-implicit--heading--margin-bs-sibling, props.get(core.$size--325)) !default; | ||
| 20 | $heading--font-family: props.def(--s-implicit--heading--font-family, props.get(core.$font--standard--family)) !default; | ||
| 21 | $heading--line-height: props.def(--s-implicit--heading--line-height, props.get(core.$font--standard--line-height)) !default; | ||
| 22 | $heading--font-weight: props.def(--s-implicit--heading--font-weight, bold) !default; | ||
| 23 | $heading--font-size: props.def(--s-implicit--heading--font-size, props.get(core.$font-size--100)); | ||
| 24 | $heading--feature-settings: props.def(--s-implicit--heading--feature-settings, props.get(core.$font--standard--feature-settings)) !default; | ||
| 25 | |||
| 26 | $heading--color: props.def(--s-implicit--heading--color, props.get(core.$theme, --heading), 'color') !default; | ||
diff --git a/src/scopes/_links.scss b/src/scopes/_links.scss index d47c406..4092633 100644 --- a/src/scopes/_links.scss +++ b/src/scopes/_links.scss | |||
| @@ -1,140 +1,116 @@ | |||
| 1 | @use 'iro-sass/src/index' as iro; | 1 | @use 'sass:map'; |
| 2 | @use '../functions' as fn; | 2 | @use 'sass:meta'; |
| 3 | @use 'sass:string'; | ||
| 4 | @use 'iro-sass/src/bem'; | ||
| 5 | @use 'iro-sass/src/props'; | ||
| 6 | @use '../props' as *; | ||
| 3 | 7 | ||
| 4 | $static-themes: 'black' 'white' !default; | 8 | @forward 'links.vars'; |
| 9 | @use 'links.vars' as vars; | ||
| 5 | 10 | ||
| 6 | @include iro.props-namespace('links') { | 11 | @mixin styles { |
| 7 | @include iro.props-store(( | 12 | @include materialize-at-root(meta.module-variables('vars')); |
| 8 | --dims: ( | ||
| 9 | --rounding: fn.global-dim(--rounding), | ||
| 10 | --underline: fn.global-dim(--border --thin), | ||
| 11 | 13 | ||
| 12 | --hover: ( | 14 | @include bem.scope('links') { |
| 13 | --underline: fn.global-dim(--border --medium), | ||
| 14 | ), | ||
| 15 | |||
| 16 | --key-focus: ( | ||
| 17 | --border: fn.global-dim(--key-focus --border), | ||
| 18 | --border-offset: fn.global-dim(--key-focus --border-offset), | ||
| 19 | --outline: fn.global-dim(--key-focus --border), | ||
| 20 | ), | ||
| 21 | ), | ||
| 22 | --colors: ( | ||
| 23 | --underline: fn.global-color(--text-mute-more), | ||
| 24 | |||
| 25 | --colored: ( | ||
| 26 | --text: fn.global-color(--accent --1100), | ||
| 27 | --underline: fn.global-color(--accent --600), | ||
| 28 | |||
| 29 | --hover: ( | ||
| 30 | --text: fn.global-color(--accent --1300), | ||
| 31 | ), | ||
| 32 | |||
| 33 | --visited: ( | ||
| 34 | --text: fn.global-color(--purple --1100), | ||
| 35 | --underline: fn.global-color(--purple --600), | ||
| 36 | |||
| 37 | --hover: ( | ||
| 38 | --text: fn.global-color(--purple --1300), | ||
| 39 | ), | ||
| 40 | ), | ||
| 41 | ), | ||
| 42 | |||
| 43 | --key-focus: ( | ||
| 44 | --text: fn.global-color(--focus --text), | ||
| 45 | --border: fn.global-color(--focus --border), | ||
| 46 | --outline: fn.global-color(--focus --outline), | ||
| 47 | ), | ||
| 48 | ), | ||
| 49 | )); | ||
| 50 | |||
| 51 | @each $theme in $static-themes { | ||
| 52 | @include iro.props-store(( | ||
| 53 | --colors: ( | ||
| 54 | --static-#{$theme}: ( | ||
| 55 | --text: fn.global-color(--#{$theme}-transparent --800), | ||
| 56 | --underline: fn.global-color(--#{$theme}-transparent --500), | ||
| 57 | |||
| 58 | --hover: ( | ||
| 59 | --text: fn.global-color(--#{$theme}-transparent --900), | ||
| 60 | ), | ||
| 61 | |||
| 62 | --key-focus: ( | ||
| 63 | --text: fn.global-color(--#{$theme}-transparent --900), | ||
| 64 | --border: fn.global-color(--#{$theme}-transparent --900), | ||
| 65 | --outline: fn.global-color(--#{$theme}-transparent --300), | ||
| 66 | ), | ||
| 67 | ) | ||
| 68 | ) | ||
| 69 | )); | ||
| 70 | } | ||
| 71 | |||
| 72 | @include iro.bem-scope(iro.props-namespace()) { | ||
| 73 | :link, | 15 | :link, |
| 74 | :visited { | 16 | :visited { |
| 75 | border-radius: fn.dim(--rounding); | ||
| 76 | color: currentColor; | 17 | color: currentColor; |
| 77 | text-decoration: underline; | 18 | text-decoration: underline; |
| 78 | text-decoration-color: fn.color(--underline); | 19 | text-decoration-thickness: props.get(vars.$underline-width); |
| 79 | text-decoration-thickness: fn.dim(--underline); | 20 | text-decoration-color: props.get(vars.$underline-color); |
| 21 | border-radius: props.get(vars.$rounding); | ||
| 80 | box-decoration-break: clone; | 22 | box-decoration-break: clone; |
| 81 | 23 | ||
| 82 | &:hover { | 24 | &:hover { |
| 83 | text-decoration: underline; | 25 | text-decoration: underline; |
| 84 | text-decoration-thickness: fn.dim(--hover --underline); | ||
| 85 | text-decoration-skip-ink: none; | 26 | text-decoration-skip-ink: none; |
| 27 | text-decoration-thickness: props.get(vars.$hover--underline-width); | ||
| 86 | } | 28 | } |
| 87 | 29 | ||
| 88 | &:focus-visible { | 30 | &:focus-visible { |
| 89 | outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border); | 31 | color: props.get(vars.$key-focus--text-color); |
| 90 | box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline); | 32 | text-decoration: none; |
| 91 | color: fn.color(--key-focus --text); | 33 | outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); |
| 92 | text-decoration: none; | 34 | box-shadow: |
| 35 | 0 | ||
| 36 | 0 | ||
| 37 | 0 | ||
| 38 | calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) | ||
| 39 | props.get(vars.$key-focus--outline-color); | ||
| 93 | } | 40 | } |
| 94 | } | 41 | } |
| 95 | 42 | ||
| 96 | @include iro.bem-modifier('invisible') { | 43 | @include bem.modifier('invisible') { |
| 97 | :link, | 44 | :link, |
| 98 | :visited { | 45 | :visited { |
| 99 | text-decoration: none; | 46 | text-decoration: none; |
| 100 | } | 47 | } |
| 101 | } | 48 | } |
| 102 | 49 | ||
| 103 | @include iro.bem-modifier('colored') { | 50 | @include bem.modifier('colored') { |
| 104 | :link { | 51 | :link { |
| 105 | color: fn.color(--colored --text); | 52 | color: props.get(vars.$colored--text-color); |
| 106 | text-decoration-color: fn.color(--colored --underline); | 53 | text-decoration-color: props.get(vars.$colored--underline-color); |
| 107 | 54 | ||
| 108 | &:hover { | 55 | &:hover { |
| 109 | color: fn.color(--colored --hover --text); | 56 | color: props.get(vars.$colored--hover--text-color); |
| 110 | } | 57 | } |
| 111 | } | 58 | } |
| 112 | 59 | ||
| 113 | :visited { | 60 | :visited { |
| 114 | color: fn.color(--colored --visited --text); | 61 | color: props.get(vars.$colored--visited--text-color); |
| 115 | text-decoration-color: fn.color(--colored --visited --underline); | 62 | text-decoration-color: props.get(vars.$colored--visited--underline-color); |
| 116 | 63 | ||
| 117 | &:hover { | 64 | &:hover { |
| 118 | color: fn.color(--colored --visited --hover --text); | 65 | color: props.get(vars.$colored--visited--hover--text-color); |
| 119 | } | 66 | } |
| 120 | } | 67 | } |
| 121 | } | 68 | } |
| 122 | 69 | ||
| 123 | @each $theme in $static-themes { | 70 | @each $theme in map.keys(props.get(vars.$static-themes)) { |
| 124 | @include iro.bem-modifier(static-#{$theme}) { | 71 | @include bem.modifier(string.slice($theme, 3)) { |
| 125 | :link, | 72 | :link, |
| 126 | :visited { | 73 | :visited { |
| 127 | color: fn.color(--static-#{$theme} --text); | 74 | color: props.get(vars.$static-themes, $theme, --text-color); |
| 128 | text-decoration-color: fn.color(--static-#{$theme} --underline); | 75 | text-decoration-color: props.get(vars.$static-themes, $theme, --underline-color); |
| 129 | 76 | ||
| 130 | &:hover { | 77 | &:hover { |
| 131 | color: fn.color(--static-#{$theme} --hover --text); | 78 | color: props.get(vars.$static-themes, $theme, --hover, --text-color); |
| 132 | } | 79 | } |
| 133 | 80 | ||
| 134 | &:focus-visible { | 81 | &:focus-visible { |
| 135 | outline-color: fn.color(--static-#{$theme} --key-focus --border); | 82 | color: props.get(vars.$static-themes, $theme, --key-focus, --text-color); |
| 136 | box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--static-#{$theme} --key-focus --outline); | 83 | outline-color: props.get(vars.$static-themes, $theme, --key-focus, --border-color); |
| 137 | color: fn.color(--static-#{$theme} --key-focus --text); | 84 | box-shadow: |
| 85 | 0 | ||
| 86 | 0 | ||
| 87 | 0 | ||
| 88 | calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) | ||
| 89 | props.get(vars.$static-themes, $theme, --key-focus, --outline-color); | ||
| 90 | } | ||
| 91 | } | ||
| 92 | } | ||
| 93 | } | ||
| 94 | |||
| 95 | @include bem.elem('image') { | ||
| 96 | img { | ||
| 97 | margin-inline: calc(-1 * props.get(vars.$key-focus--border-offset)); | ||
| 98 | border: props.get(vars.$key-focus--border-offset) solid transparent; | ||
| 99 | border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset)); | ||
| 100 | } | ||
| 101 | |||
| 102 | &:link, | ||
| 103 | &:visited { | ||
| 104 | &:focus-visible { | ||
| 105 | outline: none; | ||
| 106 | box-shadow: none; | ||
| 107 | |||
| 108 | img { | ||
| 109 | outline: props.get(vars.$key-focus--border-color) solid | ||
| 110 | props.get(vars.$key-focus--border-width); | ||
| 111 | box-shadow: 0 0 0 | ||
| 112 | calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) | ||
| 113 | props.get(vars.$key-focus--outline-color); | ||
| 138 | } | 114 | } |
| 139 | } | 115 | } |
| 140 | } | 116 | } |
diff --git a/src/scopes/_links.vars.scss b/src/scopes/_links.vars.scss new file mode 100644 index 0000000..b9bf4d1 --- /dev/null +++ b/src/scopes/_links.vars.scss | |||
| @@ -0,0 +1,48 @@ | |||
| 1 | @use 'sass:map'; | ||
| 2 | @use 'sass:string'; | ||
| 3 | @use 'iro-sass/src/props'; | ||
| 4 | @use '../core.vars' as core; | ||
| 5 | |||
| 6 | $rounding: props.def(--s-links--rounding, props.get(core.$rounding)) !default; | ||
| 7 | $underline-width: props.def(--s-links--underline-width, props.get(core.$border-width--thin)) !default; | ||
| 8 | $hover--underline-width: props.def(--s-links--hover--underline-width, props.get(core.$border-width--medium)) !default; | ||
| 9 | |||
| 10 | $key-focus--border-width: props.def(--s-links--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; | ||
| 11 | $key-focus--border-offset: props.def(--s-links--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; | ||
| 12 | $key-focus--outline-width: props.def(--s-links--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; | ||
| 13 | |||
| 14 | $underline-color: props.def(--s-links--underline-color, props.get(core.$theme, --text-mute-more), 'color') !default; | ||
| 15 | |||
| 16 | $colored--text-color: props.def(--s-links--colored--text-color, props.get(core.$theme, --accent, --1100), 'color') !default; | ||
| 17 | $colored--underline-color: props.def(--s-links--colored--underline-color, props.get(core.$theme, --accent, --600), 'color') !default; | ||
| 18 | $colored--hover--text-color: props.def(--s-links--colored--hover--text-color, props.get(core.$theme, --accent, --1300), 'color') !default; | ||
| 19 | |||
| 20 | $colored--visited--text-color: props.def(--s-links--colored--visited--text-color, props.get(core.$theme, --purple, --1100), 'color') !default; | ||
| 21 | $colored--visited--underline-color: props.def(--s-links--colored--visited--underline-color, props.get(core.$theme, --purple, --600), 'color') !default; | ||
| 22 | $colored--visited--hover--text-color: props.def(--s-links--colored--visited--hover--text-color, props.get(core.$theme, --purple, --1300), 'color') !default; | ||
| 23 | |||
| 24 | $key-focus--text-color: props.def(--s-links--key-focus--text-color, props.get(core.$theme, --focus, --text), 'color') !default; | ||
| 25 | $key-focus--border-color: props.def(--s-links--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default; | ||
| 26 | $key-focus--outline-color: props.def(--s-links--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default; | ||
| 27 | |||
| 28 | $static-themes: props.def(--s-links, (), 'color'); | ||
| 29 | @each $theme in map.keys(props.get(core.$transparent-colors)) { | ||
| 30 | $link-theme: --static-#{string.slice($theme, 3)}; | ||
| 31 | |||
| 32 | $static-themes: props.merge($static-themes, ( | ||
| 33 | $link-theme: ( | ||
| 34 | --text-color: currentColor, | ||
| 35 | --underline-color: props.get(core.$transparent-colors, $theme, --500), | ||
| 36 | |||
| 37 | --hover: ( | ||
| 38 | --text-color: props.get(core.$transparent-colors, $theme, --900), | ||
| 39 | ), | ||
| 40 | |||
| 41 | --key-focus: ( | ||
| 42 | --text-color: props.get(core.$transparent-colors, $theme, --900), | ||
| 43 | --border-color: props.get(core.$transparent-colors, $theme, --900), | ||
| 44 | --outline-color: props.get(core.$transparent-colors, $theme, --300), | ||
| 45 | ), | ||
| 46 | ) | ||
| 47 | )); | ||
| 48 | } | ||
diff --git a/src/scopes/_lists.scss b/src/scopes/_lists.scss index bad9731..98b1df1 100644 --- a/src/scopes/_lists.scss +++ b/src/scopes/_lists.scss | |||
| @@ -1,26 +1,20 @@ | |||
| 1 | @use 'iro-sass/src/index' as iro; | 1 | @use 'sass:meta'; |
| 2 | @use '../functions' as fn; | 2 | @use 'iro-sass/src/bem'; |
| 3 | @use 'iro-sass/src/props'; | ||
| 4 | @use '../props' as *; | ||
| 5 | @use '../core.vars' as core; | ||
| 3 | 6 | ||
| 4 | @include iro.props-namespace('lists') { | 7 | @forward 'lists.vars'; |
| 5 | @include iro.props-store(( | 8 | @use 'lists.vars' as vars; |
| 6 | --dims: ( | ||
| 7 | --indent: calc(fn.global-dim(--list --indent) + 1em), | ||
| 8 | --margin-bs: fn.global-dim(--paragraph --margin-bs), | ||
| 9 | 9 | ||
| 10 | --compact: ( | 10 | @mixin styles { |
| 11 | --indent: fn.global-dim(--list --compact-indent), | 11 | @include materialize-at-root(meta.module-variables('vars')); |
| 12 | ), | ||
| 13 | ), | ||
| 14 | --colors: ( | ||
| 15 | --border: fn.global-color(--border-mute), | ||
| 16 | ) | ||
| 17 | )); | ||
| 18 | 12 | ||
| 19 | @include iro.bem-scope(iro.props-namespace()) { | 13 | @include bem.scope('lists') { |
| 20 | ul, | 14 | ul, |
| 21 | ol { | 15 | ol { |
| 22 | margin-block-start: fn.dim(--margin-bs); | 16 | padding-inline-start: props.get(vars.$indent); |
| 23 | padding-inline-start: fn.dim(--indent); | 17 | margin-block-start: props.get(vars.$margin-bs); |
| 24 | 18 | ||
| 25 | ul, | 19 | ul, |
| 26 | ol { | 20 | ol { |
| @@ -37,29 +31,29 @@ | |||
| 37 | } | 31 | } |
| 38 | 32 | ||
| 39 | dl { | 33 | dl { |
| 40 | margin-block: fn.dim(--margin-bs) 0; | ||
| 41 | margin-inline: 0; | ||
| 42 | padding: 0; | 34 | padding: 0; |
| 35 | margin-block: props.get(vars.$margin-bs) 0; | ||
| 36 | margin-inline: 0; | ||
| 43 | } | 37 | } |
| 44 | 38 | ||
| 45 | dt { | 39 | dt { |
| 46 | color: fn.global-color(--heading); | ||
| 47 | font-weight: bold; | 40 | font-weight: bold; |
| 41 | color: props.get(core.$theme, --heading); | ||
| 48 | } | 42 | } |
| 49 | 43 | ||
| 50 | dd { | 44 | dd { |
| 51 | margin-block: 0; | 45 | margin-block: 0; |
| 52 | margin-inline: fn.dim(--indent) 0; | 46 | margin-inline: props.get(vars.$indent) 0; |
| 53 | } | 47 | } |
| 54 | 48 | ||
| 55 | @include iro.bem-modifier('compact') { | 49 | @include bem.modifier('compact') { |
| 56 | ul, | 50 | ul, |
| 57 | ol { | 51 | ol { |
| 58 | padding-inline-start: calc(fn.dim(--compact --indent) - 3px); | 52 | padding-inline-start: calc(props.get(vars.$compact--indent) - 3px); |
| 59 | } | 53 | } |
| 60 | 54 | ||
| 61 | dd { | 55 | dd { |
| 62 | margin-inline-start: calc(fn.dim(--compact --indent) - 3px); | 56 | margin-inline-start: calc(props.get(vars.$compact--indent) - 3px); |
| 63 | } | 57 | } |
| 64 | } | 58 | } |
| 65 | } | 59 | } |
diff --git a/src/scopes/_lists.vars.scss b/src/scopes/_lists.vars.scss new file mode 100644 index 0000000..8c46bc3 --- /dev/null +++ b/src/scopes/_lists.vars.scss | |||
| @@ -0,0 +1,8 @@ | |||
| 1 | @use 'iro-sass/src/props'; | ||
| 2 | @use '../core.vars' as core; | ||
| 3 | @use './implicit.vars' as implicit; | ||
| 4 | |||
| 5 | $indent: props.def(--s-lists--indent, calc(props.get(core.$list--indent) + 1em)) !default; | ||
| 6 | $margin-bs: props.def(--s-lists--margin-bs, props.get(implicit.$paragraph--margin-bs)) !default; | ||
| 7 | |||
| 8 | $compact--indent: props.def(--s-lists--compact--indent, props.get(core.$list--compact-indent)) !default; | ||
diff --git a/src/scopes/_tables.scss b/src/scopes/_tables.scss index 9b2124d..0a87eaa 100644 --- a/src/scopes/_tables.scss +++ b/src/scopes/_tables.scss | |||
| @@ -1,65 +1,52 @@ | |||
| 1 | @use 'iro-sass/src/index' as iro; | 1 | @use 'sass:meta'; |
| 2 | @use '../functions' as fn; | 2 | @use 'iro-sass/src/bem'; |
| 3 | @use '../mixins' as mx; | 3 | @use 'iro-sass/src/props'; |
| 4 | @use '../props' as *; | ||
| 5 | @use '../objects/table.vars' as table; | ||
| 4 | 6 | ||
| 5 | @include iro.props-namespace('tables') { | 7 | @forward 'tables.vars'; |
| 6 | @include iro.props-store(( | 8 | @use 'tables.vars' as vars; |
| 7 | --dims: ( | ||
| 8 | --pad-i: fn.foreign-dim(--table, --pad-i), | ||
| 9 | --pad-b: fn.foreign-dim(--table, --pad-b), | ||
| 10 | --rounding: fn.foreign-dim(--table, --rounding), | ||
| 11 | --border: fn.foreign-dim(--table, --border), | ||
| 12 | --margin-bs: fn.global-dim(--paragraph --margin-bs), | ||
| 13 | ), | ||
| 14 | --colors: ( | ||
| 15 | --border: fn.foreign-color(--table, --border), | ||
| 16 | --heading: fn.foreign-color(--table, --heading), | ||
| 17 | --box: ( | ||
| 18 | --bg: fn.foreign-color(--table, --box --bg), | ||
| 19 | ) | ||
| 20 | ) | ||
| 21 | )); | ||
| 22 | 9 | ||
| 23 | @include iro.bem-scope(iro.props-namespace()) { | 10 | @mixin styles { |
| 11 | @include materialize-at-root(meta.module-variables('vars')); | ||
| 12 | |||
| 13 | @include bem.scope('tables') { | ||
| 24 | table { | 14 | table { |
| 25 | margin-block-start: fn.dim(--margin-bs); | 15 | margin-block-start: props.get(vars.$margin-bs); |
| 26 | border-spacing: 0; | 16 | border-spacing: 0; |
| 27 | border-collapse: separate; | 17 | border-collapse: separate; |
| 28 | } | 18 | } |
| 29 | 19 | ||
| 30 | th { | 20 | th { |
| 31 | @include mx.set-font(--standard, ( | 21 | padding-block: props.get(table.$pad-b); |
| 32 | --line-height: null, | 22 | padding-inline: props.get(table.$pad-i); |
| 33 | --size: fn.global-dim(--font-size --50), | 23 | font-family: props.get(table.$heading--font-family); |
| 34 | --weight: bold, | 24 | font-size: props.get(table.$heading--font-size); |
| 35 | --transform: uppercase, | 25 | font-weight: props.get(table.$heading--font-weight); |
| 36 | --spacing: .5px | 26 | color: props.get(table.$heading-color); |
| 37 | )); | ||
| 38 | |||
| 39 | padding-block: fn.dim(--pad-b); | ||
| 40 | padding-inline: fn.dim(--pad-i); | ||
| 41 | color: fn.color(--heading); | ||
| 42 | text-align: start; | 27 | text-align: start; |
| 28 | text-transform: props.get(table.$heading--text-transform); | ||
| 29 | letter-spacing: props.get(table.$heading--letter-spacing); | ||
| 43 | } | 30 | } |
| 44 | 31 | ||
| 45 | td { | 32 | td { |
| 46 | padding-block: fn.dim(--pad-b); | 33 | padding-block: props.get(table.$pad-b); |
| 47 | padding-inline: fn.dim(--pad-i); | 34 | padding-inline: props.get(table.$pad-i); |
| 48 | border-width: 0; | 35 | border-color: props.get(table.$border-color); |
| 49 | border-block-start-width: fn.dim(--border); | ||
| 50 | border-style: solid; | 36 | border-style: solid; |
| 51 | border-color: fn.color(--border); | 37 | border-width: 0; |
| 38 | border-block-start-width: props.get(table.$border-width); | ||
| 52 | } | 39 | } |
| 53 | 40 | ||
| 54 | tr { | 41 | tr { |
| 55 | &:last-child { | 42 | &:last-child { |
| 56 | td { | 43 | td { |
| 57 | border-block-end-width: fn.dim(--border); | 44 | border-block-end-width: props.get(table.$border-width); |
| 58 | } | 45 | } |
| 59 | } | 46 | } |
| 60 | } | 47 | } |
| 61 | 48 | ||
| 62 | @include iro.bem-modifier('flush') { | 49 | @include bem.modifier('flush') { |
| 63 | th, | 50 | th, |
| 64 | td { | 51 | td { |
| 65 | &:first-child { | 52 | &:first-child { |
| @@ -72,16 +59,16 @@ | |||
| 72 | } | 59 | } |
| 73 | } | 60 | } |
| 74 | 61 | ||
| 75 | @include iro.bem-modifier('box') { | 62 | @include bem.modifier('box') { |
| 76 | td { | 63 | td { |
| 77 | background-color: fn.color(--box --bg); | 64 | background-color: props.get(table.$box--bg-color); |
| 78 | 65 | ||
| 79 | &:first-child { | 66 | &:first-child { |
| 80 | border-inline-start-width: fn.dim(--border); | 67 | border-inline-start-width: props.get(table.$border-width); |
| 81 | } | 68 | } |
| 82 | 69 | ||
| 83 | &:last-child { | 70 | &:last-child { |
| 84 | border-inline-end-width: fn.dim(--border); | 71 | border-inline-end-width: props.get(table.$border-width); |
| 85 | } | 72 | } |
| 86 | } | 73 | } |
| 87 | 74 | ||
| @@ -89,11 +76,11 @@ | |||
| 89 | &:first-child { | 76 | &:first-child { |
| 90 | td { | 77 | td { |
| 91 | &:first-child { | 78 | &:first-child { |
| 92 | border-start-start-radius: fn.dim(--rounding); | 79 | border-start-start-radius: props.get(table.$rounding); |
| 93 | } | 80 | } |
| 94 | 81 | ||
| 95 | &:last-child { | 82 | &:last-child { |
| 96 | border-start-end-radius: fn.dim(--rounding); | 83 | border-start-end-radius: props.get(table.$rounding); |
| 97 | } | 84 | } |
| 98 | } | 85 | } |
| 99 | } | 86 | } |
| @@ -101,11 +88,11 @@ | |||
| 101 | &:last-child { | 88 | &:last-child { |
| 102 | td { | 89 | td { |
| 103 | &:first-child { | 90 | &:first-child { |
| 104 | border-end-start-radius: fn.dim(--rounding); | 91 | border-end-start-radius: props.get(table.$rounding); |
| 105 | } | 92 | } |
| 106 | 93 | ||
| 107 | &:last-child { | 94 | &:last-child { |
| 108 | border-end-end-radius: fn.dim(--rounding); | 95 | border-end-end-radius: props.get(table.$rounding); |
| 109 | } | 96 | } |
| 110 | } | 97 | } |
| 111 | } | 98 | } |
diff --git a/src/scopes/_tables.vars.scss b/src/scopes/_tables.vars.scss new file mode 100644 index 0000000..362b70f --- /dev/null +++ b/src/scopes/_tables.vars.scss | |||
| @@ -0,0 +1,4 @@ | |||
| 1 | @use 'iro-sass/src/props'; | ||
| 2 | @use 'implicit.vars' as implicit; | ||
| 3 | |||
| 4 | $margin-bs: props.def(--s-tables--margin-bs, props.get(implicit.$paragraph--margin-bs)) !default; | ||
diff --git a/src_demo/_base.scss b/src_demo/_base.scss index 129b319..67dfa06 100644 --- a/src_demo/_base.scss +++ b/src_demo/_base.scss | |||
| @@ -1,13 +1,13 @@ | |||
| 1 | body { | 1 | body { |
| 2 | display: grid; | 2 | display: grid; |
| 3 | grid-template-columns: auto 1fr; | ||
| 4 | grid-template-areas: 'sidebar content'; | 3 | grid-template-areas: 'sidebar content'; |
| 4 | grid-template-columns: auto 1fr; | ||
| 5 | } | 5 | } |
| 6 | 6 | ||
| 7 | @font-face { | 7 | @font-face { |
| 8 | font-family: 'Garet'; | 8 | font-family: 'Garet'; |
| 9 | font-style: normal; | 9 | font-style: normal; |
| 10 | font-weight: 50 950; | 10 | font-weight: 50 950; |
| 11 | font-display: swap; | ||
| 12 | src: url('/garet.woff2') format('woff2-variations'); | 11 | src: url('/garet.woff2') format('woff2-variations'); |
| 12 | font-display: swap; | ||
| 13 | } | 13 | } |
diff --git a/src_demo/components/_box.scss b/src_demo/components/_box.scss index 21d61c0..d40a8b2 100644 --- a/src_demo/components/_box.scss +++ b/src_demo/components/_box.scss | |||
| @@ -1,16 +1,9 @@ | |||
| 1 | @use 'iro-sass/src/index' as iro; | 1 | @use 'iro-sass/src/bem'; |
| 2 | @use '../../src/functions' as fn; | 2 | @use 'iro-sass/src/props'; |
| 3 | @use '../../src/core.vars'; | ||
| 3 | 4 | ||
| 4 | @include iro.props-namespace('box') { | 5 | @include bem.component('box') { |
| 5 | @include iro.props-store(( | 6 | padding: 2em; |
| 6 | --colors: ( | 7 | margin-block: 2em; |
| 7 | --border: fn.global-color(--border), | 8 | border: 1px solid props.get(core.$theme, --border); |
| 8 | ), | ||
| 9 | )); | ||
| 10 | |||
| 11 | @include iro.bem-component(iro.props-namespace()) { | ||
| 12 | margin-block: 2em; | ||
| 13 | padding: 2em; | ||
| 14 | border: 1px solid fn.color(--border); | ||
| 15 | } | ||
| 16 | } | 9 | } |
diff --git a/src_demo/components/_content.scss b/src_demo/components/_content.scss index 2f9a2d0..026b0ec 100644 --- a/src_demo/components/_content.scss +++ b/src_demo/components/_content.scss | |||
| @@ -1,8 +1,6 @@ | |||
| 1 | @use 'iro-sass/src/index' as iro; | 1 | @use 'iro-sass/src/bem'; |
| 2 | 2 | ||
| 3 | @include iro.props-namespace('content') { | 3 | @include bem.component('content') { |
| 4 | @include iro.bem-component(iro.props-namespace()) { | 4 | grid-area: content; |
| 5 | grid-area: content; | 5 | overflow: auto; |
| 6 | overflow: auto; | ||
| 7 | } | ||
| 8 | } | 6 | } |
diff --git a/src_demo/components/_sidebar.scss b/src_demo/components/_sidebar.scss index 7dca65a..da5d27c 100644 --- a/src_demo/components/_sidebar.scss +++ b/src_demo/components/_sidebar.scss | |||
| @@ -1,10 +1,7 @@ | |||
| 1 | @use 'iro-sass/src/index' as iro; | 1 | @use 'iro-sass/src/bem'; |
| 2 | @use '../../src/functions' as fn; | ||
| 3 | 2 | ||
| 4 | @include iro.props-namespace('sidebar') { | 3 | @include bem.component('sidebar') { |
| 5 | @include iro.bem-component(iro.props-namespace()) { | 4 | grid-area: sidebar; |
| 6 | grid-area: sidebar; | 5 | min-inline-size: 15em; |
| 7 | min-inline-size: 15em; | 6 | min-block-size: 0; |
| 8 | min-block-size: 0; | ||
| 9 | } | ||
| 10 | } | 7 | } |
diff --git a/src_demo/components/_view.scss b/src_demo/components/_view.scss index 8086280..95e9db5 100644 --- a/src_demo/components/_view.scss +++ b/src_demo/components/_view.scss | |||
| @@ -1,12 +1,9 @@ | |||
| 1 | @use 'iro-sass/src/index' as iro; | 1 | @use 'iro-sass/src/bem'; |
| 2 | @use '../../src/functions' as fn; | ||
| 3 | 2 | ||
| 4 | @include iro.props-namespace('view') { | 3 | @include bem.component('view') { |
| 5 | @include iro.bem-component(iro.props-namespace()) { | 4 | display: none; |
| 6 | display: none; | ||
| 7 | 5 | ||
| 8 | &:target { | 6 | &:target { |
| 9 | display: block; | 7 | display: block; |
| 10 | } | ||
| 11 | } | 8 | } |
| 12 | } | 9 | } |
diff --git a/src_demo/index.scss b/src_demo/index.scss index 4845e03..5251a05 100644 --- a/src_demo/index.scss +++ b/src_demo/index.scss | |||
| @@ -1,18 +1,62 @@ | |||
| 1 | @use '../src/declare-vars'; | 1 | @use '../src/iro-design' as iro; |
| 2 | 2 | ||
| 3 | @use '../src/base'; | 3 | @include iro.layers--styles; |
| 4 | @use 'base' as demo-base; | 4 | @include iro.core--styles; |
| 5 | 5 | ||
| 6 | @use 'components/sidebar'; | 6 | @include iro.s-implicit--styles; |
| 7 | @use 'components/content'; | 7 | @include iro.s-body--styles; |
| 8 | @use 'components/box'; | 8 | @include iro.s-blockquotes--styles; |
| 9 | @use 'components/view'; | 9 | @include iro.s-code--styles; |
| 10 | @include iro.s-figures--styles; | ||
| 11 | @include iro.s-headings--styles; | ||
| 12 | @include iro.s-links--styles; | ||
| 13 | @include iro.s-lists--styles; | ||
| 14 | @include iro.s-tables--styles; | ||
| 10 | 15 | ||
| 11 | @use '../src/layouts'; | 16 | @include iro.l-button-group--styles; |
| 12 | @use '../src/objects'; | 17 | @include iro.l-card-list--styles; |
| 13 | @use '../src/scopes'; | 18 | @include iro.l-container--styles; |
| 14 | @use '../src/themes'; | 19 | @include iro.l-flex--styles; |
| 15 | @use '../src/utils'; | 20 | @include iro.l-form--styles; |
| 21 | @include iro.l-media--styles; | ||
| 22 | @include iro.l-overflow--styles; | ||
| 23 | @include iro.l-split-view--styles; | ||
| 16 | 24 | ||
| 17 | @use '../src/apply-vars'; | 25 | @include iro.o-icon--styles; |
| 26 | @include iro.o-action-button--styles; | ||
| 27 | @include iro.o-alert--styles; | ||
| 28 | @include iro.o-avatar--styles; | ||
| 29 | @include iro.o-backdrop--styles; | ||
| 30 | @include iro.o-badge--styles; | ||
| 31 | @include iro.o-button--styles; | ||
| 32 | @include iro.o-card--styles; | ||
| 33 | @include iro.o-checkbox--styles; | ||
| 34 | @include iro.o-divider--styles; | ||
| 35 | @include iro.o-emoji--styles; | ||
| 36 | @include iro.o-figure--styles; | ||
| 37 | @include iro.o-field-label--styles; | ||
| 38 | @include iro.o-heading--styles; | ||
| 39 | @include iro.o-lightbox--styles; | ||
| 40 | @include iro.o-menu--styles; | ||
| 41 | @include iro.o-navbar--styles; | ||
| 42 | @include iro.o-palette--styles; | ||
| 43 | @include iro.o-placeholders--styles; | ||
| 44 | @include iro.o-popover--styles; | ||
| 45 | @include iro.o-radio--styles; | ||
| 46 | @include iro.o-side-nav--styles; | ||
| 47 | @include iro.o-status-indicator--styles; | ||
| 48 | @include iro.o-switch--styles; | ||
| 49 | @include iro.o-table--styles; | ||
| 50 | @include iro.o-tabbar--styles; | ||
| 51 | @include iro.o-text-field--styles; | ||
| 52 | @include iro.o-thumbnail--styles; | ||
| 18 | 53 | ||
| 54 | @include iro.utils--styles; | ||
| 55 | |||
| 56 | @include iro.themes--styles; | ||
| 57 | |||
| 58 | @import 'base'; | ||
| 59 | @import 'components/box'; | ||
| 60 | @import 'components/content'; | ||
| 61 | @import 'components/sidebar'; | ||
| 62 | @import 'components/view'; | ||
diff --git a/tpl/index.pug b/tpl/index.pug index c4baa64..7d73c75 100644 --- a/tpl/index.pug +++ b/tpl/index.pug | |||
| @@ -24,6 +24,7 @@ include objects/avatar.pug | |||
| 24 | include objects/card.pug | 24 | include objects/card.pug |
| 25 | include objects/popover.pug | 25 | include objects/popover.pug |
| 26 | include objects/menu.pug | 26 | include objects/menu.pug |
| 27 | include objects/navbar.pug | ||
| 27 | include objects/side-nav.pug | 28 | include objects/side-nav.pug |
| 28 | include objects/icon-nav.pug | 29 | include objects/icon-nav.pug |
| 29 | include objects/emoji.pug | 30 | include objects/emoji.pug |
| @@ -40,7 +41,7 @@ mixin view(id, title) | |||
| 40 | - | 41 | - |
| 41 | views.push({ id, title }); | 42 | views.push({ id, title }); |
| 42 | 43 | ||
| 43 | +container(narrow=!attributes.wide class='u-p-700 c-view' id=id) | 44 | +container(fixed=!attributes.wide class='u-p-700 c-view' id=id) |
| 44 | +h1-heading('xl')(class='u-mt-0')= title | 45 | +h1-heading('xl')(class='u-mt-0')= title |
| 45 | +divider('medium') | 46 | +divider('medium') |
| 46 | block | 47 | block |
| @@ -76,6 +77,7 @@ include views/avatar.pug | |||
| 76 | include views/card.pug | 77 | include views/card.pug |
| 77 | include views/popover.pug | 78 | include views/popover.pug |
| 78 | include views/menu.pug | 79 | include views/menu.pug |
| 80 | include views/navbar.pug | ||
| 79 | include views/side-nav.pug | 81 | include views/side-nav.pug |
| 80 | include views/icon-nav.pug | 82 | include views/icon-nav.pug |
| 81 | include views/backdrop.pug | 83 | include views/backdrop.pug |
| @@ -124,6 +126,7 @@ html | |||
| 124 | +view-side-nav | 126 | +view-side-nav |
| 125 | +view-popover | 127 | +view-popover |
| 126 | +view-menu | 128 | +view-menu |
| 129 | +view-navbar | ||
| 127 | //+view-icon-nav | 130 | //+view-icon-nav |
| 128 | +view-backdrop | 131 | +view-backdrop |
| 129 | //+view-dialog | 132 | //+view-dialog |
diff --git a/tpl/layouts/container.pug b/tpl/layouts/container.pug index 56c0b86..522eb1a 100644 --- a/tpl/layouts/container.pug +++ b/tpl/layouts/container.pug | |||
| @@ -1,10 +1,10 @@ | |||
| 1 | mixin container | 1 | mixin container |
| 2 | - | 2 | - |
| 3 | let classes = { | 3 | let classes = { |
| 4 | 'l-container': true, | 4 | 'l-container': true, |
| 5 | 'l-container--narrow': attributes.narrow, | 5 | 'l-container--fixed': attributes.fixed, |
| 6 | 'l-container--narrow-75': attributes.narrow50, | 6 | 'l-container--fixed-75': attributes.fixed50, |
| 7 | 'u-themed': !!attributes.theme | 7 | 'u-themed': !!attributes.theme |
| 8 | } | 8 | } |
| 9 | if (!!attributes.theme) { | 9 | if (!!attributes.theme) { |
| 10 | classes['t-' + attributes.theme] = true | 10 | classes['t-' + attributes.theme] = true |
diff --git a/tpl/objects/action-button.pug b/tpl/objects/action-button.pug index c3a9b53..e9b6fe3 100644 --- a/tpl/objects/action-button.pug +++ b/tpl/objects/action-button.pug | |||
| @@ -26,4 +26,9 @@ mixin action-button | |||
| 26 | if attributes.icon | 26 | if attributes.icon |
| 27 | +icon(attributes.icon) | 27 | +icon(attributes.icon) |
| 28 | = ' ' | 28 | = ' ' |
| 29 | block | 29 | if block |
| 30 | span.o-action-button__label | ||
| 31 | block | ||
| 32 | if attributes.postIcon | ||
| 33 | = ' ' | ||
| 34 | +icon(attributes.postIcon) | ||
diff --git a/tpl/objects/backdrop.pug b/tpl/objects/backdrop.pug index 227700c..f577961 100644 --- a/tpl/objects/backdrop.pug +++ b/tpl/objects/backdrop.pug | |||
| @@ -8,7 +8,10 @@ mixin backdrop | |||
| 8 | classes[attributes.class] = true; | 8 | classes[attributes.class] = true; |
| 9 | } | 9 | } |
| 10 | 10 | ||
| 11 | let styles = { width: '100%', 'min-height': '5em', 'max-height': '40em' } | 11 | let styles = { width: '100%', 'min-height': '5em' } |
| 12 | if (attributes.maxHeight) { | ||
| 13 | styles['max-height'] = '40em'; | ||
| 14 | } | ||
| 12 | if (attributes.pad) { | 15 | if (attributes.pad) { |
| 13 | styles['padding'] = '2em'; | 16 | styles['padding'] = '2em'; |
| 14 | } | 17 | } |
diff --git a/tpl/objects/card.pug b/tpl/objects/card.pug index 2ab9bef..e0f6a15 100644 --- a/tpl/objects/card.pug +++ b/tpl/objects/card.pug | |||
| @@ -26,7 +26,16 @@ mixin card-image | |||
| 26 | classes[attributes.class] = true; | 26 | classes[attributes.class] = true; |
| 27 | } | 27 | } |
| 28 | 28 | ||
| 29 | img(class=classes src=attributes.src style=attributes.style) | 29 | let imgClasses = { |
| 30 | 'o-card__image-img': true, | ||
| 31 | 'l-card-list__card-image': attributes.list | ||
| 32 | } | ||
| 33 | |||
| 34 | div(class=classes) | ||
| 35 | img(class=imgClasses src=attributes.src style=attributes.style) | ||
| 36 | if block | ||
| 37 | .o-card__image-overlay | ||
| 38 | block | ||
| 30 | 39 | ||
| 31 | mixin card-body | 40 | mixin card-body |
| 32 | .o-card__body(style=attributes.style) | 41 | .o-card__body(style=attributes.style) |
diff --git a/tpl/objects/divider.pug b/tpl/objects/divider.pug index 46425cd..ed4d27a 100644 --- a/tpl/objects/divider.pug +++ b/tpl/objects/divider.pug | |||
| @@ -3,6 +3,8 @@ mixin divider(level) | |||
| 3 | let classes = { | 3 | let classes = { |
| 4 | 'o-divider': true, | 4 | 'o-divider': true, |
| 5 | 'o-divider--labelled': !!block, | 5 | 'o-divider--labelled': !!block, |
| 6 | 'o-divider--vertical': !!attributes.vertical, | ||
| 7 | 'o-divider--dot': !!attributes.dot, | ||
| 6 | ['o-divider--' + level]: true, | 8 | ['o-divider--' + level]: true, |
| 7 | ['o-divider--' + attributes.color]: !!attributes.color | 9 | ['o-divider--' + attributes.color]: !!attributes.color |
| 8 | } | 10 | } |
diff --git a/tpl/objects/lightbox.pug b/tpl/objects/lightbox.pug index 02a3200..842d44a 100644 --- a/tpl/objects/lightbox.pug +++ b/tpl/objects/lightbox.pug | |||
| @@ -4,14 +4,19 @@ mixin lightbox(images) | |||
| 4 | - | 4 | - |
| 5 | let classes = { | 5 | let classes = { |
| 6 | 'o-lightbox': true, | 6 | 'o-lightbox': true, |
| 7 | 'o-lightbox--interactive': attributes.interactive, | ||
| 7 | } | 8 | } |
| 8 | let linksClasses = { | 9 | let linksClasses = { |
| 9 | 's-links': true, | 10 | 's-links': true, |
| 10 | } | 11 | } |
| 12 | let thumbnailClasses = { | ||
| 13 | 'o-thumbnail': true, | ||
| 14 | } | ||
| 11 | 15 | ||
| 12 | if (attributes.theme) { | 16 | if (attributes.theme) { |
| 13 | classes[`o-lightbox--${attributes.theme}`] = true; | 17 | classes[`o-lightbox--${attributes.theme}`] = true; |
| 14 | linksClasses[`s-links--${attributes.theme}`] = true; | 18 | linksClasses[`s-links--${attributes.theme}`] = true; |
| 19 | thumbnailClasses[`o-thumbnail--${attributes.theme}`] = true; | ||
| 15 | } | 20 | } |
| 16 | 21 | ||
| 17 | div(class=classes) | 22 | div(class=classes) |
| @@ -19,21 +24,23 @@ mixin lightbox(images) | |||
| 19 | div(class=linksClasses) | 24 | div(class=linksClasses) |
| 20 | block | 25 | block |
| 21 | +action-button(theme=attributes.theme pill=true quiet=true icon='x' class='o-lightbox__close-btn') | 26 | +action-button(theme=attributes.theme pill=true quiet=true icon='x' class='o-lightbox__close-btn') |
| 27 | |||
| 22 | each img, i in images | 28 | each img, i in images |
| 23 | img.o-lightbox__img(src=images[i] id='image-' + i) | 29 | img(src=images[i] id=('image-' + i) class=`o-lightbox__img ${attributes.interactive && !i ? 'is-visible' : ''}`) |
| 24 | +action-button(theme=attributes.theme pill=true quiet=true icon='chevron-left' class='o-lightbox__nav-btn o-lightbox__nav-btn--prev') | ||
| 25 | +action-button(theme=attributes.theme pill=true quiet=true icon='chevron-right' class='o-lightbox__nav-btn o-lightbox__nav-btn--next') | ||
| 26 | 30 | ||
| 27 | img.o-lightbox__img.o-lightbox__img--default(src=images[0]) | ||
| 28 | if images.length > 1 | 31 | if images.length > 1 |
| 29 | +action-button(theme=attributes.theme pill=true quiet=true icon='chevron-left' class='o-lightbox__nav-btn o-lightbox__nav-btn--prev') | 32 | +action-button(theme=attributes.theme pill=true quiet=true icon='chevron-left' class='o-lightbox__nav-btn o-lightbox__nav-btn--prev') |
| 30 | +action-button(theme=attributes.theme pill=true quiet=true icon='chevron-right' class='o-lightbox__nav-btn o-lightbox__nav-btn--next') | 33 | +action-button(theme=attributes.theme pill=true quiet=true icon='chevron-right' class='o-lightbox__nav-btn o-lightbox__nav-btn--next') |
| 34 | |||
| 31 | .o-lightbox__thumbnails | 35 | .o-lightbox__thumbnails |
| 32 | each img, i in images | 36 | each img, i in images |
| 33 | - classes = i === 0 ? 'is-selected' : '' | 37 | - |
| 34 | a.o-lightbox__thumbnail(class=classes href='#image-' + i) | 38 | let classes = { 'is-selected': i === 0 } |
| 35 | img.o-lightbox__thumbnail-img(src=img) | 39 | Object.assign(classes, thumbnailClasses) |
| 36 | button.o-lightbox__thumbnail | 40 | |
| 37 | +icon('volume-2')(class='o-lightbox__thumbnail-icon') | 41 | a.o-thumbnail(class=classes href='#image-' + i) |
| 38 | button.o-lightbox__thumbnail | 42 | img.o-thumbnail__image(src=img) |
| 39 | +icon('video')(class='o-lightbox__thumbnail-icon') | 43 | button(class=thumbnailClasses) |
| 44 | +icon('volume-2')(class='o-thumbnail__icon') | ||
| 45 | button(class=thumbnailClasses) | ||
| 46 | +icon('video')(class='o-thumbnail__icon') | ||
diff --git a/tpl/objects/navbar.pug b/tpl/objects/navbar.pug new file mode 100644 index 0000000..5c7642c --- /dev/null +++ b/tpl/objects/navbar.pug | |||
| @@ -0,0 +1,37 @@ | |||
| 1 | include icon.pug | ||
| 2 | include status-indicator.pug | ||
| 3 | include action-button.pug | ||
| 4 | |||
| 5 | mixin navbar | ||
| 6 | - | ||
| 7 | let classes = { | ||
| 8 | 'o-navbar': true, | ||
| 9 | 'o-navbar--quiet': attributes.quiet, | ||
| 10 | } | ||
| 11 | if (attributes.class) { | ||
| 12 | classes[attributes.class] = true; | ||
| 13 | } | ||
| 14 | |||
| 15 | div(class=classes)&attributes(attributes) | ||
| 16 | block | ||
| 17 | |||
| 18 | mixin navbar-item | ||
| 19 | - | ||
| 20 | let classes = { | ||
| 21 | 'o-navbar__item': true, | ||
| 22 | 'is-selected': attributes.selected, | ||
| 23 | } | ||
| 24 | if (attributes.class) { | ||
| 25 | classes[attributes.class] = true; | ||
| 26 | } | ||
| 27 | |||
| 28 | #{!!attributes.tag ? attributes.tag : 'button'}(class=classes)&attributes(attributes) | ||
| 29 | .o-navbar__item-content | ||
| 30 | if attributes.icon | ||
| 31 | +icon(attributes.icon) | ||
| 32 | = ' ' | ||
| 33 | span.o-navbar__item-content-text | ||
| 34 | block | ||
| 35 | if attributes.postIcon | ||
| 36 | = ' ' | ||
| 37 | +icon(attributes.postIcon) | ||
diff --git a/tpl/views/card.pug b/tpl/views/card.pug index 3163b00..61081a9 100644 --- a/tpl/views/card.pug +++ b/tpl/views/card.pug | |||
| @@ -27,17 +27,16 @@ mixin view-card | |||
| 27 | .l-media | 27 | .l-media |
| 28 | .l-media__block | 28 | .l-media__block |
| 29 | +badge('positive')(quiet=true icon='repeat' href='#') | 29 | +badge('positive')(quiet=true icon='repeat' href='#') |
| 30 | +icon('repeat') | 30 | strong= '12' |
| 31 | strong.u-mis-50= '12' | ||
| 32 | .l-media__block | 31 | .l-media__block |
| 33 | +badge('warning')(quiet=true icon='star' href='#') | 32 | +badge('warning')(quiet=true icon='star' href='#') |
| 34 | +icon('star') | 33 | strong= '34' |
| 35 | strong.u-mis-50= '34' | ||
| 36 | .l-media__block.u-mis-auto | 34 | .l-media__block.u-mis-auto |
| 37 | +a-button(primary=true)= 'Reply' | 35 | +a-button(primary=true)= 'Reply' |
| 38 | 36 | ||
| 39 | +card(quiet=true href='#' class='l-card-list__card') | 37 | +card(quiet=true href='#' class='l-card-list__card') |
| 40 | +card-image(src='Drawing_Half.png' style={ 'aspect-ratio': '21 / 9' }) | 38 | +card-image(src='Drawing_Half.png' style={ 'aspect-ratio': '21 / 9' }) |
| 39 | +badge= 'Drawings' | ||
| 41 | +card-body | 40 | +card-body |
| 42 | +card-title= 'XS Heading' | 41 | +card-title= 'XS Heading' |
| 43 | +card-content | 42 | +card-content |
| @@ -61,7 +60,7 @@ mixin view-card | |||
| 61 | div(class=classes) | 60 | div(class=classes) |
| 62 | each img, i in ['Drawing_Half.png', '0000 Cover@0.5x.webp', 'avatar.png', '01 Design Cody.png', 'avatar.png', 'Drawing_Half.png'] | 61 | each img, i in ['Drawing_Half.png', '0000 Cover@0.5x.webp', 'avatar.png', '01 Design Cody.png', 'avatar.png', 'Drawing_Half.png'] |
| 63 | +card(quiet=quiet href='#' class='l-card-list__card') | 62 | +card(quiet=quiet href='#' class='l-card-list__card') |
| 64 | +card-image(src=img class='l-card-list__card-image') | 63 | +card-image(src=img list=true) |
| 65 | +card-body | 64 | +card-body |
| 66 | .l-media | 65 | .l-media |
| 67 | .l-media__block.l-media__block--main | 66 | .l-media__block.l-media__block--main |
diff --git a/tpl/views/divider.pug b/tpl/views/divider.pug index ee7b372..ea08984 100644 --- a/tpl/views/divider.pug +++ b/tpl/views/divider.pug | |||
| @@ -23,7 +23,17 @@ mixin view-divider | |||
| 23 | +divider('medium') | 23 | +divider('medium') |
| 24 | +divider('faint') | 24 | +divider('faint') |
| 25 | 25 | ||
| 26 | each theme in ['blue', 'purple', 'red', 'green', 'yellow'] | 26 | .c-box |
| 27 | .l-media(style="height: 1em") | ||
| 28 | +divider('strong')(vertical=true class="l-media__block") | ||
| 29 | +divider('medium')(vertical=true class="l-media__block") | ||
| 30 | +divider('faint')(vertical=true class="l-media__block") | ||
| 31 | .l-media(style="height: 1em") | ||
| 32 | +divider('strong')(dot=true class="l-media__block") | ||
| 33 | +divider('medium')(dot=true class="l-media__block") | ||
| 34 | +divider('faint')(dot=true class="l-media__block") | ||
| 35 | |||
| 36 | each theme in ['accent', 'negative'] | ||
| 27 | .c-box | 37 | .c-box |
| 28 | +divider('strong')(color=theme)= 'Strong' | 38 | +divider('strong')(color=theme)= 'Strong' |
| 29 | +divider('medium')(color=theme)= 'Medium' | 39 | +divider('medium')(color=theme)= 'Medium' |
diff --git a/tpl/views/lightbox.pug b/tpl/views/lightbox.pug index 4eb234a..7e366c0 100644 --- a/tpl/views/lightbox.pug +++ b/tpl/views/lightbox.pug | |||
| @@ -1,5 +1,5 @@ | |||
| 1 | mixin view-lightbox | 1 | mixin view-lightbox |
| 2 | +view('lightbox', 'Lightbox') | 2 | +view('lightbox', 'Lightbox')(wide=true) |
| 3 | .c-box | 3 | .c-box |
| 4 | +lightbox(['avatar.png', 'ava_feralbot.png', 'volpeon_spooky.png']) | 4 | +lightbox(['avatar.png', 'ava_feralbot.png', 'volpeon_spooky.png']) |
| 5 | = "Let's try multiple links! " | 5 | = "Let's try multiple links! " |
| @@ -37,3 +37,15 @@ mixin view-lightbox | |||
| 37 | = ' ' | 37 | = ' ' |
| 38 | a(href="https://mk.vulpes.one/files/081e0684-08dc-4a42-b810-b0ac63ec7d06") | 38 | a(href="https://mk.vulpes.one/files/081e0684-08dc-4a42-b810-b0ac63ec7d06") |
| 39 | = "https://mk.vulpes.one/files/081e0684-08dc-4a42-b810-b0ac63ec7d06" | 39 | = "https://mk.vulpes.one/files/081e0684-08dc-4a42-b810-b0ac63ec7d06" |
| 40 | |||
| 41 | +backdrop(maxHeight=true) | ||
| 42 | +lightbox(['avatar.png', 'ava_feralbot.png', 'volpeon_spooky.png'])(theme='static-white' interactive=true) | ||
| 43 | = "Let's try multiple links! " | ||
| 44 | a(href="https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925") | ||
| 45 | = "https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925" | ||
| 46 | = ' ' | ||
| 47 | a(href="https://mk.vulpes.one/files/741dcfd3-6a26-48ae-8985-d0c3ccca016c") | ||
| 48 | = "https://mk.vulpes.one/files/741dcfd3-6a26-48ae-8985-d0c3ccca016c" | ||
| 49 | = ' ' | ||
| 50 | a(href="https://mk.vulpes.one/files/081e0684-08dc-4a42-b810-b0ac63ec7d06") | ||
| 51 | = "https://mk.vulpes.one/files/081e0684-08dc-4a42-b810-b0ac63ec7d06" | ||
diff --git a/tpl/views/navbar.pug b/tpl/views/navbar.pug new file mode 100644 index 0000000..345a22b --- /dev/null +++ b/tpl/views/navbar.pug | |||
| @@ -0,0 +1,19 @@ | |||
| 1 | mixin view-navbar | ||
| 2 | +view('navbar', 'Navbar') | ||
| 3 | .c-box | ||
| 4 | +navbar | ||
| 5 | +navbar-item= 'Home' | ||
| 6 | +navbar-item(selected=true)= 'Art' | ||
| 7 | +navbar-item= 'Emojis' | ||
| 8 | |||
| 9 | .c-box | ||
| 10 | +navbar(quiet=true) | ||
| 11 | +navbar-item= 'Home' | ||
| 12 | +navbar-item(selected=true)= 'Art' | ||
| 13 | +navbar-item= 'Emojis' | ||
| 14 | |||
| 15 | .c-box | ||
| 16 | +navbar(quiet=true) | ||
| 17 | +navbar-item(selected=true icon="arrow-left")= 'Home' | ||
| 18 | +navbar-item= 'Art' | ||
| 19 | +navbar-item= 'Emojis' | ||