-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Adds initial work on theme structure.
Adds initial work theme colors, spacing, radius and typography.
- Loading branch information
1 parent
e6c7394
commit ab5d2e6
Showing
6 changed files
with
147 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
interface ColorStates { | ||
hover?: string; | ||
pressed?: string; | ||
disabled?: string; | ||
} | ||
|
||
export { ColorStates }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 }; |