@brightspot/ui 3.0.1-cms-ui-migration.0 → 3.0.1-cms-ui-migration.1

package/src/legacy/tool-ui/src/main/webapp/v4/Bridge.js

@@ -0,0 +1,536 @@
+import log from 'loglevel'
+import onFind from './dom/onFind'
+
+const styleElement = document.createElement('style')
+styleElement.className = 'Bridge'
+document.head.appendChild(styleElement)
+const styleSheet = styleElement.sheet
+const logged = {}
+
+function bridge(selectors, className) {
+  if (
+    typeof className !== 'function' &&
+    !className.startsWith('RichTextEditor-')
+  ) {
+    ;(Array.isArray(selectors) ? selectors : [selectors]).forEach(
+      (selector) => {
+        if (selector.indexOf(',') < 0) {
+          styleSheet.insertRule(
+            `${selector}:not(.${className}) { display: none; }`,
+          )
+        }
+      },
+    )
+  }
+
+  onFind(selectors, (element) => {
+    if (typeof className === 'function') {
+      className(element)
+    } else if (!element.classList.contains(className)) {
+      if (!logged[className]) {
+        logged[className] = true
+        log.debug(`Bridged to ${className}`, element)
+      }
+      element.classList.add(className)
+    }
+  })
+}
+
+// ActionBar
+bridge(['.actions', '.buttons'], 'ActionBar')
+
+// Admin
+bridge('.withLeftNav', 'Admin')
+bridge('.withLeftNav > .leftNav', 'Admin-nav')
+bridge('.withLeftNav > .main', 'Admin-main')
+
+// Avatar.
+bridge('.ToolUserAvatar', 'Avatar')
+
+// Badge.
+bridge('.MimeTypeCount', 'Badge')
+
+// Button.
+bridge('.button', 'Button')
+
+// ContentEdit.
+bridge('.contentForm', 'ContentEdit')
+bridge('.ContentFormCreate', 'ContentForm-create')
+bridge('.ContentEdit[data-content-locked-out="true"]', 'is-locked')
+bridge('.contentForm-aside > .widget-publishing', 'ContentEdit-bar')
+bridge('.OverlayProviderSelect', 'ContentEdit-overlayList')
+bridge('.widget-publishingWorkflow', 'ContentEdit-workflow')
+bridge('.widget-publishingPublish', 'ContentEdit-publish')
+bridge('.widget-publishingWorkflowLog', 'ContentEdit-workflowLog')
+bridge(
+  '.widget-publishing > .widget-publishingPublish > button[name="action-publish"]',
+  'ContentEdit-publishButton',
+)
+bridge('.contentForm-main', 'ContentEdit-left')
+bridge('.contentForm-main > .widget-content', 'ContentEdit-main')
+bridge('.contentForm-main > .widget-content > h1', 'ContentEdit-title')
+bridge('.contentForm-aside > .contentWidgets', 'ContentEdit-right')
+bridge('.contentForm-main > .contentWidgets', 'ContentEdit-bottom')
+bridge(
+  [
+    '.ContentEdit-bar > button[name="action-draft"]',
+    '.ContentEdit-bar > button[name="action-newDraft"]',
+  ],
+  'ContentEdit-saveButton',
+)
+bridge(
+  [
+    '.ContentEdit-controls button[name="action-restore"]',
+    '.ContentEdit-controls button[name="action-restore-draft"]',
+  ],
+  'ContentEdit-restoreButton',
+)
+
+// ContentInputGroup.
+bridge(
+  [
+    '.objectInputs:not(.BulkUploadProcessor)',
+    '.SocialPublishContentEditWidget-inputs',
+  ],
+  'CIG',
+)
+
+bridge('form > .inputContainer', 'CIG-row')
+bridge('form > .inputContainer > .inputSmall', 'CIG-small')
+bridge('form > .inputContainer > .inputLabel', 'CIG-label')
+bridge('.cms-contentTools', 'ContentTools')
+
+bridge('.CIG .inputContainer', 'CIG-row')
+bridge(
+  ['.objectInputs-readOnly', '.CIG .inputContainer-readOnly'],
+  'is-readOnly',
+)
+bridge('.CIG .inputContainer-unlabeled', 'is-unlabeled')
+bridge('.CIG .inputLabel', 'CIG-label')
+bridge('.CIG .inputLabel > .icon-object-guide', 'CIG-help')
+bridge('.CIG .inputPending', 'CIG-pending')
+bridge('.CIG .inputUpdated', 'CIG-updated')
+bridge('.CIG .inputNote', 'CIG-note')
+bridge('.CIG .inputSmall', 'CIG-small')
+bridge('.CIG .inputLarge', 'CIG-large')
+
+// ContentSelector.
+bridge('.objectId-select', 'ContentSelector-search')
+bridge('.objectId-edit', 'ContentSelector-edit')
+bridge('.objectId-clear', 'ContentSelector-clear')
+bridge('.objectId-placeholder', 'ContentSelector-placeholder')
+
+// DashboardRow.
+bridge('.dashboard-columns', 'DashboardRow')
+bridge('.dashboard-column', 'DashboardRow-column')
+bridge('.dashboard-widget', 'DashboardRow-cell')
+
+// DashboardWidget.
+bridge('.dashboard-widget > .widget', 'DashboardWidget')
+bridge('.DashboardWidget > h1', 'DashboardWidget-title')
+bridge(
+  [
+    '.DashboardWidget > .scheduledEvents-controls',
+    '.DashboardWidget > .widget-controls',
+    '.DashboardWidget > .widgetControls',
+  ],
+  'DashboardWidget-controls',
+)
+bridge(
+  [
+    '.DashboardWidget > .pagination',
+    '.DashboardWidget .scheduledEvents-datePagination',
+    '.PR > .pagination',
+  ],
+  'DashboardWidget-pagination',
+)
+bridge(
+  [
+    '.DashboardWidget > .widget-filters',
+    '.DashboardWidget > div > .widget-filters',
+    '.DashboardWidget .scheduledEvents-dateDisplay',
+  ],
+  'DashboardWidget-filters',
+)
+
+// DataTable.
+bridge('.table-striped:not(.links)', 'DT')
+
+// DateTimeInput.
+bridge('.calendarButton', 'DateTimeInput')
+
+// FileInput.
+bridge('.UploadChooser', 'FileInput')
+
+// ImageEditor.
+bridge('.imageEditor', 'ImageEditor')
+bridge('.imageEditor-image', 'ImageEditor-main')
+bridge('.imageEditor-aside', 'ImageEditor-aside')
+bridge('.imageEditor-focus', 'ImageEditor-focus')
+bridge('.imageEditor-edit', 'ImageEditor-edit')
+bridge('.imageEditor-adjustment', 'ImageEditor-adjustment')
+bridge('.imageEditor-sizes', 'ImageEditor-sizes')
+bridge('.imageEditor-sizeButton', 'ImageEditor-size')
+bridge('.imageEditor-sizePreview', 'ImageEditor-sizePreview')
+bridge('.imageEditor-sizeLabel', 'ImageEditor-sizeLabel')
+bridge('.imageEditor-resetCrop', 'ImageEditor-sizeReset')
+
+// ThemeBundleEditor.
+bridge('.objectInputs[data-type="com.psddev.theme.Theme"]', 'ThemeBundle')
+bridge(
+  '.objectInputs[data-type="com.psddev.theme.Theme"] .TabBar-item[data-tab="Overrides"]',
+  'ThemeBundle-tabOverrides',
+)
+bridge('[data-field="bundle"] .objectId-edit', 'ThemeBundle-edit')
+bridge(
+  '.Tab[data-tab-class="com.psddev.theme.ThemeFieldsTab"]',
+  'ThemeBundle-inputs',
+)
+
+// InputRow.
+bridge(
+  ['.ContentEditSites-owner', '.ContentEditSites-access', '.widget-urlsItem'],
+  'InputRow',
+)
+
+// Label.
+bridge('.visibilityLabel', 'Label')
+
+// Link.
+bridge('.link', 'Link')
+bridge(
+  [
+    '.link.icon-action-delete',
+    '.link.icon-action-trash',
+    '.link.icon-action-cancel',
+  ],
+  'is-red',
+)
+
+// LinkTable.
+bridge('.links:not(.LinkList)', 'LinkTable')
+
+// Message.
+bridge(['.message', '.message-info', '.embargo-warning'], 'Message')
+bridge(['.message.error', '.message-error', '.embargo-warning'], 'is-error')
+bridge(['.message.warning', '.message-warning'], 'is-warning')
+bridge(['.message.success', '.message-success'], 'is-success')
+bridge('.uploadable .message', 'is-upload')
+bridge('.embargo-emphasis', 'is-emphasis')
+
+// Page.
+bridge('body', 'Page')
+bridge('.hasToolBroadcast', 'is-broadcasting')
+bridge('.noToolUser', 'is-unauthenticated')
+bridge('.toolBroadcast', 'Page-broadcast')
+bridge('.toolHeader', 'Page-header')
+bridge('.toolHeader-hasEnvironment', 'is-env')
+bridge('.toolNav', 'Page-nav')
+bridge('.toolTitle', 'Page-title')
+bridge('.toolSearch', 'Page-search')
+bridge('.toolUserSiteDisplay', 'Page-site')
+bridge('.toolUserAvatarProfile', 'Page-avatar')
+bridge('.toolUserWelcome', 'Page-user')
+bridge('.toolEnv', 'Page-env')
+bridge('.toolContent', 'Page-content')
+bridge('.toolBackground', 'Page-background')
+bridge('.widget-logIn', 'Page-login')
+
+// Popup.
+bridge(['[target="miscSearch"]', '[target="profilePanel"]'], (e) =>
+  e.setAttribute('data-popup-mode', 'noGap fromTop'),
+)
+bridge(['.objectId-select', 'rte2-enhancement-toolbar-change'], (e) =>
+  e.setAttribute('data-popup-mode', 'fromRight'),
+)
+bridge(
+  [
+    '.ContentSelector-create',
+    '.ContentSelector-edit',
+    '.rte2-enhancement-toolbar-edit',
+    'form[target^="objectId-create-"]',
+  ],
+  (e) => e.setAttribute('data-popup-mode', 'noGap fromBottom'),
+)
+bridge('.popup-objectId-edit-heading', 'Popup-heading')
+
+// Repeatable.
+bridge('.repeatableInputs', 'Repeatable')
+bridge('.Repeatable > ul > li', 'Repeatable-item')
+bridge('.Repeatable-item > .repeatableLabel', 'Repeatable-title')
+bridge('.Repeatable > .addButtonContainer', 'Repeatable-controls')
+bridge('.Repeatable-controls > .addButton', 'Repeatable-add')
+
+// RepeatableContentInputGroup.
+bridge('.repeatableForm', 'RCIG')
+bridge('.repeatableForm.addToTop', 'is-addToTop')
+bridge('.repeatableForm-previewable', 'is-previewable')
+bridge(['.repeatableForm > ol', '.repeatableForm > ul'], 'RCIG-list')
+bridge('.RCIG-list > li', 'RCIG-item')
+bridge('.RCIG-item > .repeatableLabel', 'RCIG-title')
+bridge('.RCIG-item > .removeButton', 'RCIG-remove')
+bridge('.RCIG > .addButtonContainer', 'RCIG-controls')
+bridge('.RCIG-controls > .addButton', 'RCIG-add')
+bridge('.RCIG-controls > .addButtonSelectContainer', 'RCIG-addSelect')
+
+// RepeatableContentInputGroup.is-weighted.
+bridge('.repeatableForm-weighted', 'is-weighted')
+bridge('.repeatableForm-weightResetButton', 'RCIG-resetWeights')
+bridge('.repeatableForm-itemWeights', 'RCIG-weightBar')
+bridge('.repeatableForm-itemWeight', 'RCIG-weightBarItem')
+bridge('.repeatableForm-itemWeight-marker', 'RCIG-weightBarMarker')
+bridge('.repeatableForm-itemWeightHandle', 'RCIG-weightBarHandle')
+bridge('.repeatableLabel-weightLabel', 'RCIG-weightLabel')
+bridge('.repeatableLabel-color', 'RCIG-weightColor')
+
+// RepeatableContentSelector.
+bridge(['.repeatableObjectId', '.repeatableDropdown'], 'RCS')
+bridge('.repeatableObjectId.addToTop', 'is-addToTop')
+bridge(
+  [
+    '.repeatableObjectId > ol',
+    '.repeatableObjectId > ul',
+    '.repeatableDropdown > ol',
+    '.repeatableDropdown > ul',
+  ],
+  'RCS-list',
+)
+bridge('.RCS-list > li', 'RCS-item')
+bridge('.RCS-item > .removeButton', 'RCS-remove')
+bridge(
+  [
+    '.repeatableObjectId > .addButtonContainer',
+    '.repeatableDropdown > .addButtonContainer',
+  ],
+  'RCS-controls',
+)
+bridge('.RCS-controls > .addButton', 'RCS-add')
+
+// RepeatableTextInput.
+bridge('.repeatableText', 'RTI')
+bridge(['.repeatableText > ol', '.repeatableText > ul'], 'RTI-list')
+bridge('.RTI-list > li > .removeButton', 'RTI-remove')
+bridge('.repeatableText > .addButtonContainer', 'RTI-add')
+
+// SearchInput.
+bridge('.searchInput', 'SearchInput')
+bridge(
+  ['.Admin-nav .SearchInput', '.Popup[name="siteSwitch"] .SearchInput'],
+  'is-filter',
+)
+
+// SearchResult.
+bridge('.searchResult-container', 'SearchResult')
+bridge('.searchResult-view', 'SearchResult-view')
+bridge('.searchResult-views', 'SearchResult-views')
+bridge('.searchResult-items', 'SearchResult-items')
+bridge('.searchResult-pagination', 'SearchResult-pagination')
+bridge('.searchResult-fields', 'SearchResult-fields')
+bridge('.searchResult-sorts', 'SearchResult-sorts')
+bridge('.searchResult-list', 'SearchResult-list')
+bridge('.searchResult-mixed', 'SearchResult-mixed')
+bridge('.searchResult-images', 'SearchResult-images')
+bridge('.searchResult-selectionReset', 'SearchResult-selectionReset')
+bridge('.searchResult-actions', 'SearchResult-actions')
+bridge('.searchResult-actions-body', 'SearchResult-actions-body')
+bridge('.searchResult-action-simple', 'SearchResult-action')
+
+// SearchResult: classes also applied to Query field
+bridge('.searchPagination', 'SearchResult-pagination')
+bridge('.searchSorter', 'SearchResult-sorts')
+bridge('.searchResultImages', 'SearchResult-images')
+bridge('.searchResultList', 'SearchResult-items')
+bridge('.queryRestrictions', 'SearchResult-query')
+
+// Site Search Term Analytics
+bridge('.Popup[name="siteSearchTermAnalyticsPage"]', 'SiteSearchTermAnalytics')
+bridge(
+  '.Popup[name="siteSearchTermAnalyticsPage"] .Widget-controls',
+  'SiteSearchTermAnalytics-controls',
+)
+bridge(
+  '.Popup[name="siteSearchTermAnalyticsPage"] .pagination',
+  'SiteSearchTermAnalytics-results',
+)
+
+// QueryField.
+bridge('.queryField', 'QueryField')
+bridge('.queryField_frame', 'QueryField-frame')
+bridge('.queryField_frame .searchControls', 'QueryField-searchControls')
+bridge('.queryField_frame .searchForm', 'QueryField-searchForm')
+
+// SearchWidget.
+bridge(
+  ['.widget[name="searchAdvancedFull"]', '.Widget[name="searchAdvancedFull"]'],
+  'SearchWidget',
+)
+bridge('.SearchWidget[name="miscSearch"]', 'is-global')
+bridge('.SearchWidget > h1', 'SearchWidget-title')
+bridge('.widget-queryField > h1', 'SearchWidget-title')
+bridge('.searchForm', 'SearchWidget-form')
+bridge('.searchHistory', 'SearchWidget-history')
+bridge('.searchRecent', 'SearchWidget-recent')
+bridge('.searchSaved', 'SearchWidget-saved')
+bridge('.searchFilters', 'SearchWidget-controls')
+bridge('.searchFilters .searchInput', 'SearchWidget-query')
+bridge('.searchFiltersType', 'SearchWidget-type')
+bridge(
+  ['.searchFilters > .search-reset', '.searchFilters > .action-cancel'],
+  'SearchWidget-reset',
+)
+bridge('.searchFilter', 'SearchWidget-filter')
+bridge('.searchFilterItem', 'SearchWidget-filterItem')
+bridge('.searchFilter-advancedQuery', 'is-advanced')
+bridge('.searchFilter-date', 'is-date')
+bridge('.searchFilter-record', 'is-record')
+bridge('.searchCreate', 'SearchWidget-create')
+bridge('.searchResult', 'SearchWidget-result')
+bridge('.searchResultTable', 'SearchResult-table')
+
+// SearchWidgetAdvanced.
+bridge('.WidgetSearchAdvancedQuery', 'SearchWidgetAdvanced')
+bridge(
+  '.WidgetSearchAdvancedQuery .fixedScrollable',
+  'SearchWidgetAdvanced-scrollpane',
+)
+
+// StandardForm.
+bridge('.standardForm', 'StandardForm')
+
+// TabBar.
+bridge(['.DashboardTabSelect > ul', '.tabs'], 'TabBar')
+bridge('.TabBar > li:not(.TabBar-menu)', 'TabBar-item')
+
+// TabContainer.
+bridge(['.objectInputs', '.tabbed'], 'TC')
+bridge('.tabbed > [data-tab]', 'TC-panel')
+
+// Taxonomy.
+bridge('.searchResultTaxonomy', 'Taxonomy')
+bridge('.searchResultTaxonomyColumn', 'Taxonomy-column')
+bridge('.searchResultTaxonomyChildren', 'Taxonomy-children')
+bridge('.searchResultTaxonomyExpand', 'Taxonomy-expand')
+
+// TextInput.
+bridge('input.secret', 'is-secret')
+
+// UrlsWidget.
+bridge('.widget-urlsRepeatable', 'UrlsWidget')
+bridge('.widget-urlsItemLabel', 'UrlsWidget-itemLabel')
+
+// Viewers.
+bridge('.EditFieldUpdateViewers', 'Viewers')
+bridge('.EditFieldUpdateViewers-some', 'Viewers-some')
+bridge('.EditFieldUpdateViewers-none', 'Viewers-none')
+bridge('.EditFieldUpdateViewers-viewer', 'Viewers-viewer')
+
+// Week.
+bridge('.calendar-week', 'Week')
+bridge('.Week > .calendarRow', 'Week-row')
+bridge('.Week-row > .calendarDay', 'Week-day')
+bridge('.Week-day > .calendarDayOfWeek', 'Week-dow')
+bridge('.Week-day > .calendarDayOfMonth', 'Week-dom')
+bridge('.Week-row > .calendarCell', 'Week-content')
+
+// Month.
+bridge('.calendar-month', 'Month')
+bridge('.Month > .calendarRow', 'Month-row')
+bridge('.Month-row > .calendarDay', 'Month-day')
+bridge('.Month-day > .calendarDayOfWeek', 'Month-dow')
+bridge('.Month-day > .calendarDayOfMonth', 'Month-dom')
+
+// Widget or SearchWidget.
+bridge('.Popup-content > .frame.loaded', (element) => {
+  for (const c of element.children) {
+    if (c.classList.contains('Widget')) {
+      return
+    } else if (c.classList.contains('widget')) {
+      c.classList.add('Widget')
+      return
+    }
+  }
+
+  const name = element.getAttribute('name')
+  element.classList.add(
+    name === 'miscSearch' ||
+      (name.startsWith('objectId-') && name.endsWith('-select'))
+      ? 'SearchWidget'
+      : 'Widget',
+  )
+})
+
+// Video Editor.
+if (!window.DISABLE_VIDEO_EDITOR_UI) {
+  bridge(
+    '[data-type="brightspot.elemental.AwsElementalVideoProvider"]',
+    'VideoEditor',
+  )
+  bridge(
+    '[data-type="brightspot.elemental.AwsElementalVideoInputWrapper"]',
+    'VideoEditor-fileContainer',
+  )
+  bridge(
+    '[data-type="brightspot.elemental.AwsElementalImageOverlayWrapper"]',
+    'VideoEditor-InputOverlay',
+  )
+  bridge(
+    '.VideoEditor-fileContainer .filePreview > div:first-child',
+    'FilePreview-actions',
+  )
+  bridge(
+    '.CIG-row[data-field-name="colorCorrector"]',
+    'VideoEditor-InputColors',
+  )
+  bridge(
+    '[data-type="brightspot.elemental.AwsElementalColorCorrector"]',
+    'VideoEditor-InputColors-group',
+  )
+}
+
+// Widget.
+bridge(
+  [
+    '.Admin .widget',
+    '.ContentEdit-bottom .widget',
+    '.ContentEdit-left .widget',
+    '.ContentEdit-right .widget:not(.widget-publishing)',
+    '.Page-content > .widget:not([name="searchAdvancedFull"])',
+    '.Popup-content > .frame.loaded:not(.Widget):not(.SearchWidget) > .widget',
+  ],
+  'Widget',
+)
+bridge(
+  [
+    '.Widget > h1:not(.ContentEdit-title)',
+    '.Admin-main > .Widget > h2',
+    '.Admin-nav > .Widget > h2',
+    '.Page-content > .Widget > h2:not(.BuildInformation-resources)',
+    '.Popup-content .Widget > h2',
+  ],
+  'Widget-title',
+)
+bridge(
+  ['.Widget > .widget-controls', '.Widget > .widgetControls'],
+  'Widget-controls',
+)
+
+bridge('.CommunityWidget .widget-filters', 'CommunityWidget-filters')
+
+// PaginatedResult
+bridge('.PR > .widget-filters', 'PR-filters')
+bridge('.PR > .pagination', 'PR-pagination')
+
+// Wordcount
+bridge('.inputWordCount', 'CIG-wordCount')
+
+// Mapping legacy jquery toggleable APIs to the web component APIs.
+$.plugin2('toggleable', {
+  change: function () {
+    this.$caller[0].dispatchEvent(new Event('change'))
+    return this.$caller
+  },
+  toggle: function () {
+    this.$caller[0].dispatchEvent(new Event('change'))
+    return this.$caller
+  },
+})

