aloha-vue 2.21.0 → 2.21.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/dist/aloha-vue.css +31 -31
  3. package/package.json +1 -1
  4. package/scss/utils/badge.scss +15 -15
package/CHANGELOG.md CHANGED
@@ -7,6 +7,10 @@
7
7
  ---
8
8
  # Versions
9
9
 
10
+ ## 2.21.1
11
+
12
+ - Refactor badge `SCSS` variables for `.a_badge` to use consistent naming convention
13
+
10
14
  ## 2.21.0
11
15
 
12
16
  - Add badge styles, documentation, and localization
package/dist/aloha-vue.css CHANGED
@@ -7304,24 +7304,24 @@ h6 {
7304
7304
  }
7305
7305
  }
7306
7306
  .a_badge {
7307
- --a_badge-padding-x: 0.65em;
7308
- --a_badge-padding-y: 0.35em;
7309
- --a_badge-font-size: 0.75em;
7310
- --a_badge-font-weight: 700;
7311
- --a_badge-color: var(--a_color_white);
7312
- --a_badge-bg: var(--a_color_black);
7313
- --a_badge-border-radius: var(--a_border_radius);
7307
+ --a_badge_padding_x: 0.65em;
7308
+ --a_badge_padding_y: 0.35em;
7309
+ --a_badge_font_size: 0.75em;
7310
+ --a_badge_font_weight: 700;
7311
+ --a_badge_color: var(--a_color_white);
7312
+ --a_badge_bg: var(--a_color_black);
7313
+ --a_badge_border_radius: var(--a_border_radius);
7314
7314
  display: inline-block;
7315
- padding: var(--a_badge-padding-y) var(--a_badge-padding-x);
7316
- font-size: var(--a_badge-font-size);
7317
- font-weight: var(--a_badge-font-weight);
7315
+ padding: var(--a_badge_padding_y) var(--a_badge_padding_x);
7316
+ font-size: var(--a_badge_font_size);
7317
+ font-weight: var(--a_badge_font_weight);
7318
7318
  line-height: 1;
7319
- color: var(--a_badge-color);
7320
- background-color: var(--a_badge-bg);
7319
+ color: var(--a_badge_color);
7320
+ background-color: var(--a_badge_bg);
7321
7321
  text-align: center;
7322
7322
  white-space: nowrap;
7323
7323
  vertical-align: baseline;
7324
- border-radius: var(--a_badge-border-radius);
7324
+ border-radius: var(--a_badge_border_radius);
7325
7325
  }
7326
7326
 
