Skip to content

Commit

Permalink
Adds initial work on theme structure.
Browse files Browse the repository at this point in the history
Adds initial work theme colors, spacing, radius and typography.
  • Loading branch information
eluciano11 committed Apr 22, 2019
1 parent e6c7394 commit ab5d2e6
Show file tree
Hide file tree
Showing 6 changed files with 147 additions and 0 deletions.
64 changes: 64 additions & 0 deletions theme/colors.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
import { ColorStates } from "./constants";

interface ColorPalette extends ColorStates {
default: string;
hover: string;
pressed: string;
}

interface BackgroundPalette extends ColorStates {
default: string;
hover: string;
disabled: string;
}

interface Palette {
brand: string;
primary: ColorPalette;
secondary: ColorPalette;
success: string;
warning: string;
danger: string;
stroke: string;
background: BackgroundPalette;
}

const BRAND_COLOR = "";
const PRIMARY_COLOR = "";
const PRIMARY_COLOR_HOVER = "";
const PRIMARY_COLOR_PRESSED = "";
const SECONDARY_COLOR = "";
const SECONDARY_COLOR_HOVER = "";
const SECONDARY_COLOR_PRESSED = "";
const BACKGROUND_COLOR = "";
const BACKGROUND_COLOR_HOVER = "";
const BACKGROUND_COLOR_DISABLED = "";
const SUCCESS_COLOR = "";
const WARNING_COLOR = "";
const DANGER_COLOR = "";
const STROKE_LINE_COLOR = "";

const palette: Palette = {
brand: BRAND_COLOR,
primary: {
default: PRIMARY_COLOR,
hover: PRIMARY_COLOR_HOVER,
pressed: PRIMARY_COLOR_PRESSED
},
secondary: {
default: SECONDARY_COLOR,
hover: SECONDARY_COLOR_HOVER,
pressed: SECONDARY_COLOR_PRESSED
},
success: SUCCESS_COLOR,
warning: WARNING_COLOR,
danger: DANGER_COLOR,
stroke: STROKE_LINE_COLOR,
background: {
default: BACKGROUND_COLOR,
hover: BACKGROUND_COLOR_HOVER,
disabled: BACKGROUND_COLOR_DISABLED
}
};

export { Palette, palette };
7 changes: 7 additions & 0 deletions theme/constants.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
interface ColorStates {
hover?: string;
pressed?: string;
disabled?: string;
}

export { ColorStates };
20 changes: 20 additions & 0 deletions theme/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import { Palette, palette } from "./colors";
import { Shadows, shadows } from "./shadows";
import { Units, units } from "./units";
import { Typography, typography } from "./typography";

interface Theme {
palette: Palette;
units: Units;
shadows: Shadows;
typography: Typography;
}

const theme: Theme = {
palette,
units,
shadows,
typography
};

export { Theme, theme };
14 changes: 14 additions & 0 deletions theme/shadows.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
interface Shadows {
default: string;
hover: string;
}

const SHADOW_DEFAULT = "0px 1px 3px rgba(0, 0, 0, 0.07)";
const SHADOW_HOVER = "0px 5px 10px rgba(0, 0, 0, 0.1)";

const shadows: Shadows = {
default: SHADOW_DEFAULT,
hover: SHADOW_HOVER
};

export { Shadows, shadows };
28 changes: 28 additions & 0 deletions theme/typography.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import { ColorStates } from "./constants";

interface TextPalette extends ColorStates {
primary: string;
secondary: string;
disabled: string;
pressed: string;
}

interface Typography {
palette: TextPalette;
}

const PRIMARY_TEXT_COLOR = "";
const SECODARY_TEXT_COLOR = "";
const PRESSED_TEXT_COLOR = "";
const DISABLED_TEXT_COLOR = "";

const typography: Typography = {
palette: {
primary: PRIMARY_TEXT_COLOR,
secondary: SECODARY_TEXT_COLOR,
disabled: DISABLED_TEXT_COLOR,
pressed: PRESSED_TEXT_COLOR
}
};

export { Typography, typography };
14 changes: 14 additions & 0 deletions theme/units.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
interface Units {
spacing: number;
radius: number;
}

const SPACING_UNIT = 5;
const BORDER_RADIUS_UNIT = 6;

const units: Units = {
spacing: SPACING_UNIT,
radius: BORDER_RADIUS_UNIT
};

export { Units, units };

0 comments on commit ab5d2e6

Please sign in to comment.