数据加密>> aha-css>> 返回
项目作者： gotitinc

项目描述 ：
Aha Design System - CSS - Style tools for component-based UI development
高级语言： SCSS
项目地址: git://github.com/gotitinc/aha-css.git
创建时间： 2020-12-04T11:40:03Z
项目社区：https://github.com/gotitinc/aha-css
开源协议：Apache License 2.0
下载




Aha logo

Aha Design System - CSS


Style tools for component-based UI development.


Explore Aha docs »




Report bug
·
Request feature

Status

CI
@ahaui/css"">
@ahaui/css?label=CSS" alt="npm bundle size">
@ahaui/css"">npm version
GitHub issues

Quick start

Option 1: Via HTML tag

  1. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ahaui/css/dist/index.min.css" />

Option 2: Via node module

  1. # With npm
  2. npm install @ahaui/css
  4. # Or with yarn
  5. yarn add @ahaui/css
  1. /* In JS file */
  2. import '@ahaui/css/index.min.css';
  1. /* Or in CSS file */
  2. @import "@ahaui/css/index.min.css";

Customization

After importing the Aha CSS file, you can override following CSS variables to make your custom theme:

  1. @import "@ahaui/css/index.min.css";
  3. :root {
  4.   --colorPrimary: #ff43ab;
  5. }

Full customizable variables:

  2. :root {
  3.   --colorPrimaryLighter: #e7ecfc;
  4.   --colorPrimaryLight: #d7defa;
  5.   --colorPrimary: #375de7;
  6.   --colorFocusPrimary: #375de733;
  7.   --colorPrimaryDark: #2c4ab8;
  8.   --colorPrimaryDarker: #21388b;
  9.   --colorAccentLighter: #fff1e8;
  10.   --colorAccentLight: #fbdfcc;
  11.   --colorAccent: #ed6200;
  12.   --colorFocusAccent: #ed620033;
  13.   --colorAccentDark: #d55800;
  14.   --colorAccentDarker: #a64500;
  15.   --colorNegativeLighter: #ffd2d8;
  16.   --colorNegativeLight: #f6bcc3;
  17.   --colorNegative: #d0021b;
  18.   --colorFocusNegative: #d0021b33;
  19.   --colorNegativeDark: #b50016;
  20.   --colorNegativeDarker: #960012;
  21.   --colorWarningLighter: #fdf4d0;
  22.   --colorWarningLight: #fff0b3;
  23.   --colorWarning100: #ffe380;
  24.   --colorWarning: #ffc400;
  25.   --colorFocusWarning: #ffc40033;
  26.   --colorWarning300: #ffab00;
  27.   --colorWarningDark: #ff991f;
  28.   --colorPositiveLighter: #d7f9e7;
  29.   --colorPositiveLight: #aceccb;
  30.   --colorPositive: #22a861;
  31.   --colorFocusPositive: #22a86133;
  32.   --colorPositiveDark: #019044;
  33.   --colorPositiveDarker: #017a3a;
  34.   --colorInformationLighter: #e7ecfc;
  35.   --colorInformationLight: #d7defa;
  36.   --colorInformation: #375de7;
  37.   --colorFocusInformation: #375de733;
  38.   --colorInformationDark: #2c4ab8;
  39.   --colorInformationDarker: #21388b;
  40.   --fontFamily: Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  41.   --fontRegular: 400;
  42.   --fontMedium: 500;
  43.   --fontBold: 700;
  44.   --radiusSmall: 2px;
  45.   --radiusMedium: 4px;
  46.   --radiusLarge: 8px;
  47.   --radiusExtraLarge: 16px;
  48. }

NOTE: Overriding utility CSS classes is possible, but not recommended.

What’s included

Within the download you’ll find the following directories and files, logically grouping common assets and providing both compiled and minified variations. You’ll see something like this:

  1. @ahaui/css/
  2. └── dist/
  3.     ├── index.css
  4.     ├── index.css.map
  5.     ├── index.min.css
  6.     ├── utilities.css
  7.     ├── utilities.css.map
  8.     └── utilities.min.css

Browser support

  • Google Chrome (latest)
  • Microsoft Edge (latest)
  • Opera (latest)
  • Firefox 4+
  • Safari 7+

Code and documentation copyright 2020 the Got It, Inc. Code released under the Apache-2.0 License.