feat(colors): update purple colors (#633)

* feat(colors): update purple color stops

* feat(colors): map old stops with corresponding new stops

* feat(colors): update colors table

* replace older color stops

* replace primary color

* replace purple-700 -> purple-500

* update purple-300 hex

BREAKING CHANGE: Removed purple-700 and purple-800 color stops

docs/.vuepress/baseComponents/BaseColor.vue

@@ -24,8 +24,13 @@
         <br>
         <span class="d-fc-dark-lighter">#{{ s.hex }}</span>
       </div>
-      <div class="d-fs11 d-lh2 d-fw-bold d-bar-sm d-px4 py2">
-        {{ s.contrast }}
+      <div class="d-d-flex d-fd-column d-fs11 d-lh2 d-fw-bold d-bar-sm d-px4 py2">
+        <div class="">
+          {{ s.contrast }}
+        </div>
+        <div v-if="s.darkContrast" class="d-fc-dark">
+          {{ s.darkContrast }}
+        </div>
       </div>
     </div>
   </aside>

docs/.vuepress/config.ts

@@ -61,8 +61,8 @@ export default defineUserConfig({
     ['link', {rel: "apple-touch-icon", sizes: "180x180", href: baseURL + "assets/images/favicons/apple-touch-icon.png"}],
     ['link', {rel: "icon", href: baseURL + "assets/images/favicons/favicon.svg"}],
     ['link', {rel: "manifest", href: baseURL + "assets/images/favicons/site.webmanifest"}],
-    ['link', {rel: "mask-icon", href: baseURL + "assets/images/favicons/safari-pinned-tab.svg", color: "#6C3DFF"}],
-    ['meta', {name: "msapplication-TileColor", content: "#6C3DFF"}],
+    ['link', {rel: "mask-icon", href: baseURL + "assets/images/favicons/safari-pinned-tab.svg", color: "#7C52FF"}],
+    ['meta', {name: "msapplication-TileColor", content: "#7C52FF"}],
     ['meta', {name: "theme-color", content: "#ffffff"}],
 
     // Social

docs/.vuepress/theme/components/Home.vue

@@ -16,7 +16,7 @@
           >
             <img
               alt="Dialtone CSS version number"
-              src="https://img.shields.io/github/package-json/v/dialpad/dialtone?color=A687FF&label=CSS"
+              src="https://img.shields.io/github/package-json/v/dialpad/dialtone?color=AB7EFF&label=CSS"
             >
           </a>
           <a
@@ -26,7 +26,7 @@
             <img
               id="dialtone-vue-badge"
               alt="Dialtone Vue version number"
-              :src="`https://img.shields.io/badge/Vue-v${version}-A687FF`"
+              :src="`https://img.shields.io/badge/Vue-v${version}-AB7EFF`"
             >
           </a>
         </div>

docs/_data/avatar.json

@@ -80,6 +80,11 @@
       "applies": "d-avatar",
       "description": "Applies purple-300 color."
     },
+    {
+      "class": "d-avatar--purple-400",
+      "applies": "d-avatar",
+      "description": "Applies purple-400 color."
+    },
     {
       "class": "d-avatar--purple-500",
       "applies": "d-avatar",
@@ -122,8 +127,8 @@
     "d-avatar--pink-600",
     "d-avatar--purple-200",
     "d-avatar--purple-300",
+    "d-avatar--purple-400",
     "d-avatar--purple-500",
-    "d-avatar--purple-600",
     "d-avatar--yellow-200",
     "d-avatar--yellow-300",
     "d-avatar--yellow-400",

docs/_data/badge.json

@@ -51,14 +51,14 @@
       "description": "Styles badge with purple-300."
     },
     {
-      "class": "d-badge--purple-500",
+      "class": "d-badge--purple-400",
       "applies": "d-badge",
-      "description": "Styles badge with purple-500."
+      "description": "Styles badge with purple-400."
     },
     {
-      "class": "d-badge--purple-700",
+      "class": "d-badge--purple-500",
       "applies": "d-badge",
-      "description": "Styles badge with purple-700."
+      "description": "Styles badge with purple-500."
     },
     {
       "class": "d-badge--red-500",

docs/_data/colors.json

@@ -4,58 +4,45 @@
     "stops": [
       {
         "stop": "100",
-        "hex": "ECE1FF",
+        "hex": "EEE5FF",
         "copy": "dark",
-        "contrast": "AAA 15.58",
+        "contrast": "AAA 7.81",
         "primary": "no"
       },
       {
         "stop": "200",
-        "hex": "D1C0FF",
+        "hex": "D3BCFF",
         "copy": "dark",
-        "contrast": "AAA 11.79",
+        "contrast": "AAA 11.35",
         "primary": "no"
       },
       {
         "stop": "300",
-        "hex": "A687FF",
+        "hex": "AB7EFF",
         "copy": "dark",
-        "contrast": "AA 6.99",
+        "contrast": "AA 6.54",
         "primary": "no"
       },
       {
         "stop": "400",
-        "hex": "8B65FF",
-        "copy": "dark",
-        "contrast": "AA 5.01",
-        "primary": "no"
-      },
-      {
-        "stop": "500",
-        "hex": "6C3DFF",
+        "hex": "7C52FF",
         "copy": "white",
-        "contrast": "AA 5.60",
+        "contrast": "AA 4.65",
+        "darkContrast": "AA 4.11",
         "primary": "yes"
       },
       {
-        "stop": "600",
-        "hex": "3A1C95",
-        "copy": "white",
-        "contrast": "AAA 11.79",
-        "primary": "no"
-      },
-      {
-        "stop": "700",
-        "hex": "2A1173",
+        "stop": "500",
+        "hex": "3A1D95",
         "copy": "white",
-        "contrast": "AAA 14.72",
+        "contrast": "AA 11.73",
         "primary": "no"
       },
       {
-        "stop": "800",
-        "hex": "160645",
+        "stop": "600",
+        "hex": "10022C",
         "copy": "white",
-        "contrast": "AAA 18.32",
+        "contrast": "AAA 19.67",
         "primary": "no"
       }
     ]

docs/about/contributing.md

@@ -79,7 +79,7 @@ If you would like to verify your final output svg file run `npm run build` and l
 ### A note on theming
 
 Spot Illustrations allow for theming, meaning the primary color of the illustration will change when the theme changes.
-If your spot illustration svg contains a fill or a stroke with the dialtone primary color `#6C3DFF`
+If your spot illustration svg contains a fill or a stroke with the dialtone primary color `#7C52FF`
 then it will automatically change when the theme's primary color changes.
 
 You may often wish to derive lighter or darker colors based on the primary color when making a spot illustration.

docs/assets/less/hljs-dialpad.less

@@ -28,5 +28,5 @@ div[class*=language-] {
 code {
   --bgo: 50% !important;
   background-color: @purple-100;
-  color: @purple-500;
+  color: @purple-400;
 }

docs/assets/less/overrides.less

@@ -15,7 +15,7 @@ body {
 }
 
 :root {
-  --c-brand: @purple-500;
+  --c-brand: @purple-400;
   --navbar-height: 6.4rem;
 }