@expo/styleguide-native
Version:
Foundational styles for Expo interfaces.
181 lines (180 loc) • 6.44 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.darkTheme = exports.lightTheme = void 0;
const palette_1 = require("./palette");
exports.lightTheme = {
background: {
default: palette_1.palette.light.white,
canvas: palette_1.palette.light.gray['000'],
screen: palette_1.palette.light.gray[100],
secondary: palette_1.palette.light.gray[100],
tertiary: palette_1.palette.light.gray[200],
quaternary: palette_1.palette.light.gray[300],
error: palette_1.palette.light.red[100],
warning: palette_1.palette.light.yellow[100],
success: palette_1.palette.light.green[100],
overlay: palette_1.palette.light.white,
},
border: {
default: palette_1.palette.light.gray[300],
error: palette_1.palette.light.red[300],
success: palette_1.palette.light.green[300],
warning: palette_1.palette.light.yellow[300],
},
button: {
primary: {
background: palette_1.palette.light.primary[500],
foreground: palette_1.palette.light.white,
},
secondary: {
background: palette_1.palette.light.gray[200],
foreground: palette_1.palette.light.black,
},
tertiary: {
background: palette_1.palette.light.black,
foreground: palette_1.palette.light.white,
},
transparent: {
background: 'transparent',
foreground: palette_1.palette.light.black,
},
ghost: {
background: 'transparent',
foreground: palette_1.palette.light.gray[800],
border: palette_1.palette.light.gray[400],
},
},
icon: {
default: palette_1.palette.light.gray[700],
secondary: palette_1.palette.light.gray[500],
},
link: {
default: palette_1.palette.light.primary[500],
},
status: {
default: palette_1.palette.light.gray[500],
error: palette_1.palette.light.red[500],
warning: palette_1.palette.light.yellow[500],
success: palette_1.palette.light.green[500],
info: palette_1.palette.light.blue[500],
},
text: {
default: palette_1.palette.light.black,
secondary: palette_1.palette.light.gray[700],
error: palette_1.palette.light.red[600],
warning: palette_1.palette.light.yellow[900],
success: palette_1.palette.light.green[600],
},
code: {
keyword: palette_1.palette.light.blue[500],
builtin: palette_1.palette.light.green[600],
property: palette_1.palette.light.red[500],
comment: palette_1.palette.light.gray[600],
punctuation: palette_1.palette.light.gray[700],
operator: palette_1.palette.light.yellow[800],
regex: palette_1.palette.light.orange[600],
string: palette_1.palette.light.yellow[700],
before: palette_1.palette.light.gray[400],
},
highlight: {
accent: palette_1.palette.light.primary[300],
emphasis: palette_1.palette.light.yellow[300],
},
project: {
blue: '#6299d9',
green: '#54a767',
yellow: '#e5c145',
orange: '#d9864c',
red: '#d95757',
pink: '#d977b2',
purple: '#8a66cc',
},
};
exports.darkTheme = {
background: {
default: palette_1.palette.dark.gray['000'],
canvas: palette_1.palette.dark.gray[100],
screen: palette_1.palette.dark.gray['000'],
secondary: palette_1.palette.dark.gray[200],
tertiary: palette_1.palette.dark.gray[300],
quaternary: palette_1.palette.dark.gray[400],
error: palette_1.palette.dark.red['000'],
warning: palette_1.palette.dark.yellow['000'],
success: palette_1.palette.dark.green['000'],
overlay: palette_1.palette.dark.gray[100],
},
border: {
default: palette_1.palette.dark.gray[400],
error: palette_1.palette.dark.red[200],
success: palette_1.palette.dark.green[200],
warning: palette_1.palette.dark.yellow[200],
},
button: {
primary: {
background: palette_1.palette.dark.primary[500],
foreground: palette_1.palette.dark.white,
},
secondary: {
background: palette_1.palette.dark.gray[300],
foreground: palette_1.palette.dark.white,
},
tertiary: {
background: palette_1.palette.dark.gray[900],
foreground: palette_1.palette.dark.black,
},
transparent: {
background: 'transparent',
foreground: palette_1.palette.dark.gray[800],
},
ghost: {
background: 'transparent',
foreground: palette_1.palette.dark.gray[800],
border: palette_1.palette.dark.gray[400],
},
},
icon: {
default: palette_1.palette.dark.gray[800],
secondary: palette_1.palette.dark.gray[600],
},
link: {
default: palette_1.palette.dark.primary[700],
},
status: {
default: palette_1.palette.dark.gray[400],
error: palette_1.palette.dark.red[500],
warning: palette_1.palette.dark.yellow[500],
success: palette_1.palette.dark.green[500],
info: palette_1.palette.dark.blue[500],
},
text: {
default: palette_1.palette.dark.gray[800],
secondary: palette_1.palette.dark.gray[600],
error: palette_1.palette.dark.red[600],
warning: palette_1.palette.dark.yellow[900],
success: palette_1.palette.dark.green[600],
},
code: {
keyword: palette_1.palette.dark.blue[600],
builtin: palette_1.palette.dark.green[600],
property: palette_1.palette.dark.red[600],
comment: palette_1.palette.dark.gray[600],
punctuation: palette_1.palette.dark.gray[700],
operator: palette_1.palette.dark.yellow[800],
regex: palette_1.palette.dark.orange[600],
string: palette_1.palette.dark.yellow[700],
before: palette_1.palette.dark.gray[400],
},
highlight: {
accent: palette_1.palette.dark.primary[700],
emphasis: palette_1.palette.dark.yellow[300],
},
project: {
blue: '#395a80',
green: '#32633d',
yellow: '#8a6319',
orange: '#8c5731',
red: '#8c3838',
pink: '#8a4c71',
purple: '#4e3973',
},
};