fix(fuselage): StatusBullet styles (#841)

packages/fuselage-tokens/package.json

@@ -56,7 +56,7 @@
     "lint-all": "workspace:~",
     "lint-staged": "~12.3.3",
     "npm-run-all": "^4.1.5",
-    "postcss-scss": "~4.0.3",
+    "postcss-scss": "~4.0.4",
     "prettier": "~2.5.1",
     "rimraf": "^3.0.2",
     "style-dictionary": "~3.7.0",

packages/fuselage/package.json

@@ -103,12 +103,12 @@
     "normalize.css": "^8.0.1",
     "npm-run-all": "^4.1.5",
     "path-browserify": "^1.0.1",
-    "postcss": "~8.4.6",
-    "postcss-custom-properties": "~12.1.4",
-    "postcss-dir-pseudo-class": "~6.0.4",
+    "postcss": "~8.4.16",
+    "postcss-custom-properties": "~12.1.8",
+    "postcss-dir-pseudo-class": "~6.0.5",
     "postcss-loader": "~6.2.1",
     "postcss-logical": "~5.0.4",
-    "postcss-scss": "~4.0.3",
+    "postcss-scss": "~4.0.4",
     "postcss-svg": "~3.0.0",
     "prettier": "~2.5.1",
     "react": "^17.0.2",

packages/fuselage/src/components/StatusBullet/StatusBullet.styles.scss

@@ -1,25 +1,26 @@
+@use 'sass:list';
 @use '../../styles/colors.scss';
 @use '../../styles/lengths.scss';
 @use '../../styles/functions.scss';
 @use '../../styles/mixins/size.scss';
 
-$status-bullet-online-background-color: theme(
+$status-bullet-online-background-color: functions.theme(
   'status-bullet-online-background-color',
   colors.success(500)
 );
-$status-bullet-away-background: theme(
+$status-bullet-away-background: functions.theme(
   'status-bullet-away-background',
   url('./icons/away.svg') top left / contain no-repeat
 );
-$status-bullet-busy-background: theme(
+$status-bullet-busy-background: functions.theme(
   'status-bullet-busy-background',
   url('./icons/busy.svg') top left / contain no-repeat
 );
-$status-bullet-offline-background: theme(
+$status-bullet-offline-background: functions.theme(
   'status-bullet-offline-background',
   url('./icons/offline.svg') top left / contain no-repeat
 );
-$status-bullet-loading-background: theme(
+$status-bullet-loading-background: functions.theme(
   'status-bullet-loading-background',
   url('./icons/loading.svg') top left / contain no-repeat
 );

yarn.lock

@@ -7450,7 +7450,7 @@ __metadata:
     lint-all: "workspace:~"
     lint-staged: ~12.3.3
     npm-run-all: ^4.1.5
-    postcss-scss: ~4.0.3
+    postcss-scss: ~4.0.4
     prettier: ~2.5.1
     rimraf: ^3.0.2
     style-dictionary: ~3.7.0
@@ -7562,12 +7562,12 @@ __metadata:
     normalize.css: ^8.0.1
     npm-run-all: ^4.1.5
     path-browserify: ^1.0.1
-    postcss: ~8.4.6
-    postcss-custom-properties: ~12.1.4
-    postcss-dir-pseudo-class: ~6.0.4
+    postcss: ~8.4.16
+    postcss-custom-properties: ~12.1.8
+    postcss-dir-pseudo-class: ~6.0.5
     postcss-loader: ~6.2.1
     postcss-logical: ~5.0.4
-    postcss-scss: ~4.0.3
+    postcss-scss: ~4.0.4
     postcss-svg: ~3.0.0
     prettier: ~2.5.1
     react: ^17.0.2
@@ -26410,7 +26410,7 @@ fsevents@~2.1.2:
   languageName: node
   linkType: hard
 
-"postcss-custom-properties@npm:^12.1.8":
+"postcss-custom-properties@npm:^12.1.8, postcss-custom-properties@npm:~12.1.8":
   version: 12.1.8
   resolution: "postcss-custom-properties@npm:12.1.8"
   dependencies:
@@ -26421,17 +26421,6 @@ fsevents@~2.1.2:
   languageName: node
   linkType: hard
 
-"postcss-custom-properties@npm:~12.1.4":
-  version: 12.1.4
-  resolution: "postcss-custom-properties@npm:12.1.4"
-  dependencies:
-    postcss-value-parser: ^4.2.0
-  peerDependencies:
-    postcss: ^8.4
-  checksum: c5ef5c5ff126a65adcae9f1842b6c82df8adc337481497a405de5dfb2121c799d381e75aed3dbfe855f4258e9d90927e77801012166fb667ea5c8f7d79562ada
-  languageName: node
-  linkType: hard
-
 "postcss-custom-selectors@npm:^6.0.3":
   version: 6.0.3
   resolution: "postcss-custom-selectors@npm:6.0.3"
@@ -26443,7 +26432,7 @@ fsevents@~2.1.2:
   languageName: node
   linkType: hard
 
-"postcss-dir-pseudo-class@npm:^6.0.4":
+"postcss-dir-pseudo-class@npm:^6.0.4, postcss-dir-pseudo-class@npm:~6.0.5":
   version: 6.0.5
   resolution: "postcss-dir-pseudo-class@npm:6.0.5"
   dependencies:
@@ -26454,17 +26443,6 @@ fsevents@~2.1.2:
   languageName: node
   linkType: hard
 
-"postcss-dir-pseudo-class@npm:~6.0.4":
-  version: 6.0.4
-  resolution: "postcss-dir-pseudo-class@npm:6.0.4"
-  dependencies:
-    postcss-selector-parser: ^6.0.9
-  peerDependencies:
-    postcss: ^8.4
-  checksum: e493e6ed54c50b8b1bda1a0cde55fc2dec04d22983e5af178090ff592854a29866c1c255637cb047b2b40c18e6ef15c1aa45aa354735f79a7709e9add5ea2e3e
-  languageName: node
-  linkType: hard
-
 "postcss-discard-comments@npm:^5.0.3":
   version: 5.0.3
   resolution: "postcss-discard-comments@npm:5.0.3"
@@ -27416,12 +27394,12 @@ fsevents@~2.1.2:
   languageName: node
   linkType: hard
 
-"postcss-scss@npm:~4.0.3":
-  version: 4.0.3
-  resolution: "postcss-scss@npm:4.0.3"
+"postcss-scss@npm:~4.0.4":
+  version: 4.0.4
+  resolution: "postcss-scss@npm:4.0.4"
   peerDependencies:
     postcss: ^8.3.3
-  checksum: d11110376ce2dcf624426d9edfb49d794d4f628aa4253849e841047761563ac2fe6e79a98aa46f8ed7f687cedd8c475a0956fa5e9e6802f8448ccd6538955b48
+  checksum: b4f240dd5eeb0c21738b673d9caf9a06b9a6db665a5b1c815ee4ca10c4c74a67c54f11cd5a4970dea98475cbb9e6d846e05dd3e48924189c2ecbf1f50cd44aa4
   languageName: node
   linkType: hard
 
@@ -27602,7 +27580,7 @@ fsevents@~2.1.2:
   languageName: node
   linkType: hard
 
-"postcss@npm:^8.3.11, postcss@npm:^8.4.5, postcss@npm:^8.4.6, postcss@npm:~8.4.6":
+"postcss@npm:^8.3.11, postcss@npm:^8.4.5, postcss@npm:^8.4.6":
   version: 8.4.6
   resolution: "postcss@npm:8.4.6"
   dependencies:
@@ -27613,6 +27591,17 @@ fsevents@~2.1.2:
   languageName: node
   linkType: hard
 
+"postcss@npm:~8.4.16":
+  version: 8.4.16
+  resolution: "postcss@npm:8.4.16"
+  dependencies:
+    nanoid: ^3.3.4
+    picocolors: ^1.0.0
+    source-map-js: ^1.0.2
+  checksum: 10eee25efd77868036403858577da0cefaf2e0905feeaba5770d5438ccdddba3d01cba8063e96b8aac4c6daa0ed413dd5ae0554a433a3c4db38df1d134cffc1f
+  languageName: node
+  linkType: hard
+
 "prebuild-install@npm:^7.1.1":
   version: 7.1.1
   resolution: "prebuild-install@npm:7.1.1"