@globalbrain/sefirot 2.0.0-draft.8 → 2.1.0

package/lib/components/SButton.vue

@@ -1,87 +1,123 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import SIcon from './SIcon.vue'
+import SSpinner from './SSpinner.vue'
+
+export type Size = 'mini' | 'small' | 'medium' | 'large' | 'jumbo'
+
+export type Type = 'fill' | 'outline' | 'text'
+
+export type Mode =
+  | 'neutral'
+  | 'white'
+  | 'black'
+  | 'info'
+  | 'success'
+  | 'warning'
+  | 'danger'
+  | 'mute'
+
+const props = defineProps<{
+  tag?: string
+  size?: Size
+  type?: Type
+  mode?: Mode
+  icon?: any
+  label?: string
+  href?: string
+  loading?: boolean
+  rounded?: boolean
+  block?: boolean
+  disabled?: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'click'): void
+}>()
+
+const classes = computed(() => [
+  props.size ?? 'medium',
+  props.type ?? 'fill',
+  props.mode ?? 'neutral',
+  { 'has-label': props.label },
+  { 'has-icon': props.icon },
+  { loading: props.loading },
+  { rounded: props.rounded },
+  { block: props.block },
+  { disabled: props.disabled }
+])
+
+function handleClick(): void {
+  !props.disabled && !props.loading && emit('click')
+}
+</script>
+
 <template>
   <component
-    :is="tag"
+    :is="tag ?? 'button'"
     class="SButton"
     :class="classes"
-    :to="to"
+    :href="href"
     role="button"
     @click="handleClick"
   >
     <span class="content">
-      <span v-if="icon" class="icon"><component :is="icon" class="icon-svg" /></span>
+      <span v-if="icon" class="icon"><SIcon :icon="icon" class="icon-svg" /></span>
       <span v-if="label" class="label">{{ label }}</span>
     </span>
 
     <transition name="fade">
       <span v-if="loading" key="loading" class="loader">
-        <SIconPreloader class="loader-icon" />
+        <SSpinner class="loader-icon" />
       </span>
     </transition>
   </component>
 </template>
 
-<script setup lang="ts">
-import { PropType, computed } from 'vue'
-import SIconPreloader from './icons/SIconPreloader.vue'
-
-type Size = 'mini' | 'small' | 'medium' | 'large' | 'jumbo'
-
-const props = defineProps({
-  label: { type: String, default: null },
-  tag: { type: String, default: 'button' },
-  to: { type: String, default: '/' },
-  type: { type: String, default: 'primary' },
-  mode: { type: String, default: 'neutral' },
-  size: { type: String as PropType<Size>, default: 'medium' },
-  rounded: { type: Boolean, default: false },
-  icon: { type: Object, default: null },
-  block: { type: Boolean, default: false },
-  inverse: { type: Boolean, default: false },
-  loading: { type: Boolean, default: false },
-  disabled: { type: Boolean, default: false }
-})
-
-const emit = defineEmits(['click'])
-
-const classes = computed(() => [
-  props.type,
-  props.mode,
-  props.size,
-  { rounded: props.rounded },
-  { block: props.block },
-  { inverse: props.inverse },
-  { 'has-label': props.label },
-  { 'has-icon': props.icon },
-  { loading: props.loading },
-  { disabled: props.disabled }
-])
-
-function handleClick(): void {
-  !props.disabled && emit('click')
-}
-</script>
-
 <style lang="postcss" scoped>
 .SButton {
   position: relative;
   display: inline-block;
   text-align: center;
   border: 1px solid transparent;
-  border-radius: 4px;
-  letter-spacing: 1px;
-  font-size: 13px;
+  border-radius: 6px;
+  font-size: 14px;
   font-weight: 500;
   overflow: hidden;
   white-space: nowrap;
-  transition: color .25s, border-color .25s, background-color .25s;
+  transition: color 0.25s, border-color 0.25s, background-color 0.25s;
 }
 
