0% found this document useful (0 votes)
67 views5 pages

Pink Mode

The document defines a set of CSS variables for colors, filters, animations and durations. It includes variables for primary, secondary, tertiary colors as well as variables for states like hover, active, disabled. Variables are also defined for progress indicators, buttons, overlays, shadows and more. The CSS variables are intended to be used to define styles and visual properties in a consistent way across applications and components.
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
67 views5 pages

Pink Mode

The document defines a set of CSS variables for colors, filters, animations and durations. It includes variables for primary, secondary, tertiary colors as well as variables for states like hover, active, disabled. Variables are also defined for progress indicators, buttons, overlays, shadows and more. The CSS variables are intended to be used to define styles and visual properties in a consistent way across applications and components.
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 5

--fds-black: white;

--fds-black-alpha-05: rgba(0, 0, 0, 0.05);


--fds-black-alpha-10: rgba(0, 0, 0, 0.1);
--fds-black-alpha-15: rgba(0, 0, 0, 0.15);
--fds-black-alpha-20: rgba(0, 0, 0, 0.2);
--fds-black-alpha-30: rgba(0, 0, 0, 0.3);
--fds-black-alpha-40: rgba(0, 0, 0, 0.4);
--fds-black-alpha-50: rgba(0, 0, 0, 0.5);
--fds-black-alpha-60: rgba(0, 0, 0, 0.6);
--fds-black-alpha-80: rgba(0, 0, 0, 0.8);
--fds-blue-05: black;
--fds-blue-30: black;
--fds-blue-40: black;
--fds-blue-60: black;
--fds-blue-70: black;
--fds-blue-80: black;
--fds-button-text: black;
--fds-comment-background: black;
--fds-dark-mode-gray-35: black;
--fds-dark-mode-gray-50: black;
--fds-dark-mode-gray-70: black;
--fds-dark-mode-gray-80: black;
--fds-dark-mode-gray-90: black;
--fds-dark-mode-gray-100: black;
--fds-dark-ui-wash: black;
--fds-divider-on-wash: black;
--fds-divider-on-white: black;
--fds-gray-00: black;
--fds-gray-05: black;
--fds-gray-10: black;
--fds-gray-20: black;
--fds-gray-25: black;
--fds-gray-30: black;
--fds-gray-45: black;
--fds-gray-70: black;
--fds-gray-80: black;
--fds-gray-90: black;
--fds-gray-100: black;
--fds-green-55: black;
--fds-highlight: black;
--fds-highlight-cell-background: black;
--fds-negative: black;
--fds-placeholder-text: black;
--fds-positive: black;
--fds-primary-icon: white;
--fds-primary-text: white;
--fds-red-55: black;
--fds-secondary-button-pressed: black;
--fds-secondary-icon: black;
--fds-secondary-text: #000000;
--fds-soft: cubic-bezier(.08,.52,.52,1);
--fds-spectrum-aluminum-tint-70: black;
--fds-spectrum-blue-gray-dark-1: black;
--fds-spectrum-blue-gray-tint-70: black;
--fds-spectrum-cherry: black;
--fds-spectrum-cherry-tint-70: black;
--fds-spectrum-grape-tint-70: black;
--fds-spectrum-grape-tint-90: black;
--fds-spectrum-lemon-dark-1: black;
--fds-spectrum-lemon-tint-70: black;
--fds-spectrum-lime: black;
--fds-spectrum-lime-tint-70: black;
--fds-spectrum-orange-tint-70: black;
--fds-spectrum-orange-tint-90: black;
--fds-spectrum-seafoam-tint-70: black;
--fds-spectrum-slate-dark-2: black;
--fds-spectrum-slate-tint-50: black;
--fds-spectrum-slate-tint-70: black;
--fds-spectrum-teal: black;
--fds-spectrum-teal-dark-1: black;
--fds-spectrum-teal-dark-2: black;
--fds-spectrum-teal-tint-70: black;
--fds-spectrum-teal-tint-90: black;
--fds-spectrum-tomato: black;
--fds-spectrum-tomato-tint-30: black;
--fds-spectrum-tomato-tint-90: black;
--fds-strong: cubic-bezier(.12,.8,.32,1);
--fds-tertiary-icon: black;
--fds-white: black;
--fds-white-alpha-05: rgba(255, 255, 255, 0.05);
--fds-white-alpha-10: rgba(255, 255, 255, 0.1);
--fds-white-alpha-20: rgba(255, 255, 255, 0.2);
--fds-white-alpha-30: rgba(255, 255, 255, 0.3);
--fds-white-alpha-40: rgba(255, 255, 255, 0.4);
--fds-white-alpha-50: rgba(255, 255, 255, 0.5);
--fds-white-alpha-60: rgba(255, 255, 255, 0.6);
--fds-white-alpha-80: rgba(255, 255, 255, 0.8);
--fds-yellow-20: black;
--accent: hsl(214, 100%, 59%);
--always-white: white;
--always-black: black;
--always-dark-gradient: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.6));
--always-dark-overlay: rgba(0, 0, 0, 0.4);
--always-light-overlay: rgba(255, 255, 255, 0.4);
--always-gray-40: #65676B;
--always-gray-75: #BCC0C4;
--always-gray-95: #F0F2F5;
--attachment-footer-background: rgba(255,255,255,0.1);
--base-blue: #1877F2;
--base-cherry: #F3425F;
--base-grape: #9360F7;
--base-lemon: #F7B928;
--base-lime: #45BD62;
--base-pink: #FF66BF;
--base-seafoam: #54C7EC;
--base-teal: #2ABBA7;
--base-tomato: #FB724B;
--blue-link: #4599FF;
--card-background: #fb9dc3;
--card-background-flat: #dd85a8;
--comment-background: #ea8eb3;
--comment-footer-background: #ffaacc;
--dataviz-primary-1: rgb(48,200,180);
--disabled-button-background: rgba(255, 255, 255, 0.2);
--disabled-icon: rgba(255, 255, 255, 0.3);
--disabled-text: rgba(255, 255, 255, 0.3);
--divider: #3E4042;
--event-date: #F3425F;
--filter-accent: invert(40%) sepia(52%) saturate(200%) saturate(200%)
saturate(200%) saturate(189%) hue-rotate(191deg) brightness(103%) contrast(102%);
--filter-always-white: invert(100%);
--filter-disabled-icon: invert(100%) opacity(30%);
--filter-placeholder-icon: invert(59%) sepia(11%) saturate(200%) saturate(135%)
hue-rotate(176deg) brightness(96%) contrast(94%);
--filter-primary-icon: invert(100%);
--filter-secondary-icon: invert(62%) sepia(98%) saturate(12%) hue-
rotate(175deg) brightness(90%) contrast(96%);
--filter-warning-icon: invert(77%) sepia(29%) saturate(200%) saturate(200%)
saturate(200%) saturate(200%) saturate(200%) saturate(128%) hue-rotate(359deg)
brightness(102%) contrast(107%);
--filter-blue-link-icon: invert(73%) sepia(29%) saturate(200%) saturate(200%)
saturate(200%) saturate(200%) saturate(200%) saturate(200%) saturate(103.25%) hue-
rotate(189deg) brightness(101%) contrast(101%);
--filter-positive: invert(37%) sepia(61%) saturate(200%) saturate(200%)
saturate(200%) saturate(200%) saturate(115%) hue-rotate(91deg) brightness(97%)
contrast(105%);
--filter-negative: invert(25%) sepia(33%) saturate(200%) saturate(200%)
saturate(200%) saturate(200%) saturate(200%) saturate(200%) saturate(110%) hue-
rotate(345deg) brightness(132%) contrast(96%);
--glimmer-spinner-icon: white;
--hero-banner-background: #E85D07;
--hosted-view-selected-state: rgba(45, 136, 255, 0.1);
--highlight-bg: rgba(24, 119, 242, .31);
--hover-overlay: rgba(255, 255, 255, 0.1);
--media-hover: rgba(68, 73, 80, 0.15);
--media-inner-border: rgba(255, 255, 255, 0.05);
--media-outer-border: #000000;
--media-pressed: rgba(68, 73, 80, 0.35);
--messenger-card-background: #ffaacc;
--messenger-reply-background: #ffaacc;
--overlay-alpha-80: rgba(11, 11, 11, 0.8);
--overlay-on-media: rgba(0, 0, 0, 0.6);
--nav-bar-background: #ffaacc;
--nav-bar-background-gradient: linear-gradient(to top, #242526,
rgba(36,37,38,.9), rgba(36,37,38,.7), rgba(36,37,38,.4), rgba(36,37,38,0));
--nav-bar-background-gradient-wash: linear-gradient(to top, #18191A,
rgba(24,25,26,.9), rgba(24,25,26,.7), rgba(24,25,26,.4), rgba(24,25,26,0));
--negative: hsl(350, 87%, 55%);
--negative-background: hsl(350, 87%, 55%, 20%);
--new-notification-background: #E7F3FF;
--non-media-pressed: rgba(68, 73, 80, 0.15);
--non-media-pressed-on-dark: rgba(255, 255, 255, 0.3);
--notification-badge: #F02849;
--placeholder-icon: #000000;
--placeholder-text: #000000;
--placeholder-text-on-media: rgba(255, 255, 255, 0.5);
--popover-background: #fac;
--positive: #31A24C;
--positive-background: #f084ce;
--press-overlay: rgba(255, 255, 255, 0.1);
--primary-button-background: #2D88FF;
--primary-button-background-experiment: #2374E1;
--primary-button-pressed: #77A7FF;
--primary-button-text: #FFFFFF;
--primary-deemphasized-button-background: rgba(45, 136, 255, 0.2);
--primary-deemphasized-button-pressed: rgba(24, 119, 242, 0.2);
--primary-deemphasized-button-pressed-overlay: rgba(25, 110, 255, 0.15);
--primary-deemphasized-button-text: #2D88FF;
--primary-icon: #E4E6EB;
--primary-text: #000000;
--primary-text-on-media: white;
--progress-ring-neutral-background: rgba(255, 255, 255, 0.2);
--progress-ring-neutral-foreground: #ffffff;
--progress-ring-on-media-background: rgba(255, 255, 255, 0.2);
--progress-ring-on-media-foreground: #FFFFFF;
--progress-ring-blue-background: rgba(45, 136, 255, 0.2);
--progress-ring-blue-foreground: hsl(214, 100%, 59%);
--progress-ring-disabled-background: rgba(122,125,130, 0.2);
--progress-ring-disabled-foreground: #7A7D82;
--scroll-thumb: rgba(255, 255, 255, 0.3);
--secondary-button-background: rgba(255,255,255,.1);
--secondary-button-background-floating: #ce7c9d;
--secondary-button-background-on-dark: rgba(255, 255, 255, 0.4);
--secondary-button-pressed: rgba(0, 0, 0, 0.05);
--secondary-button-text: #E4E6EB;
--secondary-icon: #000000;
--secondary-text: #000000;
--secondary-text-on-media: rgba(255, 255, 255, 0.9);
--section-header-text: #BCC0C4;
--shadow-1: rgba(0, 0, 0, 0.1);
--shadow-2: rgba(0, 0, 0, 0.2);
--shadow-5: rgba(0, 0, 0, 0.5);
--shadow-8: rgba(0, 0, 0, 0.8);
--shadow-inset: rgba(255, 255, 255, 0.05);
--surface-background: #fb9dc3;
--text-highlight: rgba(24, 119, 242, 0.45);
--toggle-active-background: rgb(45, 136, 255);
--toggle-active-icon: #FFFFFF;
--toggle-active-text: #FFFFFF;
--toggle-button-active-background: #E6F2FF;
--wash: #ea8eb3;
--web-wash: #fac;
--warning: hsl(40, 89%, 52%);
--fds-fast: 200ms;
--fds-slow: 400ms;
--header-height: 56px;
--fds-animation-enter-exit-in: cubic-bezier(0.14, 1, 0.34, 1);
--fds-animation-enter-exit-out: cubic-bezier(0.45, 0.1, 0.2, 1);
--fds-animation-swap-shuffle-in: cubic-bezier(0.14, 1, 0.34, 1);
--fds-animation-swap-shuffle-out: cubic-bezier(0.45, 0.1, 0.2, 1);
--fds-animation-move-in: cubic-bezier(0.17, 0.17, 0, 1);
--fds-animation-move-out: cubic-bezier(0.17, 0.17, 0, 1);
--fds-animation-expand-collapse-in: cubic-bezier(0.17, 0.17, 0, 1);
--fds-animation-expand-collapse-out: cubic-bezier(0.17, 0.17, 0, 1);
--fds-animation-passive-move-in: cubic-bezier(0.5, 0, 0.1, 1);
--fds-animation-passive-move-out: cubic-bezier(0.5, 0, 0.1, 1);
--fds-animation-quick-move-in: cubic-bezier(0.1, 0.9, 0.2, 1);
--fds-animation-quick-move-out: cubic-bezier(0.1, 0.9, 0.2, 1);
--fds-animation-fade-in: cubic-bezier(0, 0, 1, 1);
--fds-animation-fade-out: cubic-bezier(0, 0, 1, 1);
--fds-duration-extra-extra-short-in: 100ms;
--fds-duration-extra-extra-short-out: 100ms;
--fds-duration-extra-short-in: 200ms;
--fds-duration-extra-short-out: 150ms;
--fds-duration-short-in: 280ms;
--fds-duration-short-out: 200ms;
--fds-duration-medium-in: 400ms;
--fds-duration-medium-out: 350ms;
--fds-duration-long-in: 500ms;
--fds-duration-long-out: 350ms;
--fds-duration-extra-long-in: 1000ms;
--fds-duration-extra-long-out: 1000ms;
--fds-duration-none: 0ms;
--font-family-apple: system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-
Regular', sans-serif;
--font-family-default: Helvetica, Arial, sans-serif;
--font-family-segoe: Segoe UI Historic, Segoe UI, Helvetica, Arial, sans-serif;
--dataviz-primary-2: rgb(134,218,255);
--dataviz-primary-3: rgb(95,170,255);
--dataviz-secondary-1: rgb(129,77,231);
--dataviz-secondary-2: rgb(168,124,255);
--dataviz-secondary-3: rgb(219,26,139);
--dataviz-supplementary-1: rgb(255,122,105);
--dataviz-supplementary-2: rgb(241,168,23);
--dataviz-supplementary-3: rgb(49,162,76);
--dataviz-supplementary-4: rgb(228,230,235);

You might also like