Implement legacy naming for old color palette

adrs/0001-pseudo-private-custom-properties.md

@@ -37,23 +37,23 @@ Defining a structure for component styles using pseudo-private custom properties
     @cn-transition-duration: 100ms;
     // BASE COMPONENT-SPECIFIC CUSTOM PROPERTIES
     // --_{component-abbreviation}-{property-shorthand}: {value};
-    --_cn-bg: var(--blue-500);
+    --_cn-bg: var(--blue-legacy-500);
     --_cn-h: var(--su-static16);
     --_cn-fd: row-reverse;
     // VARIANT CUSTOM PROPERTIES
     // --_{component-abbreviation}-{property-shorthand}-{variant-name}: {value};
-    --_cn-fc-filled: var(--green-500);
+    --_cn-fc-filled: var(--green-legacy-500);
     // CHILD COMPONENT CUSTOM PROPERTIES
     // --_{component-abreviation}-{child-component-name}-{property-shorthand}: {value};
-    --_cn-image-bg: var(--red-500);
+    --_cn-image-bg: var(--red-legacy-500);
 
     // CONTEXTUAL STYLES
     // These may include themes/modes, responsive styles, or modifications based on parent containers
     .highcontrast-mode({
-        --_cn-bg: var(--black-400);
+        --_cn-bg: var(--black-legacy-400);
 
         .s-avatar--letter {
-            --_cn-image-bg: var(--white);
+            --_cn-image-bg: var(--white-legacy);
         }
     });
 
@@ -64,7 +64,7 @@ Defining a structure for component styles using pseudo-private custom properties
     // STATES
     // These are generally classes prefixed with `.is-` or `.has-`
     &.is-selected {
-        --_cn-bg: var(--orange-200);
+        --_cn-bg: var(--orange-legacy-200);
     }
 
     // MODIFIERS
@@ -86,10 +86,10 @@ Defining a structure for component styles using pseudo-private custom properties
     // VARIANTS
     // Variants are expected to be used exclusive of one another. In other words, you should only use one variant class at a time
     &&__info {
-        --_cn-bg: var(--yellow-100);
+        --_cn-bg: var(--yellow-legacy-100);
 
         &.s-component-name__filled {
-            --_cn-bg-filled: var(--yellow-800);
+            --_cn-bg-filled: var(--yellow-legacy-800);
         }
     }
 
@@ -100,7 +100,7 @@ Defining a structure for component styles using pseudo-private custom properties
 
     // INTERACTION
     &:hover {
-        --_cn-bg: var(--_black-050);
+        --_cn-bg: var(--_black-legacy-050);
     }
 
     // STYLES MODIFIED BY COMPONENT-SPECIFIC CUSTOM PROPERTIES

docs/_data/borders.json

