Skip to content

Commit

Permalink
feat(button): using core-tokens for button
Browse files Browse the repository at this point in the history
  • Loading branch information
@bernhard-adobe @Westbrook
bernhard-adobe authored and Westbrook committed Feb 1, 2023
1 parent 88ed56d commit a4a6d42
Show file tree
Hide file tree
Showing 19 changed files with 3,154 additions and 2,253 deletions.
2 changes: 1 addition & 1 deletion packages/button/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@
"@spectrum-web-components/shared": "^0.15.5"
},
"devDependencies": {
"@spectrum-css/button": "^6.0.21"
"@spectrum-css/button": "^9.0.0"
},
"types": "./src/index.d.ts",
"customElements": "custom-elements.json",
Expand Down
2,990 changes: 1,387 additions & 1,603 deletions packages/button/src/spectrum-button.css
View file

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions scripts/spectrum-tokens.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ const tokensRoot = path.join(
const tokenPackages = [
'actionbutton',
'checkbox',
'button',
'closebutton',
'helptext',
'radio',
Expand Down
183 changes: 0 additions & 183 deletions tools/styles/express/spectrum-core-global.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -963,9 +963,6 @@ governing permissions and limitations under the License.
--spectrum-alias-font-family-condensed: var(
--spectrum-global-font-font-family-condensed
);
--spectrum-alias-button-text-line-height: var(
--spectrum-global-font-line-height-small
);
--spectrum-alias-component-text-line-height: var(
--spectrum-global-font-line-height-small
);
Expand Down Expand Up @@ -2047,33 +2044,6 @@ governing permissions and limitations under the License.
--spectrum-alias-avatar-border-color-selected-key-focus: var(
--spectrum-global-color-gray-900
);
--spectrum-alias-button-primary-background-color-default: var(
--spectrum-alias-button-primary-border-color-default
);
--spectrum-alias-button-primary-text-color-default: var(
--spectrum-alias-button-primary-text-color-hover
);
--spectrum-alias-button-primary-icon-color-default: var(
--spectrum-alias-button-primary-text-color-default
);
--spectrum-alias-button-secondary-background-color-default: var(
--spectrum-alias-button-secondary-border-color-default
);
--spectrum-alias-button-secondary-text-color-default: var(
--spectrum-alias-button-secondary-text-color-hover
);
--spectrum-alias-button-secondary-icon-color-default: var(
--spectrum-alias-button-secondary-text-color-default
);
--spectrum-alias-button-negative-background-color-default: var(
--spectrum-alias-button-negative-border-color-default
);
--spectrum-alias-button-negative-text-color-default: var(
--spectrum-alias-button-negative-text-color-hover
);
--spectrum-alias-button-negative-icon-color-default: var(
--spectrum-alias-button-negative-text-color-default
);
--spectrum-alias-input-border-color-default: var(
--spectrum-alias-border-color
);
Expand Down Expand Up @@ -2495,159 +2465,6 @@ governing permissions and limitations under the License.
--spectrum-alias-toggle-icon-color-emphasized-selected: var(
--spectrum-global-color-gray-75
);
--spectrum-alias-button-primary-background-color-hover: var(
--spectrum-global-color-gray-800
);
--spectrum-alias-button-primary-background-color-down: var(
--spectrum-global-color-gray-900
);
--spectrum-alias-button-primary-background-color-key-focus: var(
--spectrum-global-color-gray-800
);
--spectrum-alias-button-primary-background-color: var(
--spectrum-alias-button-primary-background-color-default
);
--spectrum-alias-button-primary-border-color-default: var(
--spectrum-global-color-gray-800
);
--spectrum-alias-button-primary-border-color-hover: var(
--spectrum-alias-button-primary-background-color-hover
);
--spectrum-alias-button-primary-border-color-down: var(
--spectrum-alias-button-primary-background-color-down
);
--spectrum-alias-button-primary-border-color-key-focus: var(
--spectrum-alias-button-primary-background-color-key-focus
);
--spectrum-alias-button-primary-border-color: var(
--spectrum-alias-button-primary-border-color-default
);
--spectrum-alias-button-primary-text-color-hover: var(
--spectrum-global-color-gray-50
);
--spectrum-alias-button-primary-text-color-down: var(
--spectrum-global-color-gray-50
);
--spectrum-alias-button-primary-text-color-key-focus: var(
--spectrum-global-color-gray-50
);
--spectrum-alias-button-primary-text-color: var(
--spectrum-alias-button-primary-text-color-default
);
--spectrum-alias-button-primary-icon-color-hover: var(
--spectrum-alias-button-primary-text-color-hover
);
--spectrum-alias-button-primary-icon-color-down: var(
--spectrum-alias-button-primary-text-color-down
);
--spectrum-alias-button-primary-icon-color-key-focus: var(
--spectrum-alias-button-primary-text-color-key-focus
);
--spectrum-alias-button-primary-icon-color: var(
--spectrum-alias-button-primary-icon-color-default
);
--spectrum-alias-button-secondary-background-color-hover: var(
--spectrum-global-color-gray-700
);
--spectrum-alias-button-secondary-background-color-down: var(
--spectrum-global-color-gray-800
);
--spectrum-alias-button-secondary-background-color-key-focus: var(
--spectrum-global-color-gray-700
);
--spectrum-alias-button-secondary-background-color: var(
--spectrum-alias-button-secondary-background-color-default
);
--spectrum-alias-button-secondary-border-color-default: var(
--spectrum-global-color-gray-700
);
--spectrum-alias-button-secondary-border-color-hover: var(
--spectrum-alias-button-secondary-background-color-hover
);
--spectrum-alias-button-secondary-border-color-down: var(
--spectrum-alias-button-secondary-background-color-down
);
--spectrum-alias-button-secondary-border-color-key-focus: var(
--spectrum-alias-button-secondary-background-color-key-focus
);
--spectrum-alias-button-secondary-border-color: var(
--spectrum-alias-button-secondary-border-color-default
);
--spectrum-alias-button-secondary-text-color-hover: var(
--spectrum-global-color-gray-50
);
--spectrum-alias-button-secondary-text-color-down: var(
--spectrum-global-color-gray-50
);
--spectrum-alias-button-secondary-text-color-key-focus: var(
--spectrum-global-color-gray-50
);
--spectrum-alias-button-secondary-text-color: var(
--spectrum-alias-button-secondary-text-color-default
);
--spectrum-alias-button-secondary-icon-color-hover: var(
--spectrum-alias-button-secondary-text-color-hover
);
--spectrum-alias-button-secondary-icon-color-down: var(
--spectrum-alias-button-secondary-text-color-down
);
--spectrum-alias-button-secondary-icon-color-key-focus: var(
--spectrum-alias-button-secondary-text-color-key-focus
);
--spectrum-alias-button-secondary-icon-color: var(
--spectrum-alias-button-secondary-icon-color-default
);
--spectrum-alias-button-negative-background-color-hover: var(
--spectrum-semantic-negative-text-color-small
);
--spectrum-alias-button-negative-background-color-down: var(
--spectrum-global-color-red-700
);
--spectrum-alias-button-negative-background-color-key-focus: var(
--spectrum-semantic-negative-text-color-small
);
--spectrum-alias-button-negative-background-color: var(
--spectrum-alias-button-negative-background-color-default
);
--spectrum-alias-button-negative-border-color-default: var(
--spectrum-semantic-negative-text-color-small
);
--spectrum-alias-button-negative-border-color-hover: var(
--spectrum-semantic-negative-text-color-small
);
--spectrum-alias-button-negative-border-color-down: var(
--spectrum-global-color-red-700
);
--spectrum-alias-button-negative-border-color-key-focus: var(
--spectrum-semantic-negative-text-color-small
);
--spectrum-alias-button-negative-border-color: var(
--spectrum-alias-button-negative-border-color-default
);
--spectrum-alias-button-negative-text-color-hover: var(
--spectrum-global-color-gray-50
);
--spectrum-alias-button-negative-text-color-down: var(
--spectrum-global-color-gray-50
);
--spectrum-alias-button-negative-text-color-key-focus: var(
--spectrum-global-color-gray-50
);
--spectrum-alias-button-negative-text-color: var(
--spectrum-alias-button-negative-text-color-default
);
--spectrum-alias-button-negative-icon-color-hover: var(
--spectrum-alias-button-negative-text-color-hover
);
--spectrum-alias-button-negative-icon-color-down: var(
--spectrum-alias-button-negative-text-color-down
);
--spectrum-alias-button-negative-icon-color-key-focus: var(
--spectrum-alias-button-negative-text-color-key-focus
);
--spectrum-alias-button-negative-icon-color: var(
--spectrum-alias-button-negative-icon-color-default
);
--spectrum-alias-input-border-color-disabled: var(
--spectrum-alias-border-color-transparent
);
Expand Down
9 changes: 0 additions & 9 deletions tools/styles/express/spectrum-scale-large.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -274,15 +274,6 @@ governing permissions and limitations under the License.
--spectrum-alias-avatar-size-100: 26px;
--spectrum-alias-avatar-size-400: 36px;
--spectrum-alias-avatar-size-600: 46px;
--spectrum-button-s-primary-fill-textonly-text-padding-bottom: var(
--spectrum-global-dimension-static-size-85
);
--spectrum-button-m-primary-fill-texticon-padding-left: 17px;
--spectrum-button-l-primary-fill-textonly-text-padding-top: var(
--spectrum-global-dimension-static-size-150
);
--spectrum-button-xl-primary-fill-texticon-padding-left: 27px;
--spectrum-button-m-primary-outline-texticon-padding-left: 17px;
--spectrum-dialog-confirm-title-text-size: var(
--spectrum-alias-heading-xs-text-size
);
Expand Down
13 changes: 0 additions & 13 deletions tools/styles/express/spectrum-scale-medium.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -278,19 +278,6 @@ governing permissions and limitations under the License.
--spectrum-alias-avatar-size-100: var(--spectrum-global-dimension-size-250);
--spectrum-alias-avatar-size-400: var(--spectrum-global-dimension-size-350);
--spectrum-alias-avatar-size-600: var(--spectrum-global-dimension-size-450);
--spectrum-button-s-primary-fill-textonly-text-padding-bottom: var(
--spectrum-global-dimension-static-size-65
);
--spectrum-button-m-primary-fill-texticon-padding-left: var(
--spectrum-global-dimension-size-175
);
--spectrum-button-l-primary-fill-textonly-text-padding-top: var(
--spectrum-global-dimension-size-115
);
--spectrum-button-xl-primary-fill-texticon-padding-left: 21px;
--spectrum-button-m-primary-outline-texticon-padding-left: var(
--spectrum-global-dimension-size-175
);
--spectrum-dialog-confirm-title-text-size: var(
--spectrum-alias-heading-s-text-size
);
Expand Down
4 changes: 2 additions & 2 deletions tools/styles/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,8 +110,8 @@
"devDependencies": {
"@spectrum-css/commons": "^4.0.2",
"@spectrum-css/expressvars": "^2.0.3",
"@spectrum-css/tokens": "^6.3.0",
"@spectrum-css/typography": "^4.0.25",
"@spectrum-css/tokens": "^7.0.0",
"@spectrum-css/typography": "^4.0.26",
"@spectrum-css/vars": "^8.0.3"
},
"customElements": "custom-elements.json",
Expand Down
Loading

0 comments on commit a4a6d42

Please sign in to comment.