@repobit/dex-system-design 0.11.0 → 0.12.0

package/src/tokens/tokens.stories.js

@@ -18,7 +18,7 @@ export const Colors = () => html`
       margin-bottom: 32px;
     }
     .color-group-title {
-      font-family: var(--font-family-sans);
+      font-family: var(--typography-fontFamily-sans);
       font-weight: 600;
       font-size: var(--heading-medium);
       margin-bottom: 16px;
@@ -32,7 +32,7 @@ export const Colors = () => html`
       width: 80px;
       height: 80px;
       margin: 6px;
-      border-radius: 8px;
+      border-radius: var(--radius-lg);
       box-shadow: 0 0 4px rgba(0,0,0,0.1);
       color: white;
       font-family: var(--font-family-mono);
@@ -44,7 +44,7 @@ export const Colors = () => html`
       margin-top: 6px;
       color: var(--color-neutral-900);
       font-weight: 600;
-      font-family: var(--font-family-sans);
+      font-family: var(--typography-fontFamily-sans);
       font-size: 10px;
       white-space: nowrap;
     }

package/src/tokens/typography.css.js

@@ -2,12 +2,8 @@ import { css } from "lit";
 
 export default css`
   
-/*<!-- typography -->*/
 
 
-
-/* <!-- display -->/
-/*  <!-- desktop -->*/
   .text-display-xlarge {
     font-family: 'Arial',sans-serif;
     font-size: 4em;

package/src/tokens/typography.stories.js

@@ -6,7 +6,7 @@ export default {
 
 const typographyTokens = {
   families: {
-    'Sans': 'var(--font-family-sans, "IBM Plex Sans", Arial, sans-serif)',
+    'Sans': 'var(--typography-fontFamily-sans, "IBM Plex Sans", Arial, sans-serif)',
     'Mono': 'var(--font-family-mono, "IBM Plex Mono", monospace)',
   },
   sizes: {
@@ -26,7 +26,7 @@ const typographyTokens = {
 export const Typography = () => html`
   <style>
     h3 {
-      font-family: var(--font-family-sans);
+      font-family: var(--typography-fontFamily-sans);
       font-weight: 600;
       font-size: var(--heading-medium);
       margin-bottom: 16px;

package/src/components/highlight/highlight-s.css.js

@@ -1,88 +0,0 @@
-import { css } from 'lit';
-
-export const highlightTextStyles = css`
-  :host {
-    --base-font-size: 32px;
-    --deco-height-multiplier: 1.4375; /* 46px / 32px */
-    --rect-height-multiplier: 1.1875; /* 38px / 32px */
-    --ellipse-size-multiplier: 0.25;  /* 8px / 32px */
-    
-    --deco-height: calc(var(--base-font-size) * var(--deco-height-multiplier));
-    --rect-height: calc(var(--base-font-size) * var(--rect-height-multiplier));
-    --ellipse-size: calc(var(--base-font-size) * var(--ellipse-size-multiplier));
-
-    display: inline-block;
-    font-family: 'IBM Plex Sans', sans-serif;
-    font-weight: 700;
-    font-size: var(--base-font-size);
-    line-height: 1.3;
-    color: #000;
-    text-align: center;
-  }
-
-  .highlight {
-    background: none;
-    color: #000;
-    display: inline-block;
-    font: inherit;
-    font-weight: inherit;
-    font-size: inherit;
-    line-height: inherit;
-    position: relative;
-    vertical-align: middle;
-    top: -4px;
-  }
-
-  .highlight-bg {
-    background: #F1F7FE;
-    display: inline-block;
-    position: relative;
-    padding: 0 4px;
-    margin-left: 4px;
-    margin-right: 4px;
-    z-index: 1;
-  }
-
-  .highlight-deco {
-    position: absolute;
-    top: 0;
-    width: var(--ellipse-size);
-    height: var(--deco-height);
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: flex-start;
-    pointer-events: none;
-    z-index: 2;
-  }
-
-  .highlight-deco.left {
-    left: -3px;
-    top: -4px;
-  }
-
-  .highlight-deco.right {
-    right: -3px;
-  }
-
-  .highlight-svg-ellipse-top,
-  .highlight-svg-ellipse-bottom {
-    width: var(--ellipse-size);
-    height: var(--ellipse-size);
-    fill: #006DFF;
-    display: block;
-  }
-
-  .highlight-svg-rect {
-    width: calc(var(--ellipse-size) * 0.25); /* 2px when ellipse is 8px */
-    height: var(--rect-height);
-    fill: #006DFF;
-    display: block;
-  }
-
-  @media (max-width: 600px) {
-    :host {
-      --base-font-size: 20px;
-    }
-  }
-`;

package/src/components/highlight/highlight-s.js

@@ -1,35 +0,0 @@
-import { LitElement, html } from 'lit';
-import { highlightTextStyles } from './highlight-s.css.js';
-
-export class HighlightText extends LitElement {
-  static styles = highlightTextStyles;
-
-  render() {
-  return html`
-    <span class="highlight">
-      <span class="highlight-bg">
-        <span class="highlight-deco left">
-          <svg class="highlight-svg-ellipse-top" viewBox="0 0 8 8">
-            <ellipse cx="4" cy="4" rx="4" ry="4" />
-          </svg>
-          <svg class="highlight-svg-rect" viewBox="0 0 2 42">
-            <rect x="0" y="0" width="2" height="42" />
-          </svg>
-        </span>
-        <slot></slot>
-        <span class="highlight-deco right">
-          <svg class="highlight-svg-rect" viewBox="0 0 2 42">
-            <rect x="0" y="0" width="2" height="42" />
-          </svg>
-          <svg class="highlight-svg-ellipse-bottom" viewBox="0 0 8 8">
-            <ellipse cx="4" cy="4" rx="4" ry="4" />
-          </svg>
-        </span>
-      </span>
-    </span>
-  `;
-}
-
-}
-
-customElements.define('highlight-text-s', HighlightText);

package/src/components/highlight/highlight-s.stories.js

@@ -1,22 +0,0 @@
-import { html } from 'lit';
-import './highlight-s.js';
-
-export default {
-  title: 'Components/HighlightText',
-  component: 'highlight-text-s',
-};
-
-const Template = ({ beforeText, highlightText, afterText }) => html`
-  <h1>
-    ${beforeText}
-    <highlight-text-s>${highlightText}</highlight-text-s>
-    ${afterText}
-  </h1>
-`;
-
-export const InlineText = Template.bind({});
-InlineText.args = {
-  beforeText: 'Introducing ',
-  highlightText: 'the next generation',
-  afterText: ' of digital security: your personalized shield for a worry-free online experience.',
-};