@indico-data/design-system 2.0.3 → 2.1.2

package/.commitlintrc.ts

@@ -0,0 +1,13 @@
+export default {
+  extends: ['@commitlint/config-conventional'],
+  rules: {
+    'type-enum': [
+      2,
+      'always',
+      ['Fix', 'Update', 'New', 'Breaking', 'Docs', 'Build', 'Upgrade', 'Chore'],
+    ],
+    'type-case': [0],
+    'subject-case': [0],
+    'header-max-length': [2, 'always', 72],
+  },
+};

package/.harness/pipeline.yaml

@@ -4,7 +4,7 @@ pipeline:
   tags: {}
   template:
     templateRef: Design_System
-    versionLabel: 2.0.0
+    versionLabel: 3.0.0
     templateInputs:
       properties:
         ci:

package/.releaserc.json

@@ -1,3 +1,18 @@
 {
-  "branches": ["main"]
+  "branches": ["main"],
+  "plugins": [
+    [
+      "@semantic-release/commit-analyzer",
+      {
+        "preset": "eslint",
+        "releaseRules": [
+          { "type": "Breaking", "release": "major" },
+          { "type": "Fix", "release": "patch" },
+          { "type": "Update", "release": "patch" },
+          { "type": "New", "release": "minor" }
+        ]
+      }
+    ],
+    "@semantic-release/npm"
+  ]
 }

package/README.md

@@ -23,55 +23,76 @@ Run the below like `yarn <my command>`
 
 ## Commit Hygiene
 