7327
7327
  .a_pill_rounded {
@@ -7329,48 +7329,48 @@ h6 {
7329
7329
  }
7330
7330
 
7331
7331
  .a_badge_primary {
7332
- --a_badge-color: var(--a_color_primary_text_emphasis);
7333
- --a_badge-bg: var(--a_color_primary_bg_subtle);
7332
+ --a_badge_color: var(--a_color_primary_text_emphasis);
7333
+ --a_badge_bg: var(--a_color_primary_bg_subtle);
7334
7334
  }
7335
7335
 
7336
7336
  .a_badge_secondary {
7337
- --a_badge-color: var(--a_color_secondary_text_emphasis);
7338
- --a_badge-bg: var(--a_color_secondary_bg_subtle);
7337
+ --a_badge_color: var(--a_color_secondary_text_emphasis);
7338
+ --a_badge_bg: var(--a_color_secondary_bg_subtle);
7339
7339
  }
7340
7340
 
7341
7341
  .a_badge_tertiary {
7342
- --a_badge-color: var(--a_color_tertiary_text_emphasis);
7343
- --a_badge-bg: var(--a_color_tertiary_bg_subtle);
7342
+ --a_badge_color: var(--a_color_tertiary_text_emphasis);
7343
+ --a_badge_bg: var(--a_color_tertiary_bg_subtle);
7344
7344
  }
7345
7345
 
7346
7346
  .a_badge_success {
7347
- --a_badge-color: var(--a_color_success_text_emphasis);
7348
- --a_badge-bg: var(--a_color_success_bg_subtle);
7347
+ --a_badge_color: var(--a_color_success_text_emphasis);
7348
+ --a_badge_bg: var(--a_color_success_bg_subtle);
7349
7349
  }
7350
7350
 
7351
7351
  .a_badge_info {
7352
- --a_badge-color: var(--a_color_info_text_emphasis);
7353
- --a_badge-bg: var(--a_color_info_bg_subtle);
7352
+ --a_badge_color: var(--a_color_info_text_emphasis);
7353
+ --a_badge_bg: var(--a_color_info_bg_subtle);
7354
7354
  }
7355
7355
 
7356
7356
  .a_badge_warning {
7357
- --a_badge-color: var(--a_color_warning_text_emphasis);
7358
- --a_badge-bg: var(--a_color_warning_bg_subtle);
7357
+ --a_badge_color: var(--a_color_warning_text_emphasis);
7358
+ --a_badge_bg: var(--a_color_warning_bg_subtle);
7359
7359
  }
7360
7360
 
7361
7361
  .a_badge_danger {
7362
- --a_badge-color: var(--a_color_danger_text_emphasis);
7363
- --a_badge-bg: var(--a_color_danger_bg_subtle);
7362
+ --a_badge_color: var(--a_color_danger_text_emphasis);
7363
+ --a_badge_bg: var(--a_color_danger_bg_subtle);
7364
7364
  }
7365
7365
 
7366
7366
  .a_badge_light {
7367
- --a_badge-color: var(--a_color_light_text_emphasis);
7368
- --a_badge-bg: var(--a_color_light_bg_subtle);
7367
+ --a_badge_color: var(--a_color_light_text_emphasis);
7368
+ --a_badge_bg: var(--a_color_light_bg_subtle);
7369
7369
  }
7370
7370
 
7371
7371
  .a_badge_dark {
7372
- --a_badge-color: var(--a_color_dark_text_emphasis);
7373
- --a_badge-bg: var(--a_color_dark_bg_subtle);
7372
+ --a_badge_color: var(--a_color_dark_text_emphasis);
7373
+ --a_badge_bg: var(--a_color_dark_bg_subtle);
7374
7374
  }
7375
7375
 
7376
7376
  .a_accordion {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "aloha-vue",
3
- "version": "2.21.0",
3
+ "version": "2.21.1",
4
4
  "description": "Aloha-vue is a JavaScript library that provides a wide range of accessible components and directives for Vue.js. Accessibility is of paramount importance to us, and we have designed all our components to meet accessibility compliance criteria. This library is a valuable tool for frontend developers and has already been used in three projects, including two large-scale ones",
5
5
  "keywords": [
6
6
  "accessibility compliance criteria",
package/scss/utils/badge.scss CHANGED
@@ -13,25 +13,25 @@ $a_badge_padding_x: .65em;
13
13
  $a_badge_border_radius: var(--#{aloha.$aloha-prefix}border_radius);
14
14
 
15
15
  .#{aloha.$aloha-prefix}badge {
16
- --#{aloha.$aloha-prefix}badge-padding-x: #{$a_badge_padding_x};
17
- --#{aloha.$aloha-prefix}badge-padding-y: #{$a_badge_padding_y};
18
- --#{aloha.$aloha-prefix}badge-font-size: #{$a_badge_font_size};
19
- --#{aloha.$aloha-prefix}badge-font-weight: #{$a_badge_font_weight};
20
- --#{aloha.$aloha-prefix}badge-color: #{$a_badge_color};
21
- --#{aloha.$aloha-prefix}badge-bg: #{$a_badge_bg};
22
- --#{aloha.$aloha-prefix}badge-border-radius: #{$a_badge_border_radius};
16
+ --#{aloha.$aloha-prefix}badge_padding_x: #{$a_badge_padding_x};
17
+ --#{aloha.$aloha-prefix}badge_padding_y: #{$a_badge_padding_y};
18
+ --#{aloha.$aloha-prefix}badge_font_size: #{$a_badge_font_size};
19
+ --#{aloha.$aloha-prefix}badge_font_weight: #{$a_badge_font_weight};
20
+ --#{aloha.$aloha-prefix}badge_color: #{$a_badge_color};
21
+ --#{aloha.$aloha-prefix}badge_bg: #{$a_badge_bg};
22
+ --#{aloha.$aloha-prefix}badge_border_radius: #{$a_badge_border_radius};
23
23
 
24
24
  display: inline-block;
25
- padding: var(--#{aloha.$aloha-prefix}badge-padding-y) var(--#{aloha.$aloha-prefix}badge-padding-x);
26
- font-size: var(--#{aloha.$aloha-prefix}badge-font-size);
27
- font-weight: var(--#{aloha.$aloha-prefix}badge-font-weight);
25
+ padding: var(--#{aloha.$aloha-prefix}badge_padding_y) var(--#{aloha.$aloha-prefix}badge_padding_x);
26
+ font-size: var(--#{aloha.$aloha-prefix}badge_font_size);
27
+ font-weight: var(--#{aloha.$aloha-prefix}badge_font_weight);
28
28
  line-height: 1;
29
- color: var(--#{aloha.$aloha-prefix}badge-color);
30
- background-color: var(--#{aloha.$aloha-prefix}badge-bg);
29
+ color: var(--#{aloha.$aloha-prefix}badge_color);
30
+ background-color: var(--#{aloha.$aloha-prefix}badge_bg);
31
31
  text-align: center;
32
32
  white-space: nowrap;
33
33
  vertical-align: baseline;
34
- border-radius: var(--#{aloha.$aloha-prefix}badge-border-radius);
34
+ border-radius: var(--#{aloha.$aloha-prefix}badge_border_radius);
35
35
  }
36
36
 
37
37
  .#{aloha.$aloha-prefix}pill_rounded {
@@ -40,7 +40,7 @@ $a_badge_border_radius: var(--#{aloha.$aloha-prefix}border_radius)
40
40
 
41
41
  @each $state in map.keys(color_utils.$a_theme_colors) {
42
42
  .#{aloha.$aloha-prefix}badge_#{$state} {
43
- --#{aloha.$aloha-prefix}badge-color: var(--a_color_#{$state}_text_emphasis);
44
- --#{aloha.$aloha-prefix}badge-bg: var(--a_color_#{$state}_bg_subtle);
43
+ --#{aloha.$aloha-prefix}badge_color: var(--a_color_#{$state}_text_emphasis);
44
+ --#{aloha.$aloha-prefix}badge_bg: var(--a_color_#{$state}_bg_subtle);
45
45
  }
46
46
  }