fix: use same syntax for all color definitions

digris · Dec 9, 2022 · 5e4839b · 5e4839b
1 parent 37dd358
commit 5e4839b
Show file tree

Hide file tree

Showing 75 changed files with 121 additions and 158 deletions.
diff --git a/Makefile b/Makefile
@@ -19,7 +19,7 @@ lint:
 
 fix:
 	yarn fix
-	find core/ -type f -name "*.py" -exec pyupgrade --py39-plus "{}" \;
+	find core/ -type f -name "*.py" -exec pyupgrade --py310-plus "{}" \;
 	poetry run isort core/
 	black core/
 

diff --git a/src/components/account/TokenInput.vue b/src/components/account/TokenInput.vue
@@ -83,7 +83,7 @@ export default defineComponent({
   &.is-valid {
     .input {
       background: rgb(var(--c-success) / 10%);
-      border-color: rgb(var(--c-success));
+      border-color: rgb(var(--c-success) / 100%);
     }
   }
 }

diff --git a/src/components/catalog/mood/Visual.vue b/src/components/catalog/mood/Visual.vue
@@ -27,8 +27,8 @@ interface Ray {
 }
 
 const colorToRGBA = (color: RGBAColor) => {
-  const [r, g, b, a] = [...color]
-  return `rgba(${r} ${g} ${b} / ${a})`;
+  const [r, g, b, a] = [...color];
+  return `rgb(${r} ${g} ${b} / ${a})`;
 };
 
 const drawCanvas = async (

diff --git a/src/components/colors/ColorChooser.vue b/src/components/colors/ColorChooser.vue
@@ -30,7 +30,7 @@ export default {
       :key="`color-${index}`"
       @click="setColor(color)"
       :style="{
-        background: `rgb(${color.join(' ')})`,
+        background: `rgb(${color.join(' ')} / 100%)`,
       }"
     ></div>
   </div>

diff --git a/src/components/faq/Topic.vue b/src/components/faq/Topic.vue
@@ -70,10 +70,10 @@ export default defineComponent({
 
 .topic {
   border-top: 0;
-  border-bottom: 1px solid rgb(var(--c-gray-200));
+  border-bottom: 1px solid rgb(var(--c-gray-200) / 100%);
 
   &.is-expanded {
-    color: rgb(var(--c-green));
+    color: rgb(var(--c-green) / 100%);
   }
 
   :deep(.answer) {

diff --git a/src/components/filter/Query.vue b/src/components/filter/Query.vue
@@ -40,15 +40,15 @@ export default defineComponent({
   align-items: center;
   height: 2rem;
   padding: 0.25rem 1rem;
-  color: rgb(var(--c-black));
+  color: rgb(var(--c-black) / 100%);
   text-transform: lowercase;
-  background: rgb(var(--c-white));
-  border: 1px solid rgb(var(--c-page-fg) 0.2);
+  background: rgb(var(--c-white) / 100%);
+  border: 1px solid rgb(var(--c-page-fg) / 20%);
   border-radius: 1rem;
   cursor: pointer;
 
   &:hover {
-    background: rgb(var(--c-gray-100));
+    background: rgb(var(--c-gray-100) / 100%);
   }
 
   &.is-selected {

diff --git a/src/components/filter/Tag.vue b/src/components/filter/Tag.vue
@@ -45,15 +45,15 @@ export default defineComponent({
   height: 2rem;
   padding: 0.25rem 1rem;
   color: rgb(var(--c-white));
-  background: rgb(var(--c-white) 0.2);
+  background: rgb(var(--c-white) / 20%);
   border-radius: 1rem;
   cursor: pointer;
   text-transform: capitalize;
   font-weight: 400;
 
   &.is-selected {
     color: rgb(var(--c-black));
-    background: rgb(var(--c-white));
+    background: rgb(var(--c-white) / 100%);
   }
 
   &__type {

diff --git a/src/components/navigation/Navigation.vue b/src/components/navigation/Navigation.vue
@@ -78,10 +78,10 @@ export default defineComponent({
   display: grid;
   grid-template-columns: 242px 1fr 146px 48px 48px;
   padding: 0 1.5rem 0 0;
-  background: rgb(var(--c-page-bg) 0.6);
+  background: rgb(var(--c-page-bg) / 80%);
   border-bottom: 7px solid rgb(var(--c-page-fg));
   transition: background 10ms;
-  backdrop-filter: blur(24px);
+  backdrop-filter: blur(12px);
   @include responsive.bp-medium {
     height: 66px;
     grid-template-columns: 172px 1fr 40px 40px 40px;

diff --git a/src/components/player/CurrentMedia.vue b/src/components/player/CurrentMedia.vue
@@ -93,12 +93,6 @@ export default defineComponent({
       white-space: inherit;
       text-overflow: inherit;
     }
-
-    /*
-    &--secondary {
-      color: rgba(var(--c-fg), 0.5);
-    }
-    */
   }
 }
 </style>
diff --git a/src/components/player/QueueControl.vue b/src/components/player/QueueControl.vue
@@ -57,7 +57,7 @@ export default defineComponent({
     :disabled="numQueued < 1"
     @click.prevent="onClick"
     :style="{
-      color: queueVisible ? 'rgb(var(--c-bg))' : 'rgb(var(--c-fg))',
+      color: queueVisible ? 'rgb(var(--c-bg) / 100%)' : 'rgb(var(--c-fg) / 100%)',
     }"
   >
     <IconQueue color-var="--c-fg" :num-queued="numQueued" />

diff --git a/src/components/player/mobile/Player.vue b/src/components/player/mobile/Player.vue
@@ -163,7 +163,7 @@ export default defineComponent({
     transition-delay: 100ms;
 
     .player-bg {
-      background: rgb(var(--c-fg) 0.1);
+      background: rgb(var(--c-fg) / 10%);
     }
   }
 }

diff --git a/src/components/search/SearchInput.vue b/src/components/search/SearchInput.vue
@@ -44,12 +44,6 @@ export default defineComponent({
     border: none;
     width: 100%;
 
-    /*
-    &:hover,
-    &:focus {
-      background: rgba(var(--c-black), 0.05);
-    }
-    */
     &:focus {
       outline: none;
     }

diff --git a/src/components/ui/LazyImage.vue b/src/components/ui/LazyImage.vue
@@ -133,7 +133,7 @@ export default {
   img {
     min-width: 100%;
     max-width: 100%;
-    background: rgb(var(--c-color) / 100%);
+    background: rgb(var(--c-color));
     opacity: 1;
     filter: var(--image-filter);
     transition: opacity 100ms;

diff --git a/src/components/ui/Message.vue b/src/components/ui/Message.vue
@@ -37,19 +37,19 @@ export default defineComponent({
   @include typo.bold;
 
   padding: 1rem;
-  color: rgb(var(--c-white));
-  background: rgb(var(--c-black));
+  color: rgb(var(--c-white) / 100%);
+  background: rgb(var(--c-black) / 100%);
 
   &--info {
-    background: rgb(var(--c-info));
+    background: rgb(var(--c-info) / 100%);
   }
 
   &--warning {
-    background: rgb(var(--c-warning));
+    background: rgb(var(--c-warning) / 100%);
   }
 
   &--success {
-    background: rgb(var(--c-success));
+    background: rgb(var(--c-success) / 100%);
   }
 }
 </style>
diff --git a/src/components/ui/Modal.vue b/src/components/ui/Modal.vue
@@ -100,8 +100,8 @@ $z-feedback: 9;
   width: 100%;
   max-width: var(--container-width);
   min-height: calc(var(--container-width) / 1.75);
-  color: rgb(var(--c-black));
-  background: rgb(var(--c-white));
+  color: rgb(var(--c-black) / 100%);
+  background: rgb(var(--c-white) / 100%);
 
   @include responsive.bp-medium {
     height: 100%;
@@ -146,8 +146,8 @@ $z-feedback: 9;
     left: 0;
     z-index: $z-feedback;
     padding: 4rem 1rem 1rem;
-    color: rgb(var(--c-black));
-    background: rgb(var(--c-selected));
+    color: rgb(var(--c-black) / 100%);
+    background: rgb(var(--c-selected) / 100%);
   }
 }
 

diff --git a/src/components/ui/audio/AudioMeter.vue b/src/components/ui/audio/AudioMeter.vue
@@ -23,15 +23,6 @@ const drawCanvas = async (
   ctx.canvas.width = width;
   ctx.canvas.height = height;
 
-  // const center = {
-  //   x: width / 2,
-  //   y: height / 2 + offsetY / 2,
-  // };
-
-  // ctx.globalCompositeOperation = "darker";
-  // ctx.globalCompositeOperation = "lighter";
-  // ctx.fillStyle = "rgba(0, 0, 0, 1)";
-
   const space = width / 12;
   const w = width / 3;
   const yL = volL * height;
@@ -45,19 +36,6 @@ const drawCanvas = async (
   ctx.rect(width / 2 + space, 0, w, yR);
   ctx.fill();
 
-  // ctx.beginPath();
-  // ctx.rect(0, 0, width, height);
-  // ctx.fillStyle = "rgba(0, 0, 0, 0.3)";
-  // ctx.fill();
-
-  // ctx.beginPath();
-  // ctx.rect(812, yR, 10, vR);
-  // ctx.fill();
-
-  // ctx.beginPath();
-  // ctx.rect(0, 0, 24, 24);
-  // ctx.fill();
-
   ctx.closePath();
 };
 

diff --git a/src/components/ui/audio/AudioSpectrum.vue b/src/components/ui/audio/AudioSpectrum.vue
@@ -22,7 +22,6 @@ const drawCanvas = async (
     const value = bins[i] * heightFactor;
     const x = i * (barWidth * 2) + barWidth / 3;
     const h = value;
-    // ctx.fillStyle = "rgb(0,0,0)";
     ctx.fillStyle = color;
     ctx.fillRect(x, y, w, h);
   }
@@ -40,7 +39,7 @@ export default defineComponent({
     },
     color: {
       type: String,
-      default: "rgb(255,0,255)",
+      default: "rgb(255 0 255 / 100%)",
     },
   },
   setup(props) {
@@ -50,7 +49,6 @@ export default defineComponent({
         height: `${props.height}px`,
         width: `${props.width}px`,
         transform: "scaleY(-1)",
-        // background: 'rgba(0,0,0,0.2)',
       };
     });
     onMounted(() => {

diff --git a/src/components/ui/audio/AudioSpectrumB.vue b/src/components/ui/audio/AudioSpectrumB.vue
@@ -21,7 +21,7 @@ const drawCanvas = async (
     const value = bins[i] * heightFactor;
     const x = i * (barWidth * 1.5) + barWidth / 3;
     const h = value;
-    ctx.fillStyle = "rgb(0,0,0)";
+    ctx.fillStyle = "rgb(0 0 0 / 100%)";
     ctx.fillRect(x, y, w, h);
   }
 };
@@ -45,7 +45,6 @@ export default defineComponent({
         width: `${props.width}px`,
         transform: "scaleY(-1)",
         opacity: 0.2,
-        // background: 'rgba(0,0,0,0.2)',
       };
     });
     const numBins = computed(() => {

diff --git a/src/components/ui/button/AsyncButton.vue b/src/components/ui/button/AsyncButton.vue
@@ -130,15 +130,15 @@ export default defineComponent({
   transition: background-color 300ms ease-in-out, box-shadow 200ms;
 
   &.has-error {
-    background-color: rgb(var(--c-red));
+    background-color: rgb(var(--c-red) / 100%);
   }
 
   &.is-loading {
     cursor: wait !important;
   }
 
   &.is-success {
-    box-shadow: 0 0 1px 3px rgb(var(--c-cta-active) 0.1);
+    box-shadow: 0 0 1px 3px rgb(var(--c-cta-active) / 10%);
   }
 
   &.is-disabled {

diff --git a/src/components/ui/button/CircleButton.vue b/src/components/ui/button/CircleButton.vue
@@ -66,7 +66,7 @@ export default defineComponent({
       '--outline-opacity': outlineOpacity,
       '--outline-width': `${outlineWidth}px`,
       '--hover-background-opacity': hoverBackgroundOpacity,
-      '--outline-hover-color': outlineOnHover ? 'rgba(var(--c-main)' : 'transparent',
+      '--outline-hover-color': outlineOnHover ? 'rgb(var(--c-main) / 100%)' : 'transparent',
     }"
     :class="{
       'is-outlined': outlined,
@@ -105,7 +105,7 @@ export default defineComponent({
   }
 
   &.is-filled {
-    background: rgb(var(--c-fill));
+    background: rgb(var(--c-fill) / 100%);
   }
 
   &.is-disabled {

diff --git a/src/components/ui/error/APIErrors.vue b/src/components/ui/error/APIErrors.vue
@@ -46,8 +46,8 @@ export default defineComponent({
 
 .errors {
   padding: 0.75rem;
-  color: rgb(var(--c-black));
-  background: rgb(var(--c-red) 0.66);
+  color: rgb(var(--c-black) / 100%);
+  background: rgb(var(--c-red) / 60%);
   border-radius: 3px;
 }
 

diff --git a/src/components/ui/form/SelectInput.vue b/src/components/ui/form/SelectInput.vue
@@ -88,7 +88,7 @@ export default defineComponent({
   display: grid;
   grid-template-rows: 1rem auto;
   gap: 1rem;
-  color: rgb(var(--c-black));
+  color: rgb(var(--c-black) / 100%);
 
   label {
     cursor: unset;

diff --git a/src/components/ui/form/TextInput.vue b/src/components/ui/form/TextInput.vue
@@ -94,7 +94,7 @@ export default defineComponent({
   grid-template-rows: 1rem auto;
   column-gap: 1rem;
   row-gap: 1rem;
-  color: rgb(var(--c-black));
+  color: rgb(var(--c-black) / 100%);
 
   .top {
     display: grid;
@@ -110,7 +110,7 @@ export default defineComponent({
       @include typo.light;
       @include typo.small;
 
-      color: rgb(var(--c-red));
+      color: rgb(var(--c-red) / 100%);
       text-align: right;
       @include responsive.bp-medium {
         display: none;
@@ -143,7 +143,7 @@ export default defineComponent({
 
   &.has-error {
     input {
-      border-color: rgb(var(--c-red));
+      border-color: rgb(var(--c-red) / 100%);
     }
   }
 }

diff --git a/src/components/ui/form/TextareaInput.vue b/src/components/ui/form/TextareaInput.vue
@@ -49,7 +49,7 @@ export default defineComponent({
   display: grid;
   grid-template-rows: 1rem auto;
   gap: 1rem;
-  color: rgb(var(--c-black));
+  color: rgb(var(--c-black) / 100%);
 
   label {
     cursor: unset;

diff --git a/src/components/ui/icon/IconAlert.vue b/src/components/ui/icon/IconAlert.vue
@@ -16,7 +16,7 @@ export default defineComponent({
   },
   setup(props) {
     const { iconSize: size } = useIconSize(props.scale);
-    const color = computed(() => `rgb(var(${props.colorVar}))`);
+    const color = computed(() => `rgb(var(${props.colorVar}) / 100%)`);
     const style = computed(() => {
       return {
         fill: "none",

diff --git a/src/components/ui/icon/IconBack.vue b/src/components/ui/icon/IconBack.vue
@@ -16,7 +16,7 @@ export default defineComponent({
   },
   setup(props) {
     const { iconSize: size } = useIconSize(props.scale);
-    const color = computed(() => `rgb(var(${props.colorVar}))`);
+    const color = computed(() => `rgb(var(${props.colorVar}) / 100%)`);
     const style = computed(() => {
       return {
         stroke: color.value,

diff --git a/src/components/ui/icon/IconBuffering.vue b/src/components/ui/icon/IconBuffering.vue
@@ -16,7 +16,7 @@ export default defineComponent({
   },
   setup(props) {
     const { iconSize: size } = useIconSize(props.scale);
-    const color = computed(() => `rgb(var(${props.colorVar}))`);
+    const color = computed(() => `rgb(var(${props.colorVar}) / 100%)`);
     const style = computed(() => {
       return {
         fill: "none",