@superflycss/variables-colors/foundation/index.css

Color variables

/* =======================================
   NOTIFICATION COLORS

   ABBREVIATIONS
   tc:  text-color
   bdc: border-color
   bgc: background-color
   ======================================= */

@import "../browser/";
@import "../percentages/";
:root {
  --color-primary: #007bff;
  --color-secondary: #6c757d;
  --color-success: #5cb85c;
  --color-info: #17a2b8;
  --color-warning: #ffc107;
  --color-danger: #dc3545;
  --color-dark: #343a40;
  --color-light: #f8f9fa;
}

:root {
  --color-white: #fff;
  --color-text: var(--color-dark-gray);
  --color-text-muted: var(--color-light-gray);
  --color-link: var(--color-primary);
  --color-link-hover: color(
    var(--color-primary) blackness(var(--percentage-link-hover))
  );
  --color-abbr-border: var(--color-light-gray);
  --color-table-background: transparent;
  --color-table-background-accent: #f9f9f9;
  --color-table-background-hover: #f5f5f5;
  --color-table-background-active: var(--color-table-background-hover);
  --color-table-border-color: var(--color-light-gray);
}

:root {
  --color-primary-100: color(var(--color-primary) tint(var(--percentage-40)));
  --color-primary-300: color(var(--color-primary) tint(var(--percentage-20)));
  --color-primary-500: var(--color-primary);
  --color-primary-700: color(var(--color-primary) shade(var(--percentage-20)));
  --color-primary-900: color(var(--color-primary) shade(var(--percentage-40)));

  --color-secondary-100: color(
    var(--color-secondary) tint(var(--percentage-40))
  );
  --color-secondary-300: color(
    var(--color-secondary) tint(var(--percentage-20))
  );
  --color-secondary-500: var(--color-secondary);
  --color-secondary-700: color(
    var(--color-secondary) shade(var(--percentage-20))
  );
  --color-secondary-900: color(
    var(--color-secondary) shade(var(--percentage-40))
  );

  --color-success-100: color(var(--color-success) tint(var(--percentage-40)));
  --color-success-300: color(var(--color-success) tint(var(--percentage-20)));
  --color-success-500: var(--color-success);
  --color-success-700: color(var(--color-success) shade(var(--percentage-20)));
  --color-success-900: color(var(--color-success) shade(var(--percentage-40)));

  --color-info-100: color(var(--color-info) tint(var(--percentage-40)));
  --color-info-300: color(var(--color-info) tint(var(--percentage-20)));
  --color-info-500: var(--color-info);
  --color-info-700: color(var(--color-info) shade(var(--percentage-20)));
  --color-info-900: color(var(--color-info) shade(var(--percentage-40)));

  --color-warning-100: color(var(--color-warning) tint(var(--percentage-40)));
  --color-warning-300: color(var(--color-warning) tint(var(--percentage-20)));
  --color-warning-500: var(--color-warning);
  --color-warning-700: color(var(--color-warning) shade(var(--percentage-20)));
  --color-warning-900: color(var(--color-warning) shade(var(--percentage-40)));

  --color-danger-100: color(var(--color-danger) tint(var(--percentage-40)));
  --color-danger-300: color(var(--color-danger) tint(var(--percentage-20)));
  --color-danger-500: var(--color-danger);
  --color-danger-700: color(var(--color-danger) shade(var(--percentage-20)));
  --color-danger-900: color(var(--color-danger) shade(var(--percentage-40)));

  --color-dark-100: color(var(--color-dark) tint(var(--percentage-40)));
  --color-dark-300: color(var(--color-dark) tint(var(--percentage-20)));
  --color-dark-500: var(--color-dark);
  --color-dark-700: color(var(--color-dark) shade(var(--percentage-20)));
  --color-dark-900: color(var(--color-dark) shade(var(--percentage-40)));

  --color-light-100: color(var(--color-light) tint(var(--percentage-40)));
  --color-light-300: color(var(--color-light) tint(var(--percentage-20)));
  --color-light-500: var(--color-light);
  --color-light-700: color(var(--color-light) shade(var(--percentage-20)));
  --color-light-900: color(var(--color-light) shade(var(--percentage-40)));

  --color-link-100: color(var(--color-link) tint(var(--percentage-40)));
  --color-link-300: color(var(--color-link) tint(var(--percentage-20)));
  --color-link-500: var(--color-link);
  --color-link-700: color(var(--color-link) shade(var(--percentage-20)));
  --color-link-900: color(var(--color-link) shade(var(--percentage-40)));
}



@each $weight in 100, 300, 500, 700, 900 {
  @each $brand in primary, secondary, success, info, warning, danger, dark,
    light, link
  {
    :root {
      --u-background-color-$(brand)-$(weight) {
        background-color: var(--color-$(brand)-$(weight));
      }
    }
    :root {
      --u-bgc-$(brand)-$(weight) {
        background-color: var(--color-$(brand)-$(weight));
      }
    }
  }
}

@each $weight in 100, 300, 500, 700, 900 {
  @each $brand in primary, secondary, success, info, warning, danger, dark,
    light, link
  {
    :root {
      --u-border-color-$(brand)-$(weight) {
        border-color: var(--color-$(brand)-$(weight));
      }
    }
    :root {
      --u-bdc-$(brand)-$(weight) {
        border-color: var(--color-$(brand)-$(weight));
      }
    }
  }
}

@each $weight in 100, 300, 500, 700, 900 {
  @each $brand in primary, secondary, success, info, warning, danger, dark,
    light, link
  {
    :root {
      --u-text-color-$(brand)-$(weight) {
        color: var(--color-$(brand)-$(weight));
      }
    }
    :root {
      --u-tc-$(brand)-$(weight) {
        color: var(--color-$(brand)-$(weight));
      }
    }
  }
}