@times-design-system/components-wordpress 0.4.0 → 1.2.0

package/src/Link/styles.css

@@ -1,111 +0,0 @@
-.tds-link {
-  display: inline;
-  text-decoration: underline;
-  text-decoration-color: currentColor;
-  text-underline-offset: 0.2em;
-  cursor: pointer;
-  transition: color 0.2s ease, text-decoration-color 0.2s ease;
-  font-family: var(--tds-font-family040, 'Roboto', sans-serif);
-  font-size: var(--tds-font-size030, 1rem);
-  font-weight: var(--tds-font-weight040, 400);
-  line-height: var(--tds-font-line-height040, 1.5);
-}
-
-/* Primary variant (default) - Link color */
-.tds-link--primary {
-  color: var(--interactive-link-primary-default, #005c8a);
-}
-
-.tds-link--primary:visited {
-  color: var(--interactive-link-primary-visited, #005c8a);
-}
-
-.tds-link--primary:hover {
-  color: var(--interactive-link-primary-hover, #004568);
-  text-decoration-thickness: 0.15em;
-}
-
-.tds-link--primary:focus {
-  outline: 2px solid var(--interactive-link-primary-default, #005c8a);
-  outline-offset: 0.25em;
-  border-radius: 2px;
-}
-
-.tds-link--primary:active {
-  color: var(--interactive-link-primary-active, #003d52);
-}
-
-/* Secondary variant */
-.tds-link--secondary {
-  color: var(--text-secondary, #666666);
-}
-
-.tds-link--secondary:visited {
-  color: var(--text-secondary, #666666);
-}
-
-.tds-link--secondary:hover {
-  color: var(--text-primary, #1a1a1a);
-  text-decoration-thickness: 0.15em;
-}
-
-.tds-link--secondary:focus {
-  outline: 2px solid var(--text-secondary, #666666);
-  outline-offset: 0.25em;
-  border-radius: 2px;
-}
-
-.tds-link--secondary:active {
-  color: var(--text-primary, #1a1a1a);
-}
-
-/* Danger variant */
-.tds-link--danger {
-  color: var(--text-error, #d32f2f);
-}
-
-.tds-link--danger:visited {
-  color: var(--text-error, #d32f2f);
-}
-
-.tds-link--danger:hover {
-  color: var(--text-error-hover, #b71c1c);
-  text-decoration-thickness: 0.15em;
-}
-
-.tds-link--danger:focus {
-  outline: 2px solid var(--text-error, #d32f2f);
-  outline-offset: 0.25em;
-  border-radius: 2px;
-}
-
-.tds-link--danger:active {
-  color: var(--text-error-active, #9a0000);
-}
-
-/* Disabled state */
-.tds-link:disabled,
-.tds-link[aria-disabled='true'] {
-  opacity: 0.6;
-  cursor: not-allowed;
-  text-decoration: none;
-}
-
-/* Dark mode support (optional) */
-@media (prefers-color-scheme: dark) {
-  .tds-link--primary {
-    color: var(--interactive-link-primary-default-dark, #66b3e0);
-  }
-
-  .tds-link--primary:hover {
-    color: var(--interactive-link-primary-hover-dark, #8fd4ff);
-  }
-
-  .tds-link--secondary {
-    color: var(--text-secondary-dark, #999999);
-  }
-
-  .tds-link--secondary:hover {
-    color: var(--text-primary-dark, #e0e0e0);
-  }
-}

package/src/Text/Text.tsx

@@ -1,38 +0,0 @@
-import React from 'react';
-import './styles.css';
-import './typographyStyles.css';
-import { cn } from '../utils/cn';
-
-interface TextProps {
-  as?: 'p' | 'span' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5';
-  typographyStyle?: string;
-  classes?: string;
-  styles?: { [key: string]: string };
-  children?: React.ReactNode;
-}
-
-export const Text: React.FC<TextProps> = ({
-  as,
-  typographyStyle,
-  styles,
-  classes,
-  children
-}) => {
-  const TextComponent = as || 'p';
-  const transformedTypographyStyle =
-    typographyStyle?.replaceAll('.', '-').toLowerCase() ?? '';
-
-  return (
-    <TextComponent
-      className={cn(
-        classes,
-        typographyStyle
-          ? `--tds-typography-tokens-${transformedTypographyStyle}`
-          : undefined
-      )}
-      style={styles ? styles : undefined}
-    >
-      {children}
-    </TextComponent>
-  );
-};

package/src/Text/styles.css

@@ -1,30 +0,0 @@
-.storybook-button {
-  display: inline-block;
-  cursor: pointer;
-  border: 0;
-  border-radius: 3em;
-  font-weight: 700;
-  line-height: 1;
-  font-family: 'Roboto', 'Roboto-Regular', Helvetica, Arial, sans-serif;
-}
-.storybook-button--primary {
-  background-color: #555ab9;
-  color: white;
-}
-.storybook-button--secondary {
-  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
-  background-color: transparent;
-  color: #333;
-}
-.storybook-button--small {
-  padding: 10px 16px;
-  font-size: 12px;
-}
-.storybook-button--medium {
-  padding: 11px 20px;
-  font-size: 14px;
-}
-.storybook-button--large {
-  padding: 12px 24px;
-  font-size: 16px;
-}

package/src/Text/typographyStyles.css

@@ -1,30 +0,0 @@
-.storybook-button {
-  display: inline-block;
-  cursor: pointer;
-  border: 0;
-  border-radius: 3em;
-  font-weight: 700;
-  line-height: 1;
-  font-family: 'Roboto', 'Roboto-Regular', Helvetica, Arial, sans-serif;
-}
-.storybook-button--primary {
-  background-color: #555ab9;
-  color: white;
-}
-.storybook-button--secondary {
-  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
-  background-color: transparent;
-  color: #333;
-}
-.storybook-button--small {
-  padding: 10px 16px;
-  font-size: 12px;
-}
-.storybook-button--medium {
-  padding: 11px 20px;
-  font-size: 14px;
-}
-.storybook-button--large {
-  padding: 12px 24px;
-  font-size: 16px;
-}

package/src/utils/cn.js

@@ -1,3 +0,0 @@
-export const cn = (...classNames) => {
-  return classNames.filter(Boolean).join(' ');
-};

package/src/utils/cn.tsx

@@ -1,3 +0,0 @@
-export const cn = (...classNames: (string | undefined)[]) => {
-  return classNames.filter(Boolean).join(' ');
-};

package/src/utils/hooks.ts

@@ -1,34 +0,0 @@
-// function possibly for future use with typography tokens.
-// takes a token and tokens object, returns media query string referencing typography token values.
-type UseTypographyToken = (
-  typographyToken: string,
-  tokens: {
-    breakpoints: { [key: string]: number };
-    [key: string]: any; // eslint-disable-line @typescript-eslint/no-explicit-any
-  }
-) => string;
-
-export const useTypographyToken: UseTypographyToken = (
-  typographyToken,
-  tokens
-) => `
-  .${typographyToken} {
-    font: ${typographyToken}
-
-    @media (min-width: ${tokens.breakpoints.sm}px) {
-      fontSize: ${tokens['Viewport/ Small'].typography[typographyToken].fontSize};
-    }
-
-    @media (min-width: ${tokens.breakpoints.md}px) {
-      fontSize: ${tokens['Viewport/ Medium'].typography[typographyToken].fontSize};
-    }
-
-    @media (min-width: ${tokens.breakpoints.lg}px) {
-      fontSize: ${tokens['Viewport/ Large'].typography[typographyToken].fontSize};
-    }
-
-    @media (min-width: ${tokens.breakpoints.xl}px) {
-      fontSize: ${tokens['Viewport/ XLarge'].typography[typographyToken].fontSize};
-    }
-  }
-`;