daniil4udo / bulvar Goto Github PK

View Code? Open in Web Editor NEW

52.0 1.0 3.0 5.32 MB

🛣 Bulma, Buefy and Bulma Extensions rewritten using CSS Variables

License: MIT License

Sass 56.39% SCSS 40.64% JavaScript 1.51% Shell 0.29% TypeScript 1.17%

sass css bulma buefy css-variables css-properties scss

bulvar's People

Contributors

Stargazers

Watchers

Forkers

dpschen fluidfractal rikkit a1730

bulvar's Issues

Delete styles not getting included

This is about Bulma ~~| Bulma | Extentions | the Docs~~.

This is, potentially, a bug in bulma. It might also be me doing something wrong.

Overview of the problem

This is about the Bulma CSS framework

I'm using Bulma version [0.11.13]

Description

I am using bulma via @import instead of @use because I was using it like that with regular Bulma. That might be related.

The issue is that the .delete class doesn't include the ::before or ::after of the .delete class for some reason. I can see it is in the sass file as a mixin, but it is not in the css output. The rest of that mixin is, just not the ::before, :;after. I also believe the .is-small and such classes of the .delete are not included.

Steps to Reproduce

This is how I import the Bulma, everything else seems to work fine with it:

// Bulma Import
@import "node_modules/@bulvar/bulma/sass/utilities/initial-variables";
$navbar-breakpoint: $widescreen;
@import 'node_modules/@bulvar/bulma/bulma';

I use the delete inside notifications:

<div class="notification is-danger">
  <button class="delete"></button>
    <p>
      Content...
    </p>
</div>

Expected behavior

The delete is rendered properly. See screenshot below using regular Bulma

Actual behavior

The delete isn't rendered properly. See screenshot below using @bulvar/Bulma

0.11.0 regression/bug when providing a map to $custom-colors

This is about Bulma.

This is a bug/regression on 0.11.0.

Overview of the problem

The following code:

$antidote-blue-primary: #05435C;
$antidote-blue-primary-invert: #fff;

@use "../../node_modules/@bulvar/bulma/bulma.sass" with (
    $custom-colors: (
        "antidote-blue-primary": ($antidote-blue-primary, $antidote-blue-primary-invert),
    )
);

gives this error:

  Plugin: vite:css
  File: C:\Users\mange\Documents\Workspaces\Github\Antidote-AI\armor-project\node_modules\@bulvar\bulma\sass\utilities\mixins.sass
  Error: $string: #fff is not a string.
      ╷
  366 │   --#{$base}-invert-bis: #{if(string.index($color-invert, 'light'), var(--invert-light-color-bis), var(--invert-dark-color-bis))}
      │                               ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
      ╵
    ..\node_modules\@bulvar\bulma\sass\utilities\mixins.sass 366:31  registerCSSVarColor()
    ..\node_modules\@bulvar\bulma\sass\utilities\mixins.sass 383:5   registerCSSVarColors()
    ..\node_modules\@bulvar\bulma\themes\light.sass 112:2            @forward
    ..\node_modules\@bulvar\bulma\bulma.sass 7:1                     @use
    src\index.scss 11:1                                              root stylesheet

The same code is working with version 0.10.2 of @bulvar/bulma.

Expected behavior

It should compiles

Actual behavior

Doesn't compile

Use Sass modules (@use instead of @import)

This is about Bulma. Is it a feature.

Overview of the problem

This is about the Bulma CSS framework
I'm using Bulma version 0.9.3
I am sure this issue is not a duplicate?

Description

Using the @use syntax in the individual sass files for the import of variables and mixins would allow to import only the modules in a page view that are currently used.

E.g. replace the first line in packages/bulma/sass/components/card.sass:

// replace this
@import "../utilities/mixins"

with this:
@use "../utilities/mixins" as *

=> Better bundle splitting.

If the benefits of this are still unclear I can also write a longer version of this issue and what kind of specific problem it would solve.

I just didn't want to waste any time if changes like this are not wanted =)

Regardless of the benefits: Sass officially discourages the use of @import.

Some default variable values missing

This is about Bulma.

Overview of the problem

This is about the Bulma CSS framework
I'm using Bulma version 0.10.2

Description

There seem to be missing default values in 0.10.2. For example button with is-danger has the wrong text color. It's supposed to be white, but it's black.

It was working as expected in 0.9.7.

Steps to Reproduce

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="bulma.css" />
  </head>
  <body>
    <button class="button is-danger">Hello</button>
  </body>
</html>

Expected behavior

Expected the button to have white text color.

Actual behavior

Button text color is black.

How to import functions.sass to create custom colors?

This is about Bulvar.

Overview of the problem

I am trying to add custom colours and can't find a way to import functions.sass in order to access findColorInvert function.

Description

When trying this code:

@charset "utf-8";

@use "../../node_modules/@bulvar/bulma/sass/utilities/functions.sass" as fn;

