Justin Edmund
1c38dc87e3
- Added menuNode state to capture the node position when menu opens - Updated all action functions to use menuNode instead of currentNode - This ensures drag handle actions (Turn into, Delete, etc.) always affect the block where the handle was clicked, not where the mouse currently hovers - Also formatted code with prettier 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
320 lines
7.5 KiB
SCSS
320 lines
7.5 KiB
SCSS
@import 'mixins.scss';
|
|
|
|
/* Atomic Unit
|
|
* -------------------------------------------------------------------------- */
|
|
|
|
$page-width: 784px;
|
|
|
|
$unit: 8px;
|
|
$margin: $unit * 5;
|
|
|
|
$unit-fourth: calc($unit / 4);
|
|
$unit-half: calc($unit / 2);
|
|
$unit-three-fourth: calc($unit / 4) * 3;
|
|
$unit-2x: $unit * 2;
|
|
$unit-3x: $unit * 3;
|
|
$unit-4x: $unit * 4;
|
|
$unit-5x: $unit * 5;
|
|
$unit-6x: $unit * 6;
|
|
$unit-7x: $unit * 7;
|
|
$unit-8x: $unit * 8;
|
|
$unit-9x: $unit * 9;
|
|
$unit-10x: $unit * 10;
|
|
$unit-11x: $unit * 11;
|
|
$unit-12x: $unit * 12;
|
|
$unit-13x: $unit * 13;
|
|
$unit-14x: $unit * 14;
|
|
$unit-15x: $unit * 15;
|
|
$unit-16x: $unit * 16;
|
|
$unit-17x: $unit * 17;
|
|
$unit-18x: $unit * 18;
|
|
$unit-19x: $unit * 19;
|
|
$unit-20x: $unit * 20;
|
|
$unit-22x: $unit * 22;
|
|
|
|
// Common pixel values
|
|
$unit-1px: 1px;
|
|
$unit-2px: 2px;
|
|
$unit-3px: 3px;
|
|
$unit-4px: 4px;
|
|
$unit-5px: 5px;
|
|
$unit-6px: 6px;
|
|
$unit-10px: 10px;
|
|
$unit-12px: 12px;
|
|
$unit-14px: 14px;
|
|
$unit-18px: 18px;
|
|
$unit-20px: 20px;
|
|
$unit-24px: 24px;
|
|
$unit-28px: 28px;
|
|
$unit-30px: 30px;
|
|
$unit-36px: 36px;
|
|
$unit-48px: 48px;
|
|
$unit-56px: 56px;
|
|
$unit-64px: 64px;
|
|
|
|
/* Corner Radius
|
|
* -------------------------------------------------------------------------- */
|
|
$corner-radius-xs: 4px; // $unit-half
|
|
$corner-radius-sm: 6px; // $unit-three-fourth
|
|
$corner-radius-md: 8px; // $unit
|
|
$corner-radius-lg: 10px; // $unit + 2px
|
|
$corner-radius-xl: 12px; // $unit * 1.5
|
|
$corner-radius-2xl: 16px; // $unit-2x
|
|
$corner-radius-3xl: 24px; // $unit-3x
|
|
$corner-radius-full: 999px; // Full rounded
|
|
|
|
/* Page properties
|
|
* -------------------------------------------------------------------------- */
|
|
$page-corner-radius: $corner-radius-md;
|
|
$image-corner-radius: $corner-radius-2xl;
|
|
$card-corner-radius: $corner-radius-3xl;
|
|
|
|
$page-top-margin: $unit-6x;
|
|
|
|
$page-vert-padding: $unit-6x;
|
|
$page-horz-padding: $unit-5x;
|
|
|
|
$page-fourth: calc(($page-width - $margin * 5) / 4);
|
|
$page-third: calc(($page-width - $margin * 5) / 3);
|
|
$page-half: calc(($page-fourth * 2) + $margin);
|
|
|
|
$card-height: $unit-14x;
|
|
$mention-padding: $unit-3x;
|
|
|
|
/* Typography
|
|
* -------------------------------------------------------------------------- */
|
|
|
|
$font-stack: 'Circular Std', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
|
|
|
$font-unit: 18px;
|
|
$font-unit-mobile: 16px;
|
|
|
|
$font-size-extra-small: 0.75rem; // 12
|
|
$font-size-small: 0.875rem; // 14
|
|
$font-size: 1rem; // 18
|
|
$font-size-med: 1.25rem; // 20
|
|
$font-size-large: 1.4rem; // 22
|
|
$font-size-xlarge: 1.65rem; // 26
|
|
|
|
$font-weight: 400;
|
|
$font-weight-med: 500;
|
|
$font-weight-bold: 600;
|
|
|
|
$line-height: 1.3;
|
|
|
|
$letter-spacing: -0.02em;
|
|
|
|
/* Color Scales
|
|
* -------------------------------------------------------------------------- */
|
|
|
|
// Gray scale - from darkest to lightest
|
|
$gray-00: #333333;
|
|
$gray-10: #4d4d4d;
|
|
$gray-20: #666666;
|
|
$gray-30: #808080;
|
|
$gray-40: #999999;
|
|
$gray-50: #b2b2b2;
|
|
$gray-60: #cccccc;
|
|
$gray-70: #dfdfdf;
|
|
$gray-80: #e8e8e8;
|
|
$gray-85: #ebebeb;
|
|
$gray-90: #f0f0f0;
|
|
$gray-95: #f5f5f5;
|
|
$gray-97: #fafafa;
|
|
$gray-100: #ffffff;
|
|
|
|
// Red scale - from darkest to lightest
|
|
$red-00: #3d0c0c;
|
|
$red-10: #7d1919;
|
|
$red-20: #a31919;
|
|
$red-30: #c31919;
|
|
$red-40: #d31919;
|
|
$red-50: #dd3333;
|
|
$red-60: #e33d3d;
|
|
$red-70: #e86a58;
|
|
$red-80: #ff6a54;
|
|
$red-90: #ff9d8f;
|
|
$red-95: #ffcdc5;
|
|
$red-100: #ffe5e0;
|
|
|
|
// Blue scale - from darkest to lightest
|
|
$blue-00: #0a2540;
|
|
$blue-10: #0f5d8f;
|
|
$blue-20: #126fa8;
|
|
$blue-30: #1279b5;
|
|
$blue-40: #1482c1;
|
|
$blue-50: #2e8bc0;
|
|
$blue-60: #4d9fd0;
|
|
$blue-70: #70b5de;
|
|
$blue-80: #9ccde9;
|
|
$blue-90: #c5eaff;
|
|
$blue-95: #dff4ff;
|
|
$blue-100: #f0f9ff;
|
|
|
|
// Yellow scale - from darkest to lightest
|
|
$yellow-00: #3d2600;
|
|
$yellow-10: #664400;
|
|
$yellow-20: #996600;
|
|
$yellow-30: #cc9900;
|
|
$yellow-40: #e6b800;
|
|
$yellow-50: #f5c500;
|
|
$yellow-60: #ffcc00;
|
|
$yellow-70: #ffdd4d;
|
|
$yellow-80: #ffeb99;
|
|
$yellow-90: #fff9e6;
|
|
$yellow-95: #fffcf0;
|
|
$yellow-100: #fffef9;
|
|
|
|
// Green scale - from darkest to lightest
|
|
$green-00: #0a3d28;
|
|
$green-10: #065f46;
|
|
$green-20: #047857;
|
|
$green-30: #059669;
|
|
$green-40: #10b981;
|
|
$green-50: #34d399;
|
|
$green-60: #6ee7b7;
|
|
$green-70: #a7f3d0;
|
|
$green-80: #d1fae5;
|
|
$green-90: #ecfdf5;
|
|
$green-95: #f0fdf9;
|
|
$green-100: #f9fffc;
|
|
|
|
// Orange scale - from darkest to lightest
|
|
$orange-00: #3d1a0c;
|
|
$orange-10: #7c2d12;
|
|
$orange-20: #c2410c;
|
|
$orange-30: #ea580c;
|
|
$orange-40: #f97316;
|
|
$orange-50: #fb923c;
|
|
$orange-60: #fdba74;
|
|
$orange-70: #fed7aa;
|
|
$orange-80: #ffedd5;
|
|
$orange-90: #fff7ed;
|
|
$orange-95: #fffbf7;
|
|
$orange-100: #fffdfa;
|
|
|
|
// Special colors
|
|
$black: #000000;
|
|
$white: #ffffff;
|
|
$dark-blue: #070610; // Brand specific dark color
|
|
|
|
/* Semantic Color Assignments
|
|
* -------------------------------------------------------------------------- */
|
|
|
|
// Backgrounds
|
|
$bg-color: $gray-80;
|
|
$page-color: $white;
|
|
$card-color: $gray-90;
|
|
$card-color-hover: $gray-85;
|
|
|
|
// Text colors
|
|
$text-color: $gray-10;
|
|
$text-color-subdued: $gray-20;
|
|
$text-color-light: $gray-50;
|
|
|
|
// Brand colors
|
|
$accent-color: $red-60;
|
|
$primary-color: $blue-40;
|
|
|
|
// Status colors
|
|
$success-color: $green-40;
|
|
$error-color: $red-60;
|
|
$warning-color: $yellow-50;
|
|
$info-color: $blue-50;
|
|
|
|
// Component specific
|
|
$image-border-color: rgba(0, 0, 0, 0.03);
|
|
|
|
/* Shadows and Overlays
|
|
* -------------------------------------------------------------------------- */
|
|
$card-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
|
$card-shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.12);
|
|
|
|
// Shadow utilities
|
|
$shadow-subtle: rgba(0, 0, 0, 0.08);
|
|
$shadow-light: rgba(0, 0, 0, 0.1);
|
|
$shadow-medium: rgba(0, 0, 0, 0.15);
|
|
$shadow-dark: rgba(0, 0, 0, 0.2);
|
|
$shadow-heavy: rgba(0, 0, 0, 0.25);
|
|
|
|
// Overlay utilities
|
|
$overlay-light: rgba(255, 255, 255, 0.9);
|
|
$overlay-white-subtle: rgba(255, 255, 255, 0.95);
|
|
$overlay-medium: rgba(0, 0, 0, 0.5);
|
|
$overlay-dark: rgba(0, 0, 0, 0.7);
|
|
|
|
// Border utilities
|
|
$border-light: rgba(0, 0, 0, 0.05);
|
|
$border-medium: rgba(0, 0, 0, 0.1);
|
|
$border-dark: rgba(0, 0, 0, 0.2);
|
|
|
|
/* Pill colors
|
|
* -------------------------------------------------------------------------- */
|
|
$work-bg: $red-95;
|
|
$work-color: $red-30;
|
|
$universe-bg: $orange-80;
|
|
$universe-color: $orange-20;
|
|
$labs-bg: $blue-90;
|
|
$labs-color: $blue-40;
|
|
|
|
$facebook-color: #3b5998;
|
|
$twitter-color: #55acee;
|
|
$instagram-color: #3f729b;
|
|
$pinterest-color: #bd061c;
|
|
$github-color: #6cc644;
|
|
$cmu-color: #fe6420;
|
|
$quip-color: #ae4830;
|
|
|
|
$twitter-button-color: #6cc0ff;
|
|
$twitter-text-color: #0f5f9b;
|
|
|
|
/* Images
|
|
* -------------------------------------------------------------------------- */
|
|
$corner-radius: $unit-2x;
|
|
$mobile-corner-radius: $unit-2x;
|
|
|
|
/* Inputs
|
|
* -------------------------------------------------------------------------- */
|
|
|
|
$input-background-color: $gray-90;
|
|
$input-background-color-hover: $gray-85;
|
|
$input-text-color: $gray-20;
|
|
$input-text-color-hover: $gray-10;
|
|
|
|
/* Avatar header
|
|
* -------------------------------------------------------------------------- */
|
|
$avatar-radius: 2rem;
|
|
$avatar-url: url('images/header.png');
|
|
|
|
/* Animation and Transitions
|
|
* -------------------------------------------------------------------------- */
|
|
$transition-instant: 0.1s;
|
|
$transition-fast: 0.15s;
|
|
$transition-normal: 0.2s;
|
|
$transition-medium: 0.3s;
|
|
$transition-slow: 0.5s;
|
|
|
|
$animation-fast: 0.5s;
|
|
$animation-normal: 1s;
|
|
$animation-slow: 2s;
|
|
$animation-very-slow: 3s;
|
|
|
|
/* Media queries breakpoints
|
|
* These needs to be revisited
|
|
* -------------------------------------------------------------------------- */
|
|
|
|
$screen-sm-min: 768px;
|
|
$screen-md-min: 992px;
|
|
$screen-lg-min: 1200px;
|
|
|
|
// Map old color variables to new scale
|
|
$orange-red: $red-70;
|
|
$salmon-pink: $red-95; // Desaturated salmon pink for hover states
|
|
$gray-5: $gray-97; // Was an old variable between 95 and 100
|
|
$red-error: #dc2626; // Error state color
|
|
|
|
// Shadow variables
|
|
$shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
|
|
$shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
$shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
|
|
$shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
|