@citizenplane/pimp 18.6.2 → 18.8.0

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@citizenplane/pimp",
-  "version": "18.6.2",
+  "version": "18.8.0",
   "scripts": {
     "dev": "storybook dev -p 8081",
     "build-storybook": "storybook build --output-dir ./docs",
     "build": "vite build && vite build --config vite.resolver.config.cjs",
-    "lint": "eslint . --color",
-    "lint:write": "eslint . --color --fix",
+    "lint": "biome check .",
+    "lint:fix": "biome check --write .",
     "lint:style": "stylelint \"**/*.{css,scss,vue}\"",
-    "lint:style:write": "stylelint \"**/*.{css,scss,vue}\" --fix",
-    "format": "prettier . --write",
+    "lint:style:fix": "stylelint \"**/*.{css,scss,vue}\" --fix",
+    "format": "biome format --write .",
     "test": "jest tests",
     "types": "vue-tsc --noEmit",
     "commitlint": "commitlint --edit",
@@ -47,6 +47,7 @@
     "unplugin-vue-components": ">=0.26.0"
   },
   "dependencies": {
+    "@vueuse/core": "^14.3.0",
     "feather-icons": "^4.29.2",
     "floating-vue": "^5.2.2",
     "luxon": "^3.7.2",
@@ -60,19 +61,15 @@
   },
   "devDependencies": {
     "@babel/core": "^7.28.6",
+    "@biomejs/biome": "2.4.16",
     "@commitlint/cli": "20.5.3",
-    "@eslint/eslintrc": "^3.3.3",
-    "@eslint/js": "^10.0.1",
     "@storybook/addon-docs": "^10.3.6",
     "@storybook/addon-onboarding": "^10.3.6",
     "@storybook/addon-vitest": "^10.3.6",
     "@storybook/preset-scss": "^1.0.3",
     "@storybook/vue3-vite": "^10.3.6",
-    "@stylistic/eslint-plugin": "^5.7.1",
     "@types/feather-icons": "^4.29.4",
     "@types/vue-tel-input": "^9.7.91",
-    "@typescript-eslint/eslint-plugin": "^8.59.2",
-    "@typescript-eslint/parser": "^8.59.2",
     "@vitejs/plugin-vue": "^6.0.3",
     "@vitest/browser": "^4.0.18",
     "@vitest/coverage-v8": "^4.0.18",
@@ -81,35 +78,28 @@
     "@vue/vue3-jest": "^29.2.6",
     "babel-core": "^7.0.0-bridge.0",
     "commitlint-config-gitmoji": "2.3.1",
-    "eslint": "^10.3.0",
-    "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-perfectionist": "^5.4.0",
-    "eslint-plugin-prettier": "^5.5.5",
-    "eslint-plugin-storybook": "^10.3.6",
-    "eslint-plugin-vue": "^10.9.1",
-    "globals": "^17.6.0",
     "husky": "^9.1.7",
     "jest": "~29.7.0",
     "jest-environment-jsdom": "^30.2.0",
     "lint-staged": "^17.0.0",
     "playwright": "^1.58.0",
-    "prettier": "^3.6.2",
     "sass": "~1.99.0",
     "sass-loader": "^16.0.6",
     "storybook": "^10.3.5",
+    "stylelint": "16.26.1",
+    "stylelint-config-html": "1.1.0",
+    "stylelint-config-idiomatic-order": "10.0.0",
+    "stylelint-config-recommended-scss": "16.0.2",
+    "stylelint-config-recommended-vue": "1.6.1",
+    "stylelint-config-standard-scss": "16.0.0",
+    "stylelint-order": "7.0.1",
     "ts-jest": "^29.4.6",
-    "typescript-eslint": "^8.59.2",
     "unplugin-vue-components": "^32.0.0",
     "vite": "^7.3.2",
     "vite-plugin-dts": "^5.0.0",
     "vitest": "^4.0.18",
     "vue-tsc": "3.2.8"
   },
