@drivy/cobalt 0.29.2 → 0.31.0

package/styles/core/_colors-map.scss

@@ -4,241 +4,241 @@
 /**********************************/
 $theme-colors-map: (
   background: (
-    primary: var(--c-l-grey-lighter),
-    secondary: var(--c-l-white),
+    primary: var(--c-background-primary),
+    secondary: var(--c-background-secondary),
     secondaryInteractive: (
-      DEFAULT: var(--c-l-white),
-      hover: var(--c-l-grey-lighter)
+      DEFAULT: var(--c-background-secondaryInteractive),
+      hover: var(--c-background-secondaryInteractive--hover)
     ),
-    accent: var(--c-l-purple),
+    accent: var(--c-background-accent),
     accentInteractive: (
-      DEFAULT: var(--c-l-purple),
-      hover: var(--c-l-purple)
+      DEFAULT: var(--c-background-accentInteractive),
+      hover: var(--c-background-accentInteractive--hover)
     ),
-    accentAlt: var(--c-l-indigo),
+    accentAlt: var(--c-background-accentAlt),
     accentAltInteractive: (
-      DEFAULT: var(--c-l-indigo),
-      hover: var(--c-l-indigo)
+      DEFAULT: var(--c-background-accentAltInteractive),
+      hover: var(--c-background-accentAltInteractive--hover)
     ),
-    info: var(--c-l-grey-lighter),
-    error: var(--c-l-red),
+    info: var(--c-background-info),
+    error: var(--c-background-error),
     errorInteractive: (
-      DEFAULT: var(--c-l-red),
-      hover: var(--c-l-red)
+      DEFAULT: var(--c-background-errorInteractive),
+      hover: var(--c-background-errorInteractive--hover)
     ),
-    errorAlt: var(--c-l-graphite),
-    success: var(--c-l-green),
-    successAlt: var(--c-l-graphite),
-    connect: var(--c-l-turquoise),
+    errorAlt: var(--c-background-errorAlt),
+    success: var(--c-background-success),
+    successAlt: var(--c-background-successAlt),
+    connect: var(--c-background-connect),
     connectInteractive: (
-      DEFAULT: var(--c-l-turquoise),
-      hover: var(--c-l-turquoise)
-    ),
-    connectAlt: var(--c-l-grey-light),
-    driver: var(--c-l-deprecatedDriver),
-    owner: var(--c-l-indigo-dark),
-    disabled: var(--c-l-grey-light),
-    neutral: var(--c-l-grey-light),
-    neutralAlt: var(--c-l-grey-lighter),
-    seasonLow: var(--c-l-deprecatedSeasonLow),
-    seasonMedium: var(--c-l-deprecatedSeasonMedium),
-    seasonHigh: var(--c-l-deprecatedSeasonHigh),
-    seasonVeryHigh: var(--c-l-deprecatedSeasonVeryHigh)
+      DEFAULT: var(--c-background-connectInteractive),
+      hover: var(--c-background-connectInteractive--hover)
+    ),
+    connectAlt: var(--c-background-connectAlt),
+    driver: var(--c-background-driver),
+    owner: var(--c-background-owner),
+    disabled: var(--c-background-disabled),
+    neutral: var(--c-background-neutral),
+    neutralAlt: var(--c-background-neutralAlt),
+    seasonLow: var(--c-background-seasonLow),
+    seasonMedium: var(--c-background-seasonMedium),
+    seasonHigh: var(--c-background-seasonHigh),
+    seasonVeryHigh: var(--c-background-seasonVeryHigh)
   ),
   text: (
-    base: var(--c-l-graphite),
+    base: var(--c-text-base),
     baseInteractive: (
-      DEFAULT: var(--c-l-graphite),
-      hover: var(--c-l-graphite)
+      DEFAULT: var(--c-text-baseInteractive),
+      hover: var(--c-text-baseInteractive--hover)
     ),
-    subdued: var(--c-l-graphite-light),
+    subdued: var(--c-text-subdued),
     subduedInteractive: (
-      DEFAULT: var(--c-l-graphite-light),
-      hover: var(--c-l-graphite)
+      DEFAULT: var(--c-text-subduedInteractive),
+      hover: var(--c-text-subduedInteractive--hover)
     ),
-    accent: var(--c-l-purple),
+    accent: var(--c-text-accent),
     accentInteractive: (
-      DEFAULT: var(--c-l-blue),
-      hover: var(--c-l-blue)
+      DEFAULT: var(--c-text-accentInteractive),
+      hover: var(--c-text-accentInteractive--hover)
     ),
-    accentAlt: var(--c-l-white),
+    accentAlt: var(--c-text-accentAlt),
     accentAltInteractive: (
-      DEFAULT: var(--c-l-white),
-      hover: var(--c-l-white)
-    ),
-    info: var(--c-l-graphite-light),
-    infoAlt: var(--c-l-turquoise),
-    error: var(--c-l-red),
-    errorAlt: var(--c-l-white),
-    success: var(--c-l-green),
-    successAlt: var(--c-l-white),
-    warning: var(--c-l-coral),
-    connect: var(--c-l-turquoise),
-    driver: var(--c-l-graphite),
-    owner: var(--c-l-white),
-    inversed: var(--c-l-white)
+      DEFAULT: var(--c-text-accentAltInteractive),
+      hover: var(--c-text-accentAltInteractive--hover)
+    ),
+    info: var(--c-text-info),
+    infoAlt: var(--c-text-infoAlt),
+    error: var(--c-text-error),
+    errorAlt: var(--c-text-errorAlt),
+    success: var(--c-text-success),
+    successAlt: var(--c-text-successAlt),
+    warning: var(--c-text-warning),
+    connect: var(--c-text-connect),
+    driver: var(--c-text-driver),
+    owner: var(--c-text-owner),
+    inversed: var(--c-text-inversed)
   ),
   buttonBackground: (
-    selected: var(--c-l-indigo),
+    selected: var(--c-buttonBackground-selected),
     destructiveInteractive: (
-      DEFAULT: var(--c-l-red),
-      hover: var(--c-l-red),
-      press: var(--c-l-red)
+      DEFAULT: var(--c-buttonBackground-destructiveInteractive),
+      hover: var(--c-buttonBackground-destructiveInteractive--hover),
+      press: var(--c-buttonBackground-destructiveInteractive--press)
     ),
-    disabled: var(--c-l-grey-lighter),
+    disabled: var(--c-buttonBackground-disabled),
     primaryInteractive: (
-      DEFAULT: var(--c-l-purple),
-      hover: var(--c-l-indigo),
-      press: var(--c-l-indigo-dark)
+      DEFAULT: var(--c-buttonBackground-primaryInteractive),
+      hover: var(--c-buttonBackground-primaryInteractive--hover),
+      press: var(--c-buttonBackground-primaryInteractive--press)
     ),
     secondaryInteractive: (
-      DEFAULT: var(--c-l-white),
-      hover: var(--c-l-white),
-      press: var(--c-l-white)
+      DEFAULT: var(--c-buttonBackground-secondaryInteractive),
+      hover: var(--c-buttonBackground-secondaryInteractive--hover),
+      press: var(--c-buttonBackground-secondaryInteractive--press)
     ),
-    success: var(--c-l-green),
+    success: var(--c-buttonBackground-success),
     successAltInteractive: (
-      DEFAULT: var(--c-l-green),
-      hover: var(--c-l-green),
-      press: var(--c-l-green)
+      DEFAULT: var(--c-buttonBackground-successAltInteractive),
+      hover: var(--c-buttonBackground-successAltInteractive--hover),
+      press: var(--c-buttonBackground-successAltInteractive--press)
     ),
     tertiaryInteractive: (
-      DEFAULT: var(--c-l-white),
-      hover: var(--c-l-white),
-      press: var(--c-l-white)
+      DEFAULT: var(--c-buttonBackground-tertiaryInteractive),
+      hover: var(--c-buttonBackground-tertiaryInteractive--hover),
+      press: var(--c-buttonBackground-tertiaryInteractive--press)
     )
   ),
   buttonIcon: (
-    selected: var(--c-l-white),
+    selected: var(--c-buttonIcon-selected),
     destructiveInteractive: (
-      DEFAULT: var(--c-l-red),
-      hover: var(--c-l-red),
-      press: var(--c-l-red)
+      DEFAULT: var(--c-buttonIcon-destructiveInteractive),
+      hover: var(--c-buttonIcon-destructiveInteractive--hover),
+      press: var(--c-buttonIcon-destructiveInteractive--press)
     ),
-    disabled: var(--c-l-graphite-light),
+    disabled: var(--c-buttonIcon-disabled),
     primaryInteractive: (
-      DEFAULT: var(--c-l-white),
-      hover: var(--c-l-white),
-      press: var(--c-l-white)
+      DEFAULT: var(--c-buttonIcon-primaryInteractive),
+      hover: var(--c-buttonIcon-primaryInteractive--hover),
+      press: var(--c-buttonIcon-primaryInteractive--press)
     ),
     secondaryInteractive: (
-      DEFAULT: var(--c-l-indigo),
-      hover: var(--c-l-indigo),
-      press: var(--c-l-indigo-dark)
+      DEFAULT: var(--c-buttonIcon-secondaryInteractive),
+      hover: var(--c-buttonIcon-secondaryInteractive--hover),
+      press: var(--c-buttonIcon-secondaryInteractive--press)
     ),
-    success: var(--c-l-white),
+    success: var(--c-buttonIcon-success),
     successAltInteractive: (
-      DEFAULT: var(--c-l-white),
-      hover: var(--c-l-white),
-      press: var(--c-l-white)
+      DEFAULT: var(--c-buttonIcon-successAltInteractive),
+      hover: var(--c-buttonIcon-successAltInteractive--hover),
+      press: var(--c-buttonIcon-successAltInteractive--press)
     ),
     tertiaryInteractive: (
-      DEFAULT: var(--c-l-blue),
-      hover: var(--c-l-blue),
-      press: var(--c-l-blue)
+      DEFAULT: var(--c-buttonIcon-tertiaryInteractive),
+      hover: var(--c-buttonIcon-tertiaryInteractive--hover),
+      press: var(--c-buttonIcon-tertiaryInteractive--press)
     )
   ),
   buttonLabel: (
-    selected: var(--c-l-white),
+    selected: var(--c-buttonLabel-selected),
     destructiveInteractive: (
-      DEFAULT: var(--c-l-white),
-      hover: var(--c-l-white),
-      press: var(--c-l-white)
+      DEFAULT: var(--c-buttonLabel-destructiveInteractive),
+      hover: var(--c-buttonLabel-destructiveInteractive--hover),
+      press: var(--c-buttonLabel-destructiveInteractive--press)
     ),
-    disabled: var(--c-l-graphite-light),
+    disabled: var(--c-buttonLabel-disabled),
     primaryInteractive: (
-      DEFAULT: var(--c-l-white),
-      hover: var(--c-l-white),
-      press: var(--c-l-white)
+      DEFAULT: var(--c-buttonLabel-primaryInteractive),
+      hover: var(--c-buttonLabel-primaryInteractive--hover),
+      press: var(--c-buttonLabel-primaryInteractive--press)
     ),
     secondaryInteractive: (
-      DEFAULT: var(--c-l-indigo),
-      hover: var(--c-l-indigo),
-      press: var(--c-l-indigo-dark)
+      DEFAULT: var(--c-buttonLabel-secondaryInteractive),
+      hover: var(--c-buttonLabel-secondaryInteractive--hover),
+      press: var(--c-buttonLabel-secondaryInteractive--press)
     ),
-    success: var(--c-l-white),
+    success: var(--c-buttonLabel-success),
     successAltInteractive: (
-      DEFAULT: var(--c-l-white),
-      hover: var(--c-l-white),
-      press: var(--c-l-white)
+      DEFAULT: var(--c-buttonLabel-successAltInteractive),
+      hover: var(--c-buttonLabel-successAltInteractive--hover),
+      press: var(--c-buttonLabel-successAltInteractive--press)
     ),
     tertiaryInteractive: (
-      DEFAULT: var(--c-l-blue),
-      hover: var(--c-l-blue),
-      press: var(--c-l-blue)
+      DEFAULT: var(--c-buttonLabel-tertiaryInteractive),
+      hover: var(--c-buttonLabel-tertiaryInteractive--hover),
+      press: var(--c-buttonLabel-tertiaryInteractive--press)
     )
   ),
   icon: (
-    base: var(--c-l-graphite),
+    base: var(--c-icon-base),
     baseInteractive: (
-      DEFAULT: var(--c-l-graphite),
-      hover: var(--c-l-graphite)
+      DEFAULT: var(--c-icon-baseInteractive),
+      hover: var(--c-icon-baseInteractive--hover)
     ),
-    subdued: var(--c-l-graphite-light),
+    subdued: var(--c-icon-subdued),
     subduedInteractive: (
-      DEFAULT: var(--c-l-graphite-light),
-      hover: var(--c-l-graphite)
+      DEFAULT: var(--c-icon-subduedInteractive),
+      hover: var(--c-icon-subduedInteractive--hover)
     ),
-    accent: var(--c-l-purple),
+    accent: var(--c-icon-accent),
     accentInteractive: (
-      DEFAULT: var(--c-l-purple),
-      hover: var(--c-l-indigo)
+      DEFAULT: var(--c-icon-accentInteractive),
+      hover: var(--c-icon-accentInteractive--hover)
     ),
-    accentAlt: var(--c-l-white),
+    accentAlt: var(--c-icon-accentAlt),
     accentAltInteractive: (
-      DEFAULT: var(--c-l-white),
-      hover: var(--c-l-white)
-    ),
-    info: var(--c-l-graphite-light),
-    infoAlt: var(--c-l-turquoise),
-    error: var(--c-l-red),
-    errorAlt: var(--c-l-red),
-    success: var(--c-l-green),
-    successAlt: var(--c-l-white),
-    warning: var(--c-l-coral),
-    connect: var(--c-l-turquoise),
-    connectAlt: var(--c-l-turquoise),
-    driver: var(--c-l-graphite),
-    owner: var(--c-l-white),
-    inversed: var(--c-l-white),
-    disabled: var(--c-l-grey-lighter)
+      DEFAULT: var(--c-icon-accentAltInteractive),
+      hover: var(--c-icon-accentAltInteractive--hover)
+    ),
+    info: var(--c-icon-info),
+    infoAlt: var(--c-icon-infoAlt),
+    error: var(--c-icon-error),
+    errorAlt: var(--c-icon-errorAlt),
+    success: var(--c-icon-success),
+    successAlt: var(--c-icon-successAlt),
+    warning: var(--c-icon-warning),
+    connect: var(--c-icon-connect),
+    connectAlt: var(--c-icon-connectAlt),
+    driver: var(--c-icon-driver),
+    owner: var(--c-icon-owner),
+    inversed: var(--c-icon-inversed),
+    disabled: var(--c-icon-disabled)
   ),
   stroke: (
-    base: var(--c-l-grey),
+    base: var(--c-stroke-base),
     baseInteractive: (
-      DEFAULT: var(--c-l-grey),
-      hover: var(--c-l-graphite-light),
-      press: var(--c-l-graphite)
+      DEFAULT: var(--c-stroke-baseInteractive),
+      hover: var(--c-stroke-baseInteractive--hover),
+      press: var(--c-stroke-baseInteractive--press)
     ),
-    strong: var(--c-l-grey-dark),
+    strong: var(--c-stroke-strong),
     strongInteractive: (
-      DEFAULT: var(--c-l-grey-dark),
-      hover: var(--c-l-graphite-light),
-      press: var(--c-l-graphite)
+      DEFAULT: var(--c-stroke-strongInteractive),
+      hover: var(--c-stroke-strongInteractive--hover),
+      press: var(--c-stroke-strongInteractive--press)
     ),
-    subdued: var(--c-l-grey-light),
-    accent: var(--c-l-indigo),
+    subdued: var(--c-stroke-subdued),
+    accent: var(--c-stroke-accent),
     accentInteractive: (
-      DEFAULT: var(--c-l-indigo),
-      hover: var(--c-l-indigo),
-      press: var(--c-l-indigo-dark)
-    ),
-    accentAlt: var(--c-l-purple),
-    error: var(--c-l-red),
-    errorAlt: var(--c-l-red),
-    success: var(--c-l-green),
-    successAlt: var(--c-l-green)
+      DEFAULT: var(--c-stroke-accentInteractive),
+      hover: var(--c-stroke-accentInteractive--hover),
+      press: var(--c-stroke-accentInteractive--press)
+    ),
+    accentAlt: var(--c-stroke-accentAlt),
+    error: var(--c-stroke-error),
+    errorAlt: var(--c-stroke-errorAlt),
+    success: var(--c-stroke-success),
+    successAlt: var(--c-stroke-successAlt)
   ),
   fill: (
-    base: var(--c-l-graphite),
-    secondary: var(--c-l-turquoise),
-    subdued: var(--c-l-grey-light),
-    accent: var(--c-l-purple),
-    accentAlt: var(--c-l-purple),
-    error: var(--c-l-red),
-    negative: var(--c-l-red),
-    success: var(--c-l-green),
-    disabled: var(--c-l-grey-dark),
-    neutral: var(--c-l-grey-lighter)
+    base: var(--c-fill-base),
+    secondary: var(--c-fill-secondary),
+    subdued: var(--c-fill-subdued),
+    accent: var(--c-fill-accent),
+    accentAlt: var(--c-fill-accentAlt),
+    error: var(--c-fill-error),
+    negative: var(--c-fill-negative),
+    success: var(--c-fill-success),
+    disabled: var(--c-fill-disabled),
+    neutral: var(--c-fill-neutral)
   )
 );

