CSS refactoring (#722)

Author: typicalHuman

packages/ui/src/cairo/App.svelte

@@ -218,150 +218,9 @@
 </div>
 
 <style lang="postcss">
-  .container {
-    background-color: var(--gray-1);
-    min-width: 32rem;
-  }
-
-  .header {
-    font-size: var(--text-small);
-  }
-
-  .tab {
-    color: var(--gray-5);
-  }
-
-  .tab button,
-  :global(.overflow-btn) {
-    padding: var(--size-2) var(--size-3);
-    border-radius: 20px;
-    cursor: pointer;
-    transition: background-color ease-in-out 0.2s;
-  }
-
-  .tab button,
-  :global(.overflow-btn) {
-    border: 0;
-    background-color: transparent;
-  }
-
-  .tab button:hover,
-  :global(.overflow-btn):hover {
-    background-color: var(--gray-2);
-  }
-
   .tab button.selected {
     background-color: var(--cairo-orange);
     color: white;
     order: -1;
   }
-
-  :global(.overflow-menu) button.selected {
-    order: unset;
-  }
-
-  :global(.action-button) {
-    padding: 7px;
-    border-radius: 20px;
-    transition: background-color ease-in-out 0.2s;
-
-    background-color: var(--gray-1);
-    border: 1px solid var(--gray-3);
-    color: var(--gray-6);
-    cursor: pointer;
-
-    &:hover {
-      background-color: var(--gray-2);
-    }
-
-    &:active,
-    &.active {
-      background-color: var(--gray-2);
-    }
-
-    :global(.icon) {
-      margin: 0 var(--size-1);
-    }
-  }
-
-  :global(.action-button.disabled) {
-    color: var(--gray-4);
-  }
-
-  :global(.with-text) {
-    padding-right: var(--size-3);
-  }
-
-  .controls {
-    background-color: white;
-    padding: var(--size-4);
-  }
-
-  .controls-footer {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-end;
-    color: var(--gray-5);
-    margin-top: var(--size-3);
-    padding: 0 var(--size-2);
-    font-size: var(--text-small);
-
-    & > * + * {
-      margin-left: var(--size-3);
-    }
-
-    :global(.icon) {
-      margin-right: 0.2em;
-      opacity: 0.8;
-    }
-
-    a {
-      color: inherit;
-      text-decoration: none;
-
-      &:hover {
-        color: var(--text-color);
-      }
-    }
-  }
-
-  .download-option {
-    display: flex;
-    padding: var(--size-2);
-    text-align: left;
-    background: none;
-    border: 1px solid transparent;
-    border-radius: 4px;
-    cursor: pointer;
-
-    :global(.icon) {
-      margin-top: var(--icon-adjust);
-    }
-
-    &:hover,
-    &:focus {
-      background-color: var(--gray-1);
-      border: 1px solid var(--gray-3);
-    }
-
-    & div {
-      display: block;
-    }
-  }
-
-  .download-option-content {
-    margin-left: var(--size-3);
-    font-size: var(--text-small);
-
-    & > :first-child {
-      margin-bottom: var(--size-2);
-      color: var(--gray-6);
-      font-weight: bold;
-    }
-
-    & > :not(:first-child) {
-      margin-top: var(--size-1);
-      color: var(--gray-5);
-    }
-  }
 </style>

packages/ui/src/cairo_alpha/App.svelte

@@ -226,150 +226,9 @@
 </div>
 
 <style lang="postcss">
-  .container {
-    background-color: var(--gray-1);
-    min-width: 32rem;
-  }
-
-  .header {
-    font-size: var(--text-small);
-  }
-
-  .tab {
-    color: var(--gray-5);
-  }
-
-  .tab button,
-  :global(.overflow-btn) {
-    padding: var(--size-2) var(--size-3);
-    border-radius: 20px;
-    cursor: pointer;
-    transition: background-color ease-in-out 0.2s;
-  }
-
-  .tab button,
-  :global(.overflow-btn) {
-    border: 0;
-    background-color: transparent;
-  }
-
-  .tab button:hover,
-  :global(.overflow-btn):hover {
-    background-color: var(--gray-2);
-  }
-
   .tab button.selected {
     background-color: var(--cairo-orange);
     color: white;
     order: -1;
   }
-
-  :global(.overflow-menu) button.selected {
-    order: unset;
-  }
-
-  :global(.action-button) {
-    padding: 7px;
-    border-radius: 20px;
-    transition: background-color ease-in-out 0.2s;
-
-    background-color: var(--gray-1);
-    border: 1px solid var(--gray-3);
-    color: var(--gray-6);
-    cursor: pointer;
-
-    &:hover {
-      background-color: var(--gray-2);
-    }
-
-    &:active,
-    &.active {
-      background-color: var(--gray-2);
-    }
-
-    :global(.icon) {
-      margin: 0 var(--size-1);
-    }
-  }
-
-  :global(.action-button.disabled) {
-    color: var(--gray-4);
-  }
-
-  :global(.with-text) {
-    padding-right: var(--size-3);
-  }
-
-  .controls {
-    background-color: white;
-    padding: var(--size-4);
-  }
-
-  .controls-footer {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-end;
-    color: var(--gray-5);
-    margin-top: var(--size-3);
-    padding: 0 var(--size-2);
-    font-size: var(--text-small);
-
-    & > * + * {
-      margin-left: var(--size-3);
-    }
-
-    :global(.icon) {
-      margin-right: 0.2em;
-      opacity: 0.8;
-    }
-
-    a {
-      color: inherit;
-      text-decoration: none;
-
-      &:hover {
-        color: var(--text-color);
-      }
-    }
-  }
-
-  .download-option {
-    display: flex;
-    padding: var(--size-2);
-    text-align: left;
-    background: none;
-    border: 1px solid transparent;
-    border-radius: 4px;
-    cursor: pointer;
-
-    :global(.icon) {
-      margin-top: var(--icon-adjust);
-    }
-
-    &:hover,
-    &:focus {
-      background-color: var(--gray-1);
-      border: 1px solid var(--gray-3);
-    }
-
-    & div {
-      display: block;
-    }
-  }
-
-  .download-option-content {
-    margin-left: var(--size-3);
-    font-size: var(--text-small);
-
-    & > :first-child {
-      margin-bottom: var(--size-2);
-      color: var(--gray-6);
-      font-weight: bold;
-    }
-
-    & > :not(:first-child) {
-      margin-top: var(--size-1);
-      color: var(--gray-5);
-    }
-  }
 </style>

packages/ui/src/common/styles/global.css

@@ -5,6 +5,7 @@
 @import './reset.css';
 @import './vars.css';
 @import './tippy.css';
+@import './shared.css';
 
 /* General */