Refactor - Change esnet prefix to pkts

apps/host-docs/package.json

@@ -8,7 +8,7 @@
         "build": "storybook build"
     },
   "dependencies": {
-    "@esnet/esnet-tokens": "workspace:*",
+    "@esnet/pkts-tokens": "workspace:*",
     "@rive-app/react-canvas-lite": "^4.20.1",
     "doc-ui": "workspace:*",
     "lucide-react": "^0.525.0",

apps/host-docs/src/breakpoints-tokens.mdx

@@ -1,5 +1,5 @@
 import { Meta, ColorPalette, ColorItem } from "@storybook/blocks";
-import * as tokens from "@esnet/esnet-tokens/tokens.json";
+import * as tokens from "@esnet/pkts-tokens/tokens.json";
 import { SpacingDocBlock, Datum, DatumList } from "doc-ui";
 
 <Meta title="Design Tokens/Breakpoints" />
@@ -17,7 +17,7 @@ return (
 <>
 
 <Datum
-name={`--esnet-size-breakpoints-width-${widthBreakpointKey}`}
+name={`--pkts-size-breakpoints-width-${widthBreakpointKey}`}
 value={tokens.size.breakpoints.width[widthBreakpointKey].value || 0}
 />
 <br />

apps/host-docs/src/color-tokens.mdx

@@ -1,5 +1,5 @@
 import { Meta, ColorPalette, ColorItem } from "@storybook/blocks";
-import * as tokens from "@esnet/esnet-tokens/tokens.json";
+import * as tokens from "@esnet/pkts-tokens/tokens.json";
 
 <Meta title="Design Tokens/Colors" />
 
@@ -21,7 +21,7 @@ Here are the inital set of color ramps and color alias tokens
           const formattedColorGroups = {};
 
           Object.keys(currentColorRamp).forEach(color => {
-            formattedColorGroups[`--esnet-color-core-${colorRamp}-${color}`] = currentColorRamp[color].value
+            formattedColorGroups[`--pkts-color-core-${colorRamp}-${color}`] = currentColorRamp[color].value
           })
 
           return (<ColorItem
@@ -34,7 +34,7 @@ Here are the inital set of color ramps and color alias tokens
           const formattedColorGroups = {};
 
           Object.keys(currentColorGroup).forEach(color => {
-            formattedColorGroups[`--esnet-color-${colorGroup}-${color}`] = currentColorGroup[color].value
+            formattedColorGroups[`--pkts-color-${colorGroup}-${color}`] = currentColorGroup[color].value
           })
 
           return (<ColorItem

apps/host-docs/src/design-tokens.mdx

@@ -30,7 +30,7 @@ import { Meta } from "@storybook/blocks";
 
 ```javascript
 // tailwind.config.js
-import tokens from '@esnet/esnet-tokens/tokens.json';
+import tokens from '@esnet/pkts-tokens/tokens.json';
 
 export default {
   theme: {
@@ -56,7 +56,7 @@ export default {
     Use design tokens directly in your custom components:
 
 ```typescript
-import tokens from '@esnet/esnet-tokens/tokens.json';
+import tokens from '@esnet/pkts-tokens/tokens.json';
 
 const CustomButton = styled.button`
   background-color: ${tokens.color.primary.base.value};

apps/host-docs/src/elevation-and-shadows-tokens.mdx

@@ -1,5 +1,5 @@
 import { Meta, ColorPalette, ColorItem } from "@storybook/blocks";
-import * as tokens from "@esnet/esnet-tokens/tokens.json";
+import * as tokens from "@esnet/pkts-tokens/tokens.json";
 import { ShadowDocBlock } from "doc-ui";
 
 <Meta title="Design Tokens/Elevation and Shadows" />
@@ -15,6 +15,6 @@ import { ShadowDocBlock } from "doc-ui";
 ### Tokens
 {
     Object.keys(tokens.default["box-shadow"].core).map(shadowTokenKey => {
-        return(<ShadowDocBlock name={`--esnet-box-shadow-core-${shadowTokenKey}`} value={tokens.default["box-shadow"].core[shadowTokenKey].value || 0} />)
+        return(<ShadowDocBlock name={`--pkts-box-shadow-core-${shadowTokenKey}`} value={tokens.default["box-shadow"].core[shadowTokenKey].value || 0} />)
     })
 }

apps/host-docs/src/icon-tokens.mdx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { Meta, IconGallery, IconItem, Title } from "@storybook/blocks";
-import * as tokens from "@esnet/esnet-tokens/tokens.json";
+import * as tokens from "@esnet/pkts-tokens/tokens.json";
 import { icons, Network } from "lucide-react";
 
 <Meta title="Design Tokens/Icons" />

apps/host-docs/src/motion-tokens.mdx

@@ -1,5 +1,5 @@
 import { Meta, ColorPalette, ColorItem } from "@storybook/blocks";
-import * as tokens from "@esnet/esnet-tokens/tokens.json";
+import * as tokens from "@esnet/pkts-tokens/tokens.json";
 import { DurationDocBlock } from "doc-ui";
 
 <Meta title="Design Tokens/Motion" />
@@ -18,6 +18,6 @@ Our design tokens provide a set of semantic speeds for motion.
 
 {
 Object.keys(tokens.time.duration).map(durationKey => {
-return(<DurationDocBlock name={`--esnet-time-duration-${durationKey}`} duration={tokens.time.duration[durationKey].value || 0} />)
+return(<DurationDocBlock name={`--pkts-time-duration-${durationKey}`} duration={tokens.time.duration[durationKey].value || 0} />)
 })
 }

apps/host-docs/src/radius-and-borders-tokens.mdx

@@ -1,5 +1,5 @@
 import { Meta, ColorPalette, ColorItem } from "@storybook/blocks";
-import * as tokens from "@esnet/esnet-tokens/tokens.json";
+import * as tokens from "@esnet/pkts-tokens/tokens.json";
 import { BorderDocBlock, RadiusDocBlock } from "doc-ui";
 
 <Meta title="Design Tokens/Radiuses and Borders" />
@@ -17,7 +17,7 @@ They can also be used to create circles with a 1/1 aspect ratio.
 
 {
     Object.keys(tokens.size.radius).map(raidusTokenKey => {
-        return(<RadiusDocBlock name={`--esnet-size-radius-${raidusTokenKey}`} value={tokens.size.radius[raidusTokenKey].value || 0} />)
+        return(<RadiusDocBlock name={`--pkts-size-radius-${raidusTokenKey}`} value={tokens.size.radius[raidusTokenKey].value || 0} />)
     })
 }
 
@@ -29,6 +29,6 @@ Borders are the layer just inside the margin layer in the box model.
 
 {
     Object.keys(tokens.size["border-width"]).map(borderTokenKey => {
-        return(<BorderDocBlock name={`--esnet-size-border-width-${borderTokenKey}`} value={tokens.size["border-width"][borderTokenKey].value || 0} />)
+        return(<BorderDocBlock name={`--pkts-size-border-width-${borderTokenKey}`} value={tokens.size["border-width"][borderTokenKey].value || 0} />)
     })
 }

apps/host-docs/src/spacing-tokens.mdx

@@ -1,5 +1,5 @@
 import { Meta, ColorPalette, ColorItem } from "@storybook/blocks";
-import * as tokens from "@esnet/esnet-tokens/tokens.json";
+import * as tokens from "@esnet/pkts-tokens/tokens.json";
 import { SpacingDocBlock } from "doc-ui";
 
 <Meta title="Design Tokens/Spacing" />
@@ -14,6 +14,6 @@ Spacing tokens can be used to represent the values inbetween elements (padding,
 
 {
     Object.keys(tokens.size.spacing).map(spacingTokenKey => {
-        return(<SpacingDocBlock name={`--esnet-size-spacing-${spacingTokenKey}`} value={tokens.size.spacing[spacingTokenKey].value || 0} />)
+        return(<SpacingDocBlock name={`--pkts-size-spacing-${spacingTokenKey}`} value={tokens.size.spacing[spacingTokenKey].value || 0} />)
     })
 }

apps/host-docs/src/typography.mdx

@@ -1,5 +1,5 @@
 import { Meta, ColorPalette, ColorItem } from "@storybook/blocks";
-import * as tokens from "@esnet/esnet-tokens/tokens.json";
+import * as tokens from "@esnet/pkts-tokens/tokens.json";
 import { TypographyDocBlock } from "doc-ui";
 
 {
@@ -13,7 +13,7 @@ console.log("tokens", tokens)
 
 {
 Object.keys(tokens.font.family).map(familyKey => {
-const rampKey = ` --esnet-font-family-${familyKey}`;
+const rampKey = ` --pkts-font-family-${familyKey}`;
 const familyOptions = tokens.font.family[familyKey];
 
         const result = Object.keys(familyOptions).map(familyOptionKey => {
@@ -32,7 +32,7 @@ const familyOptions = tokens.font.family[familyKey];
 
 {
 Object.keys(tokens.typography.header).map(headerRampKey => {
-const rampKey = `--esnet-typography-header-${headerRampKey}`;
+const rampKey = `--pkts-typography-header-${headerRampKey}`;
 const headerOptions = tokens.typography.header[headerRampKey];
 
         const result = Object.keys(headerOptions).map(headerOptionKey => {
@@ -51,7 +51,7 @@ const headerOptions = tokens.typography.header[headerRampKey];
 
 {
 Object.keys(tokens.typography.copy).map(copyRampKey => {
-const rampKey = `--esnet-typography-copy-${copyRampKey}`;
+const rampKey = `--pkts-typography-copy-${copyRampKey}`;
 const copyOptions = tokens.typography.copy[copyRampKey];
 
         const result = Object.keys(copyOptions).map(copyOptionKey => {
@@ -70,7 +70,7 @@ const copyOptions = tokens.typography.copy[copyRampKey];
 
 {
 Object.keys(tokens.typography.label).map(labelRampKey => {
-const rampKey = `--esnet-typography-label-${labelRampKey}`;
+const rampKey = `--pkts-typography-label-${labelRampKey}`;
 const labelOptions = tokens.typography.label[labelRampKey];
 
         const result = Object.keys(labelOptions).map(labelOptionKey => {
@@ -90,7 +90,7 @@ const labelOptions = tokens.typography.label[labelRampKey];
 
 {
 Object.keys(tokens.typography.button).map(buttonRampKey => {
-const rampKey = `--esnet-typography-button-${buttonRampKey}`;
+const rampKey = `--pkts-typography-button-${buttonRampKey}`;
 const buttonOptions = tokens.typography.button[buttonRampKey];
 
         const result = Object.keys(buttonOptions).map(buttonOptionKey => {

apps/react-docs/package.json

@@ -10,7 +10,7 @@
     "preview": "serve storybook-static"
   },
   "dependencies": {
-    "@esnet/esnet-tokens": "workspace:*",
+    "@esnet/pkts-tokens": "workspace:*",
     "@esnet/packets-ui-css": "workspace:*",
     "@esnet/packets-ui-react": "workspace:*",
     "@rive-app/react-canvas-lite": "^4.20.1",

apps/react-docs/src/stories/PktsSpinner.stories.tsx

@@ -31,7 +31,7 @@ export const BrandedESSpinnerRive: Story = {
         height: size,
       }}
     >
-      <Rive src="/riv/esnetspinner.riv" />
+      <Rive src="/riv/pkts-spinner.riv" />
     </div>
   ),
   name: "PktsSpinner Branded RIVE",
@@ -48,7 +48,7 @@ export const BrandedESSpinnerRiveEasing: Story = {
         height: size,
       }}
     >
-      <Rive src="/riv/esnetspinner_easing.riv" />
+      <Rive src="/riv/pkts-spinner-easing.riv" />
     </div>
   ),
   name: "PktsSpinner Branded RIVE with Easing",

apps/react-docs/src/stories/PktsTitleSection.stories.tsx

@@ -33,7 +33,7 @@ export const WithIcons: Story = {
   args: {
     title: (
       <>
-        ESNet <ZapIcon size={24} />
+        Accelerating Science <ZapIcon size={24} />
       </>
     ),
     subtitle: (

apps/web-docs/package.json

@@ -8,7 +8,7 @@
         "build": "storybook build"
     },
   "dependencies": {
-    "@esnet/esnet-tokens": "workspace:*",
+    "@esnet/pkts-tokens": "workspace:*",
     "@esnet/packets-ui-web": "workspace:*",
     "@rive-app/react-canvas-lite": "^4.20.1",
     "doc-ui": "workspace:*",

apps/web-docs/src/getting-started.mdx

@@ -31,9 +31,9 @@ import { Meta } from "@storybook/blocks";
 ```
 
     4. Run <br />
-    `npm i @esnet/esnet-tokens @esnet/packets-ui-react`, <br />
-    `pnpm i @esnet/esnet-tokens @esnet/packets-ui-react`, or <br />
-    `yarn add @esnet/esnet-tokens @esnet/packets-ui-react`
+    `npm i @esnet/pkts-tokens @esnet/packets-ui-react`, <br />
+    `pnpm i @esnet/pkts-tokens @esnet/packets-ui-react`, or <br />
+    `yarn add @esnet/pkts-tokens @esnet/packets-ui-react`
     5. Add the `packets-ui` class to the body or root level tag of your project.
     6. (Optional) Add `dark` or `light` classes to the `packets-ui` node to force light or dark mode only.
     7. Add the following to your header element to fetch our fonts from Google's CDN

dev-docs/release-process.md

@@ -4,7 +4,7 @@ This document outlines the processes to reelease a new build of the npm package
 
 ## Package Registry
 
-The Gitlab Package Registry can be found [here](https://gitlab.es.net/esnet/packets-design-system/-/packages). It contains npm files for both `@esnet/packets-ui` and `@esnet/esnet-tokens`. If you need to debug artifacts, you can click in on a published version and see downloaded published artifacts.
+The Gitlab Package Registry can be found [here](https://gitlab.es.net/esnet/packets-design-system/-/packages). It contains npm files for both `@esnet/packets-ui` and `@esnet/pkts-tokens`. If you need to debug artifacts, you can click in on a published version and see downloaded published artifacts.
 
 ## Changesets
 

packages/design-tokens/README.md

@@ -1,8 +1,8 @@
-## ESNet UI Design Tokens
+## Packets UI Design Tokens
 
 #### Exports
 
-ESNet's code repository of tokens, available in the following formats:
+Packets' code repository of tokens, available in the following formats:
 
 - JavaScript constants, including ESM, CJS, and UMD definitions, along with TypeScript declarations
 - Tailwind configuration object (soon to support Tailwind v4 configuration)
@@ -11,11 +11,11 @@ ESNet's code repository of tokens, available in the following formats:
 
 The default export is the JavaScript constants with the TypeScript type declaration.
 
-If you wish to consume any other files, you can conveniently import them as such: `import "@esnet/design-tokens/filename"`, as defined in the package.json's `exports` field.
+If you wish to consume any other files, you can conveniently import them as such: `import "@esnet/pkts-tokens/filename"`, as defined in the package.json's `exports` field.
 
 ##### Caveats
 
-When importing token files in CSS using PostCSS (or likely any CSS compiler), it struggles to resolve the path names exported by package.json's `exports` field. Import them like this instead: `@import "@esnet/esnet-tokens/dist/esnet-tokens.css";`.
+When importing token files in CSS using PostCSS (or likely any CSS compiler), it struggles to resolve the path names exported by package.json's `exports` field. Import them like this instead: `@import "@esnet/pkts-tokens/dist/pkts-tokens.css";`.
 
 #### Build process
 

packages/design-tokens/config.json

@@ -10,13 +10,13 @@
         "typography/shorthand",
         "duration/units"
       ],
-      "prefix": "esnet",
+      "prefix": "pkts",
       "transformGroup": "css",
       "buildPath": "dist/",
       "files": [
         {
           "format": "css/variables",
-          "destination": "esnet-tokens.css",
+          "destination": "pkts-tokens.css",
           "options": {
             "outputReferences": true
           }
@@ -32,20 +32,20 @@
         "typography/shorthand",
         "duration/units"
       ],
-      "prefix": "esnet",
+      "prefix": "pkts",
       "transformGroup": "scss",
       "buildPath": "dist/",
       "files": [
         {
-          "destination": "esnet-tokens.scss",
+          "destination": "pkts-tokens.scss",
           "format": "scss/variables",
           "options": {
             "outputReferences": true
           }
         },
         {
           "format": "css/variables",
-          "destination": "_esnet-tokens-css-variables.scss",
+          "destination": "_pkts-tokens-css-variables.scss",
           "options": {
             "outputReferences": true
           }
@@ -60,7 +60,7 @@
         "size/pxToRem",
         "duration/units"
       ],
-      "prefix": "esnet",
+      "prefix": "pkts",
       "transformGroup": "js",
       "buildPath": "dist/",
       "files": [
@@ -82,7 +82,7 @@
         "size/pxToRem",
         "duration/units"
       ],
-      "prefix": "esnet",
+      "prefix": "pkts",
       "transformGroup": "js",
       "buildPath": "dist/",
       "files": [

packages/design-tokens/package.json

@@ -1,8 +1,8 @@
 {
-  "name": "@esnet/esnet-tokens",
+  "name": "@esnet/pkts-tokens",
   "version": "1.1.1",
   "type": "module",
-  "description": "A set of reusable UI tokens for the various ESnet frontend systems.",
+  "description": "A set of reusable UI tokens created by ESnet for various frontend systems.",
   "author": "Jason Roeckle",
   "scripts": {
     "build": "node ./build.js && pnpm run format && rollup --config rollup.config.js",
@@ -17,8 +17,8 @@
   "exports": {
     ".": {
       "types": "./dist/tokens.d.ts",
-      "import": "./dist/esnet-tokens.esm.js",
-      "require": "./dist/esnet-tokens.cjs.js",
+      "import": "./dist/pkts-tokens.esm.js",
+      "require": "./dist/pkts-tokens.cjs.js",
       "default": "./dist/tokens.js"
     },
     "./*": "./dist/*"