diff --git a/assets/css/README.md b/assets/css/README.md new file mode 100644 index 000000000..5f3a2c44d --- /dev/null +++ b/assets/css/README.md @@ -0,0 +1,7 @@ +Stylesheets +=========== + +`_feather-*` files are part of the internal Feather framework used at Twitter. +They should not be edited directly, since they will be overwritten the next time +the components are upgraded. Instead, any overrides that are needed should be +added to `_feather-custom.scss`. diff --git a/assets/css/_feather-component-button.scss b/assets/css/_feather-component-button.scss index c2b476d59..952ca7b49 100644 --- a/assets/css/_feather-component-button.scss +++ b/assets/css/_feather-component-button.scss @@ -1,4 +1,4 @@ -/*! Copyright 2021 Twitter Inc. All rights reserved. */ +/*! Copyright 2022 Twitter Inc. All rights reserved. */ /* @generated */ /* Button groups */ .ButtonGroup { @@ -25,53 +25,45 @@ } .ButtonGroup > .Button.is-selected, .ButtonGroup > .Button.is-selected:visited { - background-color: #1DA1F2; - border: 1px solid #1DA1F2; - color: white; + background-color: var(--feather-button-group-selected-background-color); + border: 1px solid var(--feather-button-group-selected-border-color); + color: var(--feather-button-group-selected-color); } .ButtonGroup > .Button.is-selected:focus, .ButtonGroup > .Button.is-selected.is-focus { - background: #1DA1F2; - border-color: #1DA1F2; - color: white; + background: var(--feather-button-group-selected-background-color); + border-color: var(--feather-button-group-selected-border-color); + color: var(--feather-button-group-selected-color); } .ButtonGroup > .Button.is-selected:focus:not(.is-mouseFocus), .ButtonGroup > .Button.is-selected.is-focus:not(.is-mouseFocus) { - box-shadow: 0 0 0 2px white, 0 0 0 4px #74CAFE; + box-shadow: 0 0 0 1px white, 0 0 0 3px var(--feather-button-group-selected-outline-color-focus), 0 0 2px 3px var(--feather-button-group-selected-outline-color-focus); } .u-featherBackgroundDark .ButtonGroup > .Button.is-selected:focus:not(.is-mouseFocus), .u-featherBackgroundDark .ButtonGroup > .Button.is-selected.is-focus:not(.is-mouseFocus) { - box-shadow: 0 0 0 2px black, 0 0 0 4px #74CAFE; + box-shadow: 0 0 0 1px black, 0 0 0 3px var(--feather-button-group-selected-outline-color-focus), 0 0 2px 3px var(--feather-button-group-selected-outline-color-focus); } .ButtonGroup > .Button.is-selected:hover, .ButtonGroup > .Button.is-selected.is-hover { - background-color: #0c85d0; - border-color: #0c85d0; - color: white; + background-color: var(--feather-button-group-selected-background-color-hover); + border-color: var(--feather-button-group-selected-border-color-hover); + color: var(--feather-button-group-selected-color); } .ButtonGroup > .Button.is-selected:active, .ButtonGroup > .Button.is-selected.is-active { - background-color: #0967a0; - border-color: #0967a0; - color: white; -} -.ButtonGroup > .Button.is-selected:active:focus:not(.is-mouseFocus), -.ButtonGroup > .Button.is-selected.is-active.is-focus:not(.is-mouseFocus) { - box-shadow: 0 0 0 2px white, 0 0 0 4px #0967a0; -} -.u-featherBackgroundDark .ButtonGroup > .Button.is-selected:active:focus:not(.is-mouseFocus), -.u-featherBackgroundDark .ButtonGroup > .Button.is-selected.is-active.is-focus:not(.is-mouseFocus) { - box-shadow: 0 0 0 2px black, 0 0 0 4px #0967a0; + background-color: var(--feather-button-group-selected-background-color-active); + border-color: var(--feather-button-group-selected-border-color-active); + color: var(--feather-button-group-selected-color); } .ButtonGroup > .Button.is-selected[disabled], .ButtonGroup > .Button.is-selected.is-disabled, fieldset[disabled] .ButtonGroup > .Button.is-selected { - background-color: #1DA1F2; - border-color: #1DA1F2; + background-color: var(--feather-button-group-selected-background-color); + border-color: var(--feather-button-group-selected-border-color); box-shadow: none; } -.ButtonGroup > .Button:focus, -.ButtonGroup > .Button:active { +.ButtonGroup > .Button:focus:not(.is-mouseFocus), +.ButtonGroup > .Button.is-focus:not(.is-mouseFocus) { z-index: 4; } .ButtonGroup > .Button + .Button { @@ -93,53 +85,6 @@ fieldset[disabled] .ButtonGroup > .Button.is-selected { .ButtonGroup--primary > .Button + .Button { margin-left: 1px; } -.ButtonGroup--tertiary > .Button.is-selected, -.ButtonGroup--tertiary > .Button.is-selected:visited { - background-color: #5B7083; - border: 1px solid #5B7083; - color: white; -} -.ButtonGroup--tertiary > .Button.is-selected:focus, -.ButtonGroup--tertiary > .Button.is-selected.is-focus { - background: #5B7083; - border-color: #5B7083; - color: white; -} -.ButtonGroup--tertiary > .Button.is-selected:focus:not(.is-mouseFocus), -.ButtonGroup--tertiary > .Button.is-selected.is-focus:not(.is-mouseFocus) { - box-shadow: 0 0 0 2px white, 0 0 0 4px #C4CFD6; -} -.u-featherBackgroundDark .ButtonGroup--tertiary > .Button.is-selected:focus:not(.is-mouseFocus), -.u-featherBackgroundDark .ButtonGroup--tertiary > .Button.is-selected.is-focus:not(.is-mouseFocus) { - box-shadow: 0 0 0 2px black, 0 0 0 4px #C4CFD6; -} -.ButtonGroup--tertiary > .Button.is-selected:hover, -.ButtonGroup--tertiary > .Button.is-selected.is-hover { - background-color: #465665; - border-color: #465665; - color: white; -} -.ButtonGroup--tertiary > .Button.is-selected:active, -.ButtonGroup--tertiary > .Button.is-selected.is-active { - background-color: #313d47; - border-color: #313d47; - color: white; -} -.ButtonGroup--tertiary > .Button.is-selected:active:focus:not(.is-mouseFocus), -.ButtonGroup--tertiary > .Button.is-selected.is-active.is-focus:not(.is-mouseFocus) { - box-shadow: 0 0 0 2px white, 0 0 0 4px #313d47; -} -.u-featherBackgroundDark .ButtonGroup--tertiary > .Button.is-selected:active:focus:not(.is-mouseFocus), -.u-featherBackgroundDark .ButtonGroup--tertiary > .Button.is-selected.is-active.is-focus:not(.is-mouseFocus) { - box-shadow: 0 0 0 2px black, 0 0 0 4px #313d47; -} -.ButtonGroup--tertiary > .Button.is-selected[disabled], -.ButtonGroup--tertiary > .Button.is-selected.is-disabled, -fieldset[disabled] .ButtonGroup--tertiary > .Button.is-selected { - background-color: #5B7083; - border-color: #5B7083; - box-shadow: none; -} .ButtonGroup--justified { display: flex; width: 100%; @@ -162,16 +107,16 @@ fieldset[disabled] .ButtonGroup--tertiary > .Button.is-selected { vertical-align: -2px; } .Button > .Icon--caretDown { - margin: 0 0.3rem; + margin: 0 var(--feather-form-control-default-adornment-margin); } .Button--xsmall > .Icon--caretDown { - margin: 0 0.2rem; + margin: 0 var(--feather-form-control-xsmall-adornment-margin); } .Button--small > .Icon--caretDown { - margin: 0 0.2rem; + margin: 0 var(--feather-form-control-small-adornment-margin); } .Button--large > .Icon--caretDown { - margin: 0 0.4rem; + margin: 0 var(--feather-form-control-large-adornment-margin); } .Button > .Icon--caretDown { float: right; @@ -185,20 +130,20 @@ fieldset[disabled] .ButtonGroup--tertiary > .Button.is-selected { white-space: nowrap; } .Button-adornment { - margin: 0 0.3rem; + margin: 0 var(--feather-form-control-default-adornment-margin); flex: 0 0 auto; } .Button--xsmall .Button-adornment, .ButtonGroup--xsmall .Button-adornment { - margin: 0 0.2rem; + margin: 0 var(--feather-form-control-xsmall-adornment-margin); } .Button--small .Button-adornment, .ButtonGroup--small .Button-adornment { - margin: 0 0.2rem; + margin: 0 var(--feather-form-control-small-adornment-margin); } .Button--large .Button-adornment, .ButtonGroup--large .Button-adornment { - margin: 0 0.4rem; + margin: 0 var(--feather-form-control-large-adornment-margin); } .Button-adornment:only-child { margin-right: 0; @@ -227,9 +172,61 @@ html[dir='rtl'] .Button:not([dir='ltr']) .Button-adornment:last-child, .Button-categoryLabel { font-weight: 700; } -/* Buttons */ .Button { - transition: box-shadow 0.15s ease-in-out; + --feather-button-background-color-active: rgba(55, 67, 77, 0.2); + --feather-button-background-color: white; + --feather-button-background-color-hover: var(--tw-color-gray-100); + --feather-button-border-color-active: rgba(55, 67, 77, 0); + --feather-button-border-color: var(--tw-color-gray-200); + --feather-button-border-color-hover: var(--feather-button-border-color); + --feather-button-color: var(--tw-color-text-primary); + --feather-button-outline-color-focus: rgba(29, 155, 240, 0.5); + --feather-button-primary-background-color-active: #3f4347; + --feather-button-primary-background-color: var(--tw-color-gray-1100); + --feather-button-primary-background-color-hover: #272b30; + --feather-button-primary-border-color-active: var(--feather-button-primary-background-color-active); + --feather-button-primary-border-color: var(--feather-button-primary-background-color); + --feather-button-primary-border-color-hover: var(--feather-button-primary-background-color-hover); + --feather-button-primary-color: white; + --feather-button-primary-outline-color-focus: var(--feather-button-outline-color-focus); + --feather-button-brand-primary-background-color-active: #177cc0; + --feather-button-brand-primary-background-color: var(--tw-color-blue-500); + --feather-button-brand-primary-background-color-hover: #1a8cd8; + --feather-button-brand-primary-border-color-active: #177cc0; + --feather-button-brand-primary-border-color: var(--feather-button-brand-primary-background-color); + --feather-button-brand-primary-border-color-hover: #1a8cd8; + --feather-button-brand-primary-color: white; + --feather-button-brand-primary-outline-color-focus: var(--feather-button-outline-color-focus); + --feather-button-danger-primary-background-color-active: #c31a25; + --feather-button-danger-primary-background-color: var(--tw-color-red-500); + --feather-button-danger-primary-background-color-hover: #dc1e29; + --feather-button-danger-primary-border-color-active: var(--feather-button-danger-primary-background-color-active); + --feather-button-danger-primary-border-color: var(--feather-button-danger-primary-background-color); + --feather-button-danger-primary-border-color-hover: var(--feather-button-danger-primary-background-color-hover); + --feather-button-danger-primary-color: white; + --feather-button-danger-primary-outline-color-focus: var(--tw-color-red-500); + --feather-button-danger-secondary-background-color-active: rgba(244, 33, 46, 0.2); + --feather-button-danger-secondary-background-color: white; + --feather-button-danger-secondary-background-color-hover: rgba(244, 33, 46, 0.1); + --feather-button-danger-secondary-border-color-active: rgba(244, 33, 46, 0); + --feather-button-danger-secondary-border-color: var(--tw-color-red-100); + --feather-button-danger-secondary-border-color-hover: rgba(244, 33, 46, 0.1); + --feather-button-danger-secondary-color: var(--tw-color-red-500); + --feather-button-danger-secondary-outline-color-focus: rgba(244, 33, 46, 0.5); + --feather-button-link-color: var(--tw-color-text-primary); + --feather-button-link-font-weight: var(--feather-font-weight-bold); + --feather-button-danger-link-color: var(--tw-color-red-500); + --feather-button-group-selected-background-color-active: var(--feather-button-primary-background-color-active); + --feather-button-group-selected-background-color: var(--feather-button-primary-background-color); + --feather-button-group-selected-background-color-hover: var(--feather-button-primary-background-color-hover); + --feather-button-group-selected-border-color-active: var(--feather-button-primary-border-color-active); + --feather-button-group-selected-border-color: var(--feather-button-primary-border-color); + --feather-button-group-selected-border-color-hover: var(--feather-button-primary-border-color-hover); + --feather-button-group-selected-color: var(--feather-button-primary-color); + --feather-button-group-selected-outline-color-focus: var(--feather-button-primary-outline-color-focus); +} +.Button { + transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; transition-property: box-shadow, background-color, border-color; text-align: center; } @@ -250,7 +247,7 @@ html[dir='rtl'] .Button:not([dir='ltr']) .Button-adornment:last-child, justify-content: center; position: relative; cursor: pointer; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif; + font-family: var(--feather-font-family-base); font-weight: 700; } .Button:focus, @@ -259,16 +256,12 @@ html[dir='rtl'] .Button:not([dir='ltr']) .Button-adornment:last-child, } .Button:focus:not(.is-mouseFocus), .Button.is-focus:not(.is-mouseFocus) { - box-shadow: 0 0 0 2px white, 0 0 0 4px #74CAFE; + box-shadow: 0 0 0 1px white, 0 0 0 3px rgba(29, 155, 240, 0.5), 0 0 2px 3px rgba(29, 155, 240, 0.5); } .Button:hover, .Button.is-hover { text-decoration: none; } -.Button:active:focus:not(.is-mouseFocus), -.Button.is-active.is-focus { - box-shadow: 0 0 0 2px white, 0 0 0 4px #1DA1F2; -} .Button[disabled], .Button.is-disabled, fieldset[disabled] .Button { @@ -288,106 +281,86 @@ fieldset[disabled] a.Button { /* Variants */ .Button, .Button:visited { - background-color: white; - border: 1px solid #1DA1F2; - color: #1DA1F2; + background-color: var(--feather-button-background-color); + border: 1px solid var(--feather-button-border-color); + color: var(--feather-button-color); } .Button:focus, .Button.is-focus { - background: white; - border-color: #1DA1F2; - color: #1DA1F2; + background: var(--feather-button-background-color); + border-color: var(--feather-button-border-color); + color: var(--feather-button-color); } .Button:focus:not(.is-mouseFocus), .Button.is-focus:not(.is-mouseFocus) { - box-shadow: 0 0 0 2px white, 0 0 0 4px #74CAFE; + box-shadow: 0 0 0 1px white, 0 0 0 3px var(--feather-button-outline-color-focus), 0 0 2px 3px var(--feather-button-outline-color-focus); } .u-featherBackgroundDark .Button:focus:not(.is-mouseFocus), .u-featherBackgroundDark .Button.is-focus:not(.is-mouseFocus) { - box-shadow: 0 0 0 2px black, 0 0 0 4px #74CAFE; + box-shadow: 0 0 0 1px black, 0 0 0 3px var(--feather-button-outline-color-focus), 0 0 2px 3px var(--feather-button-outline-color-focus); } .Button:hover, .Button.is-hover { - background-color: #e8f6fe; - border-color: #1DA1F2; - color: #1DA1F2; + background-color: var(--feather-button-background-color-hover); + border-color: var(--feather-button-border-color-hover); + color: var(--feather-button-color); } .Button:active, .Button.is-active { - background-color: #d2ecfc; - border-color: #1DA1F2; - color: #1DA1F2; -} -.Button:active:focus:not(.is-mouseFocus), -.Button.is-active.is-focus:not(.is-mouseFocus) { - box-shadow: 0 0 0 2px white, 0 0 0 4px #1DA1F2; -} -.u-featherBackgroundDark .Button:active:focus:not(.is-mouseFocus), -.u-featherBackgroundDark .Button.is-active.is-focus:not(.is-mouseFocus) { - box-shadow: 0 0 0 2px black, 0 0 0 4px #1DA1F2; + background-color: var(--feather-button-background-color-active); + border-color: var(--feather-button-border-color-active); + color: var(--feather-button-color); } .Button[disabled], .Button.is-disabled, fieldset[disabled] .Button { - background-color: white; - border-color: #1DA1F2; + background-color: var(--feather-button-background-color); + border-color: var(--feather-button-border-color); box-shadow: none; } .Button.Button--primary, .Button.Button--primary:visited, .ButtonGroup--primary > .Button, .ButtonGroup--primary > .Button:visited { - background-color: #1DA1F2; - border: 1px solid #1DA1F2; - color: white; + background-color: var(--feather-button-primary-background-color); + border: 1px solid var(--feather-button-primary-border-color); + color: var(--feather-button-primary-color); } .Button.Button--primary:focus, .Button.Button--primary.is-focus, .ButtonGroup--primary > .Button:focus, .ButtonGroup--primary > .Button.is-focus { - background: #1DA1F2; - border-color: #1DA1F2; - color: white; + background: var(--feather-button-primary-background-color); + border-color: var(--feather-button-primary-border-color); + color: var(--feather-button-primary-color); } .Button.Button--primary:focus:not(.is-mouseFocus), .Button.Button--primary.is-focus:not(.is-mouseFocus), .ButtonGroup--primary > .Button:focus:not(.is-mouseFocus), .ButtonGroup--primary > .Button.is-focus:not(.is-mouseFocus) { - box-shadow: 0 0 0 2px white, 0 0 0 4px #74CAFE; + box-shadow: 0 0 0 1px white, 0 0 0 3px var(--feather-button-primary-outline-color-focus), 0 0 2px 3px var(--feather-button-primary-outline-color-focus); } .u-featherBackgroundDark .Button.Button--primary:focus:not(.is-mouseFocus), .u-featherBackgroundDark .Button.Button--primary.is-focus:not(.is-mouseFocus), .u-featherBackgroundDark .ButtonGroup--primary > .Button:focus:not(.is-mouseFocus), .u-featherBackgroundDark .ButtonGroup--primary > .Button.is-focus:not(.is-mouseFocus) { - box-shadow: 0 0 0 2px black, 0 0 0 4px #74CAFE; + box-shadow: 0 0 0 1px black, 0 0 0 3px var(--feather-button-primary-outline-color-focus), 0 0 2px 3px var(--feather-button-primary-outline-color-focus); } .Button.Button--primary:hover, .Button.Button--primary.is-hover, .ButtonGroup--primary > .Button:hover, .ButtonGroup--primary > .Button.is-hover { - background-color: #1a91da; - border-color: #1a91da; - color: white; + background-color: var(--feather-button-primary-background-color-hover); + border-color: var(--feather-button-primary-border-color-hover); + color: var(--feather-button-primary-color); } .Button.Button--primary:active, .Button.Button--primary.is-active, .ButtonGroup--primary > .Button:active, .ButtonGroup--primary > .Button.is-active { - background-color: #1781c2; - border-color: #1781c2; - color: white; -} -.Button.Button--primary:active:focus:not(.is-mouseFocus), -.Button.Button--primary.is-active.is-focus:not(.is-mouseFocus), -.ButtonGroup--primary > .Button:active:focus:not(.is-mouseFocus), -.ButtonGroup--primary > .Button.is-active.is-focus:not(.is-mouseFocus) { - box-shadow: 0 0 0 2px white, 0 0 0 4px #1781c2; -} -.u-featherBackgroundDark .Button.Button--primary:active:focus:not(.is-mouseFocus), -.u-featherBackgroundDark .Button.Button--primary.is-active.is-focus:not(.is-mouseFocus), -.u-featherBackgroundDark .ButtonGroup--primary > .Button:active:focus:not(.is-mouseFocus), -.u-featherBackgroundDark .ButtonGroup--primary > .Button.is-active.is-focus:not(.is-mouseFocus) { - box-shadow: 0 0 0 2px black, 0 0 0 4px #1781c2; + background-color: var(--feather-button-primary-background-color-active); + border-color: var(--feather-button-primary-border-color-active); + color: var(--feather-button-primary-color); } .Button.Button--primary[disabled], .Button.Button--primary.is-disabled, @@ -395,121 +368,140 @@ fieldset[disabled] .Button.Button--primary, .ButtonGroup--primary > .Button[disabled], .ButtonGroup--primary > .Button.is-disabled, fieldset[disabled] .ButtonGroup--primary > .Button { - background-color: #1DA1F2; - border-color: #1DA1F2; + background-color: var(--feather-button-primary-background-color); + border-color: var(--feather-button-primary-border-color); box-shadow: none; } -.Button.Button--tertiary, -.Button.Button--tertiary:visited, -.ButtonGroup--tertiary > .Button, -.ButtonGroup--tertiary > .Button:visited { - background-color: white; - border: 1px solid #5B7083; - color: #5B7083; -} -.Button.Button--tertiary:focus, -.Button.Button--tertiary.is-focus, -.ButtonGroup--tertiary > .Button:focus, -.ButtonGroup--tertiary > .Button.is-focus { - background: white; - border-color: #5B7083; - color: #5B7083; -} -.Button.Button--tertiary:focus:not(.is-mouseFocus), -.Button.Button--tertiary.is-focus:not(.is-mouseFocus), -.ButtonGroup--tertiary > .Button:focus:not(.is-mouseFocus), -.ButtonGroup--tertiary > .Button.is-focus:not(.is-mouseFocus) { - box-shadow: 0 0 0 2px white, 0 0 0 4px #C4CFD6; -} -.u-featherBackgroundDark .Button.Button--tertiary:focus:not(.is-mouseFocus), -.u-featherBackgroundDark .Button.Button--tertiary.is-focus:not(.is-mouseFocus), -.u-featherBackgroundDark .ButtonGroup--tertiary > .Button:focus:not(.is-mouseFocus), -.u-featherBackgroundDark .ButtonGroup--tertiary > .Button.is-focus:not(.is-mouseFocus) { - box-shadow: 0 0 0 2px black, 0 0 0 4px #C4CFD6; -} -.Button.Button--tertiary:hover, -.Button.Button--tertiary.is-hover, -.ButtonGroup--tertiary > .Button:hover, -.ButtonGroup--tertiary > .Button.is-hover { - background-color: #eff1f3; - border-color: #5B7083; - color: #5B7083; -} -.Button.Button--tertiary:active, -.Button.Button--tertiary.is-active, -.ButtonGroup--tertiary > .Button:active, -.ButtonGroup--tertiary > .Button.is-active { - background-color: #dee2e6; - border-color: #5B7083; - color: #5B7083; -} -.Button.Button--tertiary:active:focus:not(.is-mouseFocus), -.Button.Button--tertiary.is-active.is-focus:not(.is-mouseFocus), -.ButtonGroup--tertiary > .Button:active:focus:not(.is-mouseFocus), -.ButtonGroup--tertiary > .Button.is-active.is-focus:not(.is-mouseFocus) { - box-shadow: 0 0 0 2px white, 0 0 0 4px #5B7083; -} -.u-featherBackgroundDark .Button.Button--tertiary:active:focus:not(.is-mouseFocus), -.u-featherBackgroundDark .Button.Button--tertiary.is-active.is-focus:not(.is-mouseFocus), -.u-featherBackgroundDark .ButtonGroup--tertiary > .Button:active:focus:not(.is-mouseFocus), -.u-featherBackgroundDark .ButtonGroup--tertiary > .Button.is-active.is-focus:not(.is-mouseFocus) { - box-shadow: 0 0 0 2px black, 0 0 0 4px #5B7083; -} -.Button.Button--tertiary[disabled], -.Button.Button--tertiary.is-disabled, -fieldset[disabled] .Button.Button--tertiary, -.ButtonGroup--tertiary > .Button[disabled], -.ButtonGroup--tertiary > .Button.is-disabled, -fieldset[disabled] .ButtonGroup--tertiary > .Button { - background-color: white; - border-color: #5B7083; +.Button.Button--brandPrimary, +.Button.Button--brandPrimary:visited { + background-color: var(--feather-button-brand-primary-background-color); + border: 1px solid var(--feather-button-brand-primary-border-color); + color: var(--feather-button-brand-primary-color); +} +.Button.Button--brandPrimary:focus, +.Button.Button--brandPrimary.is-focus { + background: var(--feather-button-brand-primary-background-color); + border-color: var(--feather-button-brand-primary-border-color); + color: var(--feather-button-brand-primary-color); +} +.Button.Button--brandPrimary:focus:not(.is-mouseFocus), +.Button.Button--brandPrimary.is-focus:not(.is-mouseFocus) { + box-shadow: 0 0 0 1px white, 0 0 0 3px var(--feather-button-brand-primary-outline-color-focus), 0 0 2px 3px var(--feather-button-brand-primary-outline-color-focus); +} +.u-featherBackgroundDark .Button.Button--brandPrimary:focus:not(.is-mouseFocus), +.u-featherBackgroundDark .Button.Button--brandPrimary.is-focus:not(.is-mouseFocus) { + box-shadow: 0 0 0 1px black, 0 0 0 3px var(--feather-button-brand-primary-outline-color-focus), 0 0 2px 3px var(--feather-button-brand-primary-outline-color-focus); +} +.Button.Button--brandPrimary:hover, +.Button.Button--brandPrimary.is-hover { + background-color: var(--feather-button-brand-primary-background-color-hover); + border-color: var(--feather-button-brand-primary-border-color-hover); + color: var(--feather-button-brand-primary-color); +} +.Button.Button--brandPrimary:active, +.Button.Button--brandPrimary.is-active { + background-color: var(--feather-button-brand-primary-background-color-active); + border-color: var(--feather-button-brand-primary-border-color-active); + color: var(--feather-button-brand-primary-color); +} +.Button.Button--brandPrimary[disabled], +.Button.Button--brandPrimary.is-disabled, +fieldset[disabled] .Button.Button--brandPrimary { + background-color: var(--feather-button-brand-primary-background-color); + border-color: var(--feather-button-brand-primary-border-color); box-shadow: none; } +.Button.Button--dangerPrimary, .Button.Button--danger, +.Button.Button--dangerPrimary:visited, .Button.Button--danger:visited { - background-color: #E0245E; - border: 1px solid #E0245E; - color: white; + background-color: var(--feather-button-danger-primary-background-color); + border: 1px solid var(--feather-button-danger-primary-border-color); + color: var(--feather-button-danger-primary-color); } +.Button.Button--dangerPrimary:focus, .Button.Button--danger:focus, +.Button.Button--dangerPrimary.is-focus, .Button.Button--danger.is-focus { - background: #E0245E; - border-color: #E0245E; - color: white; + background: var(--feather-button-danger-primary-background-color); + border-color: var(--feather-button-danger-primary-border-color); + color: var(--feather-button-danger-primary-color); } +.Button.Button--dangerPrimary:focus:not(.is-mouseFocus), .Button.Button--danger:focus:not(.is-mouseFocus), +.Button.Button--dangerPrimary.is-focus:not(.is-mouseFocus), .Button.Button--danger.is-focus:not(.is-mouseFocus) { - box-shadow: 0 0 0 2px white, 0 0 0 4px #F37695; + box-shadow: 0 0 0 1px white, 0 0 0 3px var(--feather-button-danger-primary-outline-color-focus), 0 0 2px 3px var(--feather-button-danger-primary-outline-color-focus); } +.u-featherBackgroundDark .Button.Button--dangerPrimary:focus:not(.is-mouseFocus), .u-featherBackgroundDark .Button.Button--danger:focus:not(.is-mouseFocus), +.u-featherBackgroundDark .Button.Button--dangerPrimary.is-focus:not(.is-mouseFocus), .u-featherBackgroundDark .Button.Button--danger.is-focus:not(.is-mouseFocus) { - box-shadow: 0 0 0 2px black, 0 0 0 4px #F37695; + box-shadow: 0 0 0 1px black, 0 0 0 3px var(--feather-button-danger-primary-outline-color-focus), 0 0 2px 3px var(--feather-button-danger-primary-outline-color-focus); } +.Button.Button--dangerPrimary:hover, .Button.Button--danger:hover, +.Button.Button--dangerPrimary.is-hover, .Button.Button--danger.is-hover { - background-color: #ca2055; - border-color: #ca2055; - color: white; + background-color: var(--feather-button-danger-primary-background-color-hover); + border-color: var(--feather-button-danger-primary-border-color-hover); + color: var(--feather-button-danger-primary-color); } +.Button.Button--dangerPrimary:active, .Button.Button--danger:active, +.Button.Button--dangerPrimary.is-active, .Button.Button--danger.is-active { - background-color: #b31d4b; - border-color: #b31d4b; - color: white; -} -.Button.Button--danger:active:focus:not(.is-mouseFocus), -.Button.Button--danger.is-active.is-focus:not(.is-mouseFocus) { - box-shadow: 0 0 0 2px white, 0 0 0 4px #b31d4b; -} -.u-featherBackgroundDark .Button.Button--danger:active:focus:not(.is-mouseFocus), -.u-featherBackgroundDark .Button.Button--danger.is-active.is-focus:not(.is-mouseFocus) { - box-shadow: 0 0 0 2px black, 0 0 0 4px #b31d4b; + background-color: var(--feather-button-danger-primary-background-color-active); + border-color: var(--feather-button-danger-primary-border-color-active); + color: var(--feather-button-danger-primary-color); } +.Button.Button--dangerPrimary[disabled], .Button.Button--danger[disabled], +.Button.Button--dangerPrimary.is-disabled, .Button.Button--danger.is-disabled, +fieldset[disabled] .Button.Button--dangerPrimary, fieldset[disabled] .Button.Button--danger { - background-color: #E0245E; - border-color: #E0245E; + background-color: var(--feather-button-danger-primary-background-color); + border-color: var(--feather-button-danger-primary-border-color); + box-shadow: none; +} +.Button.Button--dangerSecondary, +.Button.Button--dangerSecondary:visited { + background-color: var(--feather-button-danger-secondary-background-color); + border: 1px solid var(--feather-button-danger-secondary-border-color); + color: var(--feather-button-danger-secondary-color); +} +.Button.Button--dangerSecondary:focus, +.Button.Button--dangerSecondary.is-focus { + background: var(--feather-button-danger-secondary-background-color); + border-color: var(--feather-button-danger-secondary-border-color); + color: var(--feather-button-danger-secondary-color); +} +.Button.Button--dangerSecondary:focus:not(.is-mouseFocus), +.Button.Button--dangerSecondary.is-focus:not(.is-mouseFocus) { + box-shadow: 0 0 0 1px white, 0 0 0 3px var(--feather-button-danger-secondary-outline-color-focus), 0 0 2px 3px var(--feather-button-danger-secondary-outline-color-focus); +} +.u-featherBackgroundDark .Button.Button--dangerSecondary:focus:not(.is-mouseFocus), +.u-featherBackgroundDark .Button.Button--dangerSecondary.is-focus:not(.is-mouseFocus) { + box-shadow: 0 0 0 1px black, 0 0 0 3px var(--feather-button-danger-secondary-outline-color-focus), 0 0 2px 3px var(--feather-button-danger-secondary-outline-color-focus); +} +.Button.Button--dangerSecondary:hover, +.Button.Button--dangerSecondary.is-hover { + background-color: var(--feather-button-danger-secondary-background-color-hover); + border-color: var(--feather-button-danger-secondary-border-color-hover); + color: var(--feather-button-danger-secondary-color); +} +.Button.Button--dangerSecondary:active, +.Button.Button--dangerSecondary.is-active { + background-color: var(--feather-button-danger-secondary-background-color-active); + border-color: var(--feather-button-danger-secondary-border-color-active); + color: var(--feather-button-danger-secondary-color); +} +.Button.Button--dangerSecondary[disabled], +.Button.Button--dangerSecondary.is-disabled, +fieldset[disabled] .Button.Button--dangerSecondary { + background-color: var(--feather-button-danger-secondary-background-color); + border-color: var(--feather-button-danger-secondary-border-color); box-shadow: none; } .Button.Button--link { @@ -517,12 +509,15 @@ fieldset[disabled] .Button.Button--danger { padding-right: 0; background: transparent; border: none; - border-radius: 0; + border-radius: var(--feather-form-control-default-border-radius); box-shadow: none; - color: #1b95e0; + color: var(--feather-button-link-color); cursor: pointer; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif; - font-weight: 400; + font-family: var(--feather-font-family-base); + font-weight: var(--feather-button-link-font-weight); + text-decoration: underline; + text-decoration-thickness: var(--feather-space-1); + text-underline-offset: var(--feather-space-4); } .Button.Button--link:hover, .Button.Button--link.is-hover, @@ -542,28 +537,32 @@ fieldset[disabled] .Button.Button--danger { .u-featherBackgroundDark .Button.Button--link:focus:active:not(.is-mouseFocus) { background: transparent; border-color: transparent; - box-shadow: none; + color: var(--feather-button-link-color); text-decoration: underline; - color: #1b95e0; + text-decoration-thickness: var(--feather-space-2); } .Button.Button--link[disabled], .Button.Button--link.is-disabled, fieldset[disabled] .Button.Button--link { - opacity: 0.5; - text-decoration: none; cursor: default; + opacity: 0.5; + text-decoration: underline; + text-decoration-thickness: var(--feather-space-1); } .Button.Button--dangerLink { padding-left: 0; padding-right: 0; background: transparent; border: none; - border-radius: 0; + border-radius: var(--feather-form-control-default-border-radius); box-shadow: none; - color: #E0245E; + color: var(--feather-button-danger-link-color); cursor: pointer; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif; - font-weight: 400; + font-family: var(--feather-font-family-base); + font-weight: var(--feather-button-link-font-weight); + text-decoration: underline; + text-decoration-thickness: var(--feather-space-1); + text-underline-offset: var(--feather-space-4); } .Button.Button--dangerLink:hover, .Button.Button--dangerLink.is-hover, @@ -583,47 +582,48 @@ fieldset[disabled] .Button.Button--link { .u-featherBackgroundDark .Button.Button--dangerLink:focus:active:not(.is-mouseFocus) { background: transparent; border-color: transparent; - box-shadow: none; + color: var(--feather-button-danger-link-color); text-decoration: underline; - color: #E0245E; + text-decoration-thickness: var(--feather-space-2); } .Button.Button--dangerLink[disabled], .Button.Button--dangerLink.is-disabled, fieldset[disabled] .Button.Button--dangerLink { - opacity: 0.5; - text-decoration: none; cursor: default; + opacity: 0.5; + text-decoration: underline; + text-decoration-thickness: var(--feather-space-1); } /* Sizes */ .Button { - padding: 0 0.8rem; - border-radius: 1.6rem; - font-size: 0.7rem; - height: 1.6rem; - line-height: calc(1.6rem - (1px * 2)); + padding: 0 var(--feather-space-16); + border-radius: var(--feather-form-control-default-height); + font-size: var(--feather-form-control-default-font-size); + height: var(--feather-form-control-default-height); + line-height: calc(var(--feather-form-control-default-height) - (var(--feather-border-width-small-experimental) * 2)); } .Button--xsmall, .ButtonGroup--xsmall > .Button { - padding: 0 0.6rem; - border-radius: 1rem; - font-size: 0.6rem; - height: 1rem; - line-height: calc(1rem - (1px * 2)); + padding: 0 var(--feather-space-12); + border-radius: var(--feather-form-control-xsmall-height); + font-size: var(--feather-font-size-subtext-1); + height: var(--feather-form-control-xsmall-height); + line-height: calc(var(--feather-form-control-xsmall-height) - (var(--feather-border-width-small-experimental) * 2)); } .Button--small, .ButtonGroup--small > .Button { - padding: 0 0.7rem; - border-radius: 1.2rem; - font-size: 0.6rem; - height: 1.2rem; - line-height: calc(1.2rem - (1px * 2)); + padding: 0 var(--feather-space-16); + border-radius: var(--feather-form-control-small-height); + font-size: var(--feather-font-size-subtext-1); + height: var(--feather-form-control-small-height); + line-height: calc(var(--feather-form-control-small-height) - (var(--feather-border-width-small-experimental) * 2)); } .Button--large, .ButtonGroup--large > .Button { - padding: 0 0.9rem; - border-radius: 2rem; - font-size: 0.8rem; - height: 2rem; - line-height: calc(2rem - (1px * 2)); + padding: 0 var(--feather-space-24); + border-radius: var(--feather-form-control-large-height); + font-size: var(--feather-font-size-body); + height: var(--feather-form-control-large-height); + line-height: calc(var(--feather-form-control-large-height) - (var(--feather-border-width-small-experimental) * 2)); } diff --git a/assets/css/_feather-core.scss b/assets/css/_feather-core.scss index a57ff79cd..2e7750ba0 100644 --- a/assets/css/_feather-core.scss +++ b/assets/css/_feather-core.scss @@ -1,212 +1,6 @@ -/*! @twitter/feather-core v4.3.1 */ -/*! Copyright 2021 Twitter Inc. All rights reserved. */ +/*! @twitter/feather-core v6.2.0 */ +/*! Copyright 2022 Twitter Inc. All rights reserved. */ /* @generated */ -/* -DO NOT EDIT. -This is auto-generated with `npm run dist`. -Edit `src/js/core.js` instead. -*/ - -:root { - /* Colors */ - --tw-color-blue-primary: #1DA1F2; - --tw-color-text-primary: #0F1419; - --tw-color-text-link: #1b95e0; - --tw-color-blue-0-experimental: #E6F5FF; - --tw-color-blue-200-experimental: #9ADDFF; - --tw-color-blue-300-experimental: #74CAFE; - --tw-color-blue-500-experimental: #1DA1F2; - --tw-color-blue-600-experimental: #177AC2; - --tw-color-gray-0-experimental: #F7F9FA; - --tw-color-gray-50-experimental: #EBEEF0; - --tw-color-gray-200-experimental: #C4CFD6; - --tw-color-gray-300-experimental: #AAB8C2; - --tw-color-gray-600-experimental: #5B7083; - --tw-color-gray-900-experimental: #0F1419; - --tw-color-green-200-experimental: #8BEBA1; - --tw-color-green-300-experimental: #65DC89; - --tw-color-green-500-experimental: #17BF63; - --tw-color-green-600-experimental: #129954; - --tw-color-orange-200-experimental: #FFCA9E; - --tw-color-orange-300-experimental: #FFAC79; - --tw-color-orange-500-experimental: #F45D22; - --tw-color-orange-600-experimental: #BD411A; - --tw-color-purple-200-experimental: #C6ADEF; - --tw-color-purple-300-experimental: #AD8EE1; - --tw-color-purple-500-experimental: #794BC4; - --tw-color-purple-600-experimental: #592F95; - --tw-color-red-200-experimental: #FD9BB0; - --tw-color-red-300-experimental: #F37695; - --tw-color-red-500-experimental: #E0245E; - --tw-color-red-600-experimental: #AD1A48; - --tw-color-yellow-200-experimental: #FFE76E; - --tw-color-yellow-300-experimental: #FFD03F; - --tw-color-yellow-500-experimental: #FFAD1F; - --tw-color-yellow-600-experimental: #F98E00; - --tw-color-gray-deep: #5B7083; - --tw-color-gray-medium: #AAB8C2; - --tw-color-gray-light: #C4CFD6; - --tw-color-gray-faded: #EBEEF0; - --tw-color-gray-faint: #F7F9FA; - --tw-color-red-deep: #AD1A48; - --tw-color-red-medium: #E0245E; - --tw-color-red-light: #F37695; - --tw-color-red-faded: #FD9BB0; - --tw-color-red-50-experimental: #FFD2DA; - --tw-color-orange-deep: #BD411A; - --tw-color-orange-medium: #F45D22; - --tw-color-orange-light: #FFAC79; - --tw-color-orange-faded: #FFCA9E; - --tw-color-yellow-deep: #F98E00; - --tw-color-yellow-medium: #FFAD1F; - --tw-color-yellow-light: #FFD03F; - --tw-color-yellow-faded: #FFE76E; - --tw-color-yellow-50-experimental: #FFF4D3; - --tw-color-green-deep: #129954; - --tw-color-green-medium: #17BF63; - --tw-color-green-light: #65DC89; - --tw-color-green-faded: #8BEBA1; - --tw-color-green-50-experimental: #CBFCD1; - --tw-color-blue-deep: #177AC2; - --tw-color-blue-medium: #1DA1F2; - --tw-color-blue-light: #74CAFE; - --tw-color-blue-faded: #9ADDFF; - --tw-color-blue-faint: #E6F5FF; - --tw-color-blue-50-experimental: #D2F1FF; - --tw-color-purple-deep: #592F95; - --tw-color-purple-medium: #794BC4; - --tw-color-purple-light: #AD8EE1; - --tw-color-purple-faded: #C6ADEF; - /* Form controls */ - --feather-form-control-xsmall-font-size: 0.6rem; - --feather-form-control-xsmall-height: 1rem; - --feather-form-control-xsmall-border-radius: 4px; - --feather-form-control-xsmall-padding-x: 0.4rem; - --feather-form-control-xsmall-adornment-margin: 0.2rem; - --feather-form-control-small-font-size: 0.6rem; - --feather-form-control-small-height: 1.2rem; - --feather-form-control-small-border-radius: 4px; - --feather-form-control-small-padding-x: 0.4rem; - --feather-form-control-small-adornment-margin: 0.2rem; - --feather-form-control-default-font-size: 0.7rem; - --feather-form-control-default-height: 1.6rem; - --feather-form-control-default-border-radius: 4px; - --feather-form-control-default-padding-x: 0.6rem; - --feather-form-control-default-adornment-margin: 0.3rem; - --feather-form-control-large-font-size: 0.8rem; - --feather-form-control-large-height: 2rem; - --feather-form-control-large-border-radius: 4px; - --feather-form-control-large-padding-x: 0.8rem; - --feather-form-control-large-adornment-margin: 0.4rem; - /* Grid */ - --feather-grid-micro: 0.2rem; - --feather-grid-xxsmall: 0.4rem; - --feather-grid-xsmall: 0.6rem; - --feather-grid-small: 0.8rem; - --feather-grid-medium: 1rem; - --feather-grid-large: 1.2rem; - --feather-grid-mega: 2rem; - --feather-grid-baseline-gap: 8px; - --feather-grid-column-gap: 20px; - --feather-grid-column-width: 78px; - --feather-grid-page-width: 1156px; - /* Spaces */ - --feather-space-1-experimental: 1px; - --feather-space-2-experimental: 0.1rem; - --feather-space-4-experimental: 0.2rem; - --feather-space-8-experimental: 0.4rem; - --feather-space-12-experimental: 0.6rem; - --feather-space-16-experimental: 0.8rem; - --feather-space-20-experimental: 1rem; - --feather-space-24-experimental: 1.2rem; - --feather-space-28-experimental: 1.4rem; - --feather-space-32-experimental: 1.6rem; - --feather-space-36-experimental: 1.8rem; - --feather-space-40-experimental: 2rem; - /* Layout */ - --feather-layout-container-padding-x: 1.2rem; - --feather-layout-navigation-bar-height-experimental: 2.8rem; - --feather-layout-navigation-sidebar-width-experimental: 14rem; - /* Typography */ - --feather-font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif; - --feather-font-family-monospace: Menlo, Monaco, Consolas, 'Courier New', monospace; - --feather-font-size-root: 20px; - --feather-font-size-jumbo: 1.2rem; - --feather-line-height-jumbo: 1.6rem; - --feather-font-size-xlarge: 1rem; - --feather-line-height-xlarge: 1.4rem; - --feather-font-size-large: 0.8rem; - --feather-line-height-large: 1.2rem; - --feather-font-size-normal: 0.7rem; - --feather-line-height-normal: 1rem; - --feather-font-size-small: 0.6rem; - --feather-line-height-small: 0.8rem; - --feather-font-weight-normal: 400; - --feather-font-weight-bold: 700; - /* Border radius */ - --feather-border-radius-none-experimental: 0px; - --feather-border-radius-xsmall-experimental: 2px; - --feather-border-radius-small-experimental: 4px; - --feather-border-radius-medium-experimental: 8px; - --feather-border-radius-large-experimental: 12px; - --feather-border-radius-xlarge-experimental: 16px; - --feather-border-radius-infinite-experimental: 9999px; - /* Border width */ - --feather-border-width-none-experimental: 0px; - --feather-border-width-small-experimental: 1px; - --feather-border-width-medium-experimental: 2px; - --feather-border-width-large-experimental: 4px; - /* Breakpoints - private variables for Feather use only */ - --feather-breakpoint-xsmall-experimental: 0px; - --feather-breakpoint-small-experimental: 600px; - --feather-breakpoint-medium-experimental: 1024px; - --feather-breakpoint-large-experimental: 1280px; - --feather-breakpoint-xlarge-experimental: 1920px; -} -/* Typography class names */ -.feather-text-jumbo { - font-size: 1.2rem; - line-height: 1.6rem; -} -.feather-text-xlarge { - font-size: 1rem; - line-height: 1.4rem; -} -.feather-text-large { - font-size: 0.8rem; - line-height: 1.2rem; -} -.feather-text-normal { - font-size: 0.7rem; - line-height: 1rem; -} -.feather-text-small { - font-size: 0.6rem; - line-height: 0.8rem; -} -.feather-text-small-caps { - font-weight: 700; - letter-spacing: 0.025rem; - text-transform: uppercase; - font-size: 0.6rem; - line-height: 0.8rem; -} -.feather-h1 { - font-weight: 700; - font-size: 1.2rem; - line-height: 1.6rem; -} -.feather-h2 { - font-weight: 700; - font-size: 1rem; - line-height: 1.4rem; -} -.feather-h3 { - font-weight: 700; - font-size: 0.8rem; - line-height: 1.2rem; -} - /*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */ /* Document ========================================================================== */ @@ -726,35 +520,395 @@ fieldset { } /* DO NOT EDIT. -This is auto-generated with `npm run dist`. -Edit `src/js/core.js` instead. +You can rebuild this file by running `yarn dist-js` in `feather-source`. +The content of this file is derived from feather-core. */ +:root { + /* Border radii */ + --feather-border-radius-none-experimental: 0px; + --feather-border-radius-xsmall-experimental: 2px; + --feather-border-radius-small-experimental: 4px; + --feather-border-radius-medium-experimental: 8px; + --feather-border-radius-large-experimental: 12px; + --feather-border-radius-xlarge-experimental: 16px; + --feather-border-radius-infinite-experimental: 9999px; + /* Border widths */ + --feather-border-width-none-experimental: 0px; + --feather-border-width-small-experimental: 1px; + --feather-border-width-medium-experimental: 2px; + --feather-border-width-large-experimental: 4px; + /* Breakpoints (private variables for internal Feather use only) */ + --feather-breakpoint-xsmall-experimental: 0px; + --feather-breakpoint-small-experimental: 600px; + --feather-breakpoint-medium-experimental: 1024px; + --feather-breakpoint-large-experimental: 1280px; + --feather-breakpoint-xlarge-experimental: 1920px; + /* Colors */ + --tw-color-gray-deep: #536471; + --tw-color-gray-medium: #B9CAD3; + --tw-color-gray-light: #CFD9DE; + --tw-color-gray-faded: #EFF3F4; + --tw-color-gray-faint: #F7F9F9; + --tw-color-red-deep: #D11A28; + --tw-color-red-medium: #F4212E; + --tw-color-red-light: #F87580; + --tw-color-red-faded: #FB9FA8; + --tw-color-orange-deep: #D86000; + --tw-color-orange-medium: #FF7A00; + --tw-color-orange-light: #FFAD61; + --tw-color-orange-faded: #FFC692; + --tw-color-yellow-deep: #DCAB00; + --tw-color-yellow-medium: #FFD400; + --tw-color-yellow-light: #FFEB6B; + --tw-color-yellow-faded: #FFF595; + --tw-color-green-deep: #009C64; + --tw-color-green-medium: #00BA7C; + --tw-color-green-light: #61D6A3; + --tw-color-green-faded: #92E3BF; + --tw-color-blue-deep: #0083EB; + --tw-color-blue-medium: #1D9BF0; + --tw-color-blue-light: #6BC9FB; + --tw-color-blue-faded: #97E3FF; + --tw-color-blue-faint: #EAFAFF; + --tw-color-purple-deep: #6545DB; + --tw-color-purple-medium: #7856FF; + --tw-color-purple-light: #AC97FF; + --tw-color-purple-faded: #C5B7FF; + --tw-color-blue-0: #EAFAFF; + --tw-color-blue-50: #D7F6FF; + --tw-color-blue-100: #BFF2FF; + --tw-color-blue-200: #97E3FF; + --tw-color-blue-300: #6BC9FB; + --tw-color-blue-500: #1D9BF0; + --tw-color-blue-600: #0083EB; + --tw-color-blue-900: #003886; + --tw-color-gray-0: #F7F9F9; + --tw-color-gray-50: #EFF3F4; + --tw-color-gray-100: #E5EAEC; + --tw-color-gray-200: #CFD9DE; + --tw-color-gray-300: #B9CAD3; + --tw-color-gray-500: #829AAB; + --tw-color-gray-700: #536471; + --tw-color-gray-900: #37434D; + --tw-color-gray-1100: #0F1419; + --tw-color-green-0: #EDFFF9; + --tw-color-green-50: #DBF8EB; + --tw-color-green-100: #C2F1DC; + --tw-color-green-200: #92E3BF; + --tw-color-green-300: #61D6A3; + --tw-color-green-500: #00BA7C; + --tw-color-green-600: #009C64; + --tw-color-green-900: #004329; + --tw-color-magenta-0: #FFF1F8; + --tw-color-magenta-50: #FFDDED; + --tw-color-magenta-100: #FEC7E1; + --tw-color-magenta-200: #FD9BC9; + --tw-color-magenta-300: #FB70B0; + --tw-color-magenta-500: #F91880; + --tw-color-magenta-600: #D4136D; + --tw-color-magenta-900: #640533; + --tw-color-orange-0: #FEF5EC; + --tw-color-orange-50: #FFEDDB; + --tw-color-orange-100: #FFE0C2; + --tw-color-orange-200: #FFC692; + --tw-color-orange-300: #FFAD61; + --tw-color-orange-500: #FF7A00; + --tw-color-orange-600: #D86000; + --tw-color-orange-900: #692100; + --tw-color-plum-0: #FFEFFF; + --tw-color-plum-50: #FAE0FA; + --tw-color-plum-100: #F4CDF5; + --tw-color-plum-200: #E9A7EB; + --tw-color-plum-300: #DF82E0; + --tw-color-plum-500: #C936CC; + --tw-color-plum-600: #AB2BAE; + --tw-color-plum-900: #520B53; + --tw-color-purple-0: #F5F3FF; + --tw-color-purple-50: #ECE8FF; + --tw-color-purple-100: #DFD8FF; + --tw-color-purple-200: #C5B7FF; + --tw-color-purple-300: #AC97FF; + --tw-color-purple-500: #7856FF; + --tw-color-purple-600: #6545DB; + --tw-color-purple-900: #2C116E; + --tw-color-red-0: #FFF0F1; + --tw-color-red-50: #FEDEE3; + --tw-color-red-100: #FDC9CE; + --tw-color-red-200: #FB9FA8; + --tw-color-red-300: #F87580; + --tw-color-red-500: #F4212E; + --tw-color-red-600: #D11A28; + --tw-color-red-900: #67070F; + --tw-color-teal-0: #E9FEFF; + --tw-color-teal-50: #D1F8FA; + --tw-color-teal-100: #B3F1F4; + --tw-color-teal-200: #78E4E8; + --tw-color-teal-300: #3CD6DD; + --tw-color-teal-500: #00AFB6; + --tw-color-teal-600: #009399; + --tw-color-teal-900: #003E42; + --tw-color-yellow-0: #FFFDEA; + --tw-color-yellow-50: #FFFED7; + --tw-color-yellow-100: #FFFEC0; + --tw-color-yellow-200: #FFF595; + --tw-color-yellow-300: #FFEB6B; + --tw-color-yellow-500: #FFD400; + --tw-color-yellow-600: #DCAB00; + --tw-color-yellow-900: #6F3E00; + --tw-color-blue-primary: #1D9BF0; + --tw-color-text-primary: #0F1419; + --tw-color-text-link: #0083EB; + /* Form controls */ + --feather-form-control-xsmall-font-size: 0.65rem; + --feather-form-control-xsmall-height: 1.2rem; + --feather-form-control-xsmall-border-radius: 8px; + --feather-form-control-xsmall-padding-x: 0.4rem; + --feather-form-control-xsmall-adornment-margin: 0.2rem; + --feather-form-control-small-font-size: 0.65rem; + --feather-form-control-small-height: 1.6rem; + --feather-form-control-small-border-radius: 8px; + --feather-form-control-small-padding-x: 0.6rem; + --feather-form-control-small-adornment-margin: 0.2rem; + --feather-form-control-default-font-size: 0.75rem; + --feather-form-control-default-height: 1.8rem; + --feather-form-control-default-border-radius: 8px; + --feather-form-control-default-padding-x: 0.6rem; + --feather-form-control-default-adornment-margin: 0.4rem; + --feather-form-control-large-font-size: 0.85rem; + --feather-form-control-large-height: 2.2rem; + --feather-form-control-large-border-radius: 8px; + --feather-form-control-large-padding-x: 0.6rem; + --feather-form-control-large-adornment-margin: 0.4rem; + /* Grid */ + --feather-grid-micro: 0.2rem; + --feather-grid-xxsmall: 0.4rem; + --feather-grid-xsmall: 0.6rem; + --feather-grid-small: 0.8rem; + --feather-grid-medium: 1rem; + --feather-grid-large: 1.2rem; + --feather-grid-mega: 2rem; + --feather-grid-baseline-gap: 8px; + --feather-grid-column-gap: 20px; + --feather-grid-column-width: 78px; + --feather-grid-page-width: 1156px; + /* Layout */ + --feather-layout-container-padding-x: 1.2rem; + --feather-layout-navigation-bar-height-experimental: 2.8rem; + --feather-layout-navigation-sidebar-width-experimental: 14rem; + /* Spaces */ + --feather-space-1: 1px; + --feather-space-2: 0.1rem; + --feather-space-4: 0.2rem; + --feather-space-6: 0.3rem; + --feather-space-8: 0.4rem; + --feather-space-12: 0.6rem; + --feather-space-16: 0.8rem; + --feather-space-20: 1rem; + --feather-space-24: 1.2rem; + --feather-space-28: 1.4rem; + --feather-space-32: 1.6rem; + --feather-space-36: 1.8rem; + --feather-space-40: 2rem; + --feather-space-48: 2.4rem; + --feather-space-64: 3.2rem; + --feather-space-80: 4rem; + /* Typography */ + --feather-font-family-base: TwitterChirp, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif; + --feather-font-family-monospace: Menlo, Monaco, Consolas, 'Courier New', monospace; + --feather-font-size-root: 20px; + --feather-font-size-title-3: 1.3rem; + --feather-line-height-title-3: 1.6rem; + --feather-font-size-title-4: 1.15rem; + --feather-line-height-title-4: 1.4rem; + --feather-font-size-headline-1: 1rem; + --feather-line-height-headline-1: 1.2rem; + --feather-font-size-headline-2: 0.85rem; + --feather-line-height-headline-2: 1rem; + --feather-font-size-body: 0.75rem; + --feather-line-height-body: 1rem; + --feather-font-size-subtext-1: 0.7rem; + --feather-line-height-subtext-1: 0.8rem; + --feather-font-size-subtext-2: 0.65rem; + --feather-line-height-subtext-2: 0.8rem; + --feather-font-size-subtext-3: 0.55rem; + --feather-line-height-subtext-3: 0.6rem; + --feather-font-size-jumbo: 1.3rem; + --feather-line-height-jumbo: 1.6rem; + --feather-font-size-xlarge: 1.15rem; + --feather-line-height-xlarge: 1.4rem; + --feather-font-size-large: 1rem; + --feather-line-height-large: 1.2rem; + --feather-font-size-normal: 0.75rem; + --feather-line-height-normal: 1rem; + --feather-font-size-small: 0.65rem; + --feather-line-height-small: 0.8rem; + --feather-font-weight-normal: 400; + --feather-font-weight-medium: 500; + --feather-font-weight-bold: 700; + --feather-font-weight-heavy-experimental: 800; +} +/* Typography class names */ +.feather-text-title-3 { + font-size: var(--feather-font-size-title-3); + line-height: var(--feather-line-height-title-3); +} +.feather-text-title-4 { + font-size: var(--feather-font-size-title-4); + line-height: var(--feather-line-height-title-4); +} +.feather-text-headline-1 { + font-size: var(--feather-font-size-headline-1); + line-height: var(--feather-line-height-headline-1); +} +.feather-text-headline-2 { + font-size: var(--feather-font-size-headline-2); + line-height: var(--feather-line-height-headline-2); +} +.feather-text-body { + font-size: var(--feather-font-size-body); + line-height: var(--feather-line-height-body); +} +.feather-text-subtext-1 { + font-size: var(--feather-font-size-subtext-1); + line-height: var(--feather-line-height-subtext-1); +} +.feather-text-subtext-2 { + font-size: var(--feather-font-size-subtext-2); + line-height: var(--feather-line-height-subtext-2); +} +.feather-text-subtext-3 { + font-size: var(--feather-font-size-subtext-3); + line-height: var(--feather-line-height-subtext-3); +} .feather-text-jumbo { - font-size: 1.2rem; - line-height: 1.6rem; + font-size: var(--feather-font-size-jumbo); + line-height: var(--feather-line-height-jumbo); } .feather-text-xlarge { - font-size: 1rem; - line-height: 1.4rem; + font-size: var(--feather-font-size-xlarge); + line-height: var(--feather-line-height-xlarge); } .feather-text-large { - font-size: 0.8rem; - line-height: 1.2rem; + font-size: var(--feather-font-size-large); + line-height: var(--feather-line-height-large); } .feather-text-normal { - font-size: 0.7rem; - line-height: 1rem; + font-size: var(--feather-font-size-normal); + line-height: var(--feather-line-height-normal); } .feather-text-small { - font-size: 0.6rem; - line-height: 0.8rem; + font-size: var(--feather-font-size-small); + line-height: var(--feather-line-height-small); } .feather-text-small-caps { - font-weight: 700; + font-weight: var(--feather-font-weight-bold); letter-spacing: 0.025rem; text-transform: uppercase; - font-size: 0.6rem; - line-height: 0.8rem; + font-size: var(--feather-font-size-small); + line-height: var(--feather-line-height-small); +} +.feather-h1 { + font-weight: var(--feather-font-weight-bold); + font-size: var(--feather-font-size-title-3); + line-height: var(--feather-line-height-title-3); +} +.feather-h2 { + font-weight: var(--feather-font-weight-bold); + font-size: var(--feather-font-size-title-4); + line-height: var(--feather-line-height-title-4); +} +.feather-h3 { + font-weight: var(--feather-font-weight-bold); + font-size: var(--feather-font-size-headline-1); + line-height: var(--feather-line-height-headline-1); +} +/* +DO NOT EDIT. +You can rebuild this file by running `yarn dist-js` in `feather-source`. +The content of this file is derived from feather-core. +*/ +.feather-text-title-3 { + font-size: var(--feather-font-size-title-3); + line-height: var(--feather-line-height-title-3); +} +.feather-text-title-4 { + font-size: var(--feather-font-size-title-4); + line-height: var(--feather-line-height-title-4); +} +.feather-text-headline-1 { + font-size: var(--feather-font-size-headline-1); + line-height: var(--feather-line-height-headline-1); +} +.feather-text-headline-2 { + font-size: var(--feather-font-size-headline-2); + line-height: var(--feather-line-height-headline-2); +} +.feather-text-body { + font-size: var(--feather-font-size-body); + line-height: var(--feather-line-height-body); +} +.feather-text-subtext-1 { + font-size: var(--feather-font-size-subtext-1); + line-height: var(--feather-line-height-subtext-1); +} +.feather-text-subtext-2 { + font-size: var(--feather-font-size-subtext-2); + line-height: var(--feather-line-height-subtext-2); +} +.feather-text-subtext-3 { + font-size: var(--feather-font-size-subtext-3); + line-height: var(--feather-line-height-subtext-3); +} +.feather-text-jumbo { + font-size: var(--feather-font-size-jumbo); + line-height: var(--feather-line-height-jumbo); +} +.feather-text-xlarge { + font-size: var(--feather-font-size-xlarge); + line-height: var(--feather-line-height-xlarge); +} +.feather-text-large { + font-size: var(--feather-font-size-large); + line-height: var(--feather-line-height-large); +} +.feather-text-normal { + font-size: var(--feather-font-size-normal); + line-height: var(--feather-line-height-normal); +} +.feather-text-small { + font-size: var(--feather-font-size-small); + line-height: var(--feather-line-height-small); +} +.feather-text-small-caps { + font-weight: var(--feather-font-weight-bold); + letter-spacing: 0.025rem; + text-transform: uppercase; + font-size: var(--feather-font-size-small); + line-height: var(--feather-line-height-small); +} +@font-face { + font-family: 'TwitterChirp'; + src: url('https://abs.twimg.com/fonts/v2/chirp-regular-web.woff2') format('woff2'), url('https://abs.twimg.com/fonts/v2/chirp-regular-web.woff') format('woff'); + font-style: normal; + font-weight: 400; +} +@font-face { + font-family: 'TwitterChirp'; + src: url('https://abs.twimg.com/fonts/v2/chirp-medium-web.woff2') format('woff2'), url('https://abs.twimg.com/fonts/v2/chirp-medium-web.woff') format('woff'); + font-style: normal; + font-weight: 500; +} +@font-face { + font-family: 'TwitterChirp'; + src: url('https://abs.twimg.com/fonts/v2/chirp-bold-web.woff2') format('woff2'), url('https://abs.twimg.com/fonts/v2/chirp-bold-web.woff') format('woff'); + font-style: normal; + font-weight: 700; +} +@font-face { + font-family: 'TwitterChirp'; + src: url('https://abs.twimg.com/fonts/v2/chirp-heavy-web.woff2') format('woff2'), url('https://abs.twimg.com/fonts/v2/chirp-heavy-web.woff') format('woff'); + font-style: normal; + font-weight: 800; } /* Feather-specific icons */ .Icon--arrowRight:before { @@ -803,7 +957,7 @@ Edit `src/js/core.js` instead. content: '\f206'; } .Icon--featherFail:before { - content: '\f182'; + content: '\f221'; } .Icon--featherFilm:before { content: '\f211'; @@ -827,7 +981,7 @@ Edit `src/js/core.js` instead. content: '\f212'; } .Icon--featherWarning:before { - content: '\f221'; + content: '\f182'; } .Icon--featherWebsiteVisit:before { content: '\f213'; @@ -835,16 +989,16 @@ Edit `src/js/core.js` instead. /* DEPRECATED Feather-specific icons */ /* Colors */ .Icon--featherWarning { - color: #FFAD1F; + color: var(--tw-color-orange-500); } .Icon--featherFail { - color: #E0245E; + color: var(--tw-color-red-500); } .Icon.Icon--featherTooltipCue { position: relative; width: 0.7rem; height: 0.7rem; - background-color: #74CAFE; + background-color: var(--tw-color-blue-300); border-radius: 50%; vertical-align: middle; } @@ -858,14 +1012,14 @@ h2 .Icon.Icon--featherTooltipCue { width: 100%; color: white; content: '?'; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif; + font-family: var(--feather-font-family-base); font-size: 0.5rem; font-weight: 700; line-height: 0; } .Icon.Icon--featherTooltipCue:hover, .Icon.Icon--featherTooltipCue:focus { - background-color: #1DA1F2; + background-color: var(--tw-color-blue-500); cursor: pointer; } .Icon.Icon--loadingSmall { @@ -891,7 +1045,7 @@ h2 .Icon.Icon--featherTooltipCue { font-family: "edgeicons"; src: url(../fonts/edge-icons-Regular.eot); /* IE9 Compat Modes */ - src: url(../fonts/edge-icons-Regular.eot?#iefix) format("embedded-opentype"), url(../fonts/edge-icons-Regular.woff) format("woff"), url(../fonts/edge-icons-Regular.ttf) format("truetype"); + src: url(../fonts/edge-icons-Regular.eot?#iefix) format("embedded-opentype"), /* IE8 */ url(../fonts/edge-icons-Regular.woff) format("woff"), /* Modern Browsers */ url(../fonts/edge-icons-Regular.ttf) format("truetype"); /* Safari, Android, iOS */ } /* @@ -913,7 +1067,7 @@ h2 .Icon.Icon--featherTooltipCue { .Icon:after, .Icon:before { display: block; - font-family: "edgeicons"; + font-family: 'edgeicons'; font-weight: normal; font-style: normal; text-align: center; @@ -1214,6 +1368,9 @@ h2 .Icon.Icon--featherTooltipCue { .Icon--info:before { content: "\f209"; } +.Icon--infoFilled:before { + content: "\f217"; +} .Icon--imageCrop:before { content: "\f158"; } @@ -1460,6 +1617,97 @@ h2 .Icon.Icon--featherTooltipCue { .Icon--warning:before { content: "\f182"; } +/** + * Design token icons + * + * These aren't available in macaw-swift. As of March 2022, see + * http://go/icon-svg and the `design-tokens` Git repository for the + * latest Twitter-wide icons. + */ +.Icon--app:before { + content: "\f413"; +} +.Icon--areaChart:before { + content: "\f422"; +} +.Icon--cloud:before { + content: "\f442"; +} +.Icon--codeBlock:before { + content: "\f411"; +} +.Icon--cube:before { + content: "\f450"; +} +.Icon--database:before { + content: "\f412"; +} +.Icon--dataCenter:before { + content: "\f414"; +} +.Icon--directedAcyclicGraph:before { + content: "\f419"; +} +.Icon--eyeOff:before { + content: "\f456"; +} +.Icon--flowChart:before { + content: "\f418"; +} +.Icon--folderClosed:before { + content: "\f444"; +} +.Icon--folderOpen:before { + content: "\f445"; +} +.Icon--heatMap:before { + content: "\f420"; +} +.Icon--helpCircle:before { + content: "\f039"; +} +.Icon--helpCircleFilled:before { + content: "\f208"; +} +.Icon--histogram:before { + content: "\f417"; +} +.Icon--lineChart:before { + content: "\f423"; +} +.Icon--network:before { + content: "\f443"; +} +.Icon--pyramid:before { + content: "\f451"; +} +.Icon--replyOff:before { + content: "\f457"; +} +.Icon--sankeyChart:before { + content: "\f415"; +} +.Icon--scatterPlot:before { + content: "\f416"; +} +.Icon--stackedAreaChart:before { + content: "\f424"; +} +.Icon--stackedLineChart:before { + content: "\f425"; +} +.Icon--tetrahedron:before { + content: "\f452"; +} +.Icon--thumbsDown:before { + content: "\f441"; +} +.Icon--thumbsUp:before { + content: "\f440"; +} +.Icon--treeHierarchy:before { + content: "\f421"; +} /** * Stacked verified icon * @@ -1516,74 +1764,74 @@ h2 .Icon.Icon--featherTooltipCue { } /* Colors */ .Icon--fail { - color: #E0245E; + color: var(--tw-color-red-500); } .Icon--follower, .Icon--magicrecs, .Icon--colorLightning, .Icon--colorFollower { - color: #1DA1F2; + color: var(--tw-color-blue-primary); } .Icon--lifelineBadge { - color: #BD411A; + color: var(--tw-color-orange-600); } .Icon--listBadge:before { - color: #5B7083; + color: var(--tw-color-gray-700); } .Icon--muted { - color: #E0245E; + color: var(--tw-color-red-500); } .Icon--promoted { - color: #5B7083; + color: var(--tw-color-gray-700); } .Icon--promotedTrend { - color: #FFAD1F; + color: var(--tw-color-yellow-500); } .Icon--protected { - color: #0F1419; + color: var(--tw-color-text-primary); } .Icon--retweeted, .Icon--colorRetweeted { - color: #17BF63; + color: var(--tw-color-green-500); } .Icon--smiley { - color: #AAB8C2; + color: var(--tw-color-gray-300); } .Icon--top { - color: #1DA1F2; + color: var(--tw-color-blue-primary); } .Icon--translator { - color: #1DA1F2; + color: var(--tw-color-blue-primary); } .Icon--moderator { - color: #FFAD1F; + color: var(--tw-color-yellow-500); } .Icon--unmuted { - color: #C4CFD6; + color: var(--tw-color-gray-200); } .Icon--verified { - color: #1DA1F2; + color: var(--tw-color-blue-primary); } .Icon--verified:before { color: white; } .Icon--circleActiveMe, .Icon--circleActiveBird { - color: #1DA1F2; + color: var(--tw-color-blue-primary); } .Icon--colorHeart, .Icon--circleActiveHeart, .Icon--heartBadge { - color: #E0245E; + color: var(--tw-color-red-500); } .Icon--circleActiveRetweet { - color: #17BF63; + color: var(--tw-color-green-500); } .Icon--circleActiveList { - color: #5B7083; + color: var(--tw-color-gray-700); } .Icon--playButton { - color: #1DA1F2; + color: var(--tw-color-blue-primary); } .Icon--playButton:after { color: white; @@ -1600,39 +1848,65 @@ h2 .Icon.Icon--featherTooltipCue { color: white; } .Icon--inverted.Icon--verified:before { - color: #0F1419; + color: var(--tw-color-text-primary); +} +:root { + --feather-font-size-jumbo: var(--feather-font-size-title-3); + --feather-font-size-large: var(--feather-font-size-headline-1); + --feather-font-size-normal: var(--feather-font-size-body); + --feather-font-size-small: var(--feather-font-size-subtext-2); + --feather-font-size-xlarge: var(--feather-font-size-title-4); + --feather-line-height-jumbo: var(--feather-line-height-title-3); + --feather-line-height-large: var(--feather-line-height-headline-1); + --feather-line-height-normal: var(--feather-line-height-body); + --feather-line-height-small: var(--feather-line-height-subtext-2); + --feather-line-height-xlarge: var(--feather-line-height-title-4); } /* Body text */ html { font-size: 20px; } body { - color: #0F1419; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif; - font-size: 0.7rem; - line-height: 1rem; + color: var(--tw-color-text-primary); + font-family: var(--feather-font-family-base); + font-size: var(--feather-font-size-body); + line-height: var(--feather-line-height-body); } a { - color: #1b95e0; + color: var(--tw-color-text-link); text-decoration: none; } a:hover, a:focus { - color: #1b95e0; + color: var(--tw-color-text-link); text-decoration: underline; } p { - margin: 0 0 0.4rem; + margin: 0 0 var(--feather-space-8); } -ul, -ol { - margin: 0.4rem 0; - padding-left: 1.2rem; - list-style: disc; +ol, +ul { + margin: var(--feather-space-8) 0; + padding-left: var(--feather-space-24); } ol { list-style: decimal; } +ol ol { + list-style: lower-alpha; +} +ol ol ol { + list-style: lower-roman; +} +ul { + list-style: disc; +} +ul ul { + list-style: circle; +} +ul ul ul { + list-style: square; +} code, kbd, pre, @@ -1640,7 +1914,7 @@ samp { font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; } button { - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif; + font-family: var(--feather-font-family-base); line-height: inherit; } /* Headings */ @@ -1650,28 +1924,28 @@ h3, h4, h5, h6 { - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif; + font-family: var(--feather-font-family-base); } h1 { - font-weight: 700; - font-size: 1.2rem; - line-height: 1.6rem; + font-weight: var(--feather-font-weight-bold); + font-size: var(--feather-font-size-title-3); + line-height: var(--feather-line-height-title-3); } h2 { - font-weight: 700; - font-size: 1rem; - line-height: 1.4rem; + font-weight: var(--feather-font-weight-bold); + font-size: var(--feather-font-size-title-4); + line-height: var(--feather-line-height-title-4); } h3 { - font-weight: 700; - font-size: 0.8rem; - line-height: 1.2rem; + font-weight: var(--feather-font-weight-bold); + font-size: var(--feather-font-size-headline-1); + line-height: var(--feather-line-height-headline-1); } h4, h5, h6 { - font-size: 0.7rem; - line-height: 1rem; + font-size: var(--feather-font-size-body); + line-height: var(--feather-line-height-body); font-weight: 700; } /* Icons */ diff --git a/assets/css/_feather-custom.scss b/assets/css/_feather-custom.scss index f1b076ecc..23f18eebf 100644 --- a/assets/css/_feather-custom.scss +++ b/assets/css/_feather-custom.scss @@ -1,60 +1,16 @@ @media (prefers-color-scheme: dark) { - /* feather buttons */ - .Button, - .Button:visited { - background-color: black; - border: 1px solid var(--tw-color-blue-primary); - color: var(--tw-color-blue-primary); - } - .Button:focus, - .Button.is-focus { - background: black; - border-color: var(--tw-color-blue-primary); - color: var(--tw-color-blue-primary); - } - .Button:hover, - .Button.is-hover { - background-color: var(--tw-color-gray-900-experimental); - border-color: var(--tw-color-blue-primary); - color: var(--tw-color-blue-primary); - } - .Button:active, - .Button.is-active { - background-color: var(--tw-color-gray-900-experimental); - border-color: var(--tw-color-blue-primary); - color: var(--tw-color-blue-primary); - } + // very basic support for dark mode until Feather supports this natively + :root { + --tw-color-text-primary: var(--tw-color-gray-0); + } + .Button { + --feather-button-background-color: var(--tw-color-gray-1100); + --feather-button-background-color-hover: var(--tw-color-gray-900); + --feather-button-border-color: var(--tw-color-gray-700); - .Button.Button--tertiary, - .Button.Button--tertiary:visited, - .ButtonGroup--tertiary > .Button, - .ButtonGroup--tertiary > .Button:visited { - background-color: black; - border: 1px solid var(--tw-color-blue-primary); - color: #1DA1F2; - } - .Button.Button--tertiary:focus, - .Button.Button--tertiary.is-focus, - .ButtonGroup--tertiary > .Button:focus, - .ButtonGroup--tertiary > .Button.is-focus { - background-color: black; - border: 1px solid var(--tw-color-blue-primary); - color: var(--tw-color-blue-primary); - } - .Button.Button--tertiary:hover, - .Button.Button--tertiary.is-hover, - .ButtonGroup--tertiary > .Button:hover, - .ButtonGroup--tertiary > .Button.is-hover { - background-color: var(--tw-color-gray-900-experimental); - border-color: var(--tw-color-blue-primary); - color: var(--tw-color-blue-primary); - } - .Button.Button--tertiary:active, - .Button.Button--tertiary.is-active, - .ButtonGroup--tertiary > .Button:active, - .ButtonGroup--tertiary > .Button.is-active { - background-color: var(--tw-color-gray-900-experimental); - border-color: var(--tw-color-blue-primary); - color: var(--tw-color-blue-primary); + --feather-button-primary-background-color-active: var(--tw-color-gray-200); + --feather-button-primary-background-color: var(--tw-color-gray-0); + --feather-button-primary-background-color-hover: var(--tw-color-gray-100); + --feather-button-primary-color: var(--tw-color-gray-1100); } } diff --git a/assets/css/_main.scss b/assets/css/_main.scss index 36fcd47de..f6e39d578 100644 --- a/assets/css/_main.scss +++ b/assets/css/_main.scss @@ -53,7 +53,7 @@ body { flex-direction: column; @media (prefers-color-scheme: dark) { - background-color: var(--tw-color-gray-900-experimental); + background-color: var(--tw-color-gray-1100); color: var(--tw-color-gray-faint); } } @@ -251,8 +251,8 @@ a.foot-link { /* Text */ body { - font-size: var(--feather-font-size-large); - line-height: var(--feather-line-height-large); + font-size: 0.8rem; // 16px + line-height: 1.5; // 24px } h2 { diff --git a/assets/css/index.scss b/assets/css/index.scss index 3c61bf389..97902472c 100644 --- a/assets/css/index.scss +++ b/assets/css/index.scss @@ -8,7 +8,7 @@ background-color: var(--tw-color-gray-faint); @media (prefers-color-scheme: dark) { - background-color: var(--tw-color-gray-900-experimental); + background-color: var(--tw-color-gray-1100); color: white; } } diff --git a/assets/css/projects.scss b/assets/css/projects.scss index fcf98194c..4c6a05430 100644 --- a/assets/css/projects.scss +++ b/assets/css/projects.scss @@ -83,7 +83,7 @@ justify-content: space-between; @media (prefers-color-scheme: dark) { - background-color: var(--tw-color-gray-600-experimental); + background-color: var(--tw-color-gray-deep); } } @@ -114,4 +114,4 @@ .count, .query { font-weight: var(--feather-font-weight-bold); } -} \ No newline at end of file +} diff --git a/content/_index.html b/content/_index.html index 9ee270b79..49eee3e2a 100644 --- a/content/_index.html +++ b/content/_index.html @@ -67,7 +67,7 @@

Follow Us

Join the Flock

We are always on the lookout for innovative and creative individuals who are passionate about building a platform where all voices can be heard.

- View All Careers + View All Careers
diff --git a/layouts/_default/projects.html b/layouts/_default/projects.html index 94c7c0a7b..9ae1705d0 100644 --- a/layouts/_default/projects.html +++ b/layouts/_default/projects.html @@ -23,7 +23,7 @@

{{ .name }}

GitHub {{ with .homepageUrl }}Website{{ end }}
- Metrics + Metrics {{ end }}