Rebranding placeholder

.vuepress/components/DesignTokensListAllTokens.vue

@@ -28,7 +28,7 @@ export default {
   mixins: [TokensMixin],
   computed: {
     orderedTokens () {
-      return _.orderBy(this.allTokensProps, ['category', 'name'], ['asc', 'asc'])
+      return _.orderBy(this.allTokensProps, ['deprecated', 'scope', 'category', 'name'], ['desc', 'desc', 'asc', 'asc'])
     }
   }
 }

.vuepress/components/DesignTokensListAllTokensItem.vue

@@ -1,7 +1,18 @@
 <template>
   <tr class="c-design-tokens-list-all-tokens-token-item-row">
     <td v-if="token.name">
-      <code>{{ tokenName }}</code>
+      <code>
+        {{ tokenName }}
+        <span v-if="token.deprecated">
+          <font-awesome-icon
+            class="c-design-tokens-list-all-tokens-token-item-row__deprecated-badge"
+            :icon="['fas', 'exclamation-triangle']"
+          />
+          <geo-tooltip>
+            This token is deprecated.
+          </geo-tooltip>
+        </span>
+      </code>
     </td>
     <td v-else>
       N/A

.vuepress/components/DesignTokensListColorToken.vue

@@ -12,7 +12,10 @@
     />
 
     <div class="c-design-tokens-list-color-token__description">
-      <h3 class="c-design-tokens-list-color-token__name">{{ colorName }}</h3>
+      <h3 class="c-design-tokens-list-color-token__name">
+        {{ colorName }}
+        <span v-if="deprecated" class="c-design-tokens-list-color-token__deprecated-badge">Deprecated</span>
+      </h3>
       <p class="c-design-tokens-list-color-token__code"><strong>RGB:</strong> {{ rgbColor }}</p>
       <p class="c-design-tokens-list-color-token__variable"><strong>SCSS:</strong> ${{ scssVariable }}</p>
     </div>
@@ -41,6 +44,10 @@ export default {
 
     scssVariable () {
       return this.color.name.replace(/_/g, '-')
+    },
+
+    deprecated () {
+      return this.color.deprecated
     }
   },
   methods: {

.vuepress/components/DesignTokensListColors.vue

@@ -19,7 +19,7 @@ export default {
   mixins: [TokensMixin],
   computed: {
     orderedTokens () {
-      return _.orderBy(this.colorTokens, ['category', 'name'], ['asc', 'asc'])
+      return _.orderBy(this.colorTokens, ['deprecated', 'category', 'name'], ['desc', 'asc', 'asc'])
     }
   }
 }

.vuepress/components/DesignTokensListFonts.vue

@@ -27,7 +27,7 @@
         :key="index"
         :class="{
           ['c-design-tokens-list-fonts__table-body-row']: true,
-          ['c-design-tokens-list-fonts__table-body-row--grey-bg']: font.fontFamily.includes('Lato')
+          ['c-design-tokens-list-fonts__table-body-row--grey-bg']: font.fontFamily.includes('Inter')
         }"
         @click="copyVariableName(font.variableName)"
       >
@@ -58,7 +58,7 @@
           {{ font.styles.letterSpacing }}
         </div>
         <div
-          v-if="index === firstMontserratFontIndex || index === firstLatoFontIndex"
+          v-if="index === firstInterFontIndex"
           :class="{
             ['c-design-tokens-list-fonts__table-font-family-header']: true,
             [`c-design-tokens-list-fonts__table-font-family-header--${font.fontFamily.toLowerCase()}`]: true
