colors: add text shades

styleguide/assets/style/base.css

@@ -61,6 +61,10 @@
   --color-dark-shade-2: var(--color-neutral-800);
   --color-dark-shade-3: var(--color-neutral-700);
   --color-dark-shade-4: var(--color-neutral-600);
+  --color-dark-text-1: var(--color-neutral-200);
+  --color-dark-text-2: var(--color-neutral-300);
+  --color-dark-text-3: var(--color-neutral-400);
+  --color-dark-text-4: var(--color-neutral-500);
   --color-dark-primary: var(--color-argon-400);
   --color-dark-secondary: var(--color-krypton-300);
   --color-dark-error: var(--color-red-500);
@@ -74,6 +78,10 @@
   --color-light-shade-2: var(--color-neutral-200);
   --color-light-shade-3: var(--color-neutral-300);
   --color-light-shade-4: var(--color-neutral-400);
+  --color-light-text-1: var(--color-neutral-800);
+  --color-light-text-2: var(--color-neutral-700);
+  --color-light-text-3: var(--color-neutral-600);
+  --color-light-text-4: var(--color-neutral-500);
   --color-light-primary: var(--color-argon-600);
   --color-light-secondary: var(--color-krypton-500);
   --color-light-error: var(--color-red-600);

styleguide/assets/style/base.scss

@@ -72,6 +72,10 @@ $mobile-navigation-height: 4rem;
   --color-dark-shade-2: var(--color-neutral-800);
   --color-dark-shade-3: var(--color-neutral-700);
   --color-dark-shade-4: var(--color-neutral-600);
+  --color-dark-text-1: var(--color-neutral-200);
+  --color-dark-text-2: var(--color-neutral-300);
+  --color-dark-text-3: var(--color-neutral-400);
+  --color-dark-text-4: var(--color-neutral-500);
   --color-dark-primary: var(--color-argon-400);
   --color-dark-secondary: var(--color-krypton-300);
   --color-dark-error: var(--color-red-500);
@@ -86,6 +90,10 @@ $mobile-navigation-height: 4rem;
   --color-light-shade-2: var(--color-neutral-200);
   --color-light-shade-3: var(--color-neutral-300);
   --color-light-shade-4: var(--color-neutral-400);
+  --color-light-text-1: var(--color-neutral-800);
+  --color-light-text-2: var(--color-neutral-700);
+  --color-light-text-3: var(--color-neutral-600);
+  --color-light-text-4: var(--color-neutral-500);
   --color-light-primary: var(--color-argon-600);
   --color-light-secondary: var(--color-krypton-500);
   --color-light-error: var(--color-red-600);

styleguide/assets/style/styleguide.css

@@ -61,6 +61,10 @@
   --color-dark-shade-2: var(--color-neutral-800);
   --color-dark-shade-3: var(--color-neutral-700);
   --color-dark-shade-4: var(--color-neutral-600);
+  --color-dark-text-1: var(--color-neutral-200);
+  --color-dark-text-2: var(--color-neutral-300);
+  --color-dark-text-3: var(--color-neutral-400);
+  --color-dark-text-4: var(--color-neutral-500);
   --color-dark-primary: var(--color-argon-400);
   --color-dark-secondary: var(--color-krypton-300);
   --color-dark-error: var(--color-red-500);
@@ -74,6 +78,10 @@
   --color-light-shade-2: var(--color-neutral-200);
   --color-light-shade-3: var(--color-neutral-300);
   --color-light-shade-4: var(--color-neutral-400);
+  --color-light-text-1: var(--color-neutral-800);
+  --color-light-text-2: var(--color-neutral-700);
+  --color-light-text-3: var(--color-neutral-600);
+  --color-light-text-4: var(--color-neutral-500);
   --color-light-primary: var(--color-argon-600);
   --color-light-secondary: var(--color-krypton-500);
   --color-light-error: var(--color-red-600);