-This repository follows the [Angular Commit Message Format](https://github.com/angular/angular/blob/main/CONTRIBUTING.md#-commit-message-format). This repository uses the PR title and description to configure the contents of the commit message of the squashed commit associated with the PR: In general, a PR should use the following structure:
+This repository follows a slightly modified version of the [ESLint Commit Message Format](https://github.com/conventional-changelog/conventional-changelog/tree/master/packages/conventional-changelog-eslint). This repository uses the PR title to configure the contents of the commit message of the squashed commit associated with the PR: In general, a PR should use the following structure:
 
 ### Title
 
-Should have the following format: `<type>(<scope | ticket id>): <short summary>`
+The title should have the following format: `<type>(<optional ticket id>): <short summary>`
 
-- `<type>` should be `fix`, `feat`, `perf` for controlling releases
+The `<type>` should be `Fix`, `Update`, `New`, or `Breaking` for controlling releases.
+
+If the PR need not be associated with a new release, choose any other `<type>` from the [ESLint commit convention tags](https://github.com/conventional-changelog/conventional-changelog/tree/master/packages/conventional-changelog-eslint#eslint-convention), such as `Docs` (documentation), `Build` (build process), `Upgrade` (dependency upgrade), or `Chore` (non-user-facing tasks).
 
 Examples:
 
-- `fix(SNC-221): cleanup README`
-- `feat(SNC-222): add dark mode`
-- `perf(SNC-223): improve canvas performance`
+- `Update: button color adjustment`
+- `New(SNC-222): add dark mode`
 
-### Description
+If your PR title does not follow these commit conventions, merging will be blocked.
 
-Format:
+See below for more information on how commit structure affects releases.
 
-```
-<General Description of PR Changes>
-<Empty Line>
-<Footer>
-```
+## Releasing
 
-The footer should start with `BREAKING CHANGE:` to initiate a major release.
+This repository uses [Semantic Release](https://github.com/semantic-release/semantic-release) to control versioning and releases. Semantic Release's prime purpose is to remove developers from the version numbering process, and this repository embraces that philosophy.
 
-Example:
+### Automatic Releases
 
-```
-This PR includes major changes to the button component.
+Two things primarily determine how a new release is versioned:
 
-BREAKING CHANGE: Replaced button component.
-```
+1. The commit history leading up to the commit being released (to determine the base version from which to bump)
+2. The message of the commit being released (to determine the version incrementation amount)
 
-![Screenshot 2024-05-28 at 3 30 44 PM](https://github.com/IndicoDataSolutions/permafrost/assets/55521630/cfe13ed8-a596-4d5b-bcfa-e5c108d7128f)
+To release a new version as part of a pull request, use a [semantic commit message](https://github.com/semantic-release/semantic-release?tab=readme-ov-file#commit-message-format) (prefixes like `Fix`, `Update`, `New`, or `Breaking`) in the title of your pull request. This repo uses a slightly modified version of the [ESLint conventional changelog](https://github.com/conventional-changelog/conventional-changelog/tree/master/packages/conventional-changelog-eslint) to describe commit conventions.
 
-See below for more information on how commit structure affects releases.
+- `Fix` or `Update`: Initiate a patch release
+- `New`: Initiate a minor release
+- `Breaking`: Initiate a major release
 
-## Releasing
+If your PR title does not follow these commit conventions, merging will be blocked.
 
-### Automatic Releases
+Under the hood, [Semantic Release controls the npm release process entirely by way of managed Git tags](https://semantic-release.gitbook.io/semantic-release/support/faq#why-is-the-package.jsons-version-not-updated-in-my-repository). Updating the `package.json` version number is unnecessary and discouraged.
+
+### Releasing a Non-Latest Version
+
+To release a patch version on a previous major version:
+
+- Checkout a new branch off the old version you'd like to release from: `git checkout -b <branch-name> <tag-name>` (e.g. `git checkout -b ethan/patch-fix v2.0.2`)
+- Commit as normally, using the PR Title conventions outlined above
+- Semantic Release will take care of the versioning
+
+### Tracking Releases
+
+If you want to view the latest version of the Design System, you have a few options:
+
+- From this repository, run `yarn latest-release`
+- From outside this repository, run `npm dist-tags ls @indico-data/design-system`
+
+If you want to see all releases:
+
+- From this repository, run `yarn all-releases`
+- From outside this repository, run `npm view @indico-data/design-system versions`
+- View the git tags at https://github.com/IndicoDataSolutions/permafrost for specific information about each release
+- Consult the npm registry at https://www.npmjs.com/package/@indico-data/design-system
 
-This repository uses [Semantic Release](https://github.com/semantic-release/semantic-release) to control versioning and releases. To release a new version as part of a pull request, use a [semantic commit message](https://github.com/semantic-release/semantic-release?tab=readme-ov-file#commit-message-format) (prefixes like `fix` `feat`, `perf`, or `BREAKING CHANGE` in the footer) in the title and description of your pull request.
+Do NOT use the `version` attribute of `package.json` to track or initiate releases because:
 
-You also need not update the version number in `package.json`, since [Semantic Release controls the npm release process entirely by way of managed Git tags](https://semantic-release.gitbook.io/semantic-release/support/faq#why-is-the-package.jsons-version-not-updated-in-my-repository).
+- Semantic Release does not rely on this attribute to trigger releases: https://semantic-release.gitbook.io/semantic-release/support/faq
+- Adding an additional commit to update the version number adds complexity to the CI process and clutters commit history
 
 ### Manual Releases
 
-Do not manually release Permafrost, as it may cause issues with the Semantic Release pipeline.
+Do not manually release Permafrost to npm, as it may cause issues with the Semantic Release pipeline.
 
 ## Theming Addon Documentation
 

package/lib/index.css

@@ -96,66 +96,66 @@
 }
 
 :root [data-theme=dark] {
-  --pf-primary-color: #27374D;
-  --pf-primary-color-100: #E2E4E8;
-  --pf-primary-color-200: #B6BAC1;
-  --pf-primary-color-300: #898F9A;
-  --pf-primary-color-400: #5D6573;
-  --pf-primary-color-500: #27374D;
-  --pf-primary-color-600: #202C3A;
-  --pf-primary-color-700: #192228;
-  --pf-primary-color-800: #131816;
-  --pf-primary-color-900: #0D0E0E;
-  --pf-secondary-color: #526D82;
-  --pf-secondary-color-100: #E6E9EB;
-  --pf-secondary-color-200: #C0C7CD;
-  --pf-secondary-color-300: #99A5AF;
-  --pf-secondary-color-400: #738491;
-  --pf-secondary-color-500: #526D82;
-  --pf-secondary-color-600: #3F5866;
-  --pf-secondary-color-700: #2C434A;
-  --pf-secondary-color-800: #1A2E2E;
-  --pf-secondary-color-900: #071919;
-  --pf-gray-color: #DDE6ED;
-  --pf-gray-color-100: #F7F9FA;
-  --pf-gray-color-200: #EAF2F5;
-  --pf-gray-color-300: #DDE6ED;
-  --pf-gray-color-400: #D1DAE5;
-  --pf-gray-color-500: #C4CFDD;
-  --pf-gray-color-600: #B7C3D5;
-  --pf-gray-color-700: #AAB8CD;
-  --pf-gray-color-800: #9DACB5;
-  --pf-gray-color-900: #90A19D;
-  --pf-green-color: #82DD55;
-  --pf-green-color-100: #F0FFF2;
-  --pf-green-color-200: #E1FFD5;
-  --pf-green-color-300: #D2FFB8;
-  --pf-green-color-400: #C3FF9B;
-  --pf-green-color-500: #82DD55;
-  --pf-green-color-600: #6FC94A;
-  --pf-green-color-700: #5CB53F;
-  --pf-green-color-800: #4AA134;
-  --pf-green-color-900: #388D29;
-  --pf-orange-color: #EDB95E;
-  --pf-orange-color-100: #FFF7E6;
-  --pf-orange-color-200: #FFEDCC;
-  --pf-orange-color-300: #FFE4B2;
-  --pf-orange-color-400: #FFDA99;
-  --pf-orange-color-500: #EDB95E;
-  --pf-orange-color-600: #DAA54D;
-  --pf-orange-color-700: #C7913D;
-  --pf-orange-color-800: #B47D2D;
-  --pf-orange-color-900: #A1691D;
-  --pf-red-color: #E23636;
-  --pf-red-color-100: #FDECEC;
-  --pf-red-color-200: #FBD1D1;
-  --pf-red-color-300: #F9B6B6;
-  --pf-red-color-400: #F79B9B;
-  --pf-red-color-500: #E23636;
-  --pf-red-color-600: #C72F2F;
-  --pf-red-color-700: #AC2828;
-  --pf-red-color-800: #912121;
-  --pf-red-color-900: #761A1A;
+  --pf-primary-color: #262c3a;
+  --pf-primary-color-100: #8194c0;
+  --pf-primary-color-200: #5b6b8f;
+  --pf-primary-color-300: #3b455e;
+  --pf-primary-color-400: #323a4d;
+  --pf-primary-color-500: #262c3a;
+  --pf-primary-color-600: #1f2431;
+  --pf-primary-color-700: #1c2632;
+  --pf-primary-color-800: #1b202c;
+  --pf-primary-color-900: #141b24;
+  --pf-secondary-color: #0070f5;
+  --pf-secondary-color-100: #dceafd;
+  --pf-secondary-color-200: #b3d4fc;
+  --pf-secondary-color-300: #7ab5fa;
+  --pf-secondary-color-400: #4797f5;
+  --pf-secondary-color-500: #0070f5;
+  --pf-secondary-color-600: #0067e1;
+  --pf-secondary-color-700: #005ac4;
+  --pf-secondary-color-800: #004eac;
+  --pf-secondary-color-900: #004393;
+  --pf-gray-color: #bfc1c3;
+  --pf-gray-color-100: #efefef;
+  --pf-gray-color-200: #eaeaea;
+  --pf-gray-color-300: #dcdcdc;
+  --pf-gray-color-400: #d2d2d2;
+  --pf-gray-color-500: #bfc1c3;
+  --pf-gray-color-600: #a0a0a0;
+  --pf-gray-color-700: #828588;
+  --pf-gray-color-800: #797979;
+  --pf-gray-color-900: #585858;
+  --pf-green-color: #199d19;
+  --pf-green-color-100: #98ff98;
+  --pf-green-color-200: #76ff76;
+  --pf-green-color-300: #63eb63;
+  --pf-green-color-400: #41ca41;
+  --pf-green-color-500: #199d19;
+  --pf-green-color-600: #168116;
+  --pf-green-color-700: #106710;
+  --pf-green-color-800: #0d5a0d;
+  --pf-green-color-900: #0a500a;
+  --pf-orange-color: #da9534;
+  --pf-orange-color-100: #ffd599;
+  --pf-orange-color-200: #ffc676;
+  --pf-orange-color-300: #f7b75b;
+  --pf-orange-color-400: #f1ab48;
+  --pf-orange-color-500: #da9534;
+  --pf-orange-color-600: #c7892f;
+  --pf-orange-color-700: #a87428;
+  --pf-orange-color-800: #825b22;
+  --pf-orange-color-900: #68481a;
+  --pf-red-color: #f44d4f;
+  --pf-red-color-100: #ffa9aa;
+  --pf-red-color-200: #ff8a8b;
+  --pf-red-color-300: #ff7577;
+  --pf-red-color-400: #ff6466;
+  --pf-red-color-500: #f44d4f;
+  --pf-red-color-600: #cf4244;
+  --pf-red-color-700: #b4393a;
+  --pf-red-color-800: #9a3132;
+  --pf-red-color-900: #752324;
   --pf-error-color: var(--pf-red-color);
   --pf-success-color: var(--pf-green-color);
   --pf-warning-color: var(--pf-orange-color);
@@ -286,8 +286,9 @@
   padding-bottom: 10px;
 }
 
+:root,
 :root [data-theme=light],
-:root {
+:root [data-theme=dark] {
   --pf-button-font-weight-bold: var(--pf-font-weight-bold);
   --pf-button-font-weight-regular: var(--pf-button-font-weight-regular);
   --pf-button-background-primary-color: var(--pf-primary-color);
@@ -312,32 +313,44 @@
   --pf-button-error-text-color: var(--pf-white-color);
   --pf-button-outline-hover-error-color: var(--pf-red-color-100);
   --pf-button-background-success-color: var(--pf-success-color);
-  --pf-button-disabled-success-color: var(--pf-green-color-300);
   --pf-button-focus-success-color: var(--pf-green-color-900);
   --pf-button-hover-success-color: var(--pf-green-color-400);
   --pf-button-success-color: var(--pf-success-color);
   --pf-button-success-text-color: var(--pf-white-color);
   --pf-button-outline-hover-success-color: var(--pf-green-color-100);
   --pf-button-background-warning-color: var(--pf-warning-color);
-  --pf-button-disabled-warning-color: var(--pf-orange-color-300);
   --pf-button-focus-warning-color: var(--pf-orange-color-900);
   --pf-button-hover-warning-color: var(--pf-orange-color-400);
   --pf-button-warning-color: var(--pf-warning-color);
   --pf-button-warning-text-color: var(--pf-white-color);
-  --pf-button-outline-hover-warning-color: var(--pf-orange-color-100);
-  --pf-button-background-info-color: var(--pf-info-color);
   --pf-button-disabled-info-color: var(--pf-gray-color-300);
   --pf-button-focus-info-color: var(--pf-gray-color-900);
-  --pf-button-hover-info-color: var(--pf-gray-color-400);
   --pf-button-info-color: var(--pf-info-color);
   --pf-button-info-text-color: var(--pf-white-color);
-  --pf-button-outline-hover-info-color: var(--pf-gray-color-100);
   --pf-button-gray-color: var(--pf-gray-color);
   --pf-button-gray-disabled-color: var(--pf-gray-color-400);
   --pf-button-outline-background-color: var(--pf-white-color);
   --pf-button-rounded: var(--pf-rounded);
 }
 
+:root [data-theme=light] {
+  --pf-button-disabled-success-color: var(--pf-green-color-300);
+  --pf-button-disabled-warning-color: var(--pf-orange-color-300);
+  --pf-button-outline-hover-warning-color: var(--pf-orange-color-100);
+  --pf-button-background-info-color: var(--pf-info-color);
+  --pf-button-hover-info-color: var(--pf-gray-color-400);
+  --pf-button-outline-hover-info-color: var(--pf-gray-color-100);
+}
+
+:root [data-theme=dark] {
+  --pf-button-disabled-success-color: var(--pf-green-color-400);
+  --pf-button-disabled-warning-color: var(--pf-orange-color-400);
+  --pf-button-outline-hover-warning-color: var(--pf-orange-color-300);
+  --pf-button-background-info-color: var(--pf-gray-color-800);
+  --pf-button-hover-info-color: var(--pf-gray-color-600);
+  --pf-button-outline-hover-info-color: var(--pf-gray-color-300);
+}
+
 .btn {
   display: inline-flex;
   padding: var(--pf-padding-0) var(--pf-padding-3);
@@ -699,6 +712,10 @@
   color: var(--pf-button-gray-disabled-color);
 }
 
+.btn--info {
+  background-color: var(--pf-button-background-info-color);
+}
+
 .btn--info.btn--text {
   background: transparent;
   color: var(--pf-button-info-color);