@snack-uikit/link 0.9.3 → 0.10.0

package/dist/components/types.d.ts

@@ -1,5 +1,5 @@
 import { ValueOf } from '@snack-uikit/utils';
-import { ON_COLOR, ON_SURFACE, SIZE } from './constants';
-export type OnColor = ValueOf<typeof ON_COLOR>;
+import { APPEARANCE, SIZE, TEXT_MODE } from './constants';
+export type Appearance = ValueOf<typeof APPEARANCE>;
 export type Size = ValueOf<typeof SIZE>;
-export type OnSurface = ValueOf<typeof ON_SURFACE>;
+export type TextMode = ValueOf<typeof TEXT_MODE>;

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Link",
-  "version": "0.9.3",
+  "version": "0.10.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -33,9 +33,9 @@
   "scripts": {},
   "dependencies": {
     "@snack-uikit/icons": "0.19.2",
-    "@snack-uikit/truncate-string": "0.4.3",
+    "@snack-uikit/truncate-string": "0.4.4",
     "@snack-uikit/utils": "3.2.0",
     "classnames": "2.3.2"
   },
-  "gitHead": "420ccb07e016ae79a8b783e88c24f2045fadc026"
+  "gitHead": "57c597a3eebaf6528c0c61b6b27dd244753de1cf"
 }

package/src/components/Link.tsx

@@ -5,9 +5,9 @@ import { ArrowLinksSVG } from '@snack-uikit/icons';
 import { TruncateString } from '@snack-uikit/truncate-string';
 import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
 
-import { ON_COLOR, ON_SURFACE, SIZE } from './constants';
+import { APPEARANCE, SIZE, TEXT_MODE } from './constants';
 import styles from './styles.module.scss';
