@repobit/dex-system-design 0.3.0 → 0.5.0

package/CHANGELOG.md

@@ -3,6 +3,24 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.5.0](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.4.0...@repobit/dex-system-design@0.5.0) (2025-06-24)
+
+
+### Features
+
+* **DEX-23636:** refactor button styles to use design tokens for consistency ([411c6bb](https://github.com/bitdefender/dex-core/commit/411c6bbc8d3fa63eb16d7059711929e8cca09f07))
+
+
+
+## [0.4.0](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.3.0...@repobit/dex-system-design@0.4.0) (2025-06-24)
+
+
+### Features
+
+* **DEX-23636:** resolve css paths ([f824e2d](https://github.com/bitdefender/dex-core/commit/f824e2ddf0d51447c6aa304fa4d40eef9f266972))
+
+
+
 ## [0.3.0](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.2.1...@repobit/dex-system-design@0.3.0) (2025-06-24)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@repobit/dex-system-design",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "description": "Design system based on Web Components.",
   "author": "Iordache Matei Cezar <miordache@bitdefender.com>",
   "homepage": "https://github.com/bitdefender/dex-core#readme",
@@ -53,5 +53,5 @@
   "volta": {
     "node": "22.14.0"
   },
-  "gitHead": "95240e83274c34f71f1ca28c58230f3069b68b44"
+  "gitHead": "87d473fc4b0d18e8b3526ffb88d0c2c8f88a1eda"
 }

package/src/components/Button/Button.js

@@ -1,6 +1,6 @@
 import { LitElement, html, css } from "lit";
 import "./icons.js";
-import buttonsCSS from "../button/button.css.js";
+import buttonsCSS from "./button.css.js";
 
 class Button extends LitElement {
   static properties = {

package/src/components/Button/button.css.js

@@ -1,30 +1,31 @@
-import { css } from 'lit';
+import { css, unsafeCSS } from 'lit';
+import { tokens } from '../../tokens/tokens.js';
 
 export default css`
   :host {
-    --button-background-primary: var(--color-blue-500);
-    --button-background-primary-hover: var(--color-blue-600);
-    --button-background-primary-focus: var(--color-blue-700);
+    --button-background-primary: ${unsafeCSS(tokens.colors.blue[500])};
+    --button-background-primary-hover: ${unsafeCSS(tokens.colors.blue[600])};
+    --button-background-primary-focus: ${unsafeCSS(tokens.colors.blue[700])};
 
-    --button-background-secondary: var(--color-neutral-950);
-    --button-background-secondary-hover: var(--color-neutral-900);
-    --button-background-secondary-focus: var(--color-neutral-800);
+    --button-background-secondary: ${unsafeCSS(tokens.colors.neutral[950])};
+    --button-background-secondary-hover: ${unsafeCSS(tokens.colors.neutral[900])};
+    --button-background-secondary-focus: ${unsafeCSS(tokens.colors.neutral[800])};
 
-    --button-background-danger: var(--color-red-600);
-    --button-background-danger-hover: var(--color-red-700);
-    --button-background-danger-focus: var(--color-red-800);
+    --button-background-danger: ${unsafeCSS(tokens.colors.red[600])};
+    --button-background-danger-hover: ${unsafeCSS(tokens.colors.red[700])};
+    --button-background-danger-focus: ${unsafeCSS(tokens.colors.red[800])};
 
-    --color-button-background-outline: var(--color-neutral-950);
-    --border-button-background-outline: var(--color-neutral-950);
-    --button-background-outline-hover: var(--color-neutral-50);
-    --border-button-background-outline-hover: var(--color-neutral-950);
-    --button-background-outline-focus: var(--color-neutral-800);
+    --color-button-background-outline: ${unsafeCSS(tokens.colors.neutral[950])};
+    --border-button-background-outline: ${unsafeCSS(tokens.colors.neutral[950])};
+    --button-background-outline-hover: ${unsafeCSS(tokens.colors.neutral[50])};
+    --border-button-background-outline-hover: ${unsafeCSS(tokens.colors.neutral[950])};
+    --button-background-outline-focus: ${unsafeCSS(tokens.colors.neutral[800])};
 
-    --color-button-background-primary-outline: var(--color-blue-500);
-    --border-button-background-primary-outline: var(--color-blue-500);
-    --button-background-primary-outline-hover: var(--color-blue-50);
-    --border-button-background-primary-outline-hover: var(--color-blue-500);
-    --button-background-primary-outline-focus: var(--color-blue-500);
+    --color-button-background-primary-outline: ${unsafeCSS(tokens.colors.blue[500])};
+    --border-button-background-primary-outline: ${unsafeCSS(tokens.colors.blue[500])};
+    --button-background-primary-outline-hover: ${unsafeCSS(tokens.colors.blue[50])};
+    --border-button-background-primary-outline-hover: ${unsafeCSS(tokens.colors.blue[500])};
+    --button-background-primary-outline-focus: ${unsafeCSS(tokens.colors.blue[500])};
   }
 
   .href-button {
@@ -106,30 +107,30 @@ export default css`
   }
 
   .button--small {
-    padding: var(--size-8) var(--size-16);
-    font-size: var(--size-14);
-    font-weight: 400;
-    font-family: var(--font-family-sans);
+    padding: ${unsafeCSS(tokens.spacing[8])} ${unsafeCSS(tokens.spacing[16])};
+    font-size: ${unsafeCSS(tokens.fontSize.body.medium)};
+    font-weight: ${unsafeCSS(tokens.fonts.sans.weights.regular)};
+    font-family: ${unsafeCSS(tokens.fonts.sans.family)};
     border-radius: 6px;
   }
 
   .button--medium {
-    padding: var(--size-12) var(--size-20);
-    font-size: var(--size-16);
-    font-weight: 400;
-    font-family: var(--font-family-sans);
+    padding: ${unsafeCSS(tokens.spacing[12])} ${unsafeCSS(tokens.spacing[20])};
+    font-size: ${unsafeCSS(tokens.fontSize.body.large)};
+    font-weight: ${unsafeCSS(tokens.fonts.sans.weights.regular)};
+    font-family: ${unsafeCSS(tokens.fonts.sans.family)};
     border-radius: 8px;
   }
 
   .button--large {
-    padding: var(--size-16) var(--size-24);
-    font-size: var(--size-18);
-    font-weight: 400;
-    font-family: var(--font-family-sans);
+    padding: ${unsafeCSS(tokens.spacing[16])} ${unsafeCSS(tokens.spacing[24])};
+    font-size: ${unsafeCSS(tokens.fontSize.body.xlarge)};
+    font-weight: ${unsafeCSS(tokens.fonts.sans.weights.regular)};
+    font-family: ${unsafeCSS(tokens.fonts.sans.family)};
     border-radius: 8px;
   }
   .button--bold {
-    font-weight: 600;
+    font-weight: ${unsafeCSS(tokens.fonts.sans.weights.semibold)};
   }
   .max--width {
     width: 100%;

package/src/components/FAQ/faq.css.js

@@ -1,4 +1,4 @@
-import { css } from "../../../node_modules/lit-element/lit-element";
+import { css } from "lit";
 
 export default css`
   :host {

package/src/components/Input/input.css.js

@@ -1,4 +1,4 @@
-import { css } from "../../../node_modules/lit-element/lit-element";
+import { css } from "lit";
 
 export default css`
   .input-container {

package/src/components/carousel/carousel.css.js

@@ -1,4 +1,4 @@
-import { css } from "../../../node_modules/lit-element/lit-element";
+import { css } from "lit";
 
 export default css`
   :host {

package/src/components/paragraph/paragraph.css.js

@@ -1,4 +1,4 @@
-import { css } from "../../../node_modules/lit-element/lit-element";
+import { css } from "lit";
 
 export default css`
   

package/src/components/pricing-cards/pricing-card.css.js

@@ -1,4 +1,4 @@
-import { css } from "../../../node_modules/lit-element/lit-element";
+import { css } from "lit";
 
 export default css`
   :host {

package/src/components/tabs/tabs.css.js

@@ -1,4 +1,4 @@
-import { css } from "../../../node_modules/lit-element/lit-element";
+import { css } from "lit";
 
 export default css`
   :host {

package/src/components/termsOfUse/terms.css.js

@@ -1,4 +1,4 @@
-import { css } from "../../../node_modules/lit-element/lit-element";
+import { css } from "lit";
 
 export default css`
   :host {

package/src/tokens/tokens.js

@@ -0,0 +1,206 @@
+export const tokens = {
+  colors: {
+    blue: {
+      50 : '#F0F7FF',
+      100: '#D6E8FF',
+      200: '#9EC8FF',
+      300: '#6BABFF',
+      400: '#338BFF',
+      500: '#006dff',
+      600: '#0059D6',
+      700: '#0045AD',
+      800: '#003385',
+      900: '#00225C',
+      950: '#001947'
+    },
+    red: {
+      50 : '#FFF0F0',
+      100: '#FFD6D6',
+      200: '#FF9E9E',
+      300: '#FF6B6B',
+      400: '#FF3333',
+      500: '#FF0000',
+      600: '#D60000',
+      700: '#AD0000',
+      800: '#850000',
+      900: '#5C0000',
+      950: '#470000'
+    },
+    green: {
+      50 : '#EDFDF1',
+      100: '#D1FADC',
+      200: '#9AF4B4',
+      300: '#63EE8D',
+      400: '#2CE767',
+      500: '#15C14F',
+      600: '#12A641',
+      700: '#0E8532',
+      800: '#0B6A26',
+      900: '#084A1A',
+      950: '#063C14'
+    },
+    yellow: {
+      50 : '#FFFBF0',
+      100: '#FFF5D6',
+      200: '#FFE89E',
+      300: '#FFDC6B',
+      400: '#FFCF33',
+      500: '#FFC400',
+      600: '#D6A000',
+      700: '#AD7F00',
+      800: '#855F00',
+      900: '#5C4000',
+      950: '#473100'
+    },
+    neutral: {
+      0   : '#FFFFFF',
+      25  : '#FAFAFA',
+      50  : '#f1f2f3',
+      100 : '#e1e3e5',
+      200 : '#c5c9ce',
+      300 : '#a6adb4',
+      400 : '#88909b',
+      500 : '#6c7580',
+      600 : '#565e66',
+      700 : '#41474d',
+      800 : '#2c3035',
+      900 : '#151719',
+      950 : '#0c0d0e',
+      1000: '#000000'
+    }
+  },
+
+  fontSize: {
+    display: {
+      default: {
+        xxsmall: '44px',
+        xsmall : '48px',
+        small  : '52px',
+        medium : '56px',
+        large  : '60px',
+        xlarge : '64px'
+      },
+      mobile: {
+        xxsmall: '34px',
+        xsmall : '36px',
+        small  : '38px',
+        medium : '40px',
+        large  : '44px',
+        xlarge : '48px'
+      }
+    },
+    heading: {
+      xxsmall: '18px',
+      xsmall : '20px',
+      small  : '24px',
+      medium : '28px',
+      large  : '32px',
+      xlarge : '36px',
+      xxlarge: '40px'
+    },
+    body: {
+      small : '13px',
+      medium: '14px',
+      large : '16px',
+      xlarge: '18px'
+    },
+    caption: {
+      small: '11px',
+      large: '12px'
+    }
+  },
+
+  spacing: {
+    0   : '0',
+    1   : '1px',
+    2   : '2px',
+    4   : '4px',
+    6   : '6px',
+    8   : '8px',
+    10  : '10px',
+    12  : '12px',
+    14  : '14px',
+    16  : '16px',
+    18  : '18px',
+    20  : '20px',
+    24  : '24px',
+    32  : '32px',
+    36  : '36px',
+    40  : '40px',
+    44  : '44px',
+    52  : '52px',
+    64  : '64px',
+    full: '99999999999999999999'
+  },
+
+  fonts: {
+    mono: {
+      family : "'IBM Plex Mono', monospace",
+      weights: {
+        light   : 300,
+        regular : 400,
+        medium  : 500,
+        semibold: 600,
+        bold    : 700
+      },
+      styles: {
+        normal: 'normal',
+        italic: 'italic'
+      }
+    },
+    sans: {
+      family : "'IBM Plex Sans', sans-serif",
+      weights: {
+        light   : 300,
+        regular : 400,
+        medium  : 500,
+        semibold: 600,
+        bold    : 700
+      },
+      styles: {
+        normal: 'normal',
+        italic: 'italic'
+      }
+    }
+  },
+
+  fontFiles: {
+    mono: {
+      bold          : '/assets/fonts/IBMPlexMono-Bold.woff2',
+      boldItalic    : '/assets/fonts/IBMPlexMono-BoldItalic.woff2',
+      italic        : '/assets/fonts/IBMPlexMono-Italic.woff2',
+      light         : '/assets/fonts/IBMPlexMono-Light.woff2',
+      lightItalic   : '/assets/fonts/IBMPlexMono-LightItalic.woff2',
+      medium        : '/assets/fonts/IBMPlexMono-Medium.woff2',
+      mediumItalic  : '/assets/fonts/IBMPlexMono-MediumItalic.woff2',
+      regular       : '/assets/fonts/IBMPlexMono-Regular.woff2',
+      semiBold      : '/assets/fonts/IBMPlexMono-SemiBold.woff2',
+      semiBoldItalic: '/assets/fonts/IBMPlexMono-SemiBoldItalic.woff2'
+    },
+    sans: {
+      bold          : '/assets/fonts/IBMPlexSans-Bold.woff2',
+      boldItalic    : '/assets/fonts/IBMPlexSans-BoldItalic.woff2',
+      italic        : '/assets/fonts/IBMPlexSans-Italic.woff2',
+      light         : '/assets/fonts/IBMPlexSans-Light.woff2',
+      lightItalic   : '/assets/fonts/IBMPlexSans-LightItalic.woff2',
+      medium        : '/assets/fonts/IBMPlexSans-Medium.woff2',
+      mediumItalic  : '/assets/fonts/IBMPlexSans-MediumItalic.woff2',
+      regular       : '/assets/fonts/IBMPlexSans-Regular.woff2',
+      semiBold      : '/assets/fonts/IBMPlexSans-SemiBold.woff2',
+      semiBoldItalic: '/assets/fonts/IBMPlexSans-SemiBoldItalic.woff2'
+    }
+  }
+};
+
+// Helper functions to access tokens
+export const getColor = (color, shade) => tokens.colors[color]?.[shade];
+export const getFontSize = (category, size, variant = 'default') => {
+  if (category === 'display' && variant !== 'default') {
+    return tokens.fontSize[category][variant]?.[size];
+  }
+  return tokens.fontSize[category]?.[size];
+};
+export const getSpacing = (size) => tokens.spacing[size];
+export const getFont = (family) => tokens.fonts[family];
+
+export default tokens;

package/src/tokens/typography.css.js

@@ -1,4 +1,4 @@
-import { css } from "../../node_modules/lit-element/lit-element";
+import { css } from "lit";
 
 export default css`