diff --git a/docs/.vuepress/baseComponents/BaseColor.vue b/docs/.vuepress/baseComponents/BaseColor.vue index 22f60dda5c..e5339d728a 100644 --- a/docs/.vuepress/baseComponents/BaseColor.vue +++ b/docs/.vuepress/baseComponents/BaseColor.vue @@ -24,8 +24,13 @@
#{{ s.hex }} -
- {{ s.contrast }} +
+
+ {{ s.contrast }} +
+
+ {{ s.darkContrast }} +
diff --git a/docs/.vuepress/config.ts b/docs/.vuepress/config.ts index 88da4bb19e..9c54af8cf4 100644 --- a/docs/.vuepress/config.ts +++ b/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 diff --git a/docs/.vuepress/public/assets/images/dialpad-logo.svg b/docs/.vuepress/public/assets/images/dialpad-logo.svg index cc025035fa..8c8806f811 100644 --- a/docs/.vuepress/public/assets/images/dialpad-logo.svg +++ b/docs/.vuepress/public/assets/images/dialpad-logo.svg @@ -1,5 +1,5 @@ diff --git a/docs/.vuepress/public/assets/images/favicons/favicon.svg b/docs/.vuepress/public/assets/images/favicons/favicon.svg index 72eda80d10..09ac059741 100644 --- a/docs/.vuepress/public/assets/images/favicons/favicon.svg +++ b/docs/.vuepress/public/assets/images/favicons/favicon.svg @@ -1,6 +1,6 @@ diff --git a/docs/.vuepress/public/assets/images/home-components.svg b/docs/.vuepress/public/assets/images/home-components.svg index c0df6f520f..24e8b46678 100644 --- a/docs/.vuepress/public/assets/images/home-components.svg +++ b/docs/.vuepress/public/assets/images/home-components.svg @@ -1,17 +1,17 @@ - - - - - - - - - - - - - - + + + + + + + + + + + + + + diff --git a/docs/.vuepress/public/assets/images/home-design.svg b/docs/.vuepress/public/assets/images/home-design.svg index f255ecb1dd..e31ba5a934 100644 --- a/docs/.vuepress/public/assets/images/home-design.svg +++ b/docs/.vuepress/public/assets/images/home-design.svg @@ -1,9 +1,9 @@ - + - - + + diff --git a/docs/.vuepress/public/assets/images/home-utilities.svg b/docs/.vuepress/public/assets/images/home-utilities.svg index c75edeae75..616614bcf8 100644 --- a/docs/.vuepress/public/assets/images/home-utilities.svg +++ b/docs/.vuepress/public/assets/images/home-utilities.svg @@ -1,15 +1,15 @@ - - + + - - - - - - - - - + + + + + + + + + diff --git a/docs/.vuepress/theme/components/Home.vue b/docs/.vuepress/theme/components/Home.vue index 4e6ea65158..491f72c57f 100644 --- a/docs/.vuepress/theme/components/Home.vue +++ b/docs/.vuepress/theme/components/Home.vue @@ -16,7 +16,7 @@ > Dialtone CSS version number diff --git a/docs/_data/avatar.json b/docs/_data/avatar.json index 995256cb49..6c59109993 100644 --- a/docs/_data/avatar.json +++ b/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", diff --git a/docs/_data/badge.json b/docs/_data/badge.json index 676d4ad7d5..187ecdbded 100644 --- a/docs/_data/badge.json +++ b/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", diff --git a/docs/_data/colors.json b/docs/_data/colors.json index c2814408ba..44986223a7 100644 --- a/docs/_data/colors.json +++ b/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" } ] diff --git a/docs/about/contributing.md b/docs/about/contributing.md index befe8911e2..111e738a0c 100644 --- a/docs/about/contributing.md +++ b/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. diff --git a/docs/assets/less/hljs-dialpad.less b/docs/assets/less/hljs-dialpad.less index b5a59e16d6..3b9566252c 100644 --- a/docs/assets/less/hljs-dialpad.less +++ b/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; } diff --git a/docs/assets/less/overrides.less b/docs/assets/less/overrides.less index 34cf0fe259..a4e2aafce5 100644 --- a/docs/assets/less/overrides.less +++ b/docs/assets/less/overrides.less @@ -15,7 +15,7 @@ body { } :root { - --c-brand: @purple-500; + --c-brand: @purple-400; --navbar-height: 6.4rem; } diff --git a/docs/components/avatar.md b/docs/components/avatar.md index 5cdd5b0d2f..f4573df75f 100644 --- a/docs/components/avatar.md +++ b/docs/components/avatar.md @@ -7,7 +7,7 @@ prev: link: /utilities/typography/word-break --- -
+
@@ -20,19 +20,19 @@ prev: ### Icons -
+
```html -
...
+
...
``` ### Images -
+
@@ -61,9 +61,9 @@ prev:
-
DP
-
DP
-
DP
+
DP
+
DP
+
DP
 diff --git a/docs/components/badge.md b/docs/components/badge.md index e7a9bee0f5..c97206b6cd 100644 --- a/docs/components/badge.md +++ b/docs/components/badge.md @@ -59,8 +59,8 @@ storybook_url: https://vue.dialpad.design/?path=/story/components-badge--default ... ... ... +... ... -... ... ... ... diff --git a/docs/utilities/interactivity/cursor.md b/docs/utilities/interactivity/cursor.md index fdb11dc018..5e35b8a376 100644 --- a/docs/utilities/interactivity/cursor.md +++ b/docs/utilities/interactivity/cursor.md @@ -47,7 +47,7 @@ prev: