diff --git a/apps/css-docs/public/riv/esnetspinner_easing.riv b/apps/css-docs/public/riv/pkts-spinner-easing.riv similarity index 100% rename from apps/css-docs/public/riv/esnetspinner_easing.riv rename to apps/css-docs/public/riv/pkts-spinner-easing.riv diff --git a/apps/css-docs/public/riv/esnetspinner.riv b/apps/css-docs/public/riv/pkts-spinner.riv similarity index 100% rename from apps/css-docs/public/riv/esnetspinner.riv rename to apps/css-docs/public/riv/pkts-spinner.riv diff --git a/apps/host-docs/package.json b/apps/host-docs/package.json index a74c1b96..97bedf36 100644 --- a/apps/host-docs/package.json +++ b/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", diff --git a/apps/host-docs/public/riv/esnetspinner_easing.riv b/apps/host-docs/public/riv/pkts-spinner-easing.riv similarity index 100% rename from apps/host-docs/public/riv/esnetspinner_easing.riv rename to apps/host-docs/public/riv/pkts-spinner-easing.riv diff --git a/apps/host-docs/public/riv/esnetspinner.riv b/apps/host-docs/public/riv/pkts-spinner.riv similarity index 100% rename from apps/host-docs/public/riv/esnetspinner.riv rename to apps/host-docs/public/riv/pkts-spinner.riv diff --git a/apps/host-docs/src/breakpoints-tokens.mdx b/apps/host-docs/src/breakpoints-tokens.mdx index 1dfdb06c..d2c444bc 100644 --- a/apps/host-docs/src/breakpoints-tokens.mdx +++ b/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"; @@ -17,7 +17,7 @@ return ( <>
diff --git a/apps/host-docs/src/color-tokens.mdx b/apps/host-docs/src/color-tokens.mdx index 5c2910b8..4c52a22f 100644 --- a/apps/host-docs/src/color-tokens.mdx +++ b/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"; @@ -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 ( { - formattedColorGroups[`--esnet-color-${colorGroup}-${color}`] = currentColorGroup[color].value + formattedColorGroups[`--pkts-color-${colorGroup}-${color}`] = currentColorGroup[color].value }) return ( @@ -15,6 +15,6 @@ import { ShadowDocBlock } from "doc-ui"; ### Tokens { Object.keys(tokens.default["box-shadow"].core).map(shadowTokenKey => { - return() + return() }) } \ No newline at end of file diff --git a/apps/host-docs/src/icon-tokens.mdx b/apps/host-docs/src/icon-tokens.mdx index 9254a59b..6ada58f8 100644 --- a/apps/host-docs/src/icon-tokens.mdx +++ b/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"; diff --git a/apps/host-docs/src/motion-tokens.mdx b/apps/host-docs/src/motion-tokens.mdx index fca3e2c9..b88d1fed 100644 --- a/apps/host-docs/src/motion-tokens.mdx +++ b/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"; @@ -18,6 +18,6 @@ Our design tokens provide a set of semantic speeds for motion. { Object.keys(tokens.time.duration).map(durationKey => { -return() +return() }) } diff --git a/apps/host-docs/src/radius-and-borders-tokens.mdx b/apps/host-docs/src/radius-and-borders-tokens.mdx index d84d1cc4..cd946c9e 100644 --- a/apps/host-docs/src/radius-and-borders-tokens.mdx +++ b/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"; @@ -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() + return() }) } @@ -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() + return() }) } \ No newline at end of file diff --git a/apps/host-docs/src/spacing-tokens.mdx b/apps/host-docs/src/spacing-tokens.mdx index a7445695..31c6c048 100644 --- a/apps/host-docs/src/spacing-tokens.mdx +++ b/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"; @@ -14,6 +14,6 @@ Spacing tokens can be used to represent the values inbetween elements (padding, { Object.keys(tokens.size.spacing).map(spacingTokenKey => { - return() + return() }) } diff --git a/apps/host-docs/src/typography.mdx b/apps/host-docs/src/typography.mdx index f1f40ec2..c6f7dfac 100644 --- a/apps/host-docs/src/typography.mdx +++ b/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 => { diff --git a/apps/react-docs/package.json b/apps/react-docs/package.json index 21d1cbd5..3a3fb31d 100644 --- a/apps/react-docs/package.json +++ b/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", diff --git a/apps/react-docs/public/riv/esnetspinner_easing.riv b/apps/react-docs/public/riv/pkts-spinner-easing.riv similarity index 100% rename from apps/react-docs/public/riv/esnetspinner_easing.riv rename to apps/react-docs/public/riv/pkts-spinner-easing.riv diff --git a/apps/react-docs/public/riv/esnetspinner.riv b/apps/react-docs/public/riv/pkts-spinner.riv similarity index 100% rename from apps/react-docs/public/riv/esnetspinner.riv rename to apps/react-docs/public/riv/pkts-spinner.riv diff --git a/apps/react-docs/src/stories/PktsSpinner.stories.tsx b/apps/react-docs/src/stories/PktsSpinner.stories.tsx index d331c397..cf30d571 100644 --- a/apps/react-docs/src/stories/PktsSpinner.stories.tsx +++ b/apps/react-docs/src/stories/PktsSpinner.stories.tsx @@ -31,7 +31,7 @@ export const BrandedESSpinnerRive: Story = { height: size, }} > - + ), name: "PktsSpinner Branded RIVE", @@ -48,7 +48,7 @@ export const BrandedESSpinnerRiveEasing: Story = { height: size, }} > - + ), name: "PktsSpinner Branded RIVE with Easing", diff --git a/apps/react-docs/src/stories/PktsTitleSection.stories.tsx b/apps/react-docs/src/stories/PktsTitleSection.stories.tsx index ff2da2ba..bce45dee 100644 --- a/apps/react-docs/src/stories/PktsTitleSection.stories.tsx +++ b/apps/react-docs/src/stories/PktsTitleSection.stories.tsx @@ -33,7 +33,7 @@ export const WithIcons: Story = { args: { title: ( <> - ESNet + Accelerating Science ), subtitle: ( diff --git a/apps/web-docs/package.json b/apps/web-docs/package.json index 7cbc4d6e..1e7436fd 100644 --- a/apps/web-docs/package.json +++ b/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:*", diff --git a/apps/web-docs/public/riv/esnetspinner_easing.riv b/apps/web-docs/public/riv/pkts-spinner-easing.riv similarity index 100% rename from apps/web-docs/public/riv/esnetspinner_easing.riv rename to apps/web-docs/public/riv/pkts-spinner-easing.riv diff --git a/apps/web-docs/public/riv/esnetspinner.riv b/apps/web-docs/public/riv/pkts-spinner.riv similarity index 100% rename from apps/web-docs/public/riv/esnetspinner.riv rename to apps/web-docs/public/riv/pkts-spinner.riv diff --git a/apps/web-docs/src/getting-started.mdx b/apps/web-docs/src/getting-started.mdx index 0cb543de..8298c9f6 100644 --- a/apps/web-docs/src/getting-started.mdx +++ b/apps/web-docs/src/getting-started.mdx @@ -31,9 +31,9 @@ import { Meta } from "@storybook/blocks"; ``` 4. Run
- `npm i @esnet/esnet-tokens @esnet/packets-ui-react`,
- `pnpm i @esnet/esnet-tokens @esnet/packets-ui-react`, or
- `yarn add @esnet/esnet-tokens @esnet/packets-ui-react` + `npm i @esnet/pkts-tokens @esnet/packets-ui-react`,
+ `pnpm i @esnet/pkts-tokens @esnet/packets-ui-react`, or
+ `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 diff --git a/dev-docs/release-process.md b/dev-docs/release-process.md index 71854673..af00c54b 100644 --- a/dev-docs/release-process.md +++ b/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 diff --git a/packages/design-tokens/README.md b/packages/design-tokens/README.md index 16871aac..92da8e20 100644 --- a/packages/design-tokens/README.md +++ b/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 diff --git a/packages/design-tokens/config.json b/packages/design-tokens/config.json index acda78c8..ebbb15ab 100644 --- a/packages/design-tokens/config.json +++ b/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,12 +32,12 @@ "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 @@ -45,7 +45,7 @@ }, { "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": [ diff --git a/packages/design-tokens/package-lock.json b/packages/design-tokens/package-lock.json index b081ef2b..a874f6c5 100644 --- a/packages/design-tokens/package-lock.json +++ b/packages/design-tokens/package-lock.json @@ -1,11 +1,11 @@ { - "name": "@esnet/esnet-tokens", + "name": "@esnet/pkts-tokens", "version": "0.1.0", "lockfileVersion": 3, "requires": true, "packages": { "": { - "name": "@esnet/esnet-tokens", + "name": "@esnet/pkts-tokens", "version": "0.1.0", "license": "MIT", "dependencies": { diff --git a/packages/design-tokens/package.json b/packages/design-tokens/package.json index 7d9bc08f..968bae07 100644 --- a/packages/design-tokens/package.json +++ b/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/*" diff --git a/packages/design-tokens/rollup.config.js b/packages/design-tokens/rollup.config.js index 36395b40..67d7768e 100644 --- a/packages/design-tokens/rollup.config.js +++ b/packages/design-tokens/rollup.config.js @@ -6,8 +6,8 @@ export default [ { input: "./dist/tokens.js", output: { - name: "esnet-tokens", - file: "./dist/esnet-tokens.umd.js", + name: "pkts-tokens", + file: "./dist/pkts-tokens.umd.js", format: "umd", }, plugins: [ @@ -25,7 +25,7 @@ export default [ { input: "./dist/tokens.js", external: [], - output: [{ file: "./dist/esnet-tokens.esm.js", format: "es" }], + output: [{ file: "./dist/pkts-tokens.esm.js", format: "es" }], plugins: [ resolve(), // so Rollup can find `ms` ], @@ -35,8 +35,8 @@ export default [ input: "./dist/tokens.js", external: [], output: [ - { file: "./dist/esnet-tokens.cjs.js", format: "cjs" }, - { file: "./dist/esnet-tokens.esm.js", format: "es" }, + { file: "./dist/pkts-tokens.cjs.js", format: "cjs" }, + { file: "./dist/pkts-tokens.esm.js", format: "es" }, ], plugins: [ resolve(), // so Rollup can find `ms` diff --git a/packages/doc-ui/src/BorderDocBlock/BorderDocBlock.module.scss b/packages/doc-ui/src/BorderDocBlock/BorderDocBlock.module.scss index 23916846..9d58dbce 100644 --- a/packages/doc-ui/src/BorderDocBlock/BorderDocBlock.module.scss +++ b/packages/doc-ui/src/BorderDocBlock/BorderDocBlock.module.scss @@ -1,14 +1,14 @@ .borderDocBlock { --border-border: 3px; display: block; - padding: var(--esnet-size-spacing-xsmall); + padding: var(--pkts-size-spacing-xsmall); .previewblock { display: block; aspect-ratio: 1/1; width: 32px; - background-color: var(--esnet-color-core-white-500); - border: var(--border-border) solid var(--esnet-color-light-primary); + background-color: var(--pkts-color-core-white-500); + border: var(--border-border) solid var(--pkts-color-light-primary); } } diff --git a/packages/doc-ui/src/Datum/Datum.module.scss b/packages/doc-ui/src/Datum/Datum.module.scss index 4ab5ab3b..53accaa6 100644 --- a/packages/doc-ui/src/Datum/Datum.module.scss +++ b/packages/doc-ui/src/Datum/Datum.module.scss @@ -3,13 +3,13 @@ .label { display: block; - font: var(--esnet-typography-label); + font: var(--pkts-typography-label); color: black; font-weight: 700; } .value { - font: var(--esnet-typography-copy); + font: var(--pkts-typography-copy); color: black; } } diff --git a/packages/doc-ui/src/DatumList/DatumList.module.scss b/packages/doc-ui/src/DatumList/DatumList.module.scss index 0b57d547..a08ed6f3 100644 --- a/packages/doc-ui/src/DatumList/DatumList.module.scss +++ b/packages/doc-ui/src/DatumList/DatumList.module.scss @@ -3,7 +3,7 @@ display: grid; grid-template-columns: repeat(var(--column-count), 1fr); - gap: var(--esnet-size-spacing-medium); + gap: var(--pkts-size-spacing-medium); > :last-child { diff --git a/packages/doc-ui/src/DurationDocBlock/DurationDocBlock.module.scss b/packages/doc-ui/src/DurationDocBlock/DurationDocBlock.module.scss index b1a942d5..bf8d7ac5 100644 --- a/packages/doc-ui/src/DurationDocBlock/DurationDocBlock.module.scss +++ b/packages/doc-ui/src/DurationDocBlock/DurationDocBlock.module.scss @@ -1,31 +1,31 @@ .durationDocBlock { --duration: 1000ms; display: block; - border-radius: var(--esnet-size-radius-medium); - transition: all var(--esnet-time-duration-medium) ease-in; - padding: var(--esnet-size-spacing-xsmall); + border-radius: var(--pkts-size-radius-medium); + transition: all var(--pkts-time-duration-medium) ease-in; + padding: var(--pkts-size-spacing-xsmall); .previewAnimation { flex: 1; } .preview { - margin-top: var(--esnet-size-spacing-xsmall); - background-color: var(--esnet-color-core-white-500); + margin-top: var(--pkts-size-spacing-xsmall); + background-color: var(--pkts-color-core-white-500); height: 12px; - border-radius: var(--esnet-size-radius-large); + border-radius: var(--pkts-size-radius-large); display: flex; align-items: center; .indicator { - height: var(--esnet-size-spacing-xsmall); - background-color: var(--esnet-color-core-orange-500); - border-radius: var(--esnet-size-radius-large); + height: var(--pkts-size-spacing-xsmall); + background-color: var(--pkts-color-core-orange-500); + border-radius: var(--pkts-size-radius-large); } } &:hover { - background-color: var(--esnet-color-core-white-200); + background-color: var(--pkts-color-core-white-200); .indicator { animation: indicatorPreview var(--duration) linear 0ms infinite; diff --git a/packages/doc-ui/src/RadiusDocBlock/RadiusDocBlock.module.scss b/packages/doc-ui/src/RadiusDocBlock/RadiusDocBlock.module.scss index f50e95df..bc4ad580 100644 --- a/packages/doc-ui/src/RadiusDocBlock/RadiusDocBlock.module.scss +++ b/packages/doc-ui/src/RadiusDocBlock/RadiusDocBlock.module.scss @@ -1,14 +1,14 @@ .radiusDocBlock { --border-radius-preview: 16px; display: block; - padding: var(--esnet-size-spacing-xsmall); + padding: var(--pkts-size-spacing-xsmall); .previewblock { display: block; aspect-ratio: 1/1; width: 32px; - background-color: var(--esnet-color-core-white-500); - border: 1px solid var(--esnet-color-light-primary); + background-color: var(--pkts-color-core-white-500); + border: 1px solid var(--pkts-color-light-primary); border-radius: var(--border-radius-preview); } } diff --git a/packages/doc-ui/src/ShadowDocBlock/ShadowDocBlock.module.scss b/packages/doc-ui/src/ShadowDocBlock/ShadowDocBlock.module.scss index b1986820..fac2eade 100644 --- a/packages/doc-ui/src/ShadowDocBlock/ShadowDocBlock.module.scss +++ b/packages/doc-ui/src/ShadowDocBlock/ShadowDocBlock.module.scss @@ -1,14 +1,14 @@ .shadowDocBlock { --box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1); display: block; - padding: var(--esnet-size-spacing-xsmall); + padding: var(--pkts-size-spacing-xsmall); .previewblock { display: block; aspect-ratio: 1/1; width: 32px; - background-color: var(--esnet-color-core-white-500); - border: var(--esnet-size-border-xsmall) solid var(--esnet-color-light-primary); + background-color: var(--pkts-color-core-white-500); + border: var(--pkts-size-border-xsmall) solid var(--pkts-color-light-primary); box-shadow: var(--box-shadow); } } diff --git a/packages/doc-ui/src/SpacingDocBlock/SpacingDocBlock.module.scss b/packages/doc-ui/src/SpacingDocBlock/SpacingDocBlock.module.scss index 0592dcf3..0dafb4b1 100644 --- a/packages/doc-ui/src/SpacingDocBlock/SpacingDocBlock.module.scss +++ b/packages/doc-ui/src/SpacingDocBlock/SpacingDocBlock.module.scss @@ -1,27 +1,27 @@ .spacingDocBlock { --border-border: 3px; display: block; - padding: var(--esnet-size-spacing-xsmall); + padding: var(--pkts-size-spacing-xsmall); .previewblock { display: block; width: var(--spacing-preview); height: 32px; - background-color: var(--esnet-color-core-white-500); - border-left: var(--esnet-size-border-xsmall) solid - var(--esnet-color-light-primary); - border-right: var(--esnet-size-border-xsmall) solid - var(--esnet-color-light-primary); + background-color: var(--pkts-color-core-white-500); + border-left: var(--pkts-size-border-xsmall) solid + var(--pkts-color-light-primary); + border-right: var(--pkts-size-border-xsmall) solid + var(--pkts-color-light-primary); } .previewVerticalblock { display: block; width: 32px; height: var(--spacing-preview); - background-color: var(--esnet-color-core-white-500); - border-top: var(--esnet-size-border-xsmall) solid - var(--esnet-color-light-primary); - border-bottom: var(--esnet-size-border-xsmall) solid - var(--esnet-color-light-primary); + background-color: var(--pkts-color-core-white-500); + border-top: var(--pkts-size-border-xsmall) solid + var(--pkts-color-light-primary); + border-bottom: var(--pkts-size-border-xsmall) solid + var(--pkts-color-light-primary); } } \ No newline at end of file diff --git a/packages/doc-ui/src/SpacingDocSquare/SpacingDocSquare.module.scss b/packages/doc-ui/src/SpacingDocSquare/SpacingDocSquare.module.scss index 99620b40..91d8be75 100644 --- a/packages/doc-ui/src/SpacingDocSquare/SpacingDocSquare.module.scss +++ b/packages/doc-ui/src/SpacingDocSquare/SpacingDocSquare.module.scss @@ -2,14 +2,14 @@ display: block; width: 32px; height: 32px; - background-color: var(--esnet-color-light-surface-1, #e3e3e3); - border-left: var(--esnet-size-border-xsmall) solid - var(--esnet-color-light-primary); - border-right: var(--esnet-size-border-xsmall) solid - var(--esnet-color-light-primary); + background-color: var(--pkts-color-light-surface-1, #e3e3e3); + border-left: var(--pkts-size-border-xsmall) solid + var(--pkts-color-light-primary); + border-right: var(--pkts-size-border-xsmall) solid + var(--pkts-color-light-primary); .dark & { - background-color: var(--esnet-color-dark-surface-1, #3d3d3d); + background-color: var(--pkts-color-dark-surface-1, #3d3d3d); } &.fill { diff --git a/packages/doc-ui/src/TypographyDocBlock/TypographyDocBlock.module.scss b/packages/doc-ui/src/TypographyDocBlock/TypographyDocBlock.module.scss index 43972e08..5aee1424 100644 --- a/packages/doc-ui/src/TypographyDocBlock/TypographyDocBlock.module.scss +++ b/packages/doc-ui/src/TypographyDocBlock/TypographyDocBlock.module.scss @@ -2,7 +2,7 @@ --font: "Source Sans 3"; display: block; - padding: var(--esnet-size-spacing-xsmall); + padding: var(--pkts-size-spacing-xsmall); .previewblock { display: inline-block; diff --git a/packages/doc-ui/src/TypographyDocBlock/TypographyDocBlock.tsx b/packages/doc-ui/src/TypographyDocBlock/TypographyDocBlock.tsx index 314f3a15..9e91b5b5 100644 --- a/packages/doc-ui/src/TypographyDocBlock/TypographyDocBlock.tsx +++ b/packages/doc-ui/src/TypographyDocBlock/TypographyDocBlock.tsx @@ -29,7 +29,7 @@ const TypographyDocBlock: React.FC = ({ name="Preview" value={
- ESNet: The Energy Science Network + Packets: The Design System
} /> diff --git a/packages/ui-css/package.json b/packages/ui-css/package.json index 0e97ee95..a8a61eef 100644 --- a/packages/ui-css/package.json +++ b/packages/ui-css/package.json @@ -1,41 +1,41 @@ { - "name": "@esnet/packets-ui-css", - "version": "0.1.0", - "description": "The Packets Design System CSS-Only Components", - "author": "ESnet", - "type": "module", - "scripts": { - "build": "node scripts/build.js", - "build:rollup": "rollup -c", - "dev": "rollup -c --watch", - "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist", - "prepublishOnly": "npm run build", - "test": "playwright test", - "test:ui": "playwright test --ui", - "test:updatesnaps": "playwright test --update-snapshots" - }, - "dependencies": { - "@esnet/esnet-tokens": "workspace:^" - }, - "devDependencies": { - "@playwright/test": "^1.57.0", - "chokidar": "^3.5.3", - "cssnano": "^6.0.1", - "glob": "^13.0.0", - "postcss": "^8.4.31", - "postcss-import": "^16.1.0", - "postcss-nested": "^6.0.1", - "postcss-preset-env": "^9.3.0", - "rollup": "^4.53.5", - "rollup-plugin-postcss": "^4.0.2" - }, - "main": "dist/styles.css", - "files": [ - "dist" - ], - "exports": { - "./styles.css": "./dist/styles.css", - "./styles.min.css": "./dist/styles.min.css", - "./tearsheet.html": "./dist/tearsheet.html" - } -} + "name": "@esnet/packets-ui-css", + "version": "0.1.0", + "description": "The Packets Design System CSS-Only Components", + "author": "James Kafader", + "type": "module", + "scripts": { + "build": "node scripts/build.js", + "build:rollup": "rollup -c", + "dev": "rollup -c --watch", + "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist", + "prepublishOnly": "npm run build", + "test": "playwright test", + "test:ui": "playwright test --ui", + "test:updatesnaps": "playwright test --update-snapshots" + }, + "dependencies": { + "@esnet/pkts-tokens": "workspace:^" + }, + "devDependencies": { + "@playwright/test": "^1.57.0", + "chokidar": "^3.5.3", + "cssnano": "^6.0.1", + "glob": "^13.0.0", + "postcss": "^8.4.31", + "postcss-import": "^16.1.0", + "postcss-nested": "^6.0.1", + "postcss-preset-env": "^9.3.0", + "rollup": "^4.53.5", + "rollup-plugin-postcss": "^4.0.2" + }, + "main": "dist/styles.css", + "files": [ + "dist" + ], + "exports": { + "./styles.css": "./dist/styles.css", + "./styles.min.css": "./dist/styles.min.css", + "./tearsheet.html": "./dist/tearsheet.html" + } +} \ No newline at end of file diff --git a/packages/ui-css/src/base/grid.css b/packages/ui-css/src/base/grid.css index cbbb8fcd..a39899a3 100644 --- a/packages/ui-css/src/base/grid.css +++ b/packages/ui-css/src/base/grid.css @@ -1,6 +1,6 @@ .packets-grid { - --grid-gap: var(--esnet-size-spacing-xsmall, 8px); - --bottom-margin: var(--esnet-size-spacing-xsmall, 8px); + --grid-gap: var(--pkts-size-spacing-xsmall, 8px); + --bottom-margin: var(--pkts-size-spacing-xsmall, 8px); display: grid; grid-gap: var(--grid-gap); diff --git a/packages/ui-css/src/base/surfaces.css b/packages/ui-css/src/base/surfaces.css index ce1a1ef6..74d0b72c 100644 --- a/packages/ui-css/src/base/surfaces.css +++ b/packages/ui-css/src/base/surfaces.css @@ -1,61 +1,61 @@ /* body, .packets-ui { - background-color: var(--esnet-color-light-background, #cccccc); + background-color: var(--pkts-color-light-background, #cccccc); .dark & { - background-color: var(--esnet-color-dark-background, #19191a); + background-color: var(--pkts-color-dark-background, #19191a); } } */ /* body, */ .packets { /* dark/light overide classes */ - background-color: var(--esnet-color-light-background, #cccccc); + background-color: var(--pkts-color-light-background, #cccccc); /* .dark & { - background-color: var(--esnet-color-dark-background, #19191a); + background-color: var(--pkts-color-dark-background, #19191a); } */ &.dark, .dark { - background-color: var(--esnet-color-dark-background, #19191a); + background-color: var(--pkts-color-dark-background, #19191a); } /* Nested Surface Layers using just surface class */ .surface { - background-color: var(--esnet-color-light-surface-1, #e3e3e3); + background-color: var(--pkts-color-light-surface-1, #e3e3e3); .surface { - background-color: var(--esnet-color-light-surface-2, #f2f2f2); + background-color: var(--pkts-color-light-surface-2, #f2f2f2); } } /* Bespoke instances of surface layers */ .surface1 { - background-color: var(--esnet-color-light-surface-1, #e3e3e3); + background-color: var(--pkts-color-light-surface-1, #e3e3e3); } .surface2 { - background-color: var(--esnet-color-light-surface-2, #f2f2f2); + background-color: var(--pkts-color-light-surface-2, #f2f2f2); } /* Dark mode styles - when .dark is on .packets element or an ancestor */ &.dark, .dark & { .surface { - background-color: var(--esnet-color-dark-surface-1, #3d3d3d); + background-color: var(--pkts-color-dark-surface-1, #3d3d3d); .surface { - background-color: var(--esnet-color-dark-surface-2, #4d4d4f); + background-color: var(--pkts-color-dark-surface-2, #4d4d4f); } } .surface1 { - background-color: var(--esnet-color-dark-surface-1, #3d3d3d); + background-color: var(--pkts-color-dark-surface-1, #3d3d3d); } .surface2 { - background-color: var(--esnet-color-dark-surface-2, #4d4d4f); + background-color: var(--pkts-color-dark-surface-2, #4d4d4f); } } } diff --git a/packages/ui-css/src/base/tokens.css b/packages/ui-css/src/base/tokens.css index 23cec305..e2ddeece 100644 --- a/packages/ui-css/src/base/tokens.css +++ b/packages/ui-css/src/base/tokens.css @@ -1 +1 @@ -@import "@esnet/esnet-tokens/dist/esnet-tokens.css"; \ No newline at end of file +@import "@esnet/pkts-tokens/dist/pkts-tokens.css"; \ No newline at end of file diff --git a/packages/ui-css/src/base/typography.css b/packages/ui-css/src/base/typography.css index 100962cd..68a161bb 100644 --- a/packages/ui-css/src/base/typography.css +++ b/packages/ui-css/src/base/typography.css @@ -1,5 +1,5 @@ .packets { - color: var(--esnet-color-light-copy, #3d3d3d); + color: var(--pkts-color-light-copy, #3d3d3d); /* General Typography overrides */ h1, @@ -15,32 +15,32 @@ dl, li { width: 100%; - margin: 0 0 var(--esnet-size-spacing-xsmall, 0.5rem); - color: var(--esnet-color-light-copy, #3d3d3d); + margin: 0 0 var(--pkts-size-spacing-xsmall, 0.5rem); + color: var(--pkts-color-light-copy, #3d3d3d); } h1 { - margin: 0 0 var(--esnet-size-spacing-medium, 2rem); + margin: 0 0 var(--pkts-size-spacing-medium, 2rem); } /* Body */ &, body { - color: var(--esnet-color-light-copy, #3d3d3d); + color: var(--pkts-color-light-copy, #3d3d3d); &.dark, & .dark { - color: var(--esnet-color-dark-copy, #ffffff); + color: var(--pkts-color-dark-copy, #ffffff); } font: var( - --esnet-typography-copy-1-sans-font, - 400 16px/120% var(--esnet-font-family-body-sans) + --pkts-typography-copy-1-sans-font, + 400 16px/120% var(--pkts-font-family-body-sans) ); .body2 { font: var( - --esnet-typography-copy-2-sans-font, - 400 16px/120% var(--esnet-font-family-body-sans) + --pkts-typography-copy-2-sans-font, + 400 16px/120% var(--pkts-font-family-body-sans) ); } @@ -65,21 +65,21 @@ mark, .highlight, .highlight-blue { - background-color: var(--esnet-color-core-blue-200, #9ce2ff); + background-color: var(--pkts-color-core-blue-200, #9ce2ff); .dark & { - background-color: var(--esnet-color-core-blue-800, #9ce2ff); + background-color: var(--pkts-color-core-blue-800, #9ce2ff); } } .highlight-yellow { - background-color: var(--esnet-color-core-yellow-200, #fffb7d); + background-color: var(--pkts-color-core-yellow-200, #fffb7d); .dark & { - background-color: var(--esnet-color-core-yellow-600, #cc9e16); + background-color: var(--pkts-color-core-yellow-600, #cc9e16); } } .highlight-pink { - background-color: var(--esnet-color-core-berry-200, #ffa5cb); + background-color: var(--pkts-color-core-berry-200, #ffa5cb); .dark & { - background-color: var(--esnet-color-core-berry-800, #990054); + background-color: var(--pkts-color-core-berry-800, #990054); } } } @@ -90,12 +90,12 @@ h1.display, .display { font: var( - --esnet-typography-banner-1-display-font, - 600 64px/110% var(--esnet-font-family-header-display) + --pkts-typography-banner-1-display-font, + 600 64px/110% var(--pkts-font-family-header-display) ); letter-spacing: var( - --esnet-typography-banner-1-display-letterspacing, + --pkts-typography-banner-1-display-letterspacing, 0.49px ); } @@ -103,12 +103,12 @@ h1.display2, .display2 { font: var( - --esnet-typography-header-1-display-font, - 600 48px/110% var(--esnet-font-family-header-display) + --pkts-typography-header-1-display-font, + 600 48px/110% var(--pkts-font-family-header-display) ); letter-spacing: var( - --esnet-typography-header-1-display-letterspacing, + --pkts-typography-header-1-display-letterspacing, 0.49px ); } @@ -119,17 +119,17 @@ .display1, .display2, .display { - color: var(--esnet-color-core-black-1000, #000000); + color: var(--pkts-color-core-black-1000, #000000); &.branded { - color: var(--esnet-color-light-secondary, #004573); + color: var(--pkts-color-light-secondary, #004573); } .dark & { - color: var(--esnet-color-dark-copy, #ffffff); + color: var(--pkts-color-dark-copy, #ffffff); &.branded { - color: var(--esnet-color-dark-secondary, #00b6f2); + color: var(--pkts-color-dark-secondary, #00b6f2); } } } @@ -140,41 +140,41 @@ text-decoration: underline; cursor: pointer; - color: var(--esnet-color-light-primary, #0088b5); + color: var(--pkts-color-light-primary, #0088b5); .dark & { - color: var(--esnet-color-dark-secondary, #00b6f2); + color: var(--pkts-color-dark-secondary, #00b6f2); } &:visited { - color: var(--esnet-color-light-primary, #0088b5); + color: var(--pkts-color-light-primary, #0088b5); .dark & { - color: var(--esnet-color-dark-secondary, #00b6f2); + color: var(--pkts-color-dark-secondary, #00b6f2); } } &:hover { outline: none; - color: var(--esnet-color-light-secondary, #004573); + color: var(--pkts-color-light-secondary, #004573); .dark & { - color: var(--esnet-color-core-blue-600, #0088b5); + color: var(--pkts-color-core-blue-600, #0088b5); } } &:active, &:focus { outline: none; - color: var(--esnet-color-light-accent, #d96300); + color: var(--pkts-color-light-accent, #d96300); .dark & { - color: var(--esnet-color-dark-accent, #ff8000); + color: var(--pkts-color-dark-accent, #ff8000); } } /* Figma's "inactive" style */ &:not([href]), .inactive { - color: var(--esnet-color-light-copy-alt, #6e6e70); + color: var(--pkts-color-light-copy-alt, #6e6e70); .dark & { - color: var(--esnet-color-dark-copy-alt, #c2c2c2); + color: var(--pkts-color-dark-copy-alt, #c2c2c2); } } } @@ -184,18 +184,18 @@ .h1, .header1 { font: var( - --esnet-typography-header-1-sans-font, - 600 48px/110% var(--esnet-font-family-header-sans) + --pkts-typography-header-1-sans-font, + 600 48px/110% var(--pkts-font-family-header-sans) ); - letter-spacing: var(--esnet-typography-header-1-sans-letterspacing, 0.49px); + letter-spacing: var(--pkts-typography-header-1-sans-letterspacing, 0.49px); } h2, .h2, .header2 { font: var( - --esnet-typography-header-2-sans-font, - 700 39px/130% var(--esnet-font-family-header-sans) + --pkts-typography-header-2-sans-font, + 700 39px/130% var(--pkts-font-family-header-sans) ); } @@ -203,8 +203,8 @@ .h3, .header3 { font: var( - --esnet-typography-header-3-sans-font, - 700 31px/140% var(--esnet-font-family-header-sans) + --pkts-typography-header-3-sans-font, + 700 31px/140% var(--pkts-font-family-header-sans) ); } @@ -212,14 +212,14 @@ .h4, .header4 { font: var( - --esnet-typography-header-4-sans-font, - 700 25px/140% var(--esnet-font-family-header-sans) + --pkts-typography-header-4-sans-font, + 700 25px/140% var(--pkts-font-family-header-sans) ); &.mono { font: var( - --esnet-typography-header-4-mono-font, - 500 25px/140% var(--esnet-font-family-header-mono) + --pkts-typography-header-4-mono-font, + 500 25px/140% var(--pkts-font-family-header-mono) ); } } @@ -228,14 +228,14 @@ .h5, .header5 { font: var( - --esnet-typography-header-5-sans-font, - 600 20px/140% var(--esnet-font-family-header-sans) + --pkts-typography-header-5-sans-font, + 600 20px/140% var(--pkts-font-family-header-sans) ); &.mono { font: var( - --esnet-typography-header-5-mono-font, - 500 20px/140% var(--esnet-font-family-header-mono) + --pkts-typography-header-5-mono-font, + 500 20px/140% var(--pkts-font-family-header-mono) ); } } @@ -244,14 +244,14 @@ .h6, .header6 { font: var( - --esnet-typography-header-6-sans-font, - 600 16px/140% var(--esnet-font-family-header-sans) + --pkts-typography-header-6-sans-font, + 600 16px/140% var(--pkts-font-family-header-sans) ); &.mono { font: var( - --esnet-typography-header-6-mono-font, - 500 16px/140% var(--esnet-font-family-header-mono) + --pkts-typography-header-6-mono-font, + 500 16px/140% var(--pkts-font-family-header-mono) ); } } @@ -276,21 +276,21 @@ .header6 { &.accent1, &.accent { - color: var(--esnet-color-light-secondary, #004573); + color: var(--pkts-color-light-secondary, #004573); } &.accent2 { - color: var(--esnet-color-light-primary, #0088b5); + color: var(--pkts-color-light-primary, #0088b5); } .dark & { &.accent1, &.accent { - color: var(--esnet-color-dark-secondary, #00b6f2); + color: var(--pkts-color-dark-secondary, #00b6f2); } &.accent2 { - color: var(--esnet-color-core-blue-200, #9ce2ff); + color: var(--pkts-color-core-blue-200, #9ce2ff); } } @@ -298,7 +298,7 @@ color: inherit; &:hover { - color: var(--esnet-color-core-blue-500, #00a0d6); + color: var(--pkts-color-core-blue-500, #00a0d6); .dark & { color: var(--color-core-blue-300, #64d2ff); @@ -312,14 +312,14 @@ .small footer, .footer { font: var( - --esnet-typography-copy-1-sans-font, - 400 16px/120% var(--esnet-font-family-body-sans) + --pkts-typography-copy-1-sans-font, + 400 16px/120% var(--pkts-font-family-body-sans) ); - color: var(--esnet-color-light-copy-alt, #6e6e70); + color: var(--pkts-color-light-copy-alt, #6e6e70); .dark & { - color: var(--esnet-color-dark-copy-alt, #c2c2c2); + color: var(--pkts-color-dark-copy-alt, #c2c2c2); } } @@ -330,16 +330,16 @@ display: inline-block; margin: 0; font: var( - --esnet-typography-label-1-sans-font, - 400 12px/120% var(--esnet-font-family-body-sans) + --pkts-typography-label-1-sans-font, + 400 12px/120% var(--pkts-font-family-body-sans) ); letter-spacing: -0.18px; - color: var(--esnet-color-light-copy, #3d3d3d); + color: var(--pkts-color-light-copy, #3d3d3d); &.mono { font: var( - --esnet-typography-label-1-mono-font, - 400 12px/120% var(--esnet-font-family-body-mono) + --pkts-typography-label-1-mono-font, + 400 12px/120% var(--pkts-font-family-body-mono) ); } } @@ -348,10 +348,10 @@ display: inline-block; margin: 0; font: var( - --esnet-typography-label-2-sans-font, - 600 12px/120% var(--esnet-font-family-body-sans) + --pkts-typography-label-2-sans-font, + 600 12px/120% var(--pkts-font-family-body-sans) ); - color: var(--esnet-color-light-copy, #3d3d3d); + color: var(--pkts-color-light-copy, #3d3d3d); } /* Code (in-line only) */ @@ -360,15 +360,15 @@ padding: 0 var(--size-border-width-medium, 4px); border-radius: var(--size-radius-large, 6px); border: var(--size-border-width-xsmall, 1px) solid - var(--esnet-color-core-white-600, #ccc); - background-color: var(--esnet-color-core-white-500, #d9d9d9); - color: var(--esnet-color-light-primary, #0088b5); + var(--pkts-color-core-white-600, #ccc); + background-color: var(--pkts-color-core-white-500, #d9d9d9); + color: var(--pkts-color-light-primary, #0088b5); } /* Dark mode styles - when .dark is on .packets element or an ancestor */ &.dark, .dark & { - color: var(--esnet-color-dark-copy, #e6e6e6); + color: var(--pkts-color-dark-copy, #e6e6e6); h1, h2, @@ -382,22 +382,22 @@ ul, dl, li { - color: var(--esnet-color-dark-copy, #e6e6e6); + color: var(--pkts-color-dark-copy, #e6e6e6); } figcaption, .caption, .label-1, .label-2 { - color: var(--esnet-color-dark-copy, #e6e6e6); + color: var(--pkts-color-dark-copy, #e6e6e6); } code, .code { border: var(--size-border-width-xsmall, 1px) solid - var(--esnet-color-core-slate-1000, #ccc); - background-color: var(--esnet-color-core-black-800, #252526); - color: var(--esnet-color-dark-secondary, #00b6f2); + var(--pkts-color-core-slate-1000, #ccc); + background-color: var(--pkts-color-core-black-800, #252526); + color: var(--pkts-color-dark-secondary, #00b6f2); } } @@ -406,7 +406,7 @@ ul { box-sizing: border-box; padding-left: 1.5rem; - margin: 0 0 var(--esnet-size-spacing-xsmall, 0.5rem); + margin: 0 0 var(--pkts-size-spacing-xsmall, 0.5rem); } ul { diff --git a/packages/ui-css/src/components/accordion.css b/packages/ui-css/src/components/accordion.css index 63aea32b..255a15d9 100644 --- a/packages/ui-css/src/components/accordion.css +++ b/packages/ui-css/src/components/accordion.css @@ -8,20 +8,20 @@ flex-direction: column; /* Styling */ - border-radius: var(--esnet-size-radius-xxlarge); - box-shadow: var(--esnet-box-shadow-core-medium); + border-radius: var(--pkts-size-radius-xxlarge); + box-shadow: var(--pkts-box-shadow-core-medium); } /* Inline variant */ .pkts-accordion.pkts-inline { border-radius: 0; - border-bottom: 1px solid var(--esnet-color-light-copy-alt, #6e6e70); + border-bottom: 1px solid var(--pkts-color-light-copy-alt, #6e6e70); box-shadow: none; } .dark .pkts-accordion.pkts-inline { - border-bottom: 1px solid var(--esnet-color-dark-copy-alt, #6e6e70); + border-bottom: 1px solid var(--pkts-color-dark-copy-alt, #6e6e70); } .pkts-accordion.pkts-inline .pkts-accordion-header { @@ -32,21 +32,21 @@ .pkts-accordion.pkts-inline .pkts-accordion-open-btn svg, .pkts-accordion.pkts-inline .pkts-accordion-action-btns svg { - color: var(--esnet-color-light-secondary); + color: var(--pkts-color-light-secondary); } .dark .pkts-accordion.pkts-inline .pkts-accordion-open-btn svg, .dark .pkts-accordion.pkts-inline .pkts-accordion-action-btns svg { - color: var(--esnet-color-dark-secondary); + color: var(--pkts-color-dark-secondary); } .pkts-accordion.pkts-inline .pkts-accordion-content { background-color: transparent; - padding: 0 var(--esnet-size-spacing-xsmall, 8px); + padding: 0 var(--pkts-size-spacing-xsmall, 8px); } .pkts-accordion.pkts-inline .pkts-accordion-content:last-child { - padding-bottom: var(--esnet-size-spacing-xsmall, 8px); + padding-bottom: var(--pkts-size-spacing-xsmall, 8px); } .pkts-accordion.pkts-inline .pkts-accordion-footer { @@ -58,18 +58,18 @@ /* Header */ .pkts-accordion .pkts-accordion-header { - height: var(--esnet-size-spacing-xlarge, 40px); + height: var(--pkts-size-spacing-xlarge, 40px); display: flex; justify-content: space-between; - gap: var(--esnet-size-spacing-small, 12px); - padding: 0 var(--esnet-size-spacing-xsmall, 8px); - background-color: var(--esnet-color-light-primary); - color: var(--esnet-color-core-white-100); - font: var(--esnet-typography-header-5-sans-font); + gap: var(--pkts-size-spacing-small, 12px); + padding: 0 var(--pkts-size-spacing-xsmall, 8px); + background-color: var(--pkts-color-light-primary); + color: var(--pkts-color-core-white-100); + font: var(--pkts-typography-header-5-sans-font); } .dark .pkts-accordion .pkts-accordion-header { - background-color: var(--esnet-color-dark-primary); + background-color: var(--pkts-color-dark-primary); } .dark .pkts-accordion.pkts-inline .pkts-accordion-header { @@ -92,7 +92,7 @@ padding: 0; display: flex; align-items: center; - gap: var(--esnet-size-spacing-xsmall); + gap: var(--pkts-size-spacing-xsmall); color: inherit; font: inherit; overflow: hidden; @@ -113,7 +113,7 @@ display: flex; align-items: center; flex-shrink: 0; - gap: var(--esnet-size-spacing-xsmall); + gap: var(--pkts-size-spacing-xsmall); } /* Content */ @@ -122,13 +122,13 @@ width: 100%; overflow: hidden; box-sizing: border-box; - padding: var(--esnet-size-spacing-xsmall, 8px); - font: var(--esnet-typography-copy-1-sans-font); - background-color: var(--esnet-color-light-surface-1); + padding: var(--pkts-size-spacing-xsmall, 8px); + font: var(--pkts-typography-copy-1-sans-font); + background-color: var(--pkts-color-light-surface-1); } .dark .pkts-accordion .pkts-accordion-content { - background-color: var(--esnet-color-dark-surface-1); + background-color: var(--pkts-color-dark-surface-1); } .dark .pkts-accordion.pkts-inline .pkts-accordion-content { @@ -142,18 +142,18 @@ /* Footer */ .pkts-accordion .pkts-accordion-footer { - height: var(--esnet-size-spacing-xlarge, 40px); - padding: 0 var(--esnet-size-spacing-xsmall, 8px); + height: var(--pkts-size-spacing-xlarge, 40px); + padding: 0 var(--pkts-size-spacing-xsmall, 8px); display: flex; align-items: center; - font: var(--esnet-typography-copy-1-sans-font); - background-color: var(--esnet-color-core-slate-600); - color: var(--esnet-color-core-white-100); + font: var(--pkts-typography-copy-1-sans-font); + background-color: var(--pkts-color-core-slate-600); + color: var(--pkts-color-core-white-100); } .dark .pkts-accordion .pkts-accordion-footer { - background-color: var(--esnet-color-core-slate-700); - color: var(--esnet-color-core-white-100); + background-color: var(--pkts-color-core-slate-700); + color: var(--pkts-color-core-white-100); } .pkts-accordion .pkts-accordion-footer span { diff --git a/packages/ui-css/src/components/alert.css b/packages/ui-css/src/components/alert.css index c0337769..51820f02 100644 --- a/packages/ui-css/src/components/alert.css +++ b/packages/ui-css/src/components/alert.css @@ -9,20 +9,20 @@ */ .pkts-alert { - --icon-size: var(--esnet-size-touchtarget-min, 32px); - --section-gap: var(--esnet-size-spacing-medium, 16px); + --icon-size: var(--pkts-size-touchtarget-min, 32px); + --section-gap: var(--pkts-size-spacing-medium, 16px); --title-label-font: var( - --esnet-typography-header-5-sans-font, - 600 20px/140% var(--esnet-font-family-header-sans) + --pkts-typography-header-5-sans-font, + 600 20px/140% var(--pkts-font-family-header-sans) ); - border-radius: var(--esnet-size-radius-xlarge, 8px); - padding: var(--esnet-size-spacing-medium, 16px); + border-radius: var(--pkts-size-radius-xlarge, 8px); + padding: var(--pkts-size-spacing-medium, 16px); display: flex; gap: var(--section-gap); - background-color: var(--esnet-color-light-surface-2, #f2f2f2); + background-color: var(--pkts-color-light-surface-2, #f2f2f2); - animation: fadeInSlideUp var(--esnet-time-duration-quick, 250ms) ease-in-out; + animation: fadeInSlideUp var(--pkts-time-duration-quick, 250ms) ease-in-out; } @media (prefers-reduced-motion) { @@ -32,8 +32,8 @@ } .dark .pkts-alert { - color: var(--esnet-color-dark-copy, #e6e6e6); - background-color: var(--esnet-color-dark-surface-2, #f2f2f2); + color: var(--pkts-color-dark-copy, #e6e6e6); + background-color: var(--pkts-color-dark-surface-2, #f2f2f2); } .dark .pkts-alert label, @@ -44,7 +44,7 @@ .dark .pkts-alert h4, .dark .pkts-alert h5, .dark .pkts-alert h6 { - color: var(--esnet-color-dark-copy, #e6e6e6); + color: var(--pkts-color-dark-copy, #e6e6e6); } /* Icon - class-based or semantic */ @@ -72,11 +72,11 @@ } .pkts-alert aside:last-child button svg { - color: var(--esnet-color-light-copy, #000000); + color: var(--pkts-color-light-copy, #000000); } .dark .pkts-alert aside:last-child button svg { - color: var(--esnet-color-dark-copy, #e6e6e6); + color: var(--pkts-color-dark-copy, #e6e6e6); } /* Title - class-based or semantic */ @@ -89,7 +89,7 @@ @keyframes fadeInSlideUp { from { - translate: 0 var(--esnet-size-spacing-medium, 16px); + translate: 0 var(--pkts-size-spacing-medium, 16px); opacity: 0; transform: scale(0.95); } diff --git a/packages/ui-css/src/components/avatar.css b/packages/ui-css/src/components/avatar.css index 31d64e89..48fe791a 100644 --- a/packages/ui-css/src/components/avatar.css +++ b/packages/ui-css/src/components/avatar.css @@ -11,19 +11,19 @@ .pkts-avatar { --shadow: var( - --esnet-box-shadow-core-light, + --pkts-box-shadow-core-light, 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 3px -1px rgb(0 0 0 / 0.1) ); - --border: var(--esnet-size-border-width-small, 2px) solid - var(--esnet-color-core-white-100, #fff); - --border-radius: var(--esnet-size-radius-xxlarge, 18px); - --border-hover-color: var(--esnet-color-core-blue-600, #0088b5); + --border: var(--pkts-size-border-width-small, 2px) solid + var(--pkts-color-core-white-100, #fff); + --border-radius: var(--pkts-size-radius-xxlarge, 18px); + --border-hover-color: var(--pkts-color-core-blue-600, #0088b5); - --size: var(--esnet-size-spacing-xlarge, 40px); + --size: var(--pkts-size-spacing-xlarge, 40px); --label-font: var( - --esnet-typography-header-5-sans-font, - 600 20px/140% var(--esnet-font-family-header-sans) + --pkts-typography-header-5-sans-font, + 600 20px/140% var(--pkts-font-family-header-sans) ); display: flex; @@ -55,7 +55,7 @@ font: var(--label-font); text-decoration: none; text-transform: uppercase; - color: var(--esnet-color-core-white-100, #fff); + color: var(--pkts-color-core-white-100, #fff); /* Shift baseline down slightly for better visual centering */ transform: translateY(1px); @@ -70,7 +70,7 @@ max-width: 110%; max-height: 110%; /* Ensure alt text is white when image fails to load */ - color: var(--esnet-color-core-white-100, #fff); + color: var(--pkts-color-core-white-100, #fff); } .pkts-avatar.broken-image img, @@ -100,17 +100,17 @@ .pkts-avatar.pkts-small { --size: 24px; --label-font: var( - --esnet-typography-label-1-sans-font, - 400 12px/120% var(--esnet-font-family-body-sans) + --pkts-typography-label-1-sans-font, + 400 12px/120% var(--pkts-font-family-body-sans) ); --border-radius: 10px; } .pkts-avatar.pkts-medium { - --size: var(--esnet-size-spacing-xlarge, 40px); + --size: var(--pkts-size-spacing-xlarge, 40px); --label-font: var( - --esnet-typography-header-5-sans-font, - 600 20px/140% var(--esnet-font-family-header-sans) + --pkts-typography-header-5-sans-font, + 600 20px/140% var(--pkts-font-family-header-sans) ); /* There isn't a token for border radius of 14px (or even 12px/0.75rem) that matches the Figma specification */ --border-radius: 14px; @@ -119,26 +119,26 @@ .pkts-avatar.pkts-large { --size: 48px; --label-font: var( - --esnet-typography-header-4-sans-font, - 500 24px/140% var(--esnet-font-family-header-sans) + --pkts-typography-header-4-sans-font, + 500 24px/140% var(--pkts-font-family-header-sans) ); - --border-radius: var(--esnet-size-radius-xxlarge, 18px); + --border-radius: var(--pkts-size-radius-xxlarge, 18px); } /* Color Variants */ .pkts-avatar.pkts-grape { - background-color: var(--esnet-color-core-purple-500, #a350ff); + background-color: var(--pkts-color-core-purple-500, #a350ff); } .pkts-avatar.pkts-lime { - background-color: var(--esnet-color-core-green-500, #11ad2b); + background-color: var(--pkts-color-core-green-500, #11ad2b); } .pkts-avatar.pkts-berry { - background-color: var(--esnet-color-core-berry-500, #ff2377); + background-color: var(--pkts-color-core-berry-500, #ff2377); } .pkts-avatar.pkts-orange { - background-color: var(--esnet-color-core-orange-500, #ff8000); + background-color: var(--pkts-color-core-orange-500, #ff8000); } diff --git a/packages/ui-css/src/components/badge.css b/packages/ui-css/src/components/badge.css index 160a0a28..c0349f26 100644 --- a/packages/ui-css/src/components/badge.css +++ b/packages/ui-css/src/components/badge.css @@ -5,15 +5,15 @@ min-width: 12px; height: 20px; padding: 2px 6px; - border-radius: var(--esnet-size-radius-circle, 100px); + border-radius: var(--pkts-size-radius-circle, 100px); font: var( - --esnet-typography-label-2-sans-font, - 700 12px/120% var(--esnet-font-family-body-sans) + --pkts-typography-label-2-sans-font, + 700 12px/120% var(--pkts-font-family-body-sans) ); - background-color: var(--esnet-color-light-primary, #0088b5); - color: var(--esnet-color-core-white-100, #ffffff); + background-color: var(--pkts-color-light-primary, #0088b5); + color: var(--pkts-color-core-white-100, #ffffff); } .dark .pkts-badge { - background-color: var(--esnet-color-dark-primary, #004573); + background-color: var(--pkts-color-dark-primary, #004573); } diff --git a/packages/ui-css/src/components/breadcrumbs.css b/packages/ui-css/src/components/breadcrumbs.css index 552b8478..50f25762 100644 --- a/packages/ui-css/src/components/breadcrumbs.css +++ b/packages/ui-css/src/components/breadcrumbs.css @@ -1,11 +1,11 @@ .pkts-breadcrumbs { - --divider-color: var(--esnet-color-core-black-500, #4d4d4f); - --link-color: var(--esnet-color-light-copy, #3d3d3d); + --divider-color: var(--pkts-color-core-black-500, #4d4d4f); + --link-color: var(--pkts-color-light-copy, #3d3d3d); display: flex; - gap: var(--esnet-size-spacing-xsmall); + gap: var(--pkts-size-spacing-xsmall); flex-wrap: wrap; - margin-bottom: var(--esnet-size-spacing-medium); + margin-bottom: var(--pkts-size-spacing-medium); list-style: none; padding: 0; margin: 0; @@ -13,14 +13,14 @@ } .dark .pkts-breadcrumbs { - --divider-color: var(--esnet-color-core-white-800, #b3b3b3); - --link-color: var(--esnet-color-dark-copy, #e6e6e6); + --divider-color: var(--pkts-color-core-white-800, #b3b3b3); + --link-color: var(--pkts-color-dark-copy, #e6e6e6); } .pkts-breadcrumbs li { display: flex; align-items: center; - gap: var(--esnet-size-spacing-xsmall); + gap: var(--pkts-size-spacing-xsmall); width: auto; color: var(--link-color); } @@ -39,8 +39,8 @@ display: inline-block; color: var(--divider-color); font: var( - --esnet-typography-label-2-sans-font, - 700 12px/120% var(--esnet-font-family-body-sans) + --pkts-typography-label-2-sans-font, + 700 12px/120% var(--pkts-font-family-body-sans) ); } diff --git a/packages/ui-css/src/components/button-group.css b/packages/ui-css/src/components/button-group.css index 5dd11e24..51cf4b16 100644 --- a/packages/ui-css/src/components/button-group.css +++ b/packages/ui-css/src/components/button-group.css @@ -1,7 +1,7 @@ .pkts-button-group { - --spacing: var(--esnet-size-spacing-xsmall, 8px); - --label-color: var(--esnet-color-light-copy, #3d3d3d); - --label-color-dark: var(--esnet-color-dark-copy, #e6e6e6); + --spacing: var(--pkts-size-spacing-xsmall, 8px); + --label-color: var(--pkts-color-light-copy, #3d3d3d); + --label-color-dark: var(--pkts-color-dark-copy, #e6e6e6); width: fit-content; } diff --git a/packages/ui-css/src/components/button.css b/packages/ui-css/src/components/button.css index ec96e47c..2c059393 100644 --- a/packages/ui-css/src/components/button.css +++ b/packages/ui-css/src/components/button.css @@ -4,35 +4,33 @@ Base styles for button component. Variants are applied via composable classes: - Color variants: .pkts-primary, .pkts-secondary, .pkts-tertiary, .pkts-destructive, .pkts-branded - - Size variants: .pkts-medium, .pkts-xxlarge - - Layout variants: .pkts-fill, .pkts-nofill Usage: