[Misc] Lint Stylesheets for Hexcode (#9166)

(master → master)

.circleci/config.yml

@@ -19,6 +19,10 @@ jobs:
       - run:
           name: Lint
           command: npm run lint
+      # TODO uncomment when hexcodes are removed from stylesheets
+      # - run:
+      #     name: Run Stylelint
+      #     command: npm run lint:styles
 
 workflows:
   version: 2

.stylelintrc

@@ -0,0 +1,5 @@
+{
+  "rules": {
+    "color-no-hex": true
+  }
+}

package.json

@@ -17,7 +17,8 @@
     "storybook": "storybook dev -p 6006 --ci",
     "build-storybook": "storybook build",
     "jest": "node --expose-gc --no-compilation-cache ./node_modules/.bin/jest --logHeapUsage --maxWorkers=1",
-    "jest:watch": "jest --watch"
+    "jest:watch": "jest --watch",
+    "lint:styles": "stylelint '**/*.scss'"
   },
   "dependencies": {
     "@pdftron/webviewer-react-toolkit": "^0.7.11",
@@ -99,10 +100,10 @@
     "cssnano": "^4.1.11",
     "eslint": "^6.8.0",
     "eslint-plugin-babel": "^5.3.0",
+    "eslint-plugin-custom": "file:eslint-plugin-custom",
     "eslint-plugin-cypress": "^2.8.1",
     "eslint-plugin-import": "^2.20.0",
     "eslint-plugin-jsx-a11y": "^6.2.3",
-    "eslint-plugin-custom": "file:eslint-plugin-custom",
     "eslint-plugin-no-unsanitized": "^4.0.2",
     "eslint-plugin-react": "^7.18.0",
     "eslint-plugin-react-hooks": "^2.3.0",
@@ -133,6 +134,7 @@
     "storybook": "^8.1.0",
     "storybook-addon-pseudo-states": "^3.1.1",
     "style-loader": "^1.1.3",
+    "stylelint": "^13.13.1",
     "svg-inline-loader": "^0.8.0",
     "typescript": "^5.4.5",
     "webpack": "^5.91.0",

src/constants/dark.scss

@@ -1,4 +1,5 @@
 :root {
+  /* stylelint-disable color-no-hex */
   --blue-1: #192530;
   --blue-2: #1B2B3A;
   --blue-3: #334250;
@@ -22,6 +23,7 @@
 
   --yellow-1: #e1b90080;
   --red: red;
+  /* stylelint-enable color-no-hex */
 
   --panel-background: var(--gray-3);
   --faded-component-background: var(--gray-1);
@@ -78,6 +80,8 @@
 
   --image-signature-drop-background: var(--blue-1);
   --image-signature-drop-border: var(--blue-6);
+  --file-picker-drop-background: var(--blue-1);
+  --file-picker-drop-border: var(--blue-6);
   --signature-draw-background: var(--gray-3);
   --modal-stroke-and-border: var(--gray-4);
   --modal-negative-space: rgba(0, 0, 0, 0.3);
@@ -104,4 +108,12 @@
   --outline-color: var(--blue-6);
   --outline-hover: var(--blue-3);
   --outline-selected: var(--blue-3);
-}
+
+  --scale-overlay-item-hover: var(--blue-3);
+
+  --oe-table-dropdown-highlight: var(--blue-5);
+
+  --bookmark-outline-hover-border: transparent;
+
+  --checked-option: var(--blue-6);
+}

src/constants/highContrastDark.scss

@@ -1,4 +1,5 @@
 :root {
+  /* stylelint-disable color-no-hex */
   --blue-1: #192530;
   --blue-2: #1B2B3A;
   --blue-3: #334250;
@@ -23,6 +24,7 @@
 
   --yellow-1: #e1b90080;
   --red: red;
+  /* stylelint-enable color-no-hex */
 
   --panel-background: var(--gray-3);
   --faded-component-background: var(--gray-1);
@@ -100,4 +102,10 @@
 
   --outline-color: var(--blue-7);
   --outline-hover: var(--blue-3);
-}
+
+  --oe-table-dropdown-highlight: var(--blue-5);
+
+  --bookmark-outline-hover-border: transparent;
+
+  --checked-option: var(--blue-6);
+}

src/constants/highContrastLight.scss

@@ -1,4 +1,5 @@
 :root {
+  /* stylelint-disable color-no-hex */
   --blue-1: #E7EDF3;
   --blue-2: #DDE6EE;
   --blue-3: #CFD8E0;
@@ -23,6 +24,7 @@
 
   --yellow-1: #FACE0080;
   --red: red;
+  /* stylelint-enable color-no-hex */
 
   --component-background: var(--gray-0);
   --mobile-presets-background: var(--gray-1);
@@ -103,4 +105,10 @@
   --outline-hover: var(--blue-1);
 
   --preset-background: var(--gray-1);
-}
+
+  --oe-table-dropdown-highlight: var(--blue-4);
+
+  --bookmark-outline-hover-border: transparent;
+
+  --checked-option: var(--blue-5);
+}

src/constants/light.scss

@@ -1,4 +1,5 @@
 :root {
+  /* stylelint-disable color-no-hex */
   --blue-1: #E7EDF3;
   --blue-2: #DDE6EE;
   --blue-3: #CFD8E0;
@@ -22,6 +23,7 @@
 
   --yellow-1: #FACE0080;
   --red: red;
+  /* stylelint-enable color-no-hex */
 
   --component-background: var(--gray-0);
   --mobile-presets-background: var(--gray-1);

src/constants/lightWCAG.scss

@@ -1,4 +1,5 @@
 :root {
+  /* stylelint-disable color-no-hex */
   --blue-1: #E7EDF3;
   --blue-2: #DDE6EE;
   --blue-3: #CFD8E0;
@@ -23,6 +24,7 @@
 
   --yellow-1: #FACE0080;
   --red: #D52A2A;
+  /* stylelint-enable color-no-hex */
 
   --component-background: var(--gray-0);
   --mobile-presets-background: var(--gray-1);

src/constants/styles.scss

@@ -35,6 +35,7 @@ $button-width-m: 41px;
 $button-height-m: 41px;
 $search-overlay-height-m: 61px;
 
+/* stylelint-disable color-no-hex */
 // TODO: Remove
 // Old Colors
 $white: #fff;
@@ -61,6 +62,7 @@ $headers-z-index: 72;
 // Dark defaults for new ui:
 $gray-3: #343A40;
 $light-gray: #e7ebee;
+/* stylelint-enable color-no-hex */
 
 %open {
   &.open {

src/index.scss

@@ -26,6 +26,7 @@
 
 /* copied from webviewer react toolkit for shadow dom */
 :host {
+  /* stylelint-disable color-no-hex */
   --color-theme-primary: #00a5e4;
   --color-theme-secondary: #242933;
   --color-font-primary: #232229;
@@ -47,11 +48,13 @@
   --color-message-success: #27ae60;
   --color-message-warning: #e67e22;
   --color-message-error: #e74c3c;
+  --color-background-canvas: #eee;
+  /* stylelint-enable color-no-hex */
+
   --color-message-info-focus-shadow: rgba(41, 128, 185, 0.4);
   --color-message-success-focus-shadow: rgba(39, 174, 96, 0.4);
   --color-message-warning-focus-shadow: rgba(230, 126, 34, 0.4);
   --color-message-error-focus-shadow: rgba(231, 76, 60, 0.4);
-  --color-background-canvas: #eee;
   --color-focus-shadow: rgba(20, 110, 170, 0.4);
   --color-overlay-canvas: rgba(0, 0, 0, 0.4);
   --font-size-tiny: 9px;