package/styles/core/color.scss

@@ -1,6 +1,6 @@
 @import "./_colors-map";
 
-@mixin semantic-color($color, $category, $property) {
+@mixin semantic-color($category, $color, $property) {
   $semantic-colors-data: map-get($theme-colors-map, $category);
   $semantic-color: map-get($semantic-colors-data, $color);
   @if not $semantic-color {
@@ -24,24 +24,46 @@
   }
 }
 
+@function color-var($category, $color, $modifier: "") {
+  $semantic-colors-data: map-get($theme-colors-map, $category);
+  $semantic-color: map-get($semantic-colors-data, $color);
+  @if not $semantic-color {
+    @error "Didn't found any match for: #{$color}, #{$category}";
+  }
+  @if type-of($semantic-color) == string {
+    @if $modifier != "" {
+      @error "There is no modifier #{$modifier} for: #{$color}, #{$category}";
+    }
+    @return $semantic-color;
+  } @else {
+    @if not $modifier {
+      @error "A modifier must be provied for: #{$color}, #{$category}.";
+    }
+    @if not map-has-key($semantic-color, $modifier) {
+      @error "Didn't found any match for: #{$color}, #{$category} with modifier: #{$modifier}";
+    }
+    @return map-get($semantic-color, $modifier);
+  }
+}
+
 @mixin bg-color($color) {
-  @include semantic-color($color, background, background-color);
+  @include semantic-color(background, $color, background-color);
 }
 
 @mixin fill-color($color) {
-  @include semantic-color($color, fill, fill);
+  @include semantic-color(fill, $color, fill);
 }
 
 @mixin fill-bg-color($color) {
-  @include semantic-color($color, fill, background-color);
+  @include semantic-color(fill, $color, background-color);
 }
 
 @mixin border-color($color) {
-  @include semantic-color($color, stroke, border-color);
+  @include semantic-color(stroke, $color, border-color);
 }
 
 @mixin text-color($color) {
-  @include semantic-color($color, text, color);
+  @include semantic-color(text, $color, color);
 }
 
 // LEGACY

package/styles/core/text.scss

@@ -2,11 +2,11 @@
   font-family: BrownPro,BlinkMacSystemFont,-apple-system,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans','Droid Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
   font-size: 2.25rem;
   font-weight: 700;
-  line-height: 2.5rem;
+  line-height: 125%;
+  letter-spacing: -0.5px;
 
   @include breakpoint($from: sm) {
     font-size: 3.5rem;
-    line-height: 3.75rem;
   }
 }
 
