ds-smart-ui/src/assets/styles/designTokens.css

Smart UI is a React component library that helps you build accessible and responsive web applications.

/* 🎨 Colors */
:root {
  /* Primary Colors */
  --color-primary-50: #e5f1ff;
  --color-primary-100: #bbdefb;
  --color-primary-200: #90caf9;
  --color-primary-300: #64b5f6;
  --color-primary-400: #42a5f5;
  --color-primary-500: #1e88e5; /* Base Color */
  --color-primary-500-rgb: 30, 136, 229;
  --color-primary-600: #1e88e5;
  --color-primary-700: #1976d2;
  --color-primary-800: #1565c0;
  --color-primary-900: #0d47a1;

  /* Secondary Colors */
  --color-secondary-50: #f3e5f5;
  --color-secondary-100: #e1bee7;
  --color-secondary-200: #ce93d8;
  --color-secondary-300: #ba68c8;
  --color-secondary-400: #ab47bc;
  --color-secondary-500: #9c27b0; /* Base Color */
  --color-secondary-500-rgb: 156, 39, 176;
  --color-secondary-600: #8e24aa;
  --color-secondary-700: #7b1fa2;
  --color-secondary-800: #6a1b9a;
  --color-secondary-900: #4a148c;

  /* Success Colors */
  --color-success-50: #edf7ed;
  --color-success-100: #c8e6c9;
  --color-success-200: #a5d6a7;
  --color-success-300: #81c784;
  --color-success-400: #66bb6a;
  --color-success-500: #4caf50; /* Base Color */
  --color-success-500-rgb: 76, 175, 80;
  --color-success-600: #43a047;
  --color-success-700: #388e3c;
  --color-success-800: #2e7d32;
  --color-success-900: #1b5e20;

  /* Warning Colors */
  --color-warning-50: #fff3e0;
  --color-warning-100: #ffe0b2;
  --color-warning-200: #ffcc80;
  --color-warning-300: #ffb74d;
  --color-warning-400: #ffa726;
  --color-warning-500: #ff9800; /* Base Color */
  --color-warning-500-rgb: 251, 140, 0;
  --color-warning-600: #fb8c00;
  --color-warning-700: #f57c00;
  --color-warning-800: #ef6c00;
  --color-warning-900: #e65100;

  /* Danger Colors */
  --color-danger-50: #ffebee;
  --color-danger-100: #ffcdd2;
  --color-danger-200: #ef9a9a;
  --color-danger-300: #e57373;
  --color-danger-400: #ef5350;
  --color-danger-500: #f44336; /* Base Color */
  --color-danger-500-rgb: 244, 67, 54;
  --color-danger-600: #e53935;
  --color-danger-700: #d32f2f;
  --color-danger-800: #c62828;
  --color-danger-900: #b71c1c;

  /* Info Colors */
  --color-info-50: #e5f1ff;
  --color-info-100: #bbdefb;
  --color-info-200: #90caf9;
  --color-info-300: #64b5f6;
  --color-info-400: #42a5f5;
  --color-info-500: #1e88e5; /* Base Color */
  --color-info-500-rgb: 30, 136, 229;
  --color-info-600: #1e88e5;
  --color-info-700: #1976d2;
  --color-info-800: #1565c0;
  --color-info-900: #0d47a1;

  /* Light Colors */
  --color-light-50: #f7f7f7;
  --color-light-100: #eeeeee;
  --color-light-200: #e0e0e0;
  --color-light-300: #d6d6d6;
  --color-light-400: #cccccc;
  --color-light-500: #bfbfbf; /* Base Color */
  --color-light-500-rgb: 191, 191, 191;
  --color-light-600: #b3b3b3;
  --color-light-700: #a6a6a6;
  --color-light-800: #999999;
  --color-light-900: #7d7b7b;

  /* Dark Colors */
  --color-dark-50: #f9f9f9;
  --color-dark-100: #f5f5f5;
  --color-dark-200: #e7e7e7;
  --color-dark-300: #b8b8b8;
  --color-dark-400: #a0a0a0;
  --color-dark-500: #898989; /* Base Color */
  --color-dark-500-rgb: 121, 121, 121;
  --color-dark-600: #717171;
  --color-dark-700: #595959;
  --color-dark-800: #424242;
  --color-dark-900: #131313;

  /* Special Colors */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-special-overlay: rgba(0, 0, 0, 0.2);
  --color-special-disabled: var(--color-dark-100);
  --color-special-placeholder: var(--color-dark-400);
  --color-special-divider: var(--color-dark-200);
  --color-special-highlight: var(--color-primary-100);

  /* 🎨 Color Gradients */
  --color-gradient-primary: linear-gradient(
    96.01deg,
    var(--color-primary-50) 0%,
    var(--color-white) 100%
  );
  --color-gradient-secondary: linear-gradient(
    96.01deg,
    var(--color-secondary-50) 0%,
    var(--color-white) 100%
  );
  --color-gradient-success: linear-gradient(
    96.01deg,
    var(--color-success-50) 0%,
    var(--color-white) 100%
  );
  --color-gradient-warning: linear-gradient(
    96.01deg,
    var(--color-warning-50) 0%,
    var(--color-white) 100%
  );
  --color-gradient-danger: linear-gradient(
    96.01deg,
    var(--color-danger-50) 0%,
    var(--color-white) 100%
  );
  --color-gradient-info: linear-gradient(
    96.01deg,
    var(--color-info-50) 0%,
    var(--color-white) 100%
  );
  --color-gradient-light: linear-gradient(
    96.01deg,
    var(--color-light-50) 0%,
    var(--color-white) 100%
  );
  --color-gradient-dark: linear-gradient(
    96.01deg,
    var(--color-dark-50) 0%,
    var(--color-white) 100%
  );

  /* 📏 Spacing */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-56: 56px;
  --spacing-64: 64px;

  /* 📏 Font Family */
  --font-family-sans: "Inter", sans-serif;

  /* 🔠 Typography */
  --font-size-xs: 8px;
  --font-size-sm: 10px;
  --font-size-md: 12px;
  --font-size-base: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 18px;
  --font-size-2xl: 27px;
  --font-size-3xl: 34px;
  --font-size-4xl: 43px;
  --font-size-5xl: 53px;

  /* 📝 Font Weight */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-weight-extrabold: 900;

  /* 📏 Line Height */
  --line-height-xs: 8px;
  --line-height-sm: 12px;
  --line-height-md: 16.8px;
  --line-height-base: 19.6px;
  --line-height-lg: 22.4px;
  --line-height-xl: 25.2px;
  --line-height-2xl: 37.8px;
  --line-height-3xl: 47.6px;
  --line-height-4xl: 60.2px;
  --line-height-5xl: 74.2px;

  /* 🔡 Letter Spacing */
  --letter-spacing-tight: 0%;
  --letter-spacing-normal: 2%;
  --letter-spacing-wide: 4%;

  /* 🔠 Text Transform */
  --text-transform-uppercase: uppercase;
  --text-transform-none: none;

  /* 📏 Text Decoration */
  --text-decoration-none: none;
  --text-decoration-underline: underline;
  --text-decoration-line-through: line-through;

  /* 📏 Font Style */
  --font-style-normal: normal;
  --font-style-italic: italic;

  /* 🟦 Border Radius */
  --border-radius-none: 0px;
  --border-radius-xs: 4px;
  --border-radius-sm: 8px;
  --border-radius-md: 10px;
  --border-radius-lg: 14px;
  --border-radius-xl: 16px;
  --border-radius-full: 9999px;

  /* Border Weight */
  --border-weight-thin: 1.5px;
  --border-weight-medium: 2px;
  --border-weight-thick: 4px;

  /* 🖼️ Shadows */
  --shadow-none: none;
  --shadow-xs: 0px 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0px 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-md: 0px 4px 8px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0px 8px 16px rgba(0, 0, 0, 0.2);
  --shadow-xl: 0px 12px 24px rgba(0, 0, 0, 0.25);

  /* 🖼️ Shadows Colors */
  --shadow-color-primary: 0 0 0 4px rgba(var(--color-primary-500-rgb), 0.2);
  --shadow-color-secondary: 0 0 0 4px rgba(var(--color-secondary-500-rgb), 0.2);
  --shadow-color-success: 0 0 0 4px rgba(var(--color-success-500-rgb), 0.2);
  --shadow-color-warning: 0 0 0 4px rgba(var(--color-warning-500-rgb), 0.2);
  --shadow-color-danger: 0 0 0 4px rgba(var(--color-danger-500-rgb), 0.2);
  --shadow-color-info: 0 0 0 4px rgba(var(--color-info-500-rgb), 0.2);
  --shadow-color-light: 0 0 0 4px rgba(var(--color-light-500-rgb), 0.2);
  --shadow-color-dark: 0 0 0 4px rgba(var(--color-dark-500-rgb), 0.2);

  /* 🖼️ Outlines */
  --outline-color-primary: var(--border-weight-thin) solid
    var(--color-primary-500);
  --outline-color-secondary: var(--border-weight-thin) solid
    var(--color-secondary-500);
  --outline-color-success: var(--border-weight-thin) solid
    var(--color-success-500);
  --outline-color-warning: var(--border-weight-thin) solid
    var(--color-warning-500);
  --outline-color-danger: var(--border-weight-thin) solid
    var(--color-danger-500);
  --outline-color-info: var(--border-weight-thin) solid var(--color-info-500);
  --outline-color-light: var(--border-weight-thin) solid var(--color-light-300);
  --outline-color-dark: var(--border-weight-thin) solid var(--color-dark-800);
  --outline-color-none: none;

  /* 📐 Borders */
  --border-width-thin: 1px;
  --border-width-medium: 2px;
  --border-width-thick: 4px;
}

/* Font Faces */
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter_Light.ttf");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter_Regular.ttf");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter_Medium.ttf");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter_Bold.ttf");
  font-weight: 700;
  font-style: normal;
}