Big Chungus
05/23/2021, 7:10 PMjim
05/23/2021, 10:00 PMBig Chungus
05/23/2021, 10:07 PMColton Idle
05/24/2021, 2:00 AMDaniele B
05/24/2021, 6:08 AMBig Chungus
05/24/2021, 9:30 AMGreg Steckman
05/25/2021, 2:50 AMobject AppStyle : StyleSheet() {
init {
CSSSelector.PseudoClass.root {
variable("mdc-theme-primary", StylePropertyValue("green"))
variable("mdc-theme-on-primary", StylePropertyValue("white"))
}
}
}
Are there any drawbacks to doing this vs running through sass first?Big Chungus
05/25/2021, 7:17 AMGreg Steckman
05/25/2021, 2:50 PMrocketraman
11/22/2021, 4:50 PMBig Chungus
11/22/2021, 4:59 PMrocketraman
11/22/2021, 5:00 PMBig Chungus
11/22/2021, 5:03 PMrocketraman
11/22/2021, 5:03 PMBig Chungus
11/22/2021, 5:04 PMhfhbd
11/22/2021, 5:25 PMrocketraman
11/22/2021, 5:26 PMhfhbd
11/22/2021, 5:28 PMBig Chungus
11/22/2021, 9:45 PMOliver.O
11/25/2021, 11:23 PMdensity($density-scale)
mixin: https://material.io/components/text-fields/web#api
I'll be happy to drop my local experimental library, switch to KMDC and test what's already there. Additionally, I'll be happy to contribute whatever I might come up with, though it might take some time to bubble up my priority list.Big Chungus
11/26/2021, 12:20 AMOliver.O
11/26/2021, 3:46 PMMDCTextFieldStyle
)? Probably to make the loader aware. Why is the unused variable not eliminated by the Kotlin compiler? – The idea is that some additional documentation might make it easier for others to contribute, and thus attract more contributors. Does that sound reasonable?
Regarding Sass, here is one density example that illustrates what I'm looking for: https://material-density.glitch.me/. A working Sass-based implementation would be excellent, so I'd appreciate your efforts towards this goal. Please let me know if I can assist with testing.
Additionally, I have been looking at generator-based approaches like kotlin-mui for React-MUI. I'm not sure whether that might be feasible here (probably it's not).Big Chungus
11/26/2021, 4:01 PMrocketraman
11/29/2021, 5:37 AMBig Chungus
11/29/2021, 8:36 AMhfhbd
11/29/2021, 8:53 AMBig Chungus
11/29/2021, 8:56 AMOliver.O
11/29/2021, 10:43 AMrocketraman
11/29/2021, 5:47 PMwebpack.config.d
, add sass.js
to inject this configuration into the webpack setup for Kotlin/JS:
config.module.rules.push({
test: /\.(scss|sass)$/,
use: [
/**
* fallback to style-loader in development
* "style-loader" creates style nodes from JS strings
*/
"style-loader", // translates CSS into CommonJS
"css-loader", // translates CSS into CommonJS
"sass-loader" // compiles Sass to CSS, using Node Sass by default
]
});
In build.gradle.kts
, in the JS dependencies, add:
// for theming mdc
implementation(npm("@material/theme", "^13.0.0"))
// for sass support
implementation(devNpm("sass", "^1.42.1"))
implementation(devNpm("sass-loader", "^12.3.0"))
Add `scss`/`sass` files in the JS resources, and then require
them in your Kotlin/JS code:
external fun require(o: String)
// resources contains `ccs/whatever.scss`
require("./css/whatever.scss")
resources/css/custom-theme.scss
@use "@material/theme" with (
$primary: #5bb019,
$secondary: #215221,
$background: #fff,
$on-primary: #2053d5,
$on-secondary: #a2bbec,
);
resources/css/textfield-theme.scss
@use './custom-theme.scss';
@use "@material/floating-label/mdc-floating-label";
@use "@material/line-ripple/mdc-line-ripple";
@use "@material/notched-outline/mdc-notched-outline";
@use "@material/textfield";
@include textfield.core-styles;
.mdc-text-field {
@include textfield.ink-color(#307e0b)
}
Oliver.O
11/29/2021, 6:02 PM