/* * @doist/product-libraries-tokens * https://github.com/Doist/product-libraries-tokens * * Autogenerated on 8/14/2026. */ :root.theme_light { color-scheme: light; } :root, :host { --product-library-actionable-destructive-disabled-fill: #f1b7b2; --product-library-actionable-destructive-disabled-tint: #f1b7b2; --product-library-actionable-destructive-hover-fill: #b03d32; --product-library-actionable-destructive-hover-tint: #b03d32; --product-library-actionable-destructive-idle-fill: #dc4c3e; --product-library-actionable-destructive-idle-tint: #dc4c3e; --product-library-actionable-destructive-on-disabled-tint: #ffffff; --product-library-actionable-destructive-on-hover-tint: #ffffff; --product-library-actionable-destructive-on-idle-tint: #ffffff; --product-library-actionable-focus-fill: #eeeeee; --product-library-actionable-focus-tint: #dc4c3e; --product-library-actionable-primary-disabled-fill: #eda59e; --product-library-actionable-primary-hover-fill: #c3392c; --product-library-actionable-primary-idle-fill: #d33322; --product-library-actionable-primary-on-dark-disabled-fill: #4c2827; --product-library-actionable-primary-on-dark-hover-fill: #e36564; --product-library-actionable-primary-on-dark-idle-fill: #dc4c3e; --product-library-actionable-primary-on-dark-on-disabled-tint: #797979; --product-library-actionable-primary-on-dark-on-hover-tint: #ffffff; --product-library-actionable-primary-on-dark-on-idle-tint: #ffffff; --product-library-actionable-primary-on-disabled-tint: #ffffff; --product-library-actionable-primary-on-hover-tint: #ffffff; --product-library-actionable-primary-on-idle-tint: #ffffff; --product-library-actionable-quaternary-disabled-tint: #b2b2b2; --product-library-actionable-quaternary-hover-fill: #0000000a; --product-library-actionable-quaternary-hover-tint: #1a1a1a; --product-library-actionable-quaternary-idle-tint: #666666; --product-library-actionable-quaternary-selected-fill: #0000001a; --product-library-actionable-quaternary-on-dark-disabled-tint: #4d4d4d; --product-library-actionable-quaternary-on-dark-hover-fill: #424242; --product-library-actionable-quaternary-on-dark-hover-tint: #ffffff; --product-library-actionable-quaternary-on-dark-idle-tint: #9d9d9d; --product-library-actionable-quaternary-on-dark-selected-fill: #575757; --product-library-actionable-quaternary-on-dark-on-hover-fill: #424242; --product-library-actionable-quaternary-on-dark-on-hover-tint: #ffffff; --product-library-actionable-quaternary-on-dark-on-selected-tint: #ffffff; --product-library-actionable-quaternary-on-hover-fill: #d3d3d3; --product-library-actionable-quaternary-on-hover-tint: #1a1a1a; --product-library-actionable-quaternary-on-selected-tint: #1a1a1a; --product-library-actionable-secondary-disabled-fill: #00000005; --product-library-actionable-secondary-hover-fill: #00000012; --product-library-actionable-secondary-idle-fill: #0000000a; --product-library-actionable-secondary-idle-tint: #e1e1e1; --product-library-actionable-secondary-on-dark-disabled-fill: #383838; --product-library-actionable-secondary-on-dark-hover-fill: #666666; --product-library-actionable-secondary-on-dark-idle-fill: #4d4d4d; --product-library-actionable-secondary-on-dark-idle-tint: #808080; --product-library-actionable-secondary-on-dark-on-disabled-tint: #737373; --product-library-actionable-secondary-on-dark-on-hover-tint: #ffffff; --product-library-actionable-secondary-on-dark-on-idle-tint: #ffffff; --product-library-actionable-secondary-on-disabled-tint: #999999; --product-library-actionable-secondary-on-hover-tint: #1a1a1a; --product-library-actionable-secondary-on-idle-tint: #444444; --product-library-actionable-tertiary-disabled-tint: #b2b2b2; --product-library-actionable-tertiary-hover-fill: #0000000a; --product-library-actionable-tertiary-hover-tint: #b03d32; --product-library-actionable-tertiary-idle-tint: #d33322; --product-library-actionable-tertiary-on-dark-disabled-tint: #575757; --product-library-actionable-tertiary-on-dark-hover-fill: #3d3d3d; --product-library-actionable-tertiary-on-dark-hover-tint: #ff7f74; --product-library-actionable-tertiary-on-dark-idle-tint: #ffaaa1; --product-library-actionable-tertiary-on-dark-on-hover-fill: #ffaaa1; --product-library-actionable-tertiary-on-dark-on-hover-tint: #ffaaa1; --product-library-actionable-tertiary-on-hover-fill: #dc4c3e; --product-library-actionable-tertiary-on-hover-tint: #dc4c3e; --product-library-background-base-primary: #ffffff; --product-library-background-base-secondary: #fcfaf8; --product-library-background-base-tertiary: #f8f5f2; --product-library-background-grouped-primary: #ffffff; --product-library-background-grouped-secondary: #faf7f4; --product-library-background-grouped-tertiary: #f6f2ee; --product-library-background-overlay: #00000066; --product-library-background-raised-primary: #ffffff; --product-library-background-raised-quaternary: #282828; --product-library-background-raised-secondary: #fafafa; --product-library-background-raised-tertiary: #eeedec; --product-library-border-focus-tint: #b8b8b8; --product-library-border-hover-tint: #cccccc; --product-library-border-idle-tint: #e6e6e6; --product-library-display-accent-primary-fill: #dc4c3e; --product-library-display-accent-primary-tint: #d33322; --product-library-display-accent-secondary-fill: #fde7d8; --product-library-display-focus-fill: #eeeeee; --product-library-display-primary-idle-tint: #202020; --product-library-display-primary-on-dark-fill: #666666; --product-library-display-primary-on-dark-tint: #ffffff; --product-library-display-quaternary-idle-tint: #e5e5e5; --product-library-display-secondary-idle-tint: #666666; --product-library-display-secondary-on-dark-tint: #b3b3b3; --product-library-display-tertiary-idle-tint: #999999; --product-library-divider-primary: #eeeeee; --product-library-divider-secondary: #f5f5f5; --product-library-divider-tertiary: #d3d3d3; --product-library-divider-on-dark: #666666; --product-library-info-attention-primary-idle-fill: #dc4c3e; --product-library-info-attention-primary-idle-tint: #dc4c3e; --product-library-info-attention-primary-on-dark-idle-fill: #e06155; --product-library-info-attention-primary-on-idle-tint: #ffffff; --product-library-info-attention-secondary-idle-fill: #fbe9e7; --product-library-info-attention-secondary-on-idle-tint: #cf473a; --product-library-info-neutral-primary-idle-fill: #316fea; --product-library-info-neutral-primary-on-dark-idle-fill: #4180ff; --product-library-info-neutral-primary-on-idle-tint: #ffffff; --product-library-info-neutral-secondary-idle-fill: #808080; --product-library-info-neutral-secondary-idle-tint: #5e5e5e; --product-library-info-neutral-secondary-on-idle-tint: #ffffff; --product-library-info-neutral-tertiary-focus-fill: #5e5e5e; --product-library-info-neutral-tertiary-idle-fill: #eeeeee; --product-library-info-neutral-tertiary-on-focus-tint: #1a1a1a; --product-library-info-neutral-tertiary-on-idle-tint: #5e5e5e; --product-library-info-positive-primary-idle-fill: #058527; --product-library-info-positive-primary-idle-tint: #058527; --product-library-info-positive-primary-on-dark-idle-fill: #08a531; --product-library-info-positive-primary-on-idle-tint: #ffffff; --product-library-info-positive-secondary-idle-fill: #e6f3e9; --product-library-info-positive-secondary-on-idle-tint: #058527; --product-library-info-promote-primary-idle-fill: #f48318; --product-library-info-promote-primary-on-idle-tint: #ffffff; --product-library-info-promote-quaternary-idle-fill: #fffaf4; --product-library-info-promote-quaternary-on-idle-tint: #fae8d6; --product-library-info-promote-secondary-idle-fill: #ffd093; --product-library-info-promote-tertiary-idle-fill: #faead1; --product-library-info-promote-tertiary-on-idle-tint: #8f4700; --product-library-info-warning-primary-focus-fill: #f6d9ac; --product-library-info-warning-primary-idle-fill: #faead1; --product-library-info-warning-primary-on-dark-idle-fill: #ff8c1a; --product-library-info-warning-primary-on-idle-fill: #eb8909; --product-library-info-warning-primary-on-idle-tint: #8f4700; --product-library-info-warning-primary-on-idle-fill-tint: #ffffff; --product-library-meta-berry-fill: #b8255f; --product-library-meta-berry-tint: #d43876; --product-library-meta-blue-fill: #2a67e2; --product-library-meta-blue-tint: #4180ff; --product-library-meta-charcoal-fill: #808080; --product-library-meta-charcoal-tint: #808080; --product-library-meta-grape-fill: #692ec2; --product-library-meta-grape-tint: #692ec2; --product-library-meta-green-fill: #369307; --product-library-meta-green-tint: #369307; --product-library-meta-grey-fill: #999999; --product-library-meta-grey-tint: #999999; --product-library-meta-lavender-fill: #eb96c8; --product-library-meta-lavender-tint: #a4698c; --product-library-meta-light-blue-fill: #96c3eb; --product-library-meta-light-blue-tint: #6988a4; --product-library-meta-lime-green-fill: #7ecc48; --product-library-meta-lime-green-tint: #65a33a; --product-library-meta-magenta-fill: #e05095; --product-library-meta-magenta-tint: #e05095; --product-library-meta-mint-green-fill: #52ccb8; --product-library-meta-mint-green-tint: #42a393; --product-library-meta-olive-green-fill: #aeb83a; --product-library-meta-olive-green-tint: #949c31; --product-library-meta-orange-fill: #f48318; --product-library-meta-orange-tint: #c77100; --product-library-meta-red-fill: #dc4c3e; --product-library-meta-red-tint: #ea584a; --product-library-meta-salmon-fill: #c9766f; --product-library-meta-salmon-tint: #ff8e84; --product-library-meta-secondary-berry-hover-fill: #f3c9d9; --product-library-meta-secondary-berry-idle-fill: #f8dee8; --product-library-meta-secondary-berry-selected-fill: #b8255f; --product-library-meta-secondary-berry-on-hover-tint: #000000; --product-library-meta-secondary-berry-on-idle-tint: #202020; --product-library-meta-secondary-berry-on-selected-tint: #ffffff; --product-library-meta-secondary-blue-hover-fill: #c9d9fb; --product-library-meta-secondary-blue-idle-fill: #dde6f9; --product-library-meta-secondary-blue-selected-fill: #2a67e2; --product-library-meta-secondary-blue-on-hover-tint: #000000; --product-library-meta-secondary-blue-on-idle-tint: #202020; --product-library-meta-secondary-blue-on-selected-tint: #ffffff; --product-library-meta-secondary-charcoal-hover-fill: #d9d9d9; --product-library-meta-secondary-charcoal-idle-fill: #e5e5e5; --product-library-meta-secondary-charcoal-selected-fill: #737373; --product-library-meta-secondary-charcoal-on-hover-tint: #000000; --product-library-meta-secondary-charcoal-on-idle-tint: #202020; --product-library-meta-secondary-charcoal-on-selected-tint: #ffffff; --product-library-meta-secondary-grape-hover-fill: #deccf5; --product-library-meta-secondary-grape-idle-fill: #ece1fb; --product-library-meta-secondary-grape-selected-fill: #692ec2; --product-library-meta-secondary-grape-on-hover-tint: #000000; --product-library-meta-secondary-grape-on-idle-tint: #202020; --product-library-meta-secondary-grape-on-selected-tint: #ffffff; --product-library-meta-secondary-green-hover-fill: #bdefa4; --product-library-meta-secondary-green-idle-fill: #cef3bb; --product-library-meta-secondary-green-selected-fill: #328806; --product-library-meta-secondary-green-on-hover-tint: #000000; --product-library-meta-secondary-green-on-idle-tint: #202020; --product-library-meta-secondary-green-on-selected-tint: #ffffff; --product-library-meta-secondary-lavender-hover-fill: #f3cee4; --product-library-meta-secondary-lavender-idle-fill: #f8e3ef; --product-library-meta-secondary-lavender-selected-fill: #efbdda; --product-library-meta-secondary-lavender-on-hover-tint: #000000; --product-library-meta-secondary-lavender-on-idle-tint: #202020; --product-library-meta-secondary-lavender-on-selected-tint: #000000; --product-library-meta-secondary-light-blue-hover-fill: #d2e4f4; --product-library-meta-secondary-light-blue-idle-fill: #e6f0f9; --product-library-meta-secondary-light-blue-selected-fill: #adceeb; --product-library-meta-secondary-light-blue-on-hover-tint: #000000; --product-library-meta-secondary-light-blue-on-idle-tint: #202020; --product-library-meta-secondary-light-blue-on-selected-tint: #000000; --product-library-meta-secondary-lime-green-hover-fill: #d2edc0; --product-library-meta-secondary-lime-green-idle-fill: #ddf1cf; --product-library-meta-secondary-lime-green-selected-fill: #a6d883; --product-library-meta-secondary-lime-green-on-hover-tint: #000000; --product-library-meta-secondary-lime-green-on-idle-tint: #202020; --product-library-meta-secondary-lime-green-on-selected-tint: #000000; --product-library-meta-secondary-magenta-hover-fill: #f2c4da; --product-library-meta-secondary-magenta-idle-fill: #fadeec; --product-library-meta-secondary-magenta-selected-fill: #d7287c; --product-library-meta-secondary-magenta-on-hover-tint: #000000; --product-library-meta-secondary-magenta-on-idle-tint: #202020; --product-library-meta-secondary-magenta-on-selected-tint: #ffffff; --product-library-meta-secondary-mint-green-hover-fill: #c9eee8; --product-library-meta-secondary-mint-green-idle-fill: #e0f5f2; --product-library-meta-secondary-mint-green-selected-fill: #85dbcd; --product-library-meta-secondary-mint-green-on-hover-tint: #000000; --product-library-meta-secondary-mint-green-on-idle-tint: #202020; --product-library-meta-secondary-mint-green-on-selected-tint: #000000; --product-library-meta-secondary-olive-green-hover-fill: #dadfa0; --product-library-meta-secondary-olive-green-idle-fill: #e9ecc7; --product-library-meta-secondary-olive-green-selected-fill: #c9d260; --product-library-meta-secondary-olive-green-on-hover-tint: #000000; --product-library-meta-secondary-olive-green-on-idle-tint: #202020; --product-library-meta-secondary-olive-green-on-selected-tint: #000000; --product-library-meta-secondary-orange-hover-fill: #f9dcb8; --product-library-meta-secondary-orange-idle-fill: #fbe7ce; --product-library-meta-secondary-orange-selected-fill: #ad6200; --product-library-meta-secondary-orange-on-hover-tint: #000000; --product-library-meta-secondary-orange-on-idle-tint: #202020; --product-library-meta-secondary-orange-on-selected-tint: #ffffff; --product-library-meta-secondary-red-hover-fill: #ffbcb8; --product-library-meta-secondary-red-idle-fill: #fededb; --product-library-meta-secondary-red-selected-fill: #d63c2d; --product-library-meta-secondary-red-on-hover-tint: #000000; --product-library-meta-secondary-red-on-idle-tint: #202020; --product-library-meta-secondary-red-on-selected-tint: #ffffff; --product-library-meta-secondary-salmon-hover-fill: #feccc8; --product-library-meta-secondary-salmon-idle-fill: #fee1df; --product-library-meta-secondary-salmon-selected-fill: #ffb9b2; --product-library-meta-secondary-salmon-on-hover-tint: #000000; --product-library-meta-secondary-salmon-on-idle-tint: #202020; --product-library-meta-secondary-salmon-on-selected-tint: #000000; --product-library-meta-secondary-sky-blue-hover-fill: #bfeefd; --product-library-meta-secondary-sky-blue-idle-fill: #daf5fe; --product-library-meta-secondary-sky-blue-selected-fill: #6bd7fa; --product-library-meta-secondary-sky-blue-on-hover-tint: #000000; --product-library-meta-secondary-sky-blue-on-idle-tint: #202020; --product-library-meta-secondary-sky-blue-on-selected-tint: #000000; --product-library-meta-secondary-taupe-hover-fill: #ecd7c6; --product-library-meta-secondary-taupe-idle-fill: #f3e6dc; --product-library-meta-secondary-taupe-selected-fill: #e3c4ab; --product-library-meta-secondary-taupe-on-hover-tint: #000000; --product-library-meta-secondary-taupe-on-idle-tint: #202020; --product-library-meta-secondary-taupe-on-selected-tint: #000000; --product-library-meta-secondary-teal-hover-fill: #c3dee5; --product-library-meta-secondary-teal-idle-fill: #d5e9ee; --product-library-meta-secondary-teal-selected-fill: #067e9a; --product-library-meta-secondary-teal-on-hover-tint: #000000; --product-library-meta-secondary-teal-on-idle-tint: #202020; --product-library-meta-secondary-teal-on-selected-tint: #ffffff; --product-library-meta-secondary-violet-hover-fill: #edd2f4; --product-library-meta-secondary-violet-idle-fill: #f5e5f9; --product-library-meta-secondary-violet-selected-fill: #ac30cc; --product-library-meta-secondary-violet-on-hover-tint: #000000; --product-library-meta-secondary-violet-on-idle-tint: #202020; --product-library-meta-secondary-violet-on-selected-tint: #ffffff; --product-library-meta-secondary-yellow-hover-fill: #feeb9a; --product-library-meta-secondary-yellow-idle-fill: #fef0b3; --product-library-meta-secondary-yellow-selected-fill: #fecf05; --product-library-meta-secondary-yellow-on-hover-tint: #000000; --product-library-meta-secondary-yellow-on-idle-tint: #202020; --product-library-meta-secondary-yellow-on-selected-tint: #000000; --product-library-meta-sky-blue-fill: #3ab9e2; --product-library-meta-sky-blue-tint: #319dc0; --product-library-meta-taupe-fill: #ccae96; --product-library-meta-taupe-tint: #8f7a69; --product-library-meta-teal-fill: #148fad; --product-library-meta-teal-tint: #148fad; --product-library-meta-violet-fill: #ac30cc; --product-library-meta-violet-tint: #ca3fee; --product-library-meta-yellow-fill: #fecf05; --product-library-meta-yellow-tint: #b29104; --product-library-priorities-p1-primary-disabled-fill: #edb5b1; --product-library-priorities-p1-primary-disabled-tint: #edb5b1; --product-library-priorities-p1-primary-idle-fill: #d1453b; --product-library-priorities-p1-primary-idle-tint: #d1453b; --product-library-priorities-p1-primary-on-disabled-tint: #ffffff; --product-library-priorities-p1-primary-on-idle-tint: #ffffff; --product-library-priorities-p1-secondary-disabled-fill: #ffebe9; --product-library-priorities-p1-secondary-hover-fill: #ffc6c2; --product-library-priorities-p1-secondary-idle-fill: #ffd6d3; --product-library-priorities-p1-secondary-selected-fill: #d1453b; --product-library-priorities-p1-secondary-on-selected-tint: #ffffff; --product-library-priorities-p2-primary-disabled-fill: #f7d09d; --product-library-priorities-p2-primary-disabled-tint: #f7d09d; --product-library-priorities-p2-primary-idle-fill: #eb8909; --product-library-priorities-p2-primary-idle-tint: #eb8909; --product-library-priorities-p2-primary-on-disabled-tint: #ffffff; --product-library-priorities-p2-primary-on-idle-tint: #ffffff; --product-library-priorities-p2-secondary-disabled-fill: #fdf3e7; --product-library-priorities-p2-secondary-hover-fill: #f9dcb8; --product-library-priorities-p2-secondary-idle-fill: #fbe7ce; --product-library-priorities-p2-secondary-selected-fill: #b26500; --product-library-priorities-p2-secondary-on-selected-tint: #ffffff; --product-library-priorities-p3-primary-disabled-fill: #a7c5f3; --product-library-priorities-p3-primary-disabled-tint: #a7c5f3; --product-library-priorities-p3-primary-idle-fill: #246fe0; --product-library-priorities-p3-primary-idle-tint: #246fe0; --product-library-priorities-p3-primary-on-disabled-tint: #ffffff; --product-library-priorities-p3-primary-on-idle-tint: #ffffff; --product-library-priorities-p3-secondary-disabled-fill: #eef3fc; --product-library-priorities-p3-secondary-hover-fill: #cfdcf7; --product-library-priorities-p3-secondary-idle-fill: #dde6f9; --product-library-priorities-p3-secondary-selected-fill: #246fe0; --product-library-priorities-p3-secondary-on-selected-tint: #ffffff; --product-library-priorities-p4-primary-disabled-fill: #d6d6d6; --product-library-priorities-p4-primary-disabled-tint: #cccccc; --product-library-priorities-p4-primary-idle-fill: #999999; --product-library-priorities-p4-primary-idle-tint: #999999; --product-library-priorities-p4-primary-on-disabled-tint: #ffffff; --product-library-priorities-p4-primary-on-idle-tint: #ffffff; --product-library-priorities-p4-secondary-disabled-fill: #f9f7f6; --product-library-priorities-p4-secondary-hover-fill: #e8e5e3; --product-library-priorities-p4-secondary-idle-fill: #f2efed; --product-library-priorities-p4-secondary-selected-fill: #7a7a7a; --product-library-priorities-p4-secondary-on-selected-tint: #ffffff; --product-library-schedule-next-week-fill: #692ec2; --product-library-schedule-next-week-tint: #692ec2; --product-library-schedule-no-date-fill: #b8b8b8; --product-library-schedule-no-date-tint: #808080; --product-library-schedule-overdue-fill: #ca4c3e; --product-library-schedule-overdue-tint: #d1453b; --product-library-schedule-postpone-fill: #246fe0; --product-library-schedule-postpone-tint: #246fe0; --product-library-schedule-today-fill: #4b9244; --product-library-schedule-today-tint: #058527; --product-library-schedule-tomorrow-fill: #ad6200; --product-library-schedule-tomorrow-tint: #ad6200; --product-library-schedule-weekend-fill: #246fe0; --product-library-schedule-weekend-tint: #246fe0; --product-library-selectable-background: #f5f5f5; --product-library-selectable-primary-disabled-tint: #e5e5e5; --product-library-selectable-primary-selected-fill: #dc4c3e; --product-library-selectable-primary-selected-tint: #dc4c3e; --product-library-selectable-primary-unselected-fill: #b3b3b3; --product-library-selectable-primary-unselected-tint: #666666; --product-library-selectable-primary-on-dark-hover-fill: #3d3d3d; --product-library-selectable-primary-on-dark-selected-fill: #666666; --product-library-selectable-primary-on-selected-fill: #ffffff; --product-library-selectable-primary-on-selected-tint: #ffffff; --product-library-selectable-primary-on-unselected-fill: #ffffff; --product-library-selectable-secondary-hover-fill: #f2efed; --product-library-selectable-secondary-idle-tint: #202020; --product-library-selectable-secondary-selected-fill: #ffefe5; --product-library-selectable-secondary-on-selected-fill: #dc4c3e; --product-library-selectable-secondary-on-selected-tint: #a81f00; --product-library-selectable-tertiary-selected-fill: #ffffff; --product-library-selectable-tertiary-selected-tint: #ffffff; --product-library-selectable-tertiary-on-selected-disabled-fill: #999999; --product-library-selectable-tertiary-on-selected-disabled-tint: #999999; --product-library-selectable-tertiary-on-selected-enabled-fill: #202020; --product-library-selectable-tertiary-on-selected-enabled-tint: #202020; --product-library-selectable-tertiary-on-unselected-disabled-fill: #c7c7c7; --product-library-selectable-tertiary-on-unselected-disabled-tint: #b2b2b2; --product-library-selectable-tertiary-on-unselected-enabled-fill: #aaaaaa; --product-library-selectable-tertiary-on-unselected-enabled-tint: #666666; }