/* custom properties https://www.w3.org/TR/css-variables/ */ :root { /** * Ameba Color Palette from Spindle (Design System) */ /** * Swatch Colors */ /* Brand Colors */ --ameba-green: #2d8c3c; --ameba-black: #000; --ameba-yellow-green: #82be28; --ameba-neutral-gray: #f6f6f6; --ameba-white: #fff; --ameba-yellow: #f5e100; /* Base Colors */ --primary-green-100: #0f5c1f; --primary-green-90: #186b27; --primary-green-80: #237b31; --primary-green-70: #298737; --primary-green-60: #389e46; --primary-green-50: #41ad4f; --primary-green-40: #5eb969; --primary-green-30: #7bc583; --primary-green-20: #a1d5a7; --primary-green-10: #c6e5c9; --primary-green-5: #e7f5e9; --secondary-green-100: #366600; --secondary-green-90: #427504; --secondary-green-80: #477d00; --secondary-green-70: #5e9b15; --secondary-green-60: #73ae20; --secondary-green-50: #82be28; --secondary-green-40: #95c84d; --secondary-green-30: #a9d16f; --secondary-green-20: #c2de99; --secondary-green-10: #daebc1; --secondary-green-5: #f0f7e6; --gray-100: #08121a; --gray-90-alpha: rgba(8, 18, 26, 0.95); --gray-80-alpha: rgba(8, 18, 26, 0.8); --gray-70-alpha: rgba(8, 18, 26, 0.74); --gray-60-alpha: rgba(8, 18, 26, 0.61); --gray-50-alpha: rgba(8, 18, 26, 0.47); --gray-40-alpha: rgba(8, 18, 26, 0.4); --gray-30-alpha: rgba(8, 18, 26, 0.3); --gray-20-alpha: rgba(8, 18, 26, 0.16); --gray-10-alpha: rgba(8, 18, 26, 0.08); --gray-5-alpha: rgba(8, 18, 26, 0.04); --gray-90: #141e25; --gray-80: #394148; --gray-70: #464d53; --gray-60: #686e73; --gray-50: #8b9093; --gray-40: #9ca0a3; --gray-30: #b5b8ba; --gray-20: #d8d9da; --gray-10: #ebeced; --gray-5: #f5f6f6; --white-100: #fff; --white-90-alpha: rgba(255, 255, 255, 0.9); --white-80-alpha: rgba(255, 255, 255, 0.8); --white-70-alpha: rgba(255, 255, 255, 0.7); --white-60-alpha: rgba(255, 255, 255, 0.6); --white-50-alpha: rgba(255, 255, 255, 0.5); --white-40-alpha: rgba(255, 255, 255, 0.43); --white-30-alpha: rgba(255, 255, 255, 0.3); --white-20-alpha: rgba(255, 255, 255, 0.16); --white-10-alpha: rgba(255, 255, 255, 0.1); --white-5-alpha: rgba(255, 255, 255, 0.05); --black-100: #000; --black-90-alpha: rgba(0, 0, 0, 0.9); --black-80-alpha: rgba(0, 0, 0, 0.8); --black-70-alpha: rgba(0, 0, 0, 0.7); --black-60-alpha: rgba(0, 0, 0, 0.6); --black-50-alpha: rgba(0, 0, 0, 0.5); --black-40-alpha: rgba(0, 0, 0, 0.4); --black-30-alpha: rgba(0, 0, 0, 0.3); --black-20-alpha: rgba(0, 0, 0, 0.2); --black-10-alpha: rgba(0, 0, 0, 0.1); --black-5-alpha: rgba(0, 0, 0, 0.05); --caution-red-100: #d91c0b; --caution-red-20-alpha: rgba(217, 28, 11, 0.2); --caution-red-5-alpha: rgba(217, 28, 11, 0.05); --caution-red-vivid-100: #ff6a59; --caution-red-vivid-20-alpha: rgba(255, 106, 89, 0.2); --caution-red-vivid-5-alpha: rgba(255, 106, 89, 0.05); /* Expressive Colors */ --expressive-blue: #4795c8; --expressive-green: #4ac3aa; --expressive-purple: #ca5ce6; --expressive-lavender: #755ce6; --expressive-orange: #e6815c; --expressive-yellow: #e6ac5c; --expressive-pink: #e6456a; /* Third Party Colors */ --facebook-blue: #1877f2; --facebook-white: #fff; --twitter-blue: #1da1f2; --twitter-white: #fff; --x-black: #000; --x-white: #fff; --instagram-pink: #f20076; --apple-black: #000; --apple-white: #fff; --youtube-red: #f00; --youtube-white: #fff; --amazon-yellow: #f90; --amazon-black: #000; --rakuten-red: #bf0000; --rakuten-white: #fff; --yahoo-red: #f03; --yahoo-white: #fff; /* System Colors */ --focus-blue-100: #0091ff; --focus-blue-30-alpha: rgba(0, 145, 255, 0.3); --highlight-yellow-100: #f5e100; --highlight-yellow-30-alpha: rgba(245, 225, 0, 0.3); /** * Ameba Theme */ /* Background Colors */ --color-background: var(--gray-5); /* Surface Colors */ --color-surface-primary: var(--white-100); --color-surface-secondary: var(--gray-5-alpha); --color-surface-tertiary: var(--gray-10-alpha); --color-surface-quaternary: var(--gray-20-alpha); --color-surface-accent-primary: var(--primary-green-70); --color-surface-accent-primary-light: var(--primary-green-5); --color-surface-accent-secondary: var(--secondary-green-50); --color-surface-accent-secondary-light: var(--secondary-green-5); --color-surface-accent-neutral-high-emphasis: var(--gray-80); --color-surface-accent-neutral-medium-emphasis: var(--gray-60-alpha); --color-surface-caution: var(--caution-red-100); --color-surface-caution-light: var(--caution-red-5-alpha); --color-surface-positive: var(--primary-green-70); --color-surface-positive-light: var(--primary-green-5); /* Text Colors */ --color-text-high-emphasis: var(--gray-100); --color-text-medium-emphasis: var(--gray-70-alpha); --color-text-low-emphasis: var(--gray-60-alpha); --color-text-disabled: var(--gray-30-alpha); --color-text-high-emphasis-inverse: var(--white-100); --color-text-accent-primary: var(--primary-green-80); --color-text-accent-secondary: var(--secondary-green-80); --color-text-caution: var(--caution-red-100); --color-text-positive: var(--primary-green-80); /* Highlight Colors */ --color-highlight-error: var(--caution-red-20-alpha); --color-highlight-hover: var(--black-30-alpha); --color-highlight-yellow: var(--highlight-yellow-100); /* Object Colors */ --color-object-high-emphasis: var(--gray-100); --color-object-medium-emphasis: var(--gray-70-alpha); --color-object-low-emphasis: var(--gray-60-alpha); --color-object-disable: var(--gray-30-alpha); --color-object-accent-primary: var(--primary-green-70); --color-object-accent-secondary: var(--secondary-green-70); --color-object-caution: var(--caution-red-100); --color-object-positive: var(--primary-green-70); --color-object-high-emphasis-inverse: var(--white-100); --color-object-expressive-pink: var(--expressive-pink); /* Overlay Colors */ --color-overlay-dark: var(--black-80-alpha); --color-overlay-light: var(--black-20-alpha); --color-overlay-medium: var(--black-60-alpha); /* Focus Colors */ --color-focus-clarity: var(--focus-blue-100); --color-focus-ambiguous: var(--focus-blue-30-alpha); /* Border Colors */ --color-border-strong-emphasis: var(--gray-100); --color-border-high-emphasis: var(--gray-60-alpha); --color-border-medium-emphasis: var(--gray-30-alpha); --color-border-low-emphasis: var(--gray-10-alpha); --color-border-accent-primary: var(--primary-green-70); --color-border-high-emphasis-inverse: var(--white-100); --color-border-low-emphasis-inverse: var(--white-20-alpha); --color-border-caution: var(--caution-red-100); /* Third Party Colors */ --color-third-party-facebook-blue: var(--facebook-blue); --color-third-party-facebook-white: var(--facebook-white); --color-third-party-twitter-blue: var(--twitter-blue); --color-third-party-twitter-white: var(--twitter-white); --color-third-party-x-blue: var(--x-blue); /* deprecated. --x-blue- is undefined. specifying it won't change the color. */ --color-third-party-x-black: var(--x-black); --color-third-party-x-white: var(--x-white); --color-third-party-instagram-pink: var(--instagram-pink); --color-third-party-apple-black: var(--apple-black); --color-third-party-apple-white: var(--apple-white); --color-third-party-youtube-red: var(--youtube-red); --color-third-party-youtube-white: var(--youtube-white); --color-third-party-amazon-yellow: var(--amazon-yellow); --color-third-party-amazon-black: var(--amazon-black); --color-third-party-rakuten-red: var(--rakuten-red); --color-third-party-rakuten-white: var(--rakuten-white); --color-third-party-yahoo-red: var(--yahoo-red); --color-third-party-yahoo-white: var(--yahoo-white); /* System Colors */ --color-system-black: var(--black-100); /* Tap Highlight Colors */ --color-tap-highlight-base: var(--gray-5-alpha); }
Props

API Reference

PropTypeDefault
activeBoolFalse
positionPosition = TopLeft | TopCenter | TopRight | BottomLeft | BottomCenter | BottomRight-
durationInt300
variantVariant = Information | Confirmation | Error-