@@ -89,9 +89,7 @@ export default {
     styledTokens () {
       return _.map(this.fontTokens, (obj, index) => {
         const styles = this.styles[index] || {}
-        const fontFamily = _.includes(styles.fontFamily, 'Lato')
-          ? 'Lato'
-          : 'Montserrat'
+        const fontFamily = 'Inter'
         const order = `${fontFamily}-${styles.fontSize}-${styles.fontWeight}`
 
         return _.assign({}, obj, { styles, fontFamily, order })
@@ -106,12 +104,8 @@ export default {
       })
     },
 
-    firstMontserratFontIndex () {
-      return _.findIndex(this.sortedTokens, { fontFamily: 'Montserrat' })
-    },
-
-    firstLatoFontIndex () {
-      return _.findIndex(this.sortedTokens, { fontFamily: 'Lato' })
+    firstInterFontIndex () {
+      return _.findIndex(this.sortedTokens, { fontFamily: 'Inter' })
     }
   },
   mounted () {

.vuepress/styles/_design-tokens-list-all-tokens.scss

@@ -24,4 +24,11 @@
   .c-design-tokens-list-all-tokens-token-item-row__example--color {
     box-shadow: none;
   }
+
+  .c-design-tokens-list-all-tokens-token-item-row__deprecated-badge {
+    @include reset;
+    @include font($label-optional);
+
+    color: $color-palette-dark-yellow;
+  }
 }

.vuepress/styles/_design-tokens-list-colors.scss

@@ -42,3 +42,13 @@
 .c-design-tokens-list-color-token__code {
   padding-bottom: $space-small;
 }
+
+.c-design-tokens-list-color-token__deprecated-badge {
+  @include reset;
+  @include font($label-optional);
+
+  color: $color-palette-white;
+  background-color: $color-palette-dark-yellow;
+  padding: 2px $space-x-small;
+  border-radius: $border-radius-default;
+}

.vuepress/styles/_design-tokens-list-fonts.scss

@@ -24,7 +24,7 @@
 
 .c-design-tokens-list-fonts__table-header-cell {
   color: $color_grey_light;
-  font-family: $font_family_heading;
+  font-family: $font_family_text;
   font-size: 10px;
   letter-spacing: 1px;
   text-transform: uppercase;
@@ -62,12 +62,7 @@
   text-transform: uppercase;
   transform: rotate(90deg);
 
-  &--montserrat {
-    top: 33%;
-    right: -90px;
-  }
-
-  &--lato {
+  &--inter {
     top: 78%;
     right: -45px;
   }

.vuepress/styles/_legacy.scss

@@ -7,7 +7,7 @@
 .element-demo__header {
   align-items: center;
   display: flex;
-  font-family: $font-family-heading;
+  font-family: $font-family-text;
   justify-content: space-between;
 }
 
@@ -28,12 +28,12 @@
   &:last-child {
     margin-right: 0;
   }
-}
+} 
 
 .element-demo__block__config {
   display: flex;
   flex-direction: column;
-  font-family: $font-family-heading;
+  font-family: $font-family-text;
   font-weight: $font-weight-bold;
   margin-left: auto;
 

CHANGELOG.md

@@ -1,4 +1,10 @@
 # Changelog
+## 38.0.0
+Breaking change:
+- Changing tokens values and updating them in the following components:
+  - `GeoButton`: also removing Link variant and GeoLinkButton component, Tertiary variant and previous Link variant are now the same. Updated button label padding.
+  - `GeoPill`: updated variants styles with updated tokens
+
 ## 37.1.0
 New:
 - `GeoTree`: Add support for leading accessory item in `GeoTree` and `GeoTreeItem` components.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geoblink/design-system",
-  "version": "37.1.0",
+  "version": "38.0.0-beta.1",
   "description": "Geoblink Design System for Vue.js",
   "author": "Geoblink <contact@geoblink.com>",
   "main": "dist/system.js",

src/elements/GeoButton/GeoButton.examples.md

@@ -35,14 +35,6 @@
     >
       Danger
     </geo-button>
-    <geo-button
-      :disabled="isDisabled"
-      :loading="isLoading"
-      type="link"
-      @click="startLoading()"
-    >
-      Link
-    </geo-button>
     <geo-button
       :disabled="isDisabled"
       :loading="isLoading"
@@ -90,7 +82,6 @@ export default {
   <geo-button type="secondary">Secondary</geo-button>
   <geo-button type="tertiary">Tertiary</geo-button>
   <geo-button type="danger">Danger</geo-button>
-  <geo-button type="link">Link</geo-button>
   <geo-button type="dangerLink">Danger link</geo-button>
   <geo-button type="tooltip">Tooltip</geo-button>
 </div>
@@ -104,7 +95,6 @@ export default {
   <geo-button hover type="secondary">Secondary</geo-button>
   <geo-button hover type="tertiary">Tertiary</geo-button>
   <geo-button hover type="danger">Danger</geo-button>
-  <geo-button hover type="link">Link</geo-button>
   <geo-button hover type="dangerLink">Danger link</geo-button>
   <geo-button hover type="tooltip">Tooltip</geo-button>
 </div>
@@ -118,7 +108,6 @@ export default {
   <geo-button disabled type="secondary">Secondary</geo-button>
   <geo-button disabled type="tertiary">Tertiary</geo-button>
   <geo-button disabled type="danger">Danger</geo-button>
-  <geo-button disabled type="link">Link</geo-button>
   <geo-button disabled type="dangerLink">Danger link</geo-button>
   <geo-button disabled type="tooltip">Tooltip</geo-button>
 </div>
@@ -132,7 +121,6 @@ export default {
   <geo-button disabled hover type="secondary">Secondary</geo-button>
   <geo-button disabled hover type="tertiary">Tertiary</geo-button>
   <geo-button disabled hover type="danger">Danger</geo-button>
-  <geo-button disabled hover type="link">Link</geo-button>
   <geo-button disabled hover type="dangerLink">Danger link</geo-button>
   <geo-button disabled hover type="tooltip">Tooltip</geo-button>
 </div>
@@ -146,7 +134,6 @@ export default {
   <geo-button loading type="secondary">Secondary</geo-button>
   <geo-button loading type="tertiary">Tertiary</geo-button>
   <geo-button loading type="danger">Danger</geo-button>
-  <geo-button loading type="link">Link</geo-button>
   <geo-button loading type="dangerLink">Danger link</geo-button>
   <geo-button loading type="tooltip">Tooltip</geo-button>
 </div>
@@ -160,7 +147,6 @@ export default {
   <geo-button loading hover type="secondary">Secondary</geo-button>
   <geo-button loading hover type="tertiary">Tertiary</geo-button>
   <geo-button loading hover type="danger">Danger</geo-button>
-  <geo-button loading hover type="link">Link</geo-button>
   <geo-button loading error type="dangerLink">Danger link</geo-button>
   <geo-button loading error type="tooltip">Tooltip</geo-button>
 </div>
@@ -174,7 +160,6 @@ export default {
   <geo-button loading disabled type="secondary">Secondary</geo-button>
   <geo-button loading disabled type="tertiary">Tertiary</geo-button>
   <geo-button loading disabled type="danger">Danger</geo-button>
-  <geo-button loading disabled type="link">Link</geo-button>
   <geo-button loading disabled type="dangerLink">Danger link</geo-button>
   <geo-button loading disabled type="tooltip">Tooltip</geo-button>
 </div>

src/elements/GeoButton/GeoButton.mixin.js

@@ -1,11 +1,10 @@
-import { VARIANTS as GeoAlertVariants } from '../GeoActivityIndicator/GeoActivityIndicator'
+import { VARIANTS as GeoActivityIndicatorVariants } from '../GeoActivityIndicator/GeoActivityIndicator'
 
 const TYPES = {
   primary: 'primary',
   secondary: 'secondary',
   tertiary: 'tertiary',
   danger: 'danger',
-  link: 'link',
   dangerLink: 'dangerLink',
   tooltip: 'tooltip'
 }
@@ -46,19 +45,17 @@ export default {
     activityIndicatorVariant () {
       switch (this.type) {
         case TYPES.primary:
-          return GeoAlertVariants.primary
+          return GeoActivityIndicatorVariants['dark-transparent']
         case TYPES.secondary:
-          return GeoAlertVariants.primary
+          return GeoActivityIndicatorVariants.primary
         case TYPES.tertiary:
-          return GeoAlertVariants.primary
+          return GeoActivityIndicatorVariants.primary
         case TYPES.danger:
-          return GeoAlertVariants.error
-        case TYPES.link:
-          return GeoAlertVariants.primary
+          return GeoActivityIndicatorVariants.error
         case TYPES.dangerLink:
-          return GeoAlertVariants.error
+          return GeoActivityIndicatorVariants.error
         case TYPES.tooltip:
-          return GeoAlertVariants.warn
+          return GeoActivityIndicatorVariants.warn
       }
     }
   },

src/elements/GeoButton/GeoButton.vue

@@ -58,7 +58,7 @@ export default {
      * |--------------|--------------------|--------------------------|
      * | `primary`    | [GeoPrimaryButton](./GeoPrimaryButton)       | Main action (saving changes) |
      * | `secondary`  | [GeoSecondaryButton](./GeoSecondaryButton)   | Auxiliar action (showing an options menu) |
-     * | `link`       | [GeoLinkButton](./GeoLinkButton)             | Alternative action to the main one (dismissing a form without saving changes) |
+     * | `tertiary`   | [GeoTertiaryButton](./GeoTertiaryButton)     | Alternative action to the main one (dismissing a form without saving changes) |
      * | `dangerLink` | [GeoDangerLinkButton](./GeoDangerLinkButton) | Potentially wrong actions (choosing potentially wrong option) |
      * | `danger`     | [GeoDangerButton](./GeoDangerButton)         | Dangerous actions (deleting data) |
      * | `tooltip`    | [GeoTooltipButton](./GeoTooltipButton)       | Tooltips action button (Generally accepting some warning or closing it) |

src/elements/GeoButton/GeoExternalLinkButton.vue

@@ -69,7 +69,7 @@ export default {
   },
   computed: {
     type () {
-      return TYPES.link
+      return TYPES.tertiary
     },
 
     propsForButton () {