oskrhq-design-system

KO | EN

gitlite — search

#ai #llm #machine-learning #rust #deep-learning #macos #java #cli #kubernetes #awesome-list #vue #security #mcp #open-source

oskrhq-design-system

(★ 65)

A mostly reasonable although opinionated approach to building responsive Digital Interfaces sharing the same anatomy.

oskrhq-design-system 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# **OSKRHQ.DS**

This is a Design System created for both Designers and Developers. The system makes use of a CSS architecture based on a shared anatomy (Color, Typography, Space, Depth, and Motion), and a variety of React Presentational Components built from this shared anatomy. The system also has a UI Kit with available Sketch Symbols matching these React Components so Designers and Developers are always in sync. 🤙🏽

# **Installation**

```sh
npm i --save oskrhq-design-system
```

# **Usage**

1. Include the CSS Architecture in your SCSS files:

```scss
@import "node_modules/oskrhq-design-system/styles/styles.scss";
```

2. Include any of the provided components in your project:

```javascript
import { DSAvatar, DSButton, DSRadio } from "oskrhq-design-system";
```

3. Tell React to render the element in the DOM:

```javascript
ReactDOM.render(
  <DSButton type="primary" onClick={() => alert("Button clicked!")}>
    Press Me
  </DSButton>,
  document.querySelector("#app")
);
```

## Theming

It is very easy to theme the Design System to your Brand Guidelines. Just override the values on the `./lib/styles/1-themes/theme-default.scss`, or create your own following the same schema.

![Alt Text](https://raw.githubusercontent.com/ogonzal87/oskrhq-design-system/master/theming.gif)

## Color

OSKRHQ.DS groups color into 3 types; Brand, Neutral, and Feedback Colors.

- Brand Colors: These establish the personality of the brand. They should be used for accent elements such as primary buttons, CTA's and links.
- Neutral Colors: These are used for things like text, borders, shadows, background colors, etc.
- Feedback Colors: These are used to communicate status to the user and provide them with feedback.

A color palette is all of these colors put together. OSKRHQ.DS offers a default palette that contains all of these types of colors.

### Color System

Color follows a predictable scale driven by type and a range. Each heu or color has a Base `(400)` and from this base, I extract shades and tints of that heu. Each variation of this color is given a three-digit rage number. This provides a predictable color scale of "allowed" colors in the system; the higher a number is, the darker the color.

### Usage

OSKRHQ.DS makes use of Sass Functions to extract colors from each type in a consistent way.

#### `ds-color($type, $range)`

Applies a color from our palette to a CSS property. `$type` refers to the type of color you would like to use (`brand`, `neutral`, `feedback`). `$range` refers to the scale or how dark you would like to color to be. If `$range` is not specified, the color will default to the base color for that type.

```sass
.div-container {
    background-color: ds-color(primary, 700); // returns a hex value for that type of color and its range
}
```

#### `ds-color-contrast($background-color, $dark-color: ds-color(neutral, 700), $light-color: ds-color(neutral, 000))`

Applies a color from the palette to a CSS property based on a given background color in accordance with accessibility standards. `$background-color` refers to the background color in which the foreground color is going to sit. `$dark-color` (Optional) refers to the dark color you wish to display if there is enough contrast. `$light-color` (Optional) refers to the light color you wish to display if there is enough contrast. If neither `$dark-color` or $light-color`are specified, the colors will default to`ds-color(neutral, 700)`and`ds-color(neutral, 000)` respectively.

```sass
$button-background-color: ds-color(primary, 400);
$button-text-color-dark: ds-color(primary, 600);
$button-text-color-light: ds-color(primary, 200);

.button {
    background-color: $button-background-color;
    color: ds-color-contrast($button-background-color, $button-text-color-dark, $button-text-color-light); // returns a hex value with enough contrast for its background
}
```

#### Supporting Material

- [Color in Design Ssytems](https://medium.com/eightshapes-llc/color-in-design-systems-a1c80f65fa3)
- [The Color System](https://material.io/design/color/the-color-system.html#color-usage-palettes)

# Typography

OSKRHQ.DS uses Lato as it Font Family with specific typographic styles that define a hierarchy for both mobile and web.

- H1
- H2
- H3
- H4
- H5
- H6
- Subtitle1
- Subtitle2
- Body2
- Body1
- Caption
- Button
- Overline
- Link
- List

## Type System

Font size, font weight, and line-height have their own predictive scales.

### Font Size

I use three digits to convey in size. The higher the range number, the higher the font-size.

```scss
$ds-theme-base-font-size: 16px;

$ds-font-size-data: (
  H1: $ds-theme-base-font-size * 6,
  H2: $ds-theme-base-font-size * 3.75,
  H3: $ds-theme-base-font-size * 3,
  H4: $ds-theme-base-font-size * 2.125,
  H5: $ds-theme-base-font-size * 1.5,
  H6: $ds-theme-base-font-size * 1.25,
  subtitle2: $ds-theme-base-font-size * 0.875,
  subtitle1: $ds-theme-base-font-size,
  body2: $ds-theme-base-font-size * 0.875,
  body1: $ds-theme-base-font-size,
  caption: $ds-theme-base-font-size * 0.857,
  button: $ds-theme-base-font-size * 0.857,
  overline: $ds-theme-base-font-size,
  link: $ds-theme-base-font-size,
  list: $ds-theme-base-font-size
);
```

### Font Weight

For font-weight I use words.

```sass
$ds-font-weight-data: (
  bold: 900,
  semibold: 600,
  normal: 400,
  light: 300
);
```

### Line Height

I use three digits to convey in line-height. The higher the range number, the higher the line-height.

```sass
$ds-line-height-data: (
  H1: normal,
  H2: normal,
  H3: normal,
  H4: normal,
  H5: normal,
  H6: normal,
  subtitle2: 1.6,
  subtitle1: 1.6,
  body2: 1.5,
  body1: 1.5,
  caption: 1.5,
  button: 1.5,
  overline: 1.5,
  link: 1.5,
  list: 1.5
);
```

## Usage

I make use of Sass functions and mixins to use in our mark up.

### Functions

#### `ds-font-size($range)`

Applies a font size from the allowed sizes in the system to a CSS property. `$range` refers to the scale of how big you would like the font-size to be. The higher the number, the bigger the font-size.

```sass
.div-container {
    font-size: ds-font-size(500); // returns a pixel value for that range
}
```

#### `ds-font-weight($weight)`

Applies a font weight from the allowed weights in the system to a CSS property. `$weight` refers to either bold, semibold, base, light, etc.

```sass
.div-container {
    font-size: ds-font-weight(bold); // returns a weight value for that range (300 - 900)
}
```

#### `ds-line-height($range)`

Applies a line height from the allowed line heights in the system to a CSS property. `$range` refers to how high you would like the line-height to be. The higher the number, the higher the line-height.

```sass
.div-container {
    font-size: ds-font-weight(bold); // returns a weight value for that range (300 - 900)
}
```

### Mixins

#### `ds-H1-text-style($weight)`