@@ -14,11 +14,11 @@
   font-family: BrownPro,BlinkMacSystemFont,-apple-system,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans','Droid Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
   font-size: 1.25rem;
   font-weight: 700;
-  line-height: 1.5rem;
+  line-height: 125%;
+  letter-spacing: -0.5px;
 
   @include breakpoint($from: sm) {
     font-size: 1.75rem;
-    line-height: 2rem;
   }
 }
 
@@ -26,11 +26,12 @@
   font-family: BrownPro,BlinkMacSystemFont,-apple-system,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans','Droid Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
   font-size: 2rem;
   font-weight: 700;
-  line-height: 2.25rem;
+  line-height: 125%;
+  letter-spacing: -0.04rem;
 
   @include breakpoint($from: sm) {
     font-size: 2.5rem;
-    line-height: 2.75rem;
+    letter-spacing: -0.05rem;
   }
 }
 
@@ -38,43 +39,47 @@
   font-family: BrownPro,BlinkMacSystemFont,-apple-system,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans','Droid Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
   font-size: 1.5rem;
   font-weight: 700;
-  line-height: 1.75rem;
+  line-height: 125%;
+  letter-spacing: -0.04rem;
 
   @include breakpoint($from: sm) {
     font-size: 2rem;
-    line-height: 2.25rem;
+    letter-spacing: -0.04rem;
   }
 }
 
 @mixin c-text-title-md {
   font-family: BrownPro,BlinkMacSystemFont,-apple-system,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans','Droid Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
-  font-size: 1.125rem;
+  font-size: 1.25rem;
   font-weight: 700;
-  line-height: 1.25rem;
+  line-height: 125%;
+  letter-spacing: NaNrem;
 
   @include breakpoint($from: sm) {
     font-size: 1.5rem;
-    line-height: 1.75rem;
+    letter-spacing: -0.03rem;
   }
 }
 
 @mixin c-text-title-sm {
   font-family: BrownPro,BlinkMacSystemFont,-apple-system,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans','Droid Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
-  font-size: 0.9375rem;
+  font-size: 1rem;
   font-weight: 600;
-  line-height: 1.25rem;
+  line-height: 125%;
+  letter-spacing: -0.02rem;
 
   @include breakpoint($from: sm) {
-    font-size: 1.125rem;
-    line-height: 1.5rem;
+    font-size: 1.25rem;
+    letter-spacing: -0.025rem;
   }
 }
 
 @mixin c-text-title-xs {
   font-family: BrownPro,BlinkMacSystemFont,-apple-system,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans','Droid Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
-  font-size: 0.9375rem;
+  font-size: 1rem;
   font-weight: 600;
-  line-height: 1.25rem;
+  line-height: 125%;
+  letter-spacing: -0.02rem;
 }
 
 @mixin c-text-body-lg {
@@ -85,7 +90,7 @@
 
 @mixin c-text-body-md {
   font-family: BlinkMacSystemFont,-apple-system,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans','Droid Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
-  font-size: 0.9375rem;
+  font-size: 1rem;
   line-height: 1.5rem;
 }
 
@@ -99,7 +104,20 @@
   font-family: BrownPro,BlinkMacSystemFont,-apple-system,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans','Droid Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
   font-size: 0.875rem;
   font-weight: 700;
-  line-height: 1.5rem;
+  line-height: 175%;
   text-transform: uppercase;
   color: var(--c-text-subdued);
+  letter-spacing: -0.2px;
+}
+
+@mixin c-text-link {
+  @include text-color(baseInteractive);
+  text-decoration: underline;
+  font-weight: 500;
+  text-underline-offset: 2px;
+}
+
+// Default link styles
+a {
+  @include c-text-link;
 }