styleguide/assets/style/styleguide.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["base.scss","icons.scss","styleguide.scss"],"names":[],"mappings":"AASA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAiEF;EA7DE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;AAAA;;AAGA;EACE;;AAGF;EACE;;;AAuCJ;EAlCE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;AAAA;;AAGA;EACE;;AAGF;EACE;;;AAYJ;AAAA;EAtCE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;AAAA;;AAGA;AAAA;EACE;;AAGF;AAAA;EACE;;;AAiBJ;EA1EE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;AAAA;;AAGA;EACE;;AAGF;EACE;;;AAoDJ;EACE;IA/EA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IAEA;IACA;IACA;IACA;IACA;AAAA;;EAGA;IACE;;EAGF;IACE;;;AA4DJ;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAKF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAaA;EACA;EACA;;;AAIA;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;;AAIJ;AAAA;EAEE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;AAGA;AAAA;EAEE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA,KAnZuB;EAoZvB;;AAEA;EALF;IAMI;;;AAGF;EACE;EACA;EACA;EACA;;AAMA;EACE;;AAGF;EACE;;;AAMR;EACE;EACA;;AAEA;EAGE;EACA;;AAGF;EACE;EACA;;AAEA;EAGE;EACA;;;AAKN;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;;;AAKN;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;;ACteJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;;AC9CJ;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EANF;IAOI,YFhBqB;;;AEmBvB;EACE;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAIJ;EACE;EACA;EACA;EACA;;AAEA;EANF;IAOI;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,QFxDqB;EEyDrB;;AAEA;EAdF;IAeI;IACA;IACA;IACA;IACA;;EAEA;IACE;;;AAIJ;EA1BF;IA2BI;;EAGE;IACE;;EAIJ;IACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAKA;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;;AAEA;EAIE;;AAIJ;EAEE;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EAIE;;AAIJ;EACE;EACA;;AAEA;EAIE;;AAON;EACE;EACA;EACA;EACA;;AAIJ;EACE;EACA;;AAEA;EACE;EACA;;AAMR;EACE;EACA;EACA;;AAEA;EALF;IAMI;IACA;;;;AAQN;EAKE;EACA;;AAGF;EAEE;EACA;;AAGF;EAIE;EACA;;;AAIJ;AAAA;EAEE;EACA;;;AAGF;EACE;EACA;;AAEA;EACE;;AAGF;EARF;IASI;;EAEA;IACE;;;;AAKN;EACE;EACA;;AAEA;EACE;;AAGF;EARF;IASI;IACA;;EAEA;IACE;;;;AAOJ;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;;AAMR;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA","file":"styleguide.css"}
+{"version":3,"sourceRoot":"","sources":["base.scss","icons.scss","styleguide.scss"],"names":[],"mappings":"AASA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAiEF;EA7DE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;AAAA;;AAGA;EACE;;AAGF;EACE;;;AAuCJ;EAlCE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;AAAA;;AAGA;EACE;;AAGF;EACE;;;AAYJ;AAAA;EAtCE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;AAAA;;AAGA;AAAA;EACE;;AAGF;AAAA;EACE;;;AAiBJ;EA1EE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;AAAA;;AAGA;EACE;;AAGF;EACE;;;AAoDJ;EACE;IA/EA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IAEA;IACA;IACA;IACA;IACA;AAAA;;EAGA;IACE;;EAGF;IACE;;;AA4DJ;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAKF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAaA;EACA;EACA;;;AAIA;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;;AAIJ;AAAA;EAEE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;AAGA;AAAA;EAEE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA,KA3ZuB;EA4ZvB;;AAEA;EALF;IAMI;;;AAGF;EACE;EACA;EACA;EACA;;AAMA;EACE;;AAGF;EACE;;;AAMR;EACE;EACA;;AAEA;EAGE;EACA;;AAGF;EACE;EACA;;AAEA;EAGE;EACA;;;AAKN;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;;;AAKN;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AC9eJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;;AC9CJ;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EANF;IAOI,YFhBqB;;;AEmBvB;EACE;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAIJ;EACE;EACA;EACA;EACA;;AAEA;EANF;IAOI;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,QFxDqB;EEyDrB;;AAEA;EAdF;IAeI;IACA;IACA;IACA;IACA;;EAEA;IACE;;;AAIJ;EA1BF;IA2BI;;EAGE;IACE;;EAIJ;IACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAKA;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;;AAEA;EAIE;;AAIJ;EAEE;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EAIE;;AAIJ;EACE;EACA;;AAEA;EAIE;;AAON;EACE;EACA;EACA;EACA;;AAIJ;EACE;EACA;;AAEA;EACE;EACA;;AAMR;EACE;EACA;EACA;;AAEA;EALF;IAMI;IACA;;;;AAQN;EAKE;EACA;;AAGF;EAEE;EACA;;AAGF;EAIE;EACA;;;AAIJ;AAAA;EAEE;EACA;;;AAGF;EACE;EACA;;AAEA;EACE;;AAGF;EARF;IASI;;EAEA;IACE;;;;AAKN;EACE;EACA;;AAEA;EACE;;AAGF;EARF;IASI;IACA;;EAEA;IACE;;;;AAOJ;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;;AAMR;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA","file":"styleguide.css"}

