Rename semantic_color_types to suffixes

src/styles/data.js

@@ -4,6 +4,3 @@
 export const hues = ['red', 'yellow', 'green', 'cyan', 'blue', 'indigo', 'purple', 'pink', 'gray'];
 export const tints = ['05', '10', '20', '30', '40', '50', '60', '70', '80', '90', '95'];
 export const variants = ['neutral', 'brand', 'success', 'warning', 'danger'];
-export const roles = ['fill', 'border', 'on'];
-export const attention_levels = ['loud', 'normal', 'quiet'];
-export const semantic_color_types = roles.map(layer => attention_levels.map(priority => layer + '-' + priority)).flat();

src/styles/utilities/variants.css.njk

@@ -1,8 +1,14 @@
+{% set suffixes = [
+  'fill-loud', 'fill-normal', 'fill-quiet',
+  'border-loud', 'border-normal', 'border-quiet',
+  'on-loud', 'on-normal', 'on-quiet'
+] -%}
+
 /**
  * Register color properties so that the space toggle hack can work.
  */
-{% for type in semantic_color_types %}
-@property --wa-color-{{ type }} {
+{% for suffix in suffixes %}
+@property --wa-color-{{ suffix }} {
   syntax: '<color>';
   inherits: true;
   initial-value: transparent;
@@ -15,15 +21,15 @@
  */
 :host(wa-button), .wa-button, button, input[type='button'], input[type='submit'],
 :host(wa-tag), .wa-tag {
-  {%- for type in semantic_color_types %}
-  --wa-color-{{ type }}: var(--wa-no-variant, var(--wa-color-neutral-{{ type }}));
+  {%- for suffix in suffixes %}
+  --wa-color-{{ suffix }}: var(--wa-no-variant, var(--wa-color-neutral-{{ suffix }}));
   {%- endfor %}
 }
 
 :host(wa-callout), .wa-callout,
 :host(wa-badge), .wa-badge {
-  {%- for type in semantic_color_types %}
-  --wa-color-{{ type }}: var(--wa-no-variant, var(--wa-color-brand-{{ type }}));
+  {%- for suffix in suffixes %}
+  --wa-color-{{ suffix }}: var(--wa-no-variant, var(--wa-color-brand-{{ suffix }}));
   {%- endfor %}
 }
 
@@ -34,8 +40,8 @@
 {{ ':root,' if variant === 'neutral' }}
 .wa-{{ variant }},
 :host([variant='{{ variant }}']) {
-  {%- for type in semantic_color_types %}
-  --wa-color-{{ type }}: var(--wa-color-{{ variant }}-{{ type }});
+  {%- for suffix in suffixes %}
+  --wa-color-{{ suffix }}: var(--wa-color-{{ variant }}-{{ suffix }});
   {%- endfor %}
 }
 {%- endfor %}