Git Product home page Git Product logo

Comments (6)

austenstone avatar austenstone commented on July 21, 2024 2

Could you maybe dig into it for the rest of us? This would be very much appreciated!

Most definitely. I'll open a merge request when I've got it figured out.

from angular-material-css-vars.

johannesjo avatar johannesjo commented on July 21, 2024

Thanks for opening this up. Good question. Don't have the answer unfortunately. There might be definitely some minor (as far as I can see very very few) quirks left, one needs to address manually. Have a look here:

angular-material-css-vars/projects/material-css-vars/src/lib/_mat-lib-overwrites.scss

Lines 43 to 50 in ac07254

@mixin mat-css-other-overwrites {
.mat-button-focus-overlay {
background: RGBA(var(--palette-foreground-base), 1);
}
.mat-checkbox .mat-ripple-element {
background-color: RGB(var(--palette-foreground-base));
}
}

Could you maybe dig into it for the rest of us? This would be very much appreciated!

from angular-material-css-vars.

johannesjo avatar johannesjo commented on July 21, 2024

That's awesome! Thank you!

from angular-material-css-vars.

austenstone avatar austenstone commented on July 21, 2024

angular-material-css-vars/projects/material-css-vars/src/lib/_variables.scss

Line 133 in ac07254

--palette-foreground-hint-text: _mat-css-hex-to-rgb($dark-disabled-text),

We are using
$dark-disabled-text: rgba(black, 0.38);
When in light mode we should use:
$light-disabled-text: rgba(white, 0.5);

Looks like we set the foreground once in main.scss

angular-material-css-vars/projects/material-css-vars/src/lib/_main.scss

Lines 25 to 30 in ac07254

$theme: map_merge($theme, (
background: $mat-css-palette-background,
foreground: $mat-css-palette-foreground,
));
// set global variable so passed-in content can use the theme
$mat-css-theme: $theme !global;

We only have a single foreground palette for both dark and light theme.

angular-material-css-vars/projects/material-css-vars/src/lib/_variables.scss

Lines 273 to 289 in ac07254

$mat-css-palette-foreground: (
base: var(--palette-foreground-base),
divider: var(--palette-foreground-divider),
dividers: var(--palette-foreground-dividers),
disabled: var(--palette-foreground-disabled),
disabled-button: var(--palette-foreground-disabled-button),
disabled-text: var(--palette-foreground-disabled-text),
elevation: black,
hint-text: var(--palette-foreground-hint-text),
secondary-text: var(--palette-foreground-secondary-text),
icon: var(--palette-foreground-icon),
icons: var(--palette-foreground-icons),
text: var(--palette-foreground-text),
slider-min: var(--palette-foreground-slider-min),
slider-off: var(--palette-foreground-slider-off),
slider-off-active: var(--palette-foreground-slider-off-active),
) !default;

We decided to use dark variables for all the foreground so the disabled color works in dark mode but not in light mode. We need to switch between two colored pallets like in angular material.

// Foreground palette for light themes.
$mat-light-theme-foreground: (
  base:              black,
  divider:           $dark-dividers,
  dividers:          $dark-dividers,
  disabled:          $dark-disabled-text,
  disabled-button:   rgba(black, 0.26),
  disabled-text:     $dark-disabled-text,
  elevation:         black,
  hint-text:         $dark-disabled-text,
  secondary-text:    $dark-secondary-text,
  icon:              rgba(black, 0.54),
  icons:             rgba(black, 0.54),
  text:              rgba(black, 0.87),
  slider-min:        rgba(black, 0.87),
  slider-off:        rgba(black, 0.26),
  slider-off-active: rgba(black, 0.38),
);

// Foreground palette for dark themes.
$mat-dark-theme-foreground: (
  base:              white,
  divider:           $light-dividers,
  dividers:          $light-dividers,
  disabled:          $light-disabled-text,
  disabled-button:   rgba(white, 0.3),
  disabled-text:     $light-disabled-text,
  elevation:         black,
  hint-text:         $light-disabled-text,
  secondary-text:    $light-secondary-text,
  icon:              white,
  icons:             white,
  text:              white,
  slider-min:        white,
  slider-off:        rgba(white, 0.3),
  slider-off-active: rgba(white, 0.3),
);

https://github.com/angular/material-builds/blob/ff400ae4c133deebc510c7a75f468c7c1ee9feab/_theming.scss#L1257-L1293

I'm not great at scss yet but I think we need to create another set of

Only question is where do we determine dark vs light theme so we can style foreground differently.

from angular-material-css-vars.

johannesjo avatar johannesjo commented on July 21, 2024

I'm not great at scss yet but I think we need to create another set of

of what? :)

Not sure if I follow you. The selectors for the dark theme is applied here:

angular-material-css-vars/projects/material-css-vars/src/lib/_main.scss

Lines 32 to 46 in ac07254

@at-root {
// NOTE: light theme is the default theme
@include angular-material-theme($theme);
@content;
@if $dark-theme-selector {
$mat-css-theme: $dark-theme !global;
#{$dark-theme-selector} {
@include angular-material-theme($dark-theme);
// add content passed in, which can use the $theme variable to apply the dark theme to
// other theme mixins needed by the app
@content;
}
}
}

from angular-material-css-vars.

austenstone avatar austenstone commented on July 21, 2024

I was mistaken ignore my comments on first post.

I made a pull request with a workaround. Not sure if this is acceptable.
#36

I need to understand why that alpha is being set to 1 when it should be 0.38, or 0.5 in dark mode. It actually works in dark mode. Added test case to demo app so you can see what I mean.

from angular-material-css-vars.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.