package/src/legacy/tool-ui/src/main/webapp/v4/BulletedList.less

@@ -0,0 +1,17 @@
+.BulletedList {
+  list-style-type: disc;
+  padding-left: var(--gap-l);
+
+  > li {
+    &:not(:last-child) {
+      margin-bottom: var(--gap-xs);
+    }
+
+    &.is-selected {
+      background: var(--color-gray3);
+      list-style-type: none;
+      margin-left: calc(0px - var(--gap-l));
+      padding-left: var(--gap-l);
+    }
+  }
+}

package/src/legacy/tool-ui/src/main/webapp/v4/Button.less

@@ -0,0 +1,105 @@
+.Button {
+  align-items: center;
+  -webkit-appearance: none;
+  background: var(--color-white);
+  border: 1px solid var(--Link-color);
+  color: var(--Link-color);
+  cursor: pointer;
+  display: inline-flex;
+  font-size: var(--fontSize-s);
+  font-weight: bold;
+  justify-content: center;
+  padding: calc(var(--gap-s) - 1px) var(--gap-m);
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  text-transform: uppercase;
+  transition-duration: var(--time-xs);
+  transition-property: background-color, border-color, color;
+  transition-timing-function: ease-in-out;
+  user-select: none;
+  vertical-align: middle;
+
+  .is-submitting &.is-clicked {
+    pointer-events: none;
+
+    &:not(.Link) {
+      &::before {
+        background: rgb(255 255 255 / 70%);
+        bottom: -1px;
+        content: '';
+        left: -1px;
+        position: absolute;
+        right: -1px;
+        top: -1px;
+      }
+
+      &::after {
+        .Icon;
+
+        animation: spin var(--time-xl) infinite ease-in-out;
+        color: var(--color-black);
+        content: 'autorenew';
+        left: calc(50% - var(--Icon-size) / 2);
+        position: absolute;
+        top: calc(50% - var(--Icon-size) / 2);
+      }
+    }
+  }
+}
+
+.Button.is-focused {
+  border-color: var(--Link-hoverColor);
+  color: var(--Link-hoverColor);
+  text-decoration: none;
+}
+
+.Button {
+  &:hover {
+    .Button.is-focused;
+  }
+}
+
+button,
+input[type='submit'] {
+  &:extend(.Button all);
+}
+
+.Button.is-dominant {
+  background: var(--Link-color);
+  border-color: var(--Link-color);
+  color: var(--color-white);
+
+  &:hover,
+  &:focus {
+    background: var(--Link-hoverColor);
+    border-color: var(--Link-hoverColor);
+    color: var(--color-white);
+  }
+}
+
+.Button.is-green {
+  background: var(--color-green5);
+  border-color: var(--color-green5);
+  color: var(--color-white);
+
+  &:hover,
+  &:focus {
+    background: var(--color-green6);
+    border-color: var(--color-green6);
+    color: var(--color-white);
+  }
+}
+
+.Button.is-yellow {
+  background: var(--color-yellow3);
+  border-color: var(--color-yellow3);
+  color: var(--color-black);
+
+  &:hover,
+  &:focus {
+    background: var(--color-yellow3);
+    border-color: var(--color-yellow5);
+    color: var(--color-black);
+  }
+}