$antidote-blue: #00435C;
$antidote-blue-light: fn.findColorInvert($antidote-blue);

// @use "../../node_modules/@bulvar/bulma/sass/helpers/color.sass";
@use "../../node_modules/@bulvar/bulma/bulma.sass" with (
    $primary: #E56F56,
    $success: #66C87D,
    $custom-colors: ("antidote-blue": ($antidote-blue, $antidote-blue-light))
);

I get this error:

File: /Users/mmangel/Documents/Workspaces/GitHub/antidote-ai/antidote-apps/node_modules/@bulvar/bulma/sass/utilities/derived-variables.sass
  Error: This module was already loaded, so it can't be configured using "with".
     ┌──> ../node_modules/@bulvar/bulma/sass/utilities/derived-variables.sass
  3  │   @forward "initial-variables"
     │   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ new load
     ╵
     ┌──> ../node_modules/@bulvar/bulma/sass/utilities/functions.sass
  8  │   @use 'initial-variables' as vars
     │   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ original load
     ╵
     ┌──> src/index.scss
  9  │ ┌ @use "../../node_modules/@bulvar/bulma/bulma.sass" with (
  10 │ │     $primary: #E56F56,
  11 │ │     $success: #66C87D,
  12 │ │     $custom-colors: ("antidote-blue": ($antidote-blue, $antidote-blue-light))
  13 │ │ );
     │ └─^ configuration
     ╵
    ../node_modules/@bulvar/bulma/sass/utilities/derived-variables.sass 3:1  @forward
    ../node_modules/@bulvar/bulma/bulma.sass 6:1                             @use
    src/index.scss 9:1                                                       root stylesheet

I tried to use @forward but got some errors too.

How would one import the file functions.scss in order to use the defined function in its code?

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

Detected dependencies

github-actions

.github/workflows/npm-publish.yml

actions/checkout v3

actions/setup-node v3

actions/checkout v3

actions/setup-node v3

actions/checkout v3

actions/setup-node v3

npm

package.json

autoprefixer ^10.4.13

commitizen ^4.2.5

cross-env ^7.0.3

csso-cli ^4.0.1

cz-conventional-changelog ^3.3.0

cz-emoji 1.3.1

find-unused-sass-variables ^4.0.4

husky ^8.0.2

lerna ^6.0.3

lint-staged ^13.0.3

markdownlint-cli ^0.32.2

npm-run-all ^4.1.5

postcss ^8.4.19

postcss-cli ^10.0.0

postcss-sass ^0.5.0

postcss-scss ^4.0.5

prettier ^2.7.1

rimraf ^3.0.2

rtlcss ^4.0.0

sass ^1.56.1

stylelint ^14.15.0

stylelint-config-idiomatic-order ^9.0.0

stylelint-config-prettier ^9.0.4

stylelint-config-standard-scss ^6.1.0

sugarss ^4.0.1

packages/buefy/package.json

packages/bulma/package.json

travis

.travis.yml

node 14

Check this box to trigger a request for Renovate to run again on this repository

RGB colors in derived-variables.sass are invalid caused by missing bulmaToRGB function

This is about Bulma.
It's a bug in the library.

Overview of the problem

This is about the Bulma CSS framework

This is a Sass issue: I'm using version 1.47.0
I am sure this issue is not a duplicate?

Description

All variables in bulma/sass/utilites/derived-variables.sass that use bulmaToRGB are not set correctly because the bulmaToRGB function is missing (not imported) from the bulma/shared/functions.sass file.
The bulmaToRGB is only defined in the bulma/sass/utilites/functions.sass.

Possible solution would be to import shared/functions.sass into utilities/functions.sass or just to duplicate the bulmaToRGB function from bulma/shared/functions.sass into utilities/functions.sass.

Steps to Reproduce

As you can see in this jsbin, the bulma delete button is invisible because its background-color is missing caused by missing bulmaToRGB sass function.

https://jsbin.com/lekikor/1/edit?html,output

Expected behavior

The RGB colors in derived-variables.sass should be transformed to their actual values.

Actual behavior

The RGB colors in derived-variables.sass have invalid values like background-color: rgba(var(--scheme-invert-rgb, bulmaToRGB(#0a0a0a)), 0.2);

daniil4udo / bulvar Goto Github PK

bulvar's People

Contributors

Stargazers

Watchers

Forkers

bulvar's Issues

Overview of the problem

Description

Steps to Reproduce

Expected behavior

Actual behavior

Overview of the problem

Expected behavior

Actual behavior

Overview of the problem

Description

Overview of the problem

Description

Steps to Reproduce

Expected behavior

Actual behavior

Overview of the problem

Description

Open

Detected dependencies

Overview of the problem

Description

Steps to Reproduce

Expected behavior

Actual behavior

Recommend Projects

Recommend Topics

Recommend Org