@frontify/fondue
Version:
Design system of Frontify
2 lines (1 loc) • 13.5 kB
CSS
:root{--base-color: #ffffff;--base-color-alt: #fafafa;--body-family: Diatype,Space Grotesk Frontify;--body-family-stack: Diatype,Space Grotesk Frontify,Arial,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;--body-weight-name: Regular;--body-weight-number: 400;--body-weight-strong-name: Medium;--body-weight-strong-number: 500;--body-weight-x-strong-name: Bold;--body-weight-x-strong-number: 700;--body-size-x-small: .75rem;--body-size-x-small-line-height: 1rem;--body-size-small: .813rem;--body-size-small-line-height: 1rem;--body-size-medium: .875rem;--body-size-medium-line-height: 1.125rem;--body-size-large: 1rem;--body-size-large-line-height: 1.25rem;--box-neutral-color: #f1f1f1;--box-neutral-color-hover: #eaebeb;--box-neutral-color-pressed: #d5d6d6;--box-neutral-inverse-color: #2d3232;--box-neutral-inverse-color-hover: #1a1c1c;--box-neutral-inverse-color-pressed: #080808;--box-neutral-strong-color: #424747;--box-neutral-strong-color-hover: #2d3232;--box-neutral-strong-color-pressed: #1a1c1c;--box-neutral-strong-inverse-color: #ffffff;--box-neutral-strong-inverse-color-hover: #f1f1f1;--box-neutral-strong-inverse-color-pressed: #eaebeb;--box-neutral-mighty-color: #2d3232;--box-neutral-mighty-color-hover: #424747;--box-neutral-mighty-color-pressed: #080808;--box-neutral-mighty-inverse-color: #ffffff;--box-neutral-mighty-inverse-color-hover: #ffffff;--box-neutral-mighty-inverse-color-pressed: #eaebeb;--box-selected-color: #f0eafa;--box-selected-color-hover: #e4dafa;--box-selected-color-pressed: #b39dfd;--box-selected-inverse-color: #564996;--box-selected-inverse-color-hover: #564996;--box-selected-inverse-color-pressed: #080808;--box-selected-strong-color: #7c57ff;--box-selected-strong-color-hover: #7159d7;--box-selected-strong-color-pressed: #6449c4;--box-selected-strong-inverse-color: #ffffff;--box-selected-strong-inverse-color-hover: #ffffff;--box-selected-strong-inverse-color-pressed: #ffffff;--box-disabled-color: #f1f1f1;--box-disabled-color-inverse: #abadad;--box-disabled-strong-color: #d5d6d6;--box-disabled-strong-color-inverse: #ffffff;--box-positive-color: #e3f4f1;--box-positive-color-hover: #caefe8;--box-positive-color-pressed: #97e5d7;--box-positive-inverse-color: #1b6e60;--box-positive-inverse-color-hover: #1b6e60;--box-positive-inverse-color-pressed: #2e4f46;--box-positive-strong-color: #65dcc7;--box-positive-strong-color-hover: #32d2b6;--box-positive-strong-color-pressed: #00c8a5;--box-positive-strong-inverse-color: #2d3232;--box-positive-strong-inverse-color-hover: #2d3232;--box-positive-strong-inverse-color-pressed: #2d3232;--box-negative-color: #fce6e9;--box-negative-color-hover: #fdd2d9;--box-negative-color-pressed: #fdabb9;--box-negative-inverse-color: #992136;--box-negative-inverse-color-hover: #992136;--box-negative-inverse-color-pressed: #57282b;--box-negative-strong-color: #fe8ea2;--box-negative-strong-color-hover: #fe5e7a;--box-negative-strong-color-pressed: #ff375a;--box-negative-strong-inverse-color: #2d3232;--box-negative-strong-inverse-color-hover: #2d3232;--box-negative-strong-inverse-color-pressed: #2d3232;--box-warning-color: #fcf2e0;--box-warning-color-hover: #fdebc7;--box-warning-color-pressed: #fddd95;--box-warning-inverse-color: #664800;--box-warning-inverse-color-hover: #664800;--box-warning-inverse-color-pressed: #4c3600;--box-warning-strong-color: #fed064;--box-warning-strong-color-hover: #fec232;--box-warning-strong-color-pressed: #ffb400;--box-warning-strong-inverse-color: #2d3232;--box-warning-strong-inverse-color-hover: #2d3232;--box-warning-strong-inverse-color-pressed: #2d3232;--code-family: Menlo;--code-family-stack: Menlo,Courier,monospace;--code-weight-name: Regular;--code-weight-number: Regular;--code-weight-strong-name: Bold;--code-weight-strong-number: 700;--code-size-small: .813rem;--code-size-small-line-height: 1rem;--code-size-medium: .875rem;--code-size-medium-line-height: 1rem;--code-size-large: 1rem;--code-size-large-line-height: 1.25rem;--focus-ring-color: #4196fb;--heading-family: Diatype,Space Grotesk Frontify;--heading-family-stack: Diatype,Space Grotesk Frontify,Arial,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;--heading-weight-name: Medium;--heading-weight-number: 500;--heading-weight-strong-name: Bold;--heading-weight-strong-number: 700;--heading-size-medium: .875rem;--heading-size-medium-line-height: 1rem;--heading-size-large: 1rem;--heading-size-large-line-height: 1.25rem;--heading-size-x-large: 1.25rem;--heading-size-x-large-line-height: 1.5rem;--heading-size-xx-large: 1.5rem;--heading-size-xx-large-line-height: 1.75rem;--line-color: rgba(8, 8, 8, .1);--line-color-weak: rgba(8, 8, 8, .03);--line-color-strong: rgba(8, 8, 8, .15);--line-color-x-strong: rgba(8, 8, 8, .3);--line-color-xx-strong: #2d3232;--line-color-mighty: rgba(255, 255, 255, .15);--line-width: .063rem;--line-width-large: .125rem;--overlay-color: rgba(234, 235, 235, .5);--radius: .25rem;--radius-small: .125rem;--radius-large: .5rem;--radius-x-large: .75rem;--shadow-matrix: .1875rem 0rem .625rem 0rem rgba(8, 8, 8, .15);--shadow-offset-x: 0rem;--shadow-offset-y: .1875rem;--shadow-spread: 0rem;--shadow-blur: .625rem;--shadow-color: rgba(8, 8, 8, .15);--shadow-top-matrix: -.625rem 0rem .625rem -.3125rem rgba(8, 8, 8, .15);--shadow-top-offset-x: 0rem;--shadow-top-offset-y: -.625rem;--shadow-top-spread: -.3125rem;--shadow-bottom-matrix: .625rem 0rem .625rem -.3125rem rgba(8, 8, 8, .15);--shadow-bottom-offset-x: 0rem;--shadow-bottom-offset-y: .625rem;--shadow-bottom-spread: -.3125rem;--shadow-large-matrix: 1.5625rem 0rem 5rem 0rem rgba(8, 8, 8, .2);--shadow-large-offset-x: 0rem;--shadow-large-offset-y: 1.5625rem;--shadow-large-spread: 0rem;--shadow-large-blur: 5rem;--shadow-large-color: rgba(8, 8, 8, .2);--space-xxs: .25rem;--space-xs: .5rem;--space-s: .75rem;--space-m: 1rem;--space-l: 1.5rem;--space-xl: 2rem;--space-xxl: 2.5rem;--text-color: #2d3232;--text-color-hover: #1a1c1c;--text-color-pressed: #080808;--text-color-weak: #6c7070;--text-color-weak-hover: #424747;--text-color-weak-pressed: #2d3232;--text-color-x-weak: #818484;--text-color-disabled: #abadad;--text-color-negative: #d92f4c;--text-color-negative-hover: #992136;--text-color-negative-pressed: #57282b;--text-color-positive: #15816f;--text-color-positive-hover: #1b6e60;--text-color-positive-pressed: #2e4f46;--text-color-warning: #966a00;--text-color-warning-hover: #664800;--text-color-warning-pressed: #4c3600;--text-color-interactive: #7159d7;--text-color-interactive-hover: #564996;--text-color-interactive-pressed: #443185;--button-background-color: #f1f1f1;--button-background-color-hover: #eaebeb;--button-background-color-pressed: #d5d6d6;--button-text-color: #2d3232;--button-icon-color: #2d3232;--button-border-color: rgba(8, 8, 8, .03);--button-negative-background-color: #f1f1f1;--button-negative-background-color-hover: #eaebeb;--button-negative-background-color-pressed: #d5d6d6;--button-negative-text-color: #2d3232;--button-negative-icon-color: #d92f4c;--button-negative-border-color: rgba(8, 8, 8, .03);--button-positive-background-color: #f1f1f1;--button-positive-background-color-hover: #eaebeb;--button-positive-background-color-pressed: #d5d6d6;--button-positive-text-color: #2d3232;--button-positive-icon-color: #15816f;--button-positive-border-color: rgba(8, 8, 8, .03);--button-strong-background-color: #424747;--button-strong-background-color-hover: #2d3232;--button-strong-background-color-pressed: #1a1c1c;--button-strong-text-color: #ffffff;--button-strong-icon-color: #ffffff;--button-strong-border-color: rgba(8, 8, 8, .03);--button-strong-negative-background-color: #424747;--button-strong-negative-background-color-hover: #2d3232;--button-strong-negative-background-color-pressed: #1a1c1c;--button-strong-negative-text-color: #ffffff;--button-strong-negative-icon-color: #fe8ea2;--button-strong-negative-border-color: rgba(8, 8, 8, .03);--button-strong-positive-background-color: #424747;--button-strong-positive-background-color-hover: #2d3232;--button-strong-positive-background-color-pressed: #1a1c1c;--button-strong-positive-text-color: #ffffff;--button-strong-positive-icon-color: #32d2b6;--button-strong-positive-border-color: rgba(8, 8, 8, .03);--button-danger-background-color: #d92f4c;--button-danger-background-color-hover: #992136;--button-danger-background-color-pressed: #57282b;--button-danger-text-color: #ffffff;--button-danger-icon-color: #ffffff;--button-danger-border-color: rgba(8, 8, 8, .03)}.tw-dark{--base-color: #2d3232;--base-color-alt: #1a1c1c;--box-neutral-color: #424747;--box-neutral-color-hover: #6c7070;--box-neutral-color-pressed: #080808;--box-neutral-inverse-color: #ffffff;--box-neutral-inverse-color-hover: #eaebeb;--box-neutral-inverse-color-pressed: #d5d6d6;--box-neutral-strong-color: #ffffff;--box-neutral-strong-color-hover: #f1f1f1;--box-neutral-strong-color-pressed: #eaebeb;--box-neutral-strong-inverse-color: #2d3232;--box-neutral-strong-inverse-color-hover: #1a1c1c;--box-neutral-strong-inverse-color-pressed: #080808;--box-neutral-mighty-color: #ffffff;--box-neutral-mighty-color-hover: #f1f1f1;--box-neutral-mighty-color-pressed: #eaebeb;--box-neutral-mighty-inverse-color: #080808;--box-neutral-mighty-inverse-color-hover: #080808;--box-neutral-mighty-inverse-color-pressed: #080808;--box-selected-color: #443185;--box-selected-color-hover: #564996;--box-selected-color-pressed: #6449c4;--box-selected-inverse-color: #e4dafa;--box-selected-inverse-color-hover: #f0eafa;--box-selected-inverse-color-pressed: #ffffff;--box-disabled-color: #080808;--box-disabled-color-inverse: #a5a8a8;--box-disabled-strong-color: #424747;--box-disabled-strong-color-inverse: #080808;--box-positive-color: #2e4f46;--box-positive-color-hover: #1b6e60;--box-positive-color-pressed: #15816f;--box-positive-inverse-color: #caefe8;--box-positive-inverse-color-hover: #e3f4f1;--box-positive-inverse-color-pressed: #ffffff;--box-negative-color: #57282b;--box-negative-color-hover: #992136;--box-negative-color-pressed: #d92f4c;--box-negative-inverse-color: #fdd2d9;--box-negative-inverse-color-hover: #fce6e9;--box-negative-inverse-color-pressed: #ffffff;--box-warning-color: #4c3600;--box-warning-color-hover: #664800;--box-warning-color-pressed: #966a00;--box-warning-inverse-color: #fcf2e0;--box-warning-inverse-color-hover: #fdebc7;--box-warning-inverse-color-pressed: #fddd95;--line-color: rgba(255, 255, 255, .1);--line-color-weak: rgba(255, 255, 255, .05);--line-color-strong: rgba(255, 255, 255, .3);--line-color-x-strong: rgba(255, 255, 255, .5);--line-color-xx-strong: #ffffff;--line-color-mighty: rgba(8, 8, 8, .15);--overlay-color: rgba(8, 8, 8, .5);--shadow-color: rgba(8, 8, 8, .5);--shadow-large-color: rgba(8, 8, 8, .8);--text-color: #ffffff;--text-color-hover: #ffffff;--text-color-pressed: #ffffff;--text-color-weak: #eaebeb;--text-color-weak-hover: #ffffff;--text-color-weak-pressed: #ffffff;--text-color-x-weak: #abadad;--text-color-disabled: #a5a8a8;--text-color-negative: #fe8ea2;--text-color-negative-hover: #fdd2d9;--text-color-negative-pressed: #fce6e9;--text-color-positive: #65dcc7;--text-color-positive-hover: #caefe8;--text-color-positive-pressed: #e3f4f1;--text-color-warning: #fec232;--text-color-warning-hover: #fdebc7;--text-color-warning-pressed: #fcf2e0;--text-color-interactive: #cbbbfb;--text-color-interactive-hover: #e4dafa;--text-color-interactive-pressed: #f0eafa;--button-background-color: #424747;--button-background-color-hover: #1a1c1c;--button-background-color-pressed: #080808;--button-text-color: #ffffff;--button-icon-color: #ffffff;--button-border-color: rgba(255, 255, 255, .05);--button-negative-background-color: #424747;--button-negative-background-color-hover: #1a1c1c;--button-negative-background-color-pressed: #080808;--button-negative-text-color: #ffffff;--button-negative-icon-color: #fe8ea2;--button-negative-border-color: rgba(255, 255, 255, .05);--button-positive-background-color: #424747;--button-positive-background-color-hover: #1a1c1c;--button-positive-background-color-pressed: #080808;--button-positive-text-color: #ffffff;--button-positive-icon-color: #65dcc7;--button-positive-border-color: rgba(255, 255, 255, .05);--button-strong-background-color: #ffffff;--button-strong-background-color-hover: #f1f1f1;--button-strong-background-color-pressed: #eaebeb;--button-strong-text-color: #2d3232;--button-strong-icon-color: #2d3232;--button-strong-border-color: rgba(255, 255, 255, .05);--button-strong-negative-background-color: #ffffff;--button-strong-negative-background-color-hover: #f1f1f1;--button-strong-negative-background-color-pressed: #eaebeb;--button-strong-negative-text-color: #2d3232;--button-strong-negative-icon-color: #ed3354;--button-strong-negative-border-color: rgba(255, 255, 255, .05);--button-strong-positive-background-color: #ffffff;--button-strong-positive-background-color-hover: #f1f1f1;--button-strong-positive-background-color-pressed: #eaebeb;--button-strong-positive-text-color: #2d3232;--button-strong-positive-icon-color: #05b999;--button-strong-positive-border-color: rgba(255, 255, 255, .05);--button-danger-background-color: #ed3354;--button-danger-background-color-hover: #d92f4c;--button-danger-background-color-pressed: #992136;--button-danger-text-color: #ffffff;--button-danger-icon-color: #ffffff;--button-danger-border-color: rgba(255, 255, 255, .05)}