-import { OnColor, OnSurface, Size } from './types';
+import { Appearance, Size, TextMode } from './types';
 
 export type LinkProps = WithSupportProps<{
   /** Текст ссылки */
@@ -22,14 +22,20 @@ export type LinkProps = WithSupportProps<{
   download?: string;
   /** Колбек обработки клика */
   onClick?: MouseEventHandler<HTMLAnchorElement>;
-  /** Размер */
+  /** Размер
+   * @default 's'
+   */
   size?: Size;
   /** Ведет ли ссылка на внешний ресурс (добавляет иконку если true) */
   external?: boolean;
-  /** Стилизует ссылку для размещения на цветном фоне */
-  onColor?: OnColor;
-  /** Тип поверхности, на которой размещена ссылка */
-  onSurface?: OnSurface;
+  /** Стилизует ссылку для размещения на цветном фоне
+   * @default 'primary'
+   */
+  appearance?: Appearance;
+  /** Тип поверхности, на которой размещена ссылка
+   * @default 'default'
+   */
+  textMode?: TextMode;
 }>;
 
 /** Компонент ссылка */
@@ -40,10 +46,10 @@ export function Link({
   target = '_blank',
   download,
   onClick,
-  onSurface = ON_SURFACE.Background,
+  textMode = TEXT_MODE.Default,
   size = SIZE.S,
   external,
-  onColor = ON_COLOR.Primary,
+  appearance = APPEARANCE.Primary,
   ...rest
 }: LinkProps) {
   return (
@@ -55,8 +61,8 @@ export function Link({
       onClick={onClick}
       {...extractSupportProps(rest)}
       data-size={size}
-      data-on-surface={onSurface}
-      data-color={onColor}
+      data-text-mode={textMode}
+      data-appearance={appearance}
       rel={target === '_blank' ? 'noopener noreferrer' : undefined}
     >
       <TruncateString text={text} maxLines={1} />

package/src/components/constants.ts

@@ -1,4 +1,4 @@
-export const ON_COLOR = {
+export const APPEARANCE = {
   InvertNeutral: 'invert-neutral',
   Neutral: 'neutral',
   Primary: 'primary',
@@ -24,8 +24,8 @@ export const TARGET = {
   Top: '_top',
 } as const;
 
-export const ON_SURFACE = {
-  Background: 'background',
-  Decor: 'decor',
+export const TEXT_MODE = {
+  Default: 'default',
   Accent: 'accent',
+  OnAccent: 'on-accent',
 } as const;

package/src/components/index.ts

@@ -1,2 +1 @@
 export * from './Link';
-export { ON_COLOR } from './constants';

package/src/components/styles.module.scss

@@ -2,8 +2,8 @@
 @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
 
 $sizes: 's', 'm', 'l';
-$colors: 'invert-neutral','neutral', 'primary', 'red', 'orange', 'blue', 'violet', 'pink', 'yellow', 'green';
-$on-surfaces: 'background', 'decor', 'accent';
+$appearances: 'invert-neutral','neutral', 'primary', 'red', 'orange', 'blue', 'violet', 'pink', 'yellow', 'green';
+$text-modes: 'default', 'accent', 'on-accent';
 $icon-sizes: (
   's': $icon-xs,
   'm': $icon-s,
@@ -22,66 +22,84 @@ $icon-sizes: (
   text-decoration: none;
   text-decoration-skip-ink: none;
 
-  @each $on-surface in $on-surfaces {
-    &[data-on-surface='#{$on-surface}'] {
-      @each $color in $colors {
-        &[data-color='#{$color}'] {
-          @if $on-surface == 'accent' {
-            color: simple-var($theme-variables, 'sys', $color, 'on-accent');
-
-            &:hover {
-              color: simple-var($theme-variables, 'sys', $color, 'on-accent');
-              opacity: $opacity-a080;
-            }
-            &:focus-visible {
-              @include outline-var($container-focused-s);
-
-              opacity: $opacity-a080;
-              outline-color: $sys-available-on-complementary;
-            }
+  @each $appearance in $appearances {
+    &[data-appearance='#{$appearance}'] {
+      &[data-text-mode='default'] {
+        color: simple-var($theme-variables, 'sys', $appearance, 'text-support');
+
+        &:hover {
+          color: simple-var($theme-variables, 'sys', $appearance, 'text-main');
+        }
+
+        &:focus-visible {
+          @include outline-var($container-focused-s);
+
+          color: simple-var($theme-variables, 'sys', $appearance, 'text-main');
+          outline-color: $sys-available-complementary;
+        }
+      }
+
+      &[data-text-mode='accent'] {
+        color: simple-var($theme-variables, 'sys', $appearance, 'accent-default');
+
+        &:hover {
+          color: simple-var($theme-variables, 'sys', $appearance, 'text-main');
+        }
+
+        &:focus-visible {
+          @include outline-var($container-focused-s);
+
+          color: simple-var($theme-variables, 'sys', $appearance, 'text-main');
+
+          @if $appearance == 'invert-neutral' {
+            outline-color: $sys-available-on-complementary;
           }
 
-          @else {
-            color: simple-var($theme-variables, 'sys', $color, 'accent-default');
-            
-            &:hover {
-              color: simple-var($theme-variables, 'sys', $color, 'text-main');
-            }
-            &:focus-visible {
-              @include outline-var($container-focused-s);
-
-              color: simple-var($theme-variables, 'sys', $color, 'text-main');
-
-              @if $color == 'invert-neutral' {
-                outline-color: $sys-available-on-complementary;
-              }
-
-              @else {
-                outline-color: $sys-available-complementary;
-              }
-            }
+ @else {
+            outline-color: $sys-available-complementary;
           }
+        }
+      }
+
+      &[data-text-mode='on-accent'] {
+        color: simple-var($theme-variables, 'sys', $appearance, 'on-accent');
+
+        &:hover {
+          color: simple-var($theme-variables, 'sys', $appearance, 'on-accent');
+          opacity: $opacity-a080;
+        }
 
-          @each $size in $sizes {
-            &[data-size='#{$size}'] {
-              @if $on-surface == 'decor' {
-                @include composite-var($theme-variables, 'sans', 'body', $size);
-              }
+        &:focus-visible {
+          @include outline-var($container-focused-s);
 
-              @else {
-                @include composite-var($theme-variables, 'link', 'body', $size);
-              }
+          color: simple-var($theme-variables, 'sys', $appearance, 'on-accent');
+          opacity: $opacity-a080;
+          outline-color: $sys-available-on-complementary;
+        }
+      }
+    }
+  }
 
-              @include composite-var($link, 'container', $size);
+  @each $size in $sizes {
+    &[data-size='#{$size}'] {
+      @each $text-mode in $text-modes {
+        &[data-text-mode='#{$text-mode}'] {
+          @if $text-mode == 'default' {
+            @include composite-var($theme-variables, 'sans', 'body', $size);
+          }
 
-              svg {
-                width: simple-var($icon-sizes, $size) !important; /* stylelint-disable-line declaration-no-important */
-                height: simple-var($icon-sizes, $size) !important; /* stylelint-disable-line declaration-no-important */
-              }
-            }
+ @else {
+            @include composite-var($theme-variables, 'link', 'body', $size);
           }
         }
       }
+
+      @include composite-var($link, 'container', $size);
+
+      svg {
+        width: simple-var($icon-sizes, $size) !important; /* stylelint-disable-line declaration-no-important */
+        height: simple-var($icon-sizes, $size) !important; /* stylelint-disable-line declaration-no-important */
+      }
     }
   }
 }

package/src/components/types.ts

@@ -1,9 +1,9 @@
 import { ValueOf } from '@snack-uikit/utils';
 
-import { ON_COLOR, ON_SURFACE, SIZE } from './constants';
+import { APPEARANCE, SIZE, TEXT_MODE } from './constants';
 
-export type OnColor = ValueOf<typeof ON_COLOR>;
+export type Appearance = ValueOf<typeof APPEARANCE>;
 
 export type Size = ValueOf<typeof SIZE>;
 
-export type OnSurface = ValueOf<typeof ON_SURFACE>;
+export type TextMode = ValueOf<typeof TEXT_MODE>;