@@ -1,189 +1,189 @@
 {
   "border": [
     {
-      "class": ".ba",
-      "define": "Apply a border to all sides",
+      "class": "ba",
+      "define": "all sides",
       "output": "border: solid 1px #000",
       "responsive": true
     },
     {
-      "class": ".bt",
-      "define": "Apply a border to the top side",
+      "class": "bt",
+      "define": "top",
       "output": "border-top: solid 1px #000",
       "responsive": true
     },
     {
-      "class": ".bb",
-      "define": "Apply a border to the bottom side",
+      "class": "bb",
+      "define": "bottom",
       "output": "border-bottom: solid 1px #000",
       "responsive": true
     },
     {
-      "class": ".bl",
-      "define": "Apply a border to the left side",
+      "class": "bl",
+      "define": "left",
       "output": "border-left: solid 1px #000",
       "responsive": true
     },
     {
-      "class": ".br",
-      "define": "Apply a border to the right side",
+      "class": "br",
+      "define": "right",
       "output": "border-right: solid 1px #000",
       "responsive": true
     },
     {
-      "class": ".by",
-      "define": "Apply a border to the top and bottom sides",
+      "class": "by",
+      "define": "top and bottom",
       "output": "border-top: solid 1px #000; border-bottom: solid 1px #000;"
     },
     {
-      "class": ".bx",
-      "define": "Apply a border to the left and right sides",
+      "class": "bx",
+      "define": "left and right",
       "output": "border-left: solid 1px #000; border-right: solid 1px #000;"
     }
   ],
-  "border-width": [
+  "width": [
     {
-      "class": ".baw0",
-      "define": "Applies a border width of zero to all sides",
+      "class": "baw0",
+      "define": "zero, all sides",
       "output": "border-width: 0"
     },
     {
-      "class": ".btw0",
-      "define": "Applies a border width of zero to the top side",
+      "class": "btw0",
+      "define": "zero, top",
       "output": "border-top-width: 0",
       "responsive": true
     },
     {
-      "class": ".bbw0",
-      "define": "Applies a border width of zero to the bottom side",
+      "class": "bbw0",
+      "define": "zero, bottom",
       "output": "border-bottom-width: 0",
       "responsive": true
     },
     {
-      "class": ".blw0",
-      "define": "Applies a border width of zero to the left side",
+      "class": "blw0",
+      "define": "zero, left",
       "output": "border-left-width: 0",
       "responsive": true
     },
     {
-      "class": ".brw0",
-      "define": "Applies a border width of zero to the right side",
+      "class": "brw0",
+      "define": "zero, right",
       "output": "border-right-width: 0",
       "responsive": true
     },
     {
-      "class": ".byw0",
-      "define": "Applies a border width of zero to the top and bottom sides",
+      "class": "byw0",
+      "define": "zero, top and bottom",
       "output": "border-top-width: 0; border-bottom-width: 0;"
     },
     {
-      "class": ".bxw0",
-      "define": "Applies a border width of zero to the left and right sides",
+      "class": "bxw0",
+      "define": "zero, left and right",
       "output": "border-left-width: 0; border-right-width: 0;"
     },
     {
-      "class": ".baw1",
-      "define": "Applies a border width of 1px to all sides",
+      "class": "baw1",
+      "define": "1px, all",
       "output": "border-width: 1px"
     },
     {
-      "class": ".btw1",
-      "define": "Applies a border width of 1px to the top side",
+      "class": "btw1",
+      "define": "1px, top",
       "output": "border-top-width: 1px"
     },
     {
-      "class": ".bbw1",
-      "define": "Applies a border width of 1px to the bottom side",
+      "class": "bbw1",
+      "define": "1px, bottom",
       "output": "border-bottom-width: 1px"
     },
     {
-      "class": ".blw1",
-      "define": "Applies a border width of 1px to the left side",
+      "class": "blw1",
+      "define": "1px, left",
       "output": "border-left-width: 1px"
     },
     {
-      "class": ".brw1",
-      "define": "Applies a border width of 1px to the right side",
+      "class": "brw1",
+      "define": "1px, right",
       "output": "border-right-width: 1px"
     },
     {
-      "class": ".byw1",
-      "define": "Applies a border width of 1px to the top and bottom sides",
+      "class": "byw1",
+      "define": "1px, top and bottom",
       "output": "border-top-width: 1px; border-bottom-width: 1px;"
     },
     {
-      "class": ".bxw1",
-      "define": "Applies a border width of 1px to the left and right sides",
+      "class": "bxw1",
+      "define": "1px, left and right",
       "output": "border-left-width: 1px; border-right-width: 1px;"
     },
     {
-      "class": ".baw2",
-      "define": "Applies a border width of 2px to all sides",
+      "class": "baw2",
+      "define": "2px, all",
       "output": "border-width: 2px"
     },
     {
-      "class": ".btw2",
-      "define": "Applies a border width of 2px to the top side",
+      "class": "btw2",
+      "define": "2px, top",
       "output": "border-top-width: 2px"
     },
     {
-      "class": ".bbw2",
-      "define": "Applies a border width of 2px to the bottom side",
+      "class": "bbw2",
+      "define": "2px, bottom",
       "output": "border-bottom-width: 2px"
     },
     {
-      "class": ".blw2",
-      "define": "Applies a border width of 2px to the left side",
+      "class": "blw2",
+      "define": "2px, left",
       "output": "border-left-width: 2px"
     },
     {
-      "class": ".brw2",
-      "define": "Applies a border width of 2px to the right side",
+      "class": "brw2",
+      "define": "2px, right",
       "output": "border-right-width: 2px"
     },
     {
-      "class": ".byw2",
-      "define": "Applies a border width of 2px to the top and bottom sides",
+      "class": "byw2",
+      "define": "2px, top and bottom",
       "output": "border-top-width: 2px; border-bottom-width: 2px;"
     },
     {
-      "class": ".bxw2",
-      "define": "Applies a border width of 2px to the left and right sides",
+      "class": "bxw2",
+      "define": "2px, left and right",
       "output": "border-left-width: 2px; border-right-width: 2px;"
     },
     {
-      "class": ".baw3",
-      "define": "Applies a border width of 4px to all sides",
+      "class": "baw3",
+      "define": "4px, all",
       "output": "border-width: 4px"
     },
     {
-      "class": ".btw3",
-      "define": "Applies a border width of 4px to the top side",
+      "class": "btw3",
+      "define": "4px, top",
       "output": "border-top-width: 4px"
     },
     {
-      "class": ".bbw3",
-      "define": "Applies a border width of 4px to the bottom side",
+      "class": "bbw3",
+      "define": "4px, bottom",
       "output": "border-bottom-width: 4px"
     },
     {
-      "class": ".blw3",
-      "define": "Applies a border width of 4px to the left side",
+      "class": "blw3",
+      "define": "4px, left",
       "output": "border-left-width: 4px"
     },
     {
-      "class": ".brw3",
-      "define": "Applies a border width of 4px to the right side",
+      "class": "brw3",
+      "define": "4px, right",
       "output": "border-right-width: 4px"
     },
     {
-      "class": ".byw3",
-      "define": "Applies a border width of 4px to the top and bottom sides",
+      "class": "byw3",
+      "define": "4px, top and bottom",
       "output": "border-top-width: 4px; border-bottom-width: 4px;"
     },
     {
-      "class": ".bxw3",
-      "define": "Applies a border width of 4px to the left and right sides",
+      "class": "bxw3",
+      "define": "4px, left and right",
       "output": "border-left-width: 4px; border-right-width: 4px;"
     }
   ],
@@ -246,39 +246,39 @@
       "darkmode": true
     },
     {
-      "term": "bc-white",
+      "term": "bc-white-legacy",
       "define": "White border color"
     },
     {
-      "term": "bc-white-[x]",
+      "term": "bc-white-legacy-[x]",
       "define": "Alpha stops for border color"
     },
     {
-      "term": "bc-black-[x]",
+      "term": "bc-black-legacy-[x]",
       "define": "Black color stops for border colors"
     },
     {
-      "term": "bc-orange-[x]",
+      "term": "bc-orange-legacy-[x]",
       "define": "Orange color stops for border colors"
     },
     {
-      "term": "bc-blue-[x]",
+      "term": "bc-blue-legacy-[x]",
       "define": "Blue color stops for border colors"
     },
     {
-      "term": "bc-green-[x]",
+      "term": "bc-green-legacy-[x]",
       "define": "Green color stops for border colors"
     },
     {
-      "term": "bc-powder-[x]",
+      "term": "bc-powder-legacy-[x]",
       "define": "Powder color stops for border colors"
     },
     {
-      "term": "bc-red-[x]",
+      "term": "bc-red-legacy-[x]",
       "define": "Red color stops for border colors"
     },
     {
-      "term": "bc-yellow-[x]",
+      "term": "bc-yellow-legacy-[x]",
       "define": "Yellow color stops for border colors"
     },
     {