-  "eslintConfig": {
-    "extends": [
-      "plugin:storybook/recommended"
-    ]
-  },
   "engines": {
     "npm": "11",
     "node": "24"

package/src/assets/css/base.css

@@ -3,16 +3,16 @@
 html {
   /* border-box box model allows us to add padding and border to our elements without increasing their size */
   box-sizing: border-box;
+  color: var(--cp-text-primary);
+
   /* A system font stack so things load nice and quick! */
   font-family:
-    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji',
-    'Segoe UI Emoji', 'Segoe UI Symbol';
+    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji",
+    "Segoe UI Emoji", "Segoe UI Symbol";
   font-size: 100%;
-  color: var(--cp-text-primary);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  -ms-text-size-adjust: 100%;
-  -webkit-text-size-adjust: 100%;
+  text-size-adjust: 100%;
 }
 
 /*
@@ -20,12 +20,12 @@ html {
   Apparently this is a bit better than applying box-sizing: border-box; directly to the * selector
 */
 *,
-*:before,
-*:after {
+*::before,
+*::after {
   box-sizing: inherit;
   margin: 0;
-  outline: none;
   font-family: inherit;
+  outline: none;
 }
 
 body {
@@ -34,8 +34,8 @@ body {
 
 /* Secondary Elements */
 button {
-  border-style: none;
   padding: 0;
+  border-style: none;
   background-color: transparent;
 
   &:hover {
@@ -49,8 +49,8 @@ dialog {
 
 ul,
 li {
-  margin: 0;
   padding: 0;
+  margin: 0;
   list-style: none;
 }
 
@@ -59,22 +59,27 @@ svg {
 }
 
 input {
-  font-size: inherit;
   border: none;
+  font-size: inherit;
 }
 
 /* Disable default shadows globally */
 .v-popper__popper,
 .v-popper__inner {
+  /* biome-ignore lint: noImportantStyle */
   border: none !important;
+
+  /* biome-ignore lint: noImportantStyle */
   filter: none !important;
 }
 
 .v-popper__inner {
+  /* biome-ignore lint: noImportantStyle */
   box-shadow: var(--cp-shadows-overlay) !important;
 }
 
 .v-popper__popper {
+  /* biome-ignore lint: noImportantStyle */
   box-shadow: none !important;
 }
 
@@ -84,6 +89,7 @@ input {
     input,
     textarea,
     select {
+      /* biome-ignore lint: noImportantStyle */
       font-size: var(--cp-text-size-md) !important;
     }
   }

package/src/assets/css/colors.css

@@ -1,7 +1,6 @@
 :root {
-  --cp-colors-black: #000000;
-  --cp-colors-white: #ffffff;
-
+  --cp-colors-black: #000;
+  --cp-colors-white: #fff;
   --cp-colors-blue-50: #f6faff;
   --cp-colors-blue-100: #e5efff;
   --cp-colors-blue-200: #bdd6ff;
@@ -13,7 +12,6 @@
   --cp-colors-blue-800: #00286a;
   --cp-colors-blue-900: #001e53;
   --cp-colors-blue-1000: #00133a;
-
   --cp-colors-green-50: #ecfff4;
   --cp-colors-green-100: #dcf9e8;
   --cp-colors-green-200: #98eabe;
@@ -25,7 +23,6 @@
   --cp-colors-green-800: #003822;
   --cp-colors-green-900: #002b19;
   --cp-colors-green-1000: #001c0f;
-
   --cp-colors-grey-50: #f9f9fd;
   --cp-colors-grey-100: #f2f3fa;
   --cp-colors-grey-200: #e9eaf6;
@@ -37,7 +34,6 @@
   --cp-colors-grey-800: #36384d;
   --cp-colors-grey-900: #2b2c3e;
   --cp-colors-grey-1000: #20212f;
-
   --cp-colors-magenta-50: #fff7f9;
   --cp-colors-magenta-100: #ffe7ed;
   --cp-colors-magenta-200: #ffc1d2;
@@ -49,7 +45,6 @@
   --cp-colors-magenta-800: #59002c;
   --cp-colors-magenta-900: #450020;
   --cp-colors-magenta-1000: #300015;
-
   --cp-colors-orange-50: #fff8f2;
   --cp-colors-orange-100: #ffeddf;
   --cp-colors-orange-200: #fec89e;
@@ -61,7 +56,6 @@
   --cp-colors-orange-800: #472400;
   --cp-colors-orange-900: #371a00;
   --cp-colors-orange-1000: #251000;
-
   --cp-colors-pink-50: #fff6ff;
   --cp-colors-pink-100: #fce6fd;
   --cp-colors-pink-200: #f8bdfb;
@@ -73,7 +67,6 @@
   --cp-colors-pink-800: #4e0054;
   --cp-colors-pink-900: #3c0040;
   --cp-colors-pink-1000: #29002d;
-
   --cp-colors-red-50: #fff7f7;
   --cp-colors-red-100: #fce9e8;
   --cp-colors-red-200: #ffc3c2;
@@ -85,7 +78,6 @@
   --cp-colors-red-800: #5d0012;
   --cp-colors-red-900: #48000c;
   --cp-colors-red-1000: #320006;
-
   --cp-colors-accent-50: #f8f9ff;
   --cp-colors-accent-100: #eaecff;
   --cp-colors-accent-200: #ccd0ff;
@@ -97,7 +89,6 @@
   --cp-colors-accent-800: #2a0084;
   --cp-colors-accent-900: #1f0067;
   --cp-colors-accent-1000: #13004a;
-
   --cp-colors-yellow-50: #fefeea;
   --cp-colors-yellow-100: #fcfacc;
   --cp-colors-yellow-200: #f0df80;
@@ -109,15 +100,14 @@
   --cp-colors-yellow-800: #452600;
   --cp-colors-yellow-900: #351c00;
   --cp-colors-yellow-1000: #211300;
-
-  --cp-colors-grey-shadow-color-3: rgba(108, 110, 181, 0.03);
-  --cp-colors-grey-shadow-color-4: rgba(108, 110, 181, 0.04);
-  --cp-colors-grey-shadow-color-5: rgba(108, 110, 181, 0.05);
-  --cp-colors-grey-shadow-color-7-5: rgba(108, 110, 181, 0.075);
-  --cp-colors-grey-shadow-color-10: rgba(108, 110, 181, 0.1);
-  --cp-colors-grey-shadow-color-12-5: rgba(108, 110, 181, 0.125);
-  --cp-colors-grey-shadow-color-15: rgba(108, 110, 181, 0.15);
-  --cp-colors-grey-shadow-color-17-5: rgba(108, 110, 181, 0.175);
-  --cp-colors-grey-shadow-color-20: rgba(108, 110, 181, 0.2);
-  --cp-colors-grey-shadow-color-50: rgba(108, 110, 181, 0.5);
+  --cp-colors-grey-shadow-color-3: rgba(108, 110, 181, 3%);
+  --cp-colors-grey-shadow-color-4: rgba(108, 110, 181, 4%);
+  --cp-colors-grey-shadow-color-5: rgba(108, 110, 181, 5%);
+  --cp-colors-grey-shadow-color-7-5: rgba(108, 110, 181, 7.5%);
+  --cp-colors-grey-shadow-color-10: rgba(108, 110, 181, 10%);
+  --cp-colors-grey-shadow-color-12-5: rgba(108, 110, 181, 12.5%);
+  --cp-colors-grey-shadow-color-15: rgba(108, 110, 181, 15%);
+  --cp-colors-grey-shadow-color-17-5: rgba(108, 110, 181, 17.5%);
+  --cp-colors-grey-shadow-color-20: rgba(108, 110, 181, 20%);
+  --cp-colors-grey-shadow-color-50: rgba(108, 110, 181, 50%);
 }

package/src/assets/css/dimensions.css

@@ -1,3 +1,5 @@
+/* stylelint-disable */
+
 :root {
   --cp-dimensions-minus-0_25: -0.0625rem;
   --cp-dimensions-0: 0;
@@ -38,3 +40,5 @@
   --cp-dimensions-400: 100rem;
   --cp-dimensions-480: 120rem;
 }
+
+/* stylelint-enable */

package/src/assets/css/shadows.css

@@ -36,7 +36,6 @@
   --cp-drop-shadow-xl-offset-x: 0;
   --cp-drop-shadow-xl-offset-y: 13px;
   --cp-drop-shadow-xl-spread: -2px;
-
   --cp-drop-shadow-overlay-1-blur: 4px;
   --cp-drop-shadow-overlay-1-color: var(--cp-colors-grey-shadow-color-4);
   --cp-drop-shadow-overlay-1-offset-x: 0;
@@ -62,13 +61,11 @@
   --cp-drop-shadow-overlay-5-offset-x: 0;
   --cp-drop-shadow-overlay-5-offset-y: 0;
   --cp-drop-shadow-overlay-5-spread: 1px;
-
   --cp-drop-shadow-side-panel-blur: 60px;
   --cp-drop-shadow-side-panel-color: var(--cp-colors-grey-shadow-color-10);
   --cp-drop-shadow-side-panel-offset-x: 0;
   --cp-drop-shadow-side-panel-offset-y: 0;
   --cp-drop-shadow-side-panel-spread: 0;
-
   --cp-shadow-focus-ring-accent-gap-offset-x: 0;
   --cp-shadow-focus-ring-accent-gap-offset-y: 0;
   --cp-shadow-focus-ring-accent-gap-blur: 0;

package/src/assets/css/tokens.css

@@ -1,7 +1,9 @@
+/* stylelint-disable */
+
 :root {
   /**
-  * COLORS
-  */
+   * COLORS
+   */
 
   --cp-background-surface: var(--cp-colors-white);
   --cp-background-primary: var(--cp-colors-white);
@@ -13,69 +15,60 @@
   --cp-background-tertiary-hover: var(--cp-colors-grey-200);
   --cp-background-quaternary: var(--cp-colors-grey-200);
   --cp-background-quaternary-hover: var(--cp-colors-grey-300);
-  --cp-background-inverse-hover: rgba(255, 255, 255, 0.1);
+  --cp-background-inverse-hover: rgba(255, 255, 255, 10%);
   --cp-background-solid: var(--cp-colors-grey-900);
   --cp-background-disabled: var(--cp-colors-grey-50);
-  --cp-background-overlay: rgba(62, 62, 91, 0.86);
+  --cp-background-overlay: rgba(62, 62, 91, 86%);
   --cp-background-black: var(--cp-colors-black);
   --cp-background-white: var(--cp-colors-white);
-
   --cp-background-accent-primary: var(--cp-colors-accent-50);
   --cp-background-accent-primary-hover: var(--cp-colors-accent-100);
   --cp-background-accent-secondary: var(--cp-colors-accent-100);
   --cp-background-accent-secondary-hover: var(--cp-colors-accent-200);
   --cp-background-accent-solid: var(--cp-colors-accent-500);
   --cp-background-accent-solid-hover: var(--cp-colors-accent-600);
-
   --cp-background-error-primary: var(--cp-colors-red-50);
   --cp-background-error-primary-hover: var(--cp-colors-red-100);
   --cp-background-error-secondary: var(--cp-colors-red-100);
   --cp-background-error-secondary-hover: var(--cp-colors-red-200);
   --cp-background-error-solid: var(--cp-colors-red-500);
   --cp-background-error-solid-hover: var(--cp-colors-red-600);
-
   --cp-background-warning-primary: var(--cp-colors-orange-50);
   --cp-background-warning-primary-hover: var(--cp-colors-orange-100);
   --cp-background-warning-secondary: var(--cp-colors-orange-100);
   --cp-background-warning-secondary-hover: var(--cp-colors-orange-200);
   --cp-background-warning-solid: var(--cp-colors-orange-400);
   --cp-background-warning-solid-hover: var(--cp-colors-orange-500);
-
   --cp-background-success-primary: var(--cp-colors-green-50);
   --cp-background-success-primary-hover: var(--cp-colors-green-100);
   --cp-background-success-secondary: var(--cp-colors-green-100);
   --cp-background-success-secondary-hover: var(--cp-colors-green-200);
   --cp-background-success-solid: var(--cp-colors-green-400);
   --cp-background-success-solid-hover: var(--cp-colors-green-500);
-
   --cp-background-blue-primary: var(--cp-colors-blue-50);
   --cp-background-blue-primary-hover: var(--cp-colors-blue-100);
   --cp-background-blue-secondary: var(--cp-colors-blue-100);
   --cp-background-blue-secondary-hover: var(--cp-colors-blue-200);
   --cp-background-blue-solid: var(--cp-colors-blue-500);
   --cp-background-blue-solid-hover: var(--cp-colors-blue-600);
-
   --cp-background-pink-primary: var(--cp-colors-pink-50);
   --cp-background-pink-primary-hover: var(--cp-colors-pink-100);
   --cp-background-pink-secondary: var(--cp-colors-pink-100);
   --cp-background-pink-secondary-hover: var(--cp-colors-pink-200);
   --cp-background-pink-solid: var(--cp-colors-pink-500);
   --cp-background-pink-solid-hover: var(--cp-colors-pink-600);
-
   --cp-background-magenta-primary: var(--cp-colors-magenta-50);
   --cp-background-magenta-primary-hover: var(--cp-colors-magenta-100);
   --cp-background-magenta-secondary: var(--cp-colors-magenta-100);
   --cp-background-magenta-secondary-hover: var(--cp-colors-magenta-200);
   --cp-background-magenta-solid: var(--cp-colors-magenta-500);
   --cp-background-magenta-solid-hover: var(--cp-colors-magenta-600);
-
   --cp-background-yellow-primary: var(--cp-colors-yellow-50);
   --cp-background-yellow-primary-hover: var(--cp-colors-yellow-100);
   --cp-background-yellow-secondary: var(--cp-colors-yellow-100);
   --cp-background-yellow-secondary-hover: var(--cp-colors-yellow-200);
   --cp-background-yellow-solid: var(--cp-colors-yellow-300);
   --cp-background-yellow-solid-hover: var(--cp-colors-yellow-400);
-
   --cp-border-soft: var(--cp-colors-grey-200);
   --cp-border-soft-hover: var(--cp-colors-grey-300);
   --cp-border-strong: var(--cp-colors-grey-300);
@@ -83,32 +76,23 @@
   --cp-border-disabled: var(--cp-colors-grey-100);
   --cp-border-solid: var(--cp-colors-grey-800);
   --cp-border-white: var(--cp-colors-white);
-
   --cp-border-accent-primary: var(--cp-colors-accent-200);
   --cp-border-accent-primary-hover: var(--cp-colors-accent-300);
   --cp-border-accent-solid: var(--cp-colors-accent-500);
-
   --cp-border-error-primary: var(--cp-colors-red-200);
   --cp-border-error-solid: var(--cp-colors-red-500);
-
   --cp-border-warning-primary: var(--cp-colors-orange-200);
   --cp-border-warning-solid: var(--cp-colors-orange-400);
-
   --cp-border-success-primary: var(--cp-colors-green-200);
   --cp-border-success-solid: var(--cp-colors-green-400);
-
   --cp-border-blue-primary: var(--cp-colors-blue-200);
   --cp-border-blue-solid: var(--cp-colors-blue-500);
-
   --cp-border-pink-primary: var(--cp-colors-pink-200);
   --cp-border-pink-solid: var(--cp-colors-pink-500);
-
   --cp-border-magenta-primary: var(--cp-colors-magenta-200);
   --cp-border-magenta-solid: var(--cp-colors-magenta-500);
-
   --cp-border-yellow-primary: var(--cp-colors-yellow-200);
   --cp-border-yellow-solid: var(--cp-colors-yellow-500);
-
   --cp-foreground-primary: var(--cp-colors-grey-800);
   --cp-foreground-secondary: var(--cp-colors-grey-600);
   --cp-foreground-secondary-hover: var(--cp-colors-grey-800);
@@ -117,47 +101,38 @@
   --cp-foreground-disabled: var(--cp-colors-grey-400);
   --cp-foreground-placeholder: var(--cp-colors-grey-500);
   --cp-foreground-white: var(--cp-colors-white);
-
   --cp-foreground-accent-primary: var(--cp-colors-accent-500);
   --cp-foreground-accent-primary-hover: var(--cp-colors-accent-600);
   --cp-foreground-accent-secondary: var(--cp-colors-accent-400);
   --cp-foreground-accent-secondary-hover: var(--cp-colors-accent-500);
-
   --cp-foreground-error-primary: var(--cp-colors-red-500);
   --cp-foreground-error-primary-hover: var(--cp-colors-red-600);
   --cp-foreground-error-secondary: var(--cp-colors-red-400);
   --cp-foreground-error-secondary-hover: var(--cp-colors-red-500);
-
   --cp-foreground-warning-primary: var(--cp-colors-orange-500);
   --cp-foreground-warning-primary-hover: var(--cp-colors-orange-600);
   --cp-foreground-warning-secondary: var(--cp-colors-orange-400);
   --cp-foreground-warning-secondary-hover: var(--cp-colors-orange-500);
-
   --cp-foreground-success-primary: var(--cp-colors-green-500);
   --cp-foreground-success-primary-hover: var(--cp-colors-green-600);
   --cp-foreground-success-secondary: var(--cp-colors-green-400);
   --cp-foreground-success-secondary-hover: var(--cp-colors-green-500);
-
   --cp-foreground-blue-primary: var(--cp-colors-blue-500);
   --cp-foreground-blue-primary-hover: var(--cp-colors-blue-600);
   --cp-foreground-blue-secondary: var(--cp-colors-blue-400);
   --cp-foreground-blue-secondary-hover: var(--cp-colors-blue-500);
-
   --cp-foreground-pink-primary: var(--cp-colors-pink-500);
   --cp-foreground-pink-primary-hover: var(--cp-colors-pink-600);
   --cp-foreground-pink-secondary: var(--cp-colors-pink-400);
   --cp-foreground-pink-secondary-hover: var(--cp-colors-pink-500);
-
   --cp-foreground-magenta-primary: var(--cp-colors-magenta-500);
   --cp-foreground-magenta-primary-hover: var(--cp-colors-magenta-600);
   --cp-foreground-magenta-secondary: var(--cp-colors-magenta-400);
   --cp-foreground-magenta-secondary-hover: var(--cp-colors-magenta-500);
-
   --cp-foreground-yellow-primary: var(--cp-colors-yellow-500);
   --cp-foreground-yellow-primary-hover: var(--cp-colors-yellow-600);
   --cp-foreground-yellow-secondary: var(--cp-colors-yellow-400);
   --cp-foreground-yellow-secondary-hover: var(--cp-colors-yellow-500);
-
   --cp-text-primary: var(--cp-colors-grey-800);
   --cp-text-secondary: var(--cp-colors-grey-600);
   --cp-text-secondary-hover: var(--cp-colors-grey-800);
@@ -165,47 +140,38 @@
   --cp-text-disabled: var(--cp-colors-grey-400);
   --cp-text-placeholder: var(--cp-colors-grey-500);
   --cp-text-white: var(--cp-colors-white);
-
   --cp-text-accent-primary: var(--cp-colors-accent-500);
   --cp-text-accent-primary-hover: var(--cp-colors-accent-600);
   --cp-text-accent-secondary: var(--cp-colors-accent-700);
   --cp-text-accent-secondary-hover: var(--cp-colors-accent-800);
-
   --cp-text-error-primary: var(--cp-colors-red-500);
   --cp-text-error-primary-hover: var(--cp-colors-red-600);
   --cp-text-error-secondary: var(--cp-colors-red-700);
   --cp-text-error-secondary-hover: var(--cp-colors-red-800);
-
   --cp-text-warning-primary: var(--cp-colors-orange-500);
   --cp-text-warning-primary-hover: var(--cp-colors-orange-600);
   --cp-text-warning-secondary: var(--cp-colors-orange-700);
   --cp-text-warning-secondary-hover: var(--cp-colors-orange-800);
-
   --cp-text-success-primary: var(--cp-colors-green-500);
   --cp-text-success-primary-hover: var(--cp-colors-green-600);
   --cp-text-success-secondary: var(--cp-colors-green-700);
   --cp-text-success-secondary-hover: var(--cp-colors-green-800);
-
   --cp-text-blue-primary: var(--cp-colors-blue-500);
   --cp-text-blue-primary-hover: var(--cp-colors-blue-600);
   --cp-text-blue-secondary: var(--cp-colors-blue-700);
   --cp-text-blue-secondary-hover: var(--cp-colors-blue-800);
-
   --cp-text-pink-primary: var(--cp-colors-pink-500);
   --cp-text-pink-primary-hover: var(--cp-colors-pink-600);
   --cp-text-pink-secondary: var(--cp-colors-pink-700);
   --cp-text-pink-secondary-hover: var(--cp-colors-pink-800);
-
   --cp-text-magenta-primary: var(--cp-colors-magenta-500);
   --cp-text-magenta-primary-hover: var(--cp-colors-magenta-600);
   --cp-text-magenta-secondary: var(--cp-colors-magenta-700);
   --cp-text-magenta-secondary-hover: var(--cp-colors-magenta-800);
-
   --cp-text-yellow-primary: var(--cp-colors-yellow-500);
   --cp-text-yellow-primary-hover: var(--cp-colors-yellow-600);
   --cp-text-yellow-secondary: var(--cp-colors-yellow-700);
   --cp-text-yellow-secondary-hover: var(--cp-colors-yellow-800);
-
   --cp-utility-accent-50: var(--cp-colors-accent-50);
   --cp-utility-accent-100: var(--cp-colors-accent-100);
   --cp-utility-accent-200: var(--cp-colors-accent-200);
@@ -217,7 +183,6 @@
   --cp-utility-accent-800: var(--cp-colors-accent-800);
   --cp-utility-accent-900: var(--cp-colors-accent-900);
   --cp-utility-accent-1000: var(--cp-colors-accent-1000);
-
   --cp-utility-blue-50: var(--cp-colors-blue-50);
   --cp-utility-blue-100: var(--cp-colors-blue-100);
   --cp-utility-blue-200: var(--cp-colors-blue-200);
@@ -229,7 +194,6 @@
   --cp-utility-blue-800: var(--cp-colors-blue-800);
   --cp-utility-blue-900: var(--cp-colors-blue-900);
   --cp-utility-blue-1000: var(--cp-colors-blue-1000);
-
   --cp-utility-error-50: var(--cp-colors-red-50);
   --cp-utility-error-100: var(--cp-colors-red-100);
   --cp-utility-error-200: var(--cp-colors-red-200);
@@ -241,7 +205,6 @@
   --cp-utility-error-800: var(--cp-colors-red-800);
   --cp-utility-error-900: var(--cp-colors-red-900);
   --cp-utility-error-1000: var(--cp-colors-red-1000);
-
   --cp-utility-magenta-50: var(--cp-colors-magenta-50);
   --cp-utility-magenta-100: var(--cp-colors-magenta-100);
   --cp-utility-magenta-200: var(--cp-colors-magenta-200);
@@ -253,7 +216,6 @@
   --cp-utility-magenta-800: var(--cp-colors-magenta-800);
   --cp-utility-magenta-900: var(--cp-colors-magenta-900);
   --cp-utility-magenta-1000: var(--cp-colors-magenta-1000);
-
   --cp-utility-neutral-50: var(--cp-colors-grey-50);
   --cp-utility-neutral-100: var(--cp-colors-grey-100);
   --cp-utility-neutral-200: var(--cp-colors-grey-200);
@@ -265,7 +227,6 @@
   --cp-utility-neutral-800: var(--cp-colors-grey-800);
   --cp-utility-neutral-900: var(--cp-colors-grey-900);
   --cp-utility-neutral-1000: var(--cp-colors-grey-1000);
-
   --cp-utility-pink-50: var(--cp-colors-pink-50);
   --cp-utility-pink-100: var(--cp-colors-pink-100);
   --cp-utility-pink-200: var(--cp-colors-pink-200);
@@ -277,7 +238,6 @@
   --cp-utility-pink-800: var(--cp-colors-pink-800);
   --cp-utility-pink-900: var(--cp-colors-pink-900);
   --cp-utility-pink-1000: var(--cp-colors-pink-1000);
-
   --cp-utility-success-50: var(--cp-colors-green-50);
   --cp-utility-success-100: var(--cp-colors-green-100);
   --cp-utility-success-200: var(--cp-colors-green-200);
@@ -289,7 +249,6 @@
   --cp-utility-success-800: var(--cp-colors-green-800);
   --cp-utility-success-900: var(--cp-colors-green-900);
   --cp-utility-success-1000: var(--cp-colors-green-1000);
-
   --cp-utility-warning-50: var(--cp-colors-orange-50);
   --cp-utility-warning-100: var(--cp-colors-orange-100);
   --cp-utility-warning-200: var(--cp-colors-orange-200);
@@ -301,7 +260,6 @@
   --cp-utility-warning-800: var(--cp-colors-orange-800);
   --cp-utility-warning-900: var(--cp-colors-orange-900);
   --cp-utility-warning-1000: var(--cp-colors-orange-1000);
-
   --cp-utility-yellow-50: var(--cp-colors-yellow-50);
   --cp-utility-yellow-100: var(--cp-colors-yellow-100);
   --cp-utility-yellow-200: var(--cp-colors-yellow-200);
@@ -313,19 +271,17 @@
   --cp-utility-yellow-800: var(--cp-colors-yellow-800);
   --cp-utility-yellow-900: var(--cp-colors-yellow-900);
   --cp-utility-yellow-1000: var(--cp-colors-yellow-1000);
-
   --cp-focus: var(--cp-utility-accent-500);
 
   /**
-  * DIMENSIONS
-  */
+   * DIMENSIONS
+   */
 
   --cp-breakpoint-sm: var(--cp-dimensions-160);
   --cp-breakpoint-md: var(--cp-dimensions-192);
   --cp-breakpoint-lg: var(--cp-dimensions-256);
   --cp-breakpoint-xl: var(--cp-dimensions-320);
   --cp-breakpoint-2xl: var(--cp-dimensions-384);
-
   --cp-radius-none: var(--cp-dimensions-0);
   --cp-radius-xs: var(--cp-dimensions-0_5);
   --cp-radius-sm: var(--cp-dimensions-1);
@@ -336,7 +292,6 @@
   --cp-radius-xl: var(--cp-dimensions-4);
   --cp-radius-2xl: var(--cp-dimensions-6);
   --cp-radius-full: 1000px;
-
   --cp-spacing-none: var(--cp-dimensions-0);
   --cp-spacing-xs: var(--cp-dimensions-0_5);
   --cp-spacing-sm: var(--cp-dimensions-1);
@@ -347,7 +302,6 @@
   --cp-spacing-2xl: var(--cp-dimensions-6);
   --cp-spacing-3xl: var(--cp-dimensions-8);
   --cp-spacing-4xl: var(--cp-dimensions-10);
-
   --cp-width-2xs: var(--cp-dimensions-2);
   --cp-width-xs: var(--cp-dimensions-3);
   --cp-width-sm: var(--cp-dimensions-4);
@@ -356,8 +310,8 @@
   --cp-width-xl: var(--cp-dimensions-8);
 
   /**
-  * SHADOWS
-  */
+   * SHADOWS
+   */
 
   --cp-shadows-3xs: var(--cp-drop-shadow-3xs-offset-x) var(--cp-drop-shadow-3xs-offset-y) var(--cp-drop-shadow-3xs-blur)
     var(--cp-drop-shadow-3xs-spread) var(--cp-drop-shadow-3xs-color);
@@ -383,22 +337,24 @@
   /* overlay shadows are multi-layered; keep linked to primitives */
   --cp-shadows-overlay:
     var(--cp-drop-shadow-overlay-1-offset-x) var(--cp-drop-shadow-overlay-1-offset-y)
-      var(--cp-drop-shadow-overlay-1-blur) var(--cp-drop-shadow-overlay-1-spread) var(--cp-drop-shadow-overlay-1-color),
+    var(--cp-drop-shadow-overlay-1-blur) var(--cp-drop-shadow-overlay-1-spread) var(--cp-drop-shadow-overlay-1-color),
     var(--cp-drop-shadow-overlay-2-offset-x) var(--cp-drop-shadow-overlay-2-offset-y)
-      var(--cp-drop-shadow-overlay-2-blur) var(--cp-drop-shadow-overlay-2-spread) var(--cp-drop-shadow-overlay-2-color),
+    var(--cp-drop-shadow-overlay-2-blur) var(--cp-drop-shadow-overlay-2-spread) var(--cp-drop-shadow-overlay-2-color),
     var(--cp-drop-shadow-overlay-3-offset-x) var(--cp-drop-shadow-overlay-3-offset-y)
-      var(--cp-drop-shadow-overlay-3-blur) var(--cp-drop-shadow-overlay-3-spread) var(--cp-drop-shadow-overlay-3-color),
+    var(--cp-drop-shadow-overlay-3-blur) var(--cp-drop-shadow-overlay-3-spread) var(--cp-drop-shadow-overlay-3-color),
     var(--cp-drop-shadow-overlay-4-offset-x) var(--cp-drop-shadow-overlay-4-offset-y)
-      var(--cp-drop-shadow-overlay-4-blur) var(--cp-drop-shadow-overlay-4-spread) var(--cp-drop-shadow-overlay-4-color),
+    var(--cp-drop-shadow-overlay-4-blur) var(--cp-drop-shadow-overlay-4-spread) var(--cp-drop-shadow-overlay-4-color),
     var(--cp-drop-shadow-overlay-5-offset-x) var(--cp-drop-shadow-overlay-5-offset-y)
-      var(--cp-drop-shadow-overlay-5-blur) var(--cp-drop-shadow-overlay-5-spread) var(--cp-drop-shadow-overlay-5-color);
+    var(--cp-drop-shadow-overlay-5-blur) var(--cp-drop-shadow-overlay-5-spread) var(--cp-drop-shadow-overlay-5-color);
 
   /* Focus ring tokens */
   --cp-shadow-focus-ring-accent:
     var(--cp-shadow-focus-ring-accent-gap-offset-x) var(--cp-shadow-focus-ring-accent-gap-offset-y)
-      var(--cp-shadow-focus-ring-accent-gap-blur) var(--cp-shadow-focus-ring-accent-gap-spread)
-      var(--cp-shadow-focus-ring-accent-gap-color),
+    var(--cp-shadow-focus-ring-accent-gap-blur) var(--cp-shadow-focus-ring-accent-gap-spread)
+    var(--cp-shadow-focus-ring-accent-gap-color),
     var(--cp-shadow-focus-ring-accent-ring-offset-x) var(--cp-shadow-focus-ring-accent-ring-offset-y)
-      var(--cp-shadow-focus-ring-accent-ring-blur) var(--cp-shadow-focus-ring-accent-ring-spread)
-      var(--cp-shadow-focus-ring-accent-ring-color);
+    var(--cp-shadow-focus-ring-accent-ring-blur) var(--cp-shadow-focus-ring-accent-ring-spread)
+    var(--cp-shadow-focus-ring-accent-ring-color);
 }
+
+/* stylelint-enable */