@frontify/fondue/dist/packages/tokens/theme/themes.module.css

Design system of Frontify

.dark {
    --base-color: #2d3232;
    --base-color-alt: #1a1c1c;
    --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: 0.75rem;
    --body-size-x-small-line-height: 1rem;
    --body-size-small: 0.813rem;
    --body-size-small-line-height: 1rem;
    --body-size-medium: 0.875rem;
    --body-size-medium-line-height: 1.125rem;
    --body-size-large: 1rem;
    --body-size-large-line-height: 1.25rem;
    --body-x-small: [object Object];
    --body-x-small-strong: [object Object];
    --body-x-small-x-strong: [object Object];
    --body-small: [object Object];
    --body-small-strong: [object Object];
    --body-small-x-strong: [object Object];
    --body-medium: [object Object];
    --body-medium-strong: [object Object];
    --body-medium-x-strong: [object Object];
    --body-large: [object Object];
    --body-large-strong: [object Object];
    --body-large-x-strong: [object Object];
    --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-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: #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-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: #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-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: #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;
    --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: 0.813rem;
    --code-size-small-line-height: 1rem;
    --code-size-medium: 0.875rem;
    --code-size-medium-line-height: 1rem;
    --code-size-large: 1rem;
    --code-size-large-line-height: 1.25rem;
    --code-small: [object Object];
    --code-small-strong: [object Object];
    --code-medium: [object Object];
    --code-medium-strong: [object Object];
    --code-large: [object Object];
    --code-large-strong: [object Object];
    --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: 0.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;
    --heading-medium: [object Object];
    --heading-medium-strong: [object Object];
    --heading-large: [object Object];
    --heading-large-strong: [object Object];
    --heading-x-large: [object Object];
    --heading-x-large-strong: [object Object];
    --heading-xx-large: [object Object];
    --heading-xx-large-strong: [object Object];
    --line-color: rgba(255, 255, 255, 0.1);
    --line-color-weak: rgba(255, 255, 255, 0.05);
    --line-color-strong: rgba(255, 255, 255, 0.3);
    --line-color-x-strong: rgba(255, 255, 255, 0.5);
    --line-color-xx-strong: #ffffff;
    --line-color-mighty: rgba(8, 8, 8, 0.15);
    --line-width: 0.063rem;
    --line-width-large: 0.125rem;
    --overlay-color: rgba(8, 8, 8, 0.5);
    --radius: 0.25rem;
    --radius-small: 0.125rem;
    --radius-large: 0.5rem;
    --radius-x-large: 0.75rem;
    --shadow-matrix: 0.1875rem 0rem 0.625rem 0rem rgba(8, 8, 8, 0.5);
    --shadow-offset-x: 0rem;
    --shadow-offset-y: 0.1875rem;
    --shadow-spread: 0rem;
    --shadow-blur: 0.625rem;
    --shadow-color: rgba(8, 8, 8, 0.5);
    --shadow-top-matrix: -0.625rem 0rem 0.625rem -0.3125rem rgba(8, 8, 8, 0.5);
    --shadow-top-offset-x: 0rem;
    --shadow-top-offset-y: -0.625rem;
    --shadow-top-spread: -0.3125rem;
    --shadow-bottom-matrix: 0.625rem 0rem 0.625rem -0.3125rem rgba(8, 8, 8, 0.5);
    --shadow-bottom-offset-x: 0rem;
    --shadow-bottom-offset-y: 0.625rem;
    --shadow-bottom-spread: -0.3125rem;
    --shadow-large-matrix: 1.5625rem 0rem 5rem 0rem rgba(8, 8, 8, 0.8);
    --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, 0.8);
    --shadow: [object Object];
    --shadow-top: [object Object];
    --shadow-bottom: [object Object];
    --shadow-big: [object Object];
    --space-xxs: 0.25rem;
    --space-xs: 0.5rem;
    --space-s: 0.75rem;
    --space-m: 1rem;
    --space-l: 1.5rem;
    --space-xl: 2rem;
    --space-xxl: 2.5rem;
    --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, 0.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, 0.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, 0.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, 0.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, 0.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, 0.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, 0.05);
}
.light {
    --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: 0.75rem;
    --body-size-x-small-line-height: 1rem;
    --body-size-small: 0.813rem;
    --body-size-small-line-height: 1rem;
    --body-size-medium: 0.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: 0.813rem;
    --code-size-small-line-height: 1rem;
    --code-size-medium: 0.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: 0.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, 0.1);
    --line-color-weak: rgba(8, 8, 8, 0.03);
    --line-color-strong: rgba(8, 8, 8, 0.15);
    --line-color-x-strong: rgba(8, 8, 8, 0.3);
    --line-color-xx-strong: #2d3232;
    --line-color-mighty: rgba(255, 255, 255, 0.15);
    --line-width: 0.063rem;
    --line-width-large: 0.125rem;
    --overlay-color: rgba(234, 235, 235, 0.5);
    --radius: 0.25rem;
    --radius-small: 0.125rem;
    --radius-large: 0.5rem;
    --radius-x-large: 0.75rem;
    --shadow-matrix: 0.1875rem 0rem 0.625rem 0rem rgba(8, 8, 8, 0.15);
    --shadow-offset-x: 0rem;
    --shadow-offset-y: 0.1875rem;
    --shadow-spread: 0rem;
    --shadow-blur: 0.625rem;
    --shadow-color: rgba(8, 8, 8, 0.15);
    --shadow-top-matrix: -0.625rem 0rem 0.625rem -0.3125rem rgba(8, 8, 8, 0.15);
    --shadow-top-offset-x: 0rem;
    --shadow-top-offset-y: -0.625rem;
    --shadow-top-spread: -0.3125rem;
    --shadow-bottom-matrix: 0.625rem 0rem 0.625rem -0.3125rem rgba(8, 8, 8, 0.15);
    --shadow-bottom-offset-x: 0rem;
    --shadow-bottom-offset-y: 0.625rem;
    --shadow-bottom-spread: -0.3125rem;
    --shadow-large-matrix: 1.5625rem 0rem 5rem 0rem rgba(8, 8, 8, 0.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, 0.2);
    --space-xxs: 0.25rem;
    --space-xs: 0.5rem;
    --space-s: 0.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, 0.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, 0.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, 0.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, 0.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, 0.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, 0.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, 0.03);
}