-.SButton.primary {
-  color: var(--button-primary-text);
-  background-color: var(--button-primary-bg);
+.SButton.fill {
+  &.neutral {
+    color: var(--button-fill-text);
+    background-color: var(--button-fill-bg);
 
-  &:hover  { background-color: var(--button-primary-bg-hover); }
-  &:active { background-color: var(--button-primary-bg-focus); }
+    &:hover  { background-color: var(--button-fill-bg-hover); }
+    &:active { background-color: var(--button-fill-bg-focus); }
+
+    & .loader-icon { color: var(--c-text-inverse-1); }
+  }
+
+  &.white {
+    color: var(--c-text-light-1);
+    background-color: var(--c-white);
+
+    &:hover  { background-color: var(--c-gray-light-3); }
+    &:active { background-color: var(--c-gray-light-1); }
+
+    & .loader-icon { color: var(--c-white); }
+  }
+
+  &.black {
+    color: var(--c-text-dark-1);
+    background-color: var(--c-black);
+
+    &:hover  { background-color: var(--c-gray-dark-4); }
+    &:active { background-color: var(--c-gray-dark-3); }
+
+    & .loader-icon { color: var(--c-white); }
+  }
 
   &.info {
     color: var(--c-text-dark-1);
@@ -89,6 +125,8 @@ function handleClick(): void {
 
     &:hover  { background-color: var(--c-info-dark); }
     &:active { background-color: var(--c-info-darker); }
+
+    & .loader-icon { color: var(--c-white); }
   }
 
   &.success {
@@ -97,6 +135,8 @@ function handleClick(): void {
 
     &:hover  { background-color: var(--c-success-dark); }
     &:active { background-color: var(--c-success-darker); }
+
+    & .loader-icon { color: var(--c-white); }
   }
 
   &.warning {
@@ -105,6 +145,8 @@ function handleClick(): void {
 
     &:hover  { background-color: var(--c-warning-dark); }
     &:active { background-color: var(--c-warning-darker); }
+
+    & .loader-icon { color: var(--c-white); }
   }
 
   &.danger {
@@ -113,14 +155,52 @@ function handleClick(): void {
 
     &:hover  { background-color: var(--c-danger-dark); }
     &:active { background-color: var(--c-danger-darker); }
+
+    & .loader-icon { color: var(--c-white); }
+  }
+
+  &.mute {
+    border-color: var(--c-divider-light);
+    color: var(--c-text-1);
+    background-color: var(--c-bg-mute);
+
+    &:hover  { border-color: var(--c-divider); background-color: var(--c-gray-light-4); }
+    &:active { background-color: var(--c-bg-soft); }
+
+    & .loader-icon { color: var(--c-black); }
+
+    .dark & {
+      border-color: var(--c-divider-light);
+      background-color: var(--c-gray-dark-4);
+
+      &:hover  { border-color: var(--c-divider); background-color: var(--c-gray-dark-5); }
+      &:active { background-color: var(--c-bg-soft); }
+
+      & .loader-icon { color: var(--c-white); }
+    }
   }
 
   &.disabled {
-    opacity: .75;
+    opacity: 0.75;
     cursor: not-allowed;
 
-    &:hover  { background-color: var(--button-primary-bg); }
-    &:active { background-color: var(--button-primary-bg); }
+    &.neutral {
+      &:hover  { background-color: var(--button-fill-bg); }
+      &:active { background-color: var(--button-fill-bg); }
+    }
+
+    &.white {
+      &:hover  { background-color: var(--c-gray-dark-4); }
+      &:active { background-color: var(--c-gray-dark-3); }
+    }
+
+    &.black {
+      color: var(--c-text-dark-1);
+      background-color: var(--c-white);
+
+      &:hover  { background-color: var(--c-gray-light-3); }
+      &:active { background-color: var(--c-gray-light-1); }
+    }
 
     &.info {
       &:hover  { background-color: var(--c-info); }
@@ -142,58 +222,32 @@ function handleClick(): void {
       &:active { background-color: var(--c-danger); }
     }
   }
+}
 
-  &.inverse {
-    color: var(--button-primary-inverse-text);
-    background-color: var(--button-primary-inverse-bg);
-
-    &:hover  { background-color: var(--button-primary-inverse-bg-hover); }
-    &:active { background-color: var(--button-primary-inverse-bg-focus); }
-
-    &.info {
-      color: var(--c-text-light-1);
-      background-color: var(--c-info-light);
-
-      &:hover  { background-color: var(--c-info); }
-      &:active { background-color: var(--c-info-dark); }
-    }
-
-    &.success {
-      color: var(--c-text-light-1);
-      background-color: var(--c-success);
-
-      &:hover  { background-color: var(--c-success-dark); }
-      &:active { background-color: var(--c-success-darker); }
-    }
-
-    &.warning {
-      color: var(--c-text-light-1);
-      background-color: var(--c-warning);
+.SButton.outline {
+  &.neutral {
+    border-color: var(--button-outline-border);
+    color: var(--button-outline-text);
 
-      &:hover  { background-color: var(--c-warning-dark); }
-      &:active { background-color: var(--c-warning-darker); }
-    }
+    &:hover  { background-color: var(--button-outline-bg-hover); }
+    &:active { background-color: var(--button-outline-bg-focus); }
+  }
 
-    &.danger {
-      color: var(--c-text-light-1);
-      background-color: var(--c-danger);
+  &.white {
+    border-color: var(--c-white);
+    color: var(--c-text-dark-1);
 
-      &:hover  { background-color: var(--c-danger-dark); }
-      &:active { background-color: var(--c-danger-darker); }
-    }
+    &:hover  { background-color: var(--c-white-mute); }
+    &:active { background-color: var(--c-gray-light-4); }
   }
 
-  & .loader-icon :deep(.bar) {
-    fill: var(--c-text-inverse-1);
-  }
-}
+  &.black {
+    border-color: var(--c-black);
+    color: var(--c-text-light-1);
 
-.SButton.secondary {
-  border-color: var(--button-secondary-border);
-  color: var(--button-secondary-text);
-
-  &:hover  { background-color: var(--button-secondary-bg-hover); }
-  &:active { background-color: var(--button-secondary-bg-focus); }
+    &:hover  { background-color: var(--c-black-mute); }
+    &:active { background-color: var(--c-gray-dark-3); }
+  }
 
   &.info {
     border-color: var(--c-info);
@@ -264,37 +318,13 @@ function handleClick(): void {
   }
 }
 
-.SButton.tertiary {
-  border-color: transparent;
-  color: var(--button-tertiary-text);
-  background-color: var(--button-tertiary-bg);
-
-  &:hover  { background-color: var(--button-tertiary-bg-hover); }
-  &:active { background-color: var(--button-tertiary-bg-focus); }
-
-  &.disabled {
-    opacity: .75;
-    cursor: not-allowed;
-
-    &:hover  { background-color: var(--button-tertiary-bg); }
-    &:active { background-color: var(--button-tertiary-bg); }
-  }
-
-  &.inverse {
-    border-color: transparent;
-    color: var(--button-tertiary-inverse-text);
-    background-color: var(--button-tertiary-inverse-bg);
-
-    &:hover  { background-color: var(--button-tertiary-inverse-bg-hover); }
-    &:active { background-color: var(--button-tertiary-inverse-bg-focus); }
-  }
-}
-
 .SButton.text {
-  color: var(--button-text-text);
+  &.neutral {
+    color: var(--button-text-text);
 
-  &:hover  { background-color: var(--button-text-bg-hover); }
-  &:active { background-color: var(--button-text-bg-focus); }
+    &:hover  { background-color: var(--button-text-bg-hover); }
+    &:active { background-color: var(--button-text-bg-focus); }
+  }
 
   &.info    { color: var(--c-info); }
   &.success { color: var(--c-success); }
@@ -305,56 +335,9 @@ function handleClick(): void {
     opacity: .75;
     cursor: not-allowed;
 
-    &:hover  { background-color: var(--button-text-bg); }
-    &:active { background-color: var(--button-text-bg); }
-  }
-
-  &.inverse {
-    color: var(--button-text-inverse-text);
-
-    &:hover  { background-color: var(--button-text-inverse-bg-hover); }
-    &:active { background-color: var(--button-text-inverse-bg-focus); }
-  }
-}
-
-.SButton.mute {
-  color: var(--button-mute-text);
-
-  &:hover  {
-    color: var(--button-mute-text-hover);
-    background-color: var(--button-mute-bg-hover);
-  }
-
-  &:active {
-    color: var(--button-mute-text-hover);
-    background-color: var(--button-mute-bg-focus);
-  }
-
-  &.disabled {
-    cursor: not-allowed;
-
-    &:hover  {
-      color: var(--button-mute-text);
-      background-color: transparent;
-    }
-
-    &:active {
-      color: var(--button-mute-text);
-      background-color: transparent;
-    }
-  }
-
-  &.inverse {
-    color: var(--button-mute-inverse-text);
-
-    &:hover {
-      color: var(--button-mute-inverse-text-hover);
-      background-color: var(--button-mute-inverse-bg-hover);
-    }
-
-    &:active {
-      color: var(--button-mute-inverse-text);
-      background-color: var(--button-mute-inverse-bg-focus);
+    &.neutral {
+      &:hover  { background-color: var(--button-text-bg); }
+      &:active { background-color: var(--button-text-bg); }
     }
   }
 }
@@ -365,28 +348,28 @@ function handleClick(): void {
   font-size: 12px;
 
   .icon-svg {
-    width: 14px;
-    height: 14px;
+    width: 16px;
+    height: 16px;
   }
-}
 
-.SButton.mini.rounded {
-  border-radius: 14px;
-}
+  &.mini.rounded {
+    border-radius: 14px;
+  }
 
-.SButton.mini.has-label {
-  padding: 0 8px;
-  width: auto;
-}
+  &.mini.has-label {
+    padding: 0 8px;
+    width: auto;
+  }
 
-.SButton.mini.has-label.block {
-  width: 100%;
-}
+  &.mini.has-label.block {
+    width: 100%;
+  }
 
-.SButton.mini.has-icon {
-  .label {
-    padding-right: 1px;
-    padding-left: 6px;
+  &.mini.has-icon {
+    .label {
+      padding-right: 1px;
+      padding-left: 6px;
+    }
   }
 }
 
@@ -396,63 +379,59 @@ function handleClick(): void {
   font-size: 12px;
 
   .icon-svg {
-    width: 14px;
-    height: 14px;
+    width: 18px;
+    height: 18px;
   }
-}
 
-.SButton.small.rounded {
-  border-radius: 16px;
-}
+  &.small.rounded {
+    border-radius: 16px;
+  }
 
-.SButton.small.has-label {
-  padding: 0 10px;
-  width: auto;
-}
+  &.small.has-label {
+    padding: 0 10px;
+    width: auto;
+  }
 
-.SButton.small.has-label.block {
-  width: 100%;
-}
+  &.small.has-label.block {
+    width: 100%;
+  }
 
-.SButton.small.has-icon {
-  .label {
-    padding-right: 1px;
-    padding-left: 8px;
+  &.small.has-icon {
+    .label {
+      padding-right: 1px;
+      padding-left: 8px;
+    }
   }
 }
 
 .SButton.medium {
   width: 40px;
   height: 40px;
-  font-size: 13px;
-
-  .label {
-    transform: translateY(1px);
-  }
+  font-size: 14px;
 
   .icon-svg {
-    width: 16px;
-    height: 16px;
+    width: 20px;
+    height: 20px;
   }
-}
 
-.SButton.medium.rounded {
-  border-radius: 20px;
-}
+  &.medium.rounded {
+    border-radius: 20px;
+  }
 
-.SButton.medium.has-label {
-  padding: 0 12px;
-  width: auto;
-}
+  &.medium.has-label {
+    padding: 0 12px;
+    width: auto;
+  }
 
-.SButton.medium.has-label.block {
-  width: 100%;
-}
+  &.medium.has-label.block {
+    width: 100%;
+  }
 
-.SButton.medium.has-icon {
-  .label {
-    padding-right: 1px;
-    padding-left: 8px;
+  &.medium.has-icon {
+    .label {
+      padding-right: 1px;
+      padding-left: 8px;
+    }
   }
 }
 
@@ -461,33 +440,29 @@ function handleClick(): void {
   height: 48px;
   font-size: 14px;
 
-  .label {
-    transform: translateY(1px);
-  }
-
   .icon-svg {
-    width: 18px;
-    height: 18px;
+    width: 20px;
+    height: 20px;
   }
-}
 
-.SButton.large.rounded {
-  border-radius: 24px;
-}
+  &.large.rounded {
+    border-radius: 24px;
+  }
 
-.SButton.large.has-label {
-  padding: 0 14px;
-  width: auto;
-}
+  &.large.has-label {
+    padding: 0 14px;
+    width: auto;
+  }
 
-.SButton.large.has-label.block {
-  width: 100%;
-}
+  &.large.has-label.block {
+    width: 100%;
+  }
 
-.SButton.large.has-icon {
-  .label {
-    padding-right: 2px;
-    padding-left: 10px;
+  &.large.has-icon {
+    .label {
+      padding-right: 2px;
+      padding-left: 10px;
+    }
   }
 }
 
@@ -500,25 +475,25 @@ function handleClick(): void {
     width: 18px;
     height: 18px;
   }
-}
 
-.SButton.jumbo.rounded {
-  border-radius: 32px;
-}
+  &.jumbo.rounded {
+    border-radius: 32px;
+  }
 
-.SButton.jumbo.has-label {
-  padding: 0 24px;
-  width: auto;
-}
+  &.jumbo.has-label {
+    padding: 0 24px;
+    width: auto;
+  }
 
-.SButton.jumbo.has-label.block {
-  width: 100%;
-}
+  &.jumbo.has-label.block {
+    width: 100%;
+  }
 
-.SButton.jumbo.has-icon {
-  .label {
-    padding-right: 2px;
-    padding-left: 10px;
+  &.jumbo.has-icon {
+    .label {
+      padding-right: 2px;
+      padding-left: 10px;
+    }
   }
 }
 
@@ -528,6 +503,58 @@ function handleClick(): void {
 }
 
 .SButton.loading {
+  &.fill {
+    &.neutral {
+      color: var(--c-text-1);
+
+      &:hover  { background-color: var(--button-fill-bg); }
+      &:active { background-color: var(--button-fill-bg); }
+    }
+
+    &.white {
+      &:hover  { background-color: var(--c-white); }
+      &:active { background-color: var(--c-white); }
+    }
+
+    &.black {
+      &:hover  { background-color: var(--c-black); }
+      &:active { background-color: var(--c-black); }
+    }
+
+    &.info {
+      &:hover  { background-color: var(--c-info); }
+      &:active { background-color: var(--c-info); }
+    }
+
+    &.success {
+      &:hover  { background-color: var(--c-success); }
+      &:active { background-color: var(--c-success); }
+    }
+
+    &.warning {
+      &:hover  { background-color: var(--c-warning); }
+      &:active { background-color: var(--c-warning); }
+    }
+
+    &.danger {
+      color: var(--c-text-1);
+
+      &:hover  { background-color: var(--c-danger); }
+      &:active { background-color: var(--c-danger); }
+    }
+
+    &.mute {
+      &:hover  { border-color: var(--c-divider-light); background-color: var(--c-bg-mute); }
+      &:active { background-color: var(--c-bg-mute); }
+
+      .dark & {
+        &:hover  { border-color: var(--c-divider-light); background-color: var(--c-gray-dark-4); }
+        &:active { background-color: var(--c-gray-dark-4); }
+      }
+    }
+  }
+
+  /* Deprecated */
   &.primary {
     &:hover  { background-color: var(--button-primary-bg); }
     &:active { background-color: var(--button-primary-bg); }
@@ -576,12 +603,13 @@ function handleClick(): void {
   justify-content: center;
   align-items: center;
   height: 100%;
-  transition: opacity .25s, transform .25s;
+  transition: opacity 0.25s, transform 0.25s;
 }
 
 .icon-svg {
   fill: currentColor;
-  transition: fill .25s;
+  transition-property: color, fill;
+  transition-duration: 0.25s;
 }
 
 .loader {
@@ -592,7 +620,7 @@ function handleClick(): void {
   height: 32px;
   color: var(--c-text-1);
   transform: translate(-50%, -50%);
-  transition: opacity .25s, transform .25s;
+  transition: opacity 0.25s, transform 0.25s;
 }
 
 .loader.fade-enter,
@@ -605,4 +633,220 @@ function handleClick(): void {
   width: 32px;
   height: 32px;
 }
+
+/* Deprecated */
+.SButton.primary {
+  color: var(--button-primary-text);
+  background-color: var(--button-primary-bg);
+
+  &:hover  { background-color: var(--button-primary-bg-hover); }
+  &:active { background-color: var(--button-primary-bg-focus); }
+
+  &.info {
+    color: var(--c-text-dark-1);
+    background-color: var(--c-info);
+
+    &:hover  { background-color: var(--c-info-dark); }
+    &:active { background-color: var(--c-info-darker); }
+  }
+
+  &.success {
+    color: var(--c-text-dark-1);
+    background-color: var(--c-success);
+
+    &:hover  { background-color: var(--c-success-dark); }
+    &:active { background-color: var(--c-success-darker); }
+  }
+
+  &.warning {
+    color: var(--c-text-dark-1);
+    background-color: var(--c-warning);
+
+    &:hover  { background-color: var(--c-warning-dark); }
+    &:active { background-color: var(--c-warning-darker); }
+  }
+
+  &.danger {
+    color: var(--c-text-dark-1);
+    background-color: var(--c-danger);
+
+    &:hover  { background-color: var(--c-danger-dark); }
+    &:active { background-color: var(--c-danger-darker); }
+  }
+
+  &.disabled {
+    opacity: .75;
+    cursor: not-allowed;
+
+    &:hover  { background-color: var(--button-primary-bg); }
+    &:active { background-color: var(--button-primary-bg); }
+
+    &.info {
+      &:hover  { background-color: var(--c-info); }
+      &:active { background-color: var(--c-info); }
+    }
+
+    &.success {
+      &:hover  { background-color: var(--c-success); }
+      &:active { background-color: var(--c-success); }
+    }
+
+    &.warning {
+      &:hover  { background-color: var(--c-warning); }
+      &:active { background-color: var(--c-warning); }
+    }
+
+    &.danger {
+      &:hover  { background-color: var(--c-danger); }
+      &:active { background-color: var(--c-danger); }
+    }
+  }
+
+  & .loader-icon { color: var(--c-text-inverse-1); }
+}
+
+.SButton.secondary {
+  border-color: var(--button-secondary-border);
+  color: var(--button-secondary-text);
+
+  &:hover  { background-color: var(--button-secondary-bg-hover); }
+  &:active { background-color: var(--button-secondary-bg-focus); }
+
+  &.info {
+    border-color: var(--c-info);
+    color: var(--c-info);
+
+    &:hover  { border-color: var(--c-info-dark); }
+    &:active { border-color: var(--c-info-darker); }
+  }
+
+  &.success {
+    border-color: var(--c-success);
+    color: var(--c-success);
+
+    &:hover  { border-color: var(--c-success-dark); }
+    &:active { border-color: var(--c-success-darker); }
+  }
+
+  &.warning {
+    border-color: var(--c-warning);
+    color: var(--c-warning);
+
+    &:hover  { border-color: var(--c-warning-dark); }
+    &:active { border-color: var(--c-warning-darker); }
+  }
+
+  &.danger {
+    border-color: var(--c-danger);
+    color: var(--c-danger);
+
+    &:hover  { border-color: var(--c-danger-dark); }
+    &:active { border-color: var(--c-danger-darker); }
+  }
+
+  &.disabled {
+    opacity: .75;
+    cursor: not-allowed;
+
+    &:hover  { background-color: var(--button-secondary-bg); }
+    &:active { background-color: var(--button-secondary-bg); }
+
+    &.info {
+      &:hover  { border-color: var(--c-info); }
+      &:active { border-color: var(--c-info); }
+    }
+
+    &.success {
+      &:hover  { border-color: var(--c-success); }
+      &:active { border-color: var(--c-success); }
+    }
+
+    &.warning {
+      &:hover  { border-color: var(--c-warning); }
+      &:active { border-color: var(--c-warning); }
+    }
+
+    &.danger {
+      &:hover  { border-color: var(--c-danger); }
+      &:active { border-color: var(--c-danger); }
+    }
+  }
+
+  &.inverse {
+    border-color: var(--button-secondary-inverse-border);
+    color: var(--button-secondary-inverse-text);
+
+    &:hover  { background-color: var(--button-secondary-inverse-bg-hover); }
+    &:active { background-color: var(--button-secondary-inverse-bg-focus); }
+  }
+}
+
+.SButton.tertiary {
+  border-color: transparent;
+  color: var(--button-tertiary-text);
+  background-color: var(--button-tertiary-bg);
+
+  &:hover  { background-color: var(--button-tertiary-bg-hover); }
+  &:active { background-color: var(--button-tertiary-bg-focus); }
+
+  &.disabled {
+    opacity: .75;
+    cursor: not-allowed;
+
+    &:hover  { background-color: var(--button-tertiary-bg); }
+    &:active { background-color: var(--button-tertiary-bg); }
+  }
+
+  &.inverse {
+    border-color: transparent;
+    color: var(--button-tertiary-inverse-text);
+    background-color: var(--button-tertiary-inverse-bg);
+
+    &:hover  { background-color: var(--button-tertiary-inverse-bg-hover); }
+    &:active { background-color: var(--button-tertiary-inverse-bg-focus); }
+  }
+}
+
+
+.SButton.mute {
+  color: var(--button-mute-text);
+
+  &:hover  {
+    color: var(--button-mute-text-hover);
+    background-color: var(--button-mute-bg-hover);
+  }
+
+  &:active {
+    color: var(--button-mute-text-hover);
+    background-color: var(--button-mute-bg-focus);
+  }
+
+  &.disabled {
+    cursor: not-allowed;
+
+    &:hover  {
+      color: var(--button-mute-text);
+      background-color: transparent;
+    }
+
+    &:active {
+      color: var(--button-mute-text);
+      background-color: transparent;
+    }
+  }
+
+  &.inverse {
+    color: var(--button-mute-inverse-text);
+
+    &:hover {
+      color: var(--button-mute-inverse-text-hover);
+      background-color: var(--button-mute-inverse-bg-hover);
+    }
+
+    &:active {
+      color: var(--button-mute-inverse-text);
+      background-color: var(--button-mute-inverse-bg-focus);
+    }
+  }
+}
 </style>