styleguide/colors/index.html

@@ -61,7 +61,7 @@
                     </section>
 
                     <section aria-labelledby="label-dark-shades">
-                        <span id="label-dark-shades">Shades</span>
+                        <span id="label-dark-shades">Background Shades</span>
 
                         <div aria-labelledby="label-dark-swatch-shade-1" class="swatch-container">
                             <div class="swatch" style="--swatch-color: var(--color-dark-shade-1)"></div>
@@ -84,6 +84,30 @@
                         </div>
                     </section>
 
+                    <section aria-labelledby="label-dark-texts">
+                        <span id="label-dark-texts">Text Shades</span>
+
+                        <div aria-labelledby="label-dark-swatch-text-1" class="swatch-container">
+                            <div class="swatch" style="--swatch-color: var(--color-dark-text-1)"></div>
+                            <span id="label-dark-swatch-text-1">#b2a0cb</span>
+                        </div>
+
+                        <div aria-labelledby="label-dark-swatch-text-2" class="swatch-container">
+                            <div class="swatch" style="--swatch-color: var(--color-dark-text-2)"></div>
+                            <span id="label-dark-swatch-text-2">#957eb5</span>
+                        </div>
+
+                        <div aria-labelledby="label-dark-swatch-text-3" class="swatch-container">
+                            <div class="swatch" style="--swatch-color: var(--color-dark-text-3)"></div>
+                            <span id="label-dark-swatch-text-3">#7a60a0</span>
+                        </div>
+
+                        <div aria-labelledby="label-dark-swatch-text-4" class="swatch-container">
+                            <div class="swatch" style="--swatch-color: var(--color-dark-text-4)"></div>
+                            <span id="label-dark-swatch-text-4">#61468b</span>
+                        </div>
+                    </section>
+
                     <section aria-labelledby="label-dark-primary-secondary">
                         <span id="label-dark-primary-secondary">Primary &amp; Secondary</span>
 
@@ -150,7 +174,7 @@
                     </section>
 
                     <section aria-labelledby="label-light-shades">
-                        <span id="label-light-shades">Shades</span>
+                        <span id="label-light-shades">Background Shades</span>
 
                         <div aria-labelledby="label-light-swatch-shade-1" class="swatch-container">
                             <div class="swatch" style="--swatch-color: var(--color-light-shade-1)"></div>
@@ -173,6 +197,30 @@
                         </div>
                     </section>
 
+                    <section aria-labelledby="label-light-texts">
+                        <span id="label-light-texts">Text Shades</span>
+
+                        <div aria-labelledby="label-light-swatch-text-1" class="swatch-container">
+                            <div class="swatch" style="--swatch-color: var(--color-light-text-1)"></div>
+                            <span id="label-light-swatch-text-1">#26114b</span>
+                        </div>
+
+                        <div aria-labelledby="label-light-swatch-text-2" class="swatch-container">
+                            <div class="swatch" style="--swatch-color: var(--color-light-text-2)"></div>
+                            <span id="label-light-swatch-text-2">#371f60</span>
+                        </div>
+
+                        <div aria-labelledby="label-light-swatch-text-3" class="swatch-container">
+                            <div class="swatch" style="--swatch-color: var(--color-light-text-3)"></div>
+                            <span id="label-light-swatch-text-3">#4b3176</span>
+                        </div>
+
+                        <div aria-labelledby="label-light-swatch-text-4" class="swatch-container">
+                            <div class="swatch" style="--swatch-color: var(--color-light-text-4)"></div>
+                            <span id="label-light-swatch-text-4">#61468b</span>
+                        </div>
+                    </section>
+
                     <section aria-labelledby="label-light-primary-secondary">
                         <span id="label-light-primary-secondary">Primary &amp; Secondary</span>