Adding new tokens for Vibe (#851)

* Adding new tokens for Vibe

* Update Changelog

CHANGELOG.md

@@ -5,6 +5,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## Unpublished Changes
+*Add Vibe tokens for refresh
 
 ## 1.63.0 05-20-2024
 * Fix `plus` SVG icon `viewbox` (replace with Nova icon)

build/svg/defs/sprite.defs.html

@@ -847,7 +847,7 @@ <h2>youtube, </h2>
 
         </section>
         <footer>
-            <p>Generated at Mon, 20 May 2024 14:50:50 GMT by <a href="https://github.com/svg-sprite/svg-sprite" target="_blank" rel="noopener noreferrer">svg-sprite</a>.</p>
+            <p>Generated at Thu, 30 May 2024 19:45:12 GMT by <a href="https://github.com/svg-sprite/svg-sprite" target="_blank" rel="noopener noreferrer">svg-sprite</a>.</p>
         </footer>
     </body>
 </html>

build/tokens/vibe-2024.json

@@ -0,0 +1,65 @@
+{
+  "BORDER_COLOR_GREY_LIGHTEST": "rgb(239, 239, 239)",
+  "BORDER_COLOR_BRAND_SECONDARY_LIGHT": "rgb(0, 0, 0)",
+  "BORDER_COLOR_GREY_LIGHT": "rgb(220, 220, 220)",
+  "BORDER_COLOR_GREY_DARK": "rgb(90, 90, 90)",
+  "BORDER_COLOR_BRAND_SECONDARY_DARK": "rgb(0, 0, 0)",
+  "BORDER_COLOR_BRAND_SECONDARY": "rgb(27, 147, 157)",
+  "BORDER_COLOR_GREY": "rgb(140, 140, 140)",
+  "BORDER_COLOR_BRAND_PRIMARY_LIGHT": "rgb(236, 28, 36)",
+  "BORDER_COLOR_WHITE": "rgb(255, 255, 255)",
+  "BORDER_COLOR_BRAND_PRIMARY_DARK": "rgb(236, 28, 36)",
+  "BORDER_COLOR_BRAND_PRIMARY": "rgb(27, 147, 157)",
+  "BACKGROUND_COLOR_GREY_LIGHT": "rgb(220, 220, 220)",
+  "BACKGROUND_COLOR_GREY_LIGHTEST": "rgb(239, 239, 239)",
+  "BACKGROUND_COLOR_BRAND_SECONDARY_DARK": "rgb(0, 0, 0)",
+  "BACKGROUND_COLOR_BRAND_SECONDARY_LIGHT": "rgb(0, 0, 0)",
+  "BACKGROUND_COLOR_GREY_DARK": "rgb(90, 90, 90)",
+  "BACKGROUND_COLOR_GREY": "rgb(140, 140, 140)",
+  "BACKGROUND_COLOR_BODY": "rgb(255, 255, 255)",
+  "BACKGROUND_COLOR_BRAND_SECONDARY": "rgb(27, 147, 157)",
+  "BACKGROUND_COLOR_BLACK": "rgb(0, 0, 0)",
+  "BACKGROUND_COLOR_BRAND_PRIMARY_LIGHT": "rgb(236, 28, 36)",
+  "BACKGROUND_COLOR_BRAND_PRIMARY_DARK": "rgb(236, 28, 36)",
+  "BACKGROUND_COLOR_WHITE": "rgb(255, 255, 255)",
+  "BACKGROUND_COLOR_BRAND_PRIMARY": "rgb(27, 147, 157)",
+  "BACKGROUND_COLOR_GREY_DARKEST": "rgb(50, 50, 50)",
+  "COLOR_BRAND_SECONDARY": "rgb(27, 147, 157)",
+  "COLOR_BLACK": "rgb(0, 0, 0)",
+  "COLOR_BRAND_PRIMARY_LIGHT": "rgb(236, 28, 36)",
+  "COLOR_BRAND_PRIMARY_DARK": "rgb(236, 28, 36)",
+  "COLOR_WHITE": "rgb(255, 255, 255)",
+  "COLOR_BRAND_PRIMARY": "rgb(27, 147, 157)",
+  "COLOR_GREY_LIGHT": "rgb(220, 220, 220)",
+  "COLOR_BRAND_SECONDARY_DARK": "rgb(0, 0, 0)",
+  "COLOR_BRAND_SECONDARY_LIGHT": "rgb(0, 0, 0)",
+  "COLOR_GREY_DARK": "rgb(90, 90, 90)",
+  "COLOR_GREY": "rgb(140, 140, 140)",
+  "FONT_FAMILY_PRIMARY_FANCY": "'DM Serif Text', Georgia, serif",
+  "FONT_FAMILY_PRIMARY": "'DM Serif Text', Georgia, serif",
+  "FONT_FAMILY_SECONDARY_FANCY": "Roboto, 'Helvetica Regular', serif",
+  "FONT_FAMILY_SECONDARY": "Roboto, 'Helvetica bold', serif",
+  "FONT_FAMILY_BODY": "Georgia, serif",
+  "FONT_FAMILY_BASIC": "Roboto, 'Helvetica bold', serif",
+  "FONT_WEIGHT_LIGHT": "300",
+  "FONT_WEIGHT_NORMAL": "400",
+  "FONT_WEIGHT_BOLD": "700",
+  "LINE_HEIGHT_SMALL": "1.1",
+  "LINE_HEIGHT_NORMAL": "1.35",
+  "LINE_HEIGHT_COPY": "1.5",
+  "LINE_HEIGHT_LARGE": "1.85",
+  "SPACING_00": "0",
+  "SPACING_025": "0.25rem",
+  "SPACING_050": "0.5rem",
+  "SPACING_075": "0.75rem",
+  "SPACING_1": "1rem",
+  "SPACING_125": "1.25rem",
+  "SPACING_150": "1.5rem",
+  "SPACING_2": "2rem",
+  "BACKGROUND_COLOR_BRAND_ACCENT": "rgb(16, 16, 16)",
+  "BORDER_COLOR_BRAND_ACCENT": "rgb(16, 16, 16)",
+  "COLOR_GREY_LIGHTEST": "rgb(239, 239, 239)",
+  "FONT_FAMILY_ACCENT": "Roboto, 'Helvetica bold', serif",
+  "COLOR_BRAND_ACCENT": "rgb(16, 16, 16)",
+  "FONT_FAMILY_ACCENT_FANCY": "Roboto, 'Helvetica bold', serif"
+}

build/tokens/vibe-2024.map.scss

@@ -0,0 +1,82 @@
+
+$vibe-2024-map: (
+  'border-color-grey-lightest': (rgb(239, 239, 239)),
+  'border-color-brand-secondary-light': (rgb(0, 0, 0)),
+  'border-color-grey-light': (rgb(220, 220, 220)),
+  'border-color-grey-dark': (rgb(90, 90, 90)),
+  'border-color-brand-secondary-dark': (rgb(0, 0, 0)),
+  'border-color-brand-secondary': (rgb(27, 147, 157)),
+  'border-color-grey': (rgb(140, 140, 140)),
+  'border-color-brand-primary-light': (rgb(236, 28, 36)),
+  'border-color-white': (rgb(255, 255, 255)),
+  'border-color-brand-primary-dark': (rgb(236, 28, 36)),
+  'border-color-brand-primary': (rgb(27, 147, 157)),
+  'background-color-grey-light': (rgb(220, 220, 220)),
+  'background-color-grey-lightest': (rgb(239, 239, 239)),
+  'background-color-brand-secondary-dark': (rgb(0, 0, 0)),
+  'background-color-brand-secondary-light': (rgb(0, 0, 0)),
+  'background-color-grey-dark': (rgb(90, 90, 90)),
+  'background-color-grey': (rgb(140, 140, 140)),
+  /* The background color of the main body of the site. */
+  'background-color-body': (rgb(255, 255, 255)),
+  'background-color-brand-secondary': (rgb(27, 147, 157)),
+  'background-color-black': (rgb(0, 0, 0)),
+  'background-color-brand-primary-light': (rgb(236, 28, 36)),
+  'background-color-brand-primary-dark': (rgb(236, 28, 36)),
+  'background-color-white': (rgb(255, 255, 255)),
+  'background-color-brand-primary': (rgb(27, 147, 157)),
+  'background-color-grey-darkest': (rgb(50, 50, 50)),
+  'color-brand-secondary': (rgb(27, 147, 157)),
+  'color-black': (rgb(0, 0, 0)),
+  'color-brand-primary-light': (rgb(236, 28, 36)),
+  'color-brand-primary-dark': (rgb(236, 28, 36)),
+  'color-white': (rgb(255, 255, 255)),
+  'color-brand-primary': (rgb(27, 147, 157)),
+  'color-grey-light': (rgb(220, 220, 220)),
+  'color-brand-secondary-dark': (rgb(0, 0, 0)),
+  'color-brand-secondary-light': (rgb(0, 0, 0)),
+  'color-grey-dark': (rgb(90, 90, 90)),
+  'color-grey': (rgb(140, 140, 140)),
+  /* The webfont, loaded async */
+  'font-family-primary-fancy': ('DM Serif Text', Georgia, serif),
+  /* The webfont, loaded async */
+  'font-family-primary': ('DM Serif Text', Georgia, serif),
+  /* The webfont, loaded async */
+  'font-family-secondary-fancy': (Roboto, 'Helvetica Regular', serif),
+  /* The webfont, loaded async */
+  'font-family-secondary': (Roboto, 'Helvetica bold', serif),
+  'font-family-body': (Georgia, serif),
+  /* The webfont, loaded async */
+  'font-family-basic': (Roboto, 'Helvetica bold', serif),
+  'font-weight-light': (300),
+  'font-weight-normal': (400),
+  'font-weight-bold': (700),
+  'line-height-small': (1.1),
+  'line-height-normal': (1.35),
+  'line-height-copy': (1.5),
+  'line-height-large': (1.85),
+  /* Used for margins and padding only. */
+  'spacing-00': (0),
+  /* Used for margins and padding only. */
+  'spacing-025': (0.25rem),
+  /* Used for margins and padding only. */
+  'spacing-050': (0.5rem),
+  /* Used for margins and padding only. */
+  'spacing-075': (0.75rem),
+  /* Used for margins and padding only. */
+  'spacing-1': (1rem),
+  /* Used for margins and padding only. */
+  'spacing-125': (1.25rem),
+  /* Used for margins and padding only. */
+  'spacing-150': (1.5rem),
+  /* Used for margins and padding only. */
+  'spacing-2': (2rem),
+  'background-color-brand-accent': (rgb(16, 16, 16)),
+  'border-color-brand-accent': (rgb(16, 16, 16)),
+  'color-grey-lightest': (rgb(239, 239, 239)),
+  /* The webfont, loaded async */
+  'font-family-accent': (Roboto, 'Helvetica bold', serif),
+  'color-brand-accent': (rgb(16, 16, 16)),
+  /* The webfont, loaded async */
+  'font-family-accent-fancy': (Roboto, 'Helvetica bold', serif),
+);