essentory-login-test/components/Design.ts

import React from "react";

export const ColorScheme = {
  frostedfill: {
    black: {
      10: 'rgba(0,0,0,0.6)',
      20: 'rgba(0,0,0,0.2)',
    },
    white: {
      10: 'rgba(255,255,255,0.15)',
      20: 'rgba(255,255,255,0.5)',
    },
  },
  fill: {
    10: 'rgba(255,255,255,0.85)',
    20: 'rgba(255,255,255,0.5)',
    30: 'rgba(255,255,255,0.3)',
    40: 'rgba(255,255,255,0.15)',
    50: 'rgba(255,255,255,0.08)',
    60: 'rgba(255,255,255,0.05)',
    black: '#000000',
    accent: '#40FF4F',
    background: '#090909',
  },
  text: {
    10: 'rgba(255,255,255,0.95)',
    20: 'rgba(255,255,255,0.55)',
    30: 'rgba(255,255,255,0.30)',
    inverse: 'rgba(0,0,0,0.9)',
  },
  divider: {
    10: 'rgba(255,255,255,0.30)',
    20: 'rgba(255,255,255,0.08)',
  },
  success: {
    fill: '#00B23B',
    text: '#16D956',
    10: '#00802A',
    20: '#009933',
    30: '#00591E',
    40: '#003311',
  },
  warning: {
    fill: '#FF9F40',
    text: '#FF9F40',
    10: '#CC8033',
    20: '#E58F39',
    30: '#592D00',
    40: '#331A00',
  },
  critical: {
    fill: '#FF264B',
    text: '#CC0023',
    10: '#99001A',
    20: '#B2001E',
    30: '#59000F',
    40: '#330009',
  },
  passthrough: '#00000000',
}