Skip to content

Commit

Permalink
Merge pull request #22 from edx/swang/update-button-styles-final
Browse files Browse the repository at this point in the history 
fix: more updates to button styles and color themes
  • Loading branch information
@srwang
srwang authored May 28, 2024
2 parents 377d681 + 1023631 commit 9c93550
Show file tree
Hide file tree
Showing 8 changed files with 495 additions and 389 deletions.
2 changes: 1 addition & 1 deletion README.rst
View file
Original file line number Diff line number Diff line change
Expand Up @@ -145,7 +145,7 @@ Building design tokens

.. code-block:: bash
npm run build-design-tokens
npm run build-tokens
--------------------------------
Expand Down
2 changes: 1 addition & 1 deletion paragon/css/core/custom-media-breakpoints.css
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/**
* IMPORTANT: This file is the result of assembling design tokens
* Do not edit directly
* Generated on Thu, 23 May 2024 14:49:30 GMT
* Generated on Fri, 24 May 2024 22:53:44 GMT
*/

2 changes: 1 addition & 1 deletion paragon/css/core/variables.css
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* IMPORTANT: This file is the result of assembling design tokens
* Do not edit directly
* Generated on Thu, 23 May 2024 14:49:30 GMT
* Generated on Fri, 24 May 2024 22:53:44 GMT
*/

:root {
Expand Down
528 changes: 268 additions & 260 deletions paragon/css/themes/light/variables.css
View file

Large diffs are not rendered by default.

30 changes: 10 additions & 20 deletions tokens/src/themes/light/components/Button/brand.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,17 +47,14 @@
"brand": {
"value": "{color.black}",
"type": "color",
"source": "$btn-brand-hover-color"
"source": "$btn-brand-hover-color",
"modify": null
},
"outline-brand": {
"value": "{color.brand.500}",
"value": "{color.white}",
"type": "color",
"source": "$btn-brand-outline-hover-color",
"modify": [
{
"type": "color-yiq"
}
]
"modify": null
}
},
"bg": {
Expand Down Expand Up @@ -91,21 +88,13 @@
"value": "{color.white}",
"type": "color",
"source": "$btn-brand-active-color",
"modify": [
{
"type": "color-yiq"
}
]
"modify": null
},
"outline-brand": {
"value": "{color.brand.500}",
"type": "color",
"source": "$btn-brand-outline-active-color",
"modify": [
{
"type": "color-yiq"
}
]
"modify": null
}
},
"bg": {
Expand Down Expand Up @@ -138,7 +127,8 @@
"brand": {
"value": "{color.white}",
"type": "color",
"source": "$btn-brand-focus-color"
"source": "$btn-brand-focus-color",
"modify": null
},
"outline-brand": {
"value": "{color.brand.500}",
Expand Down Expand Up @@ -191,7 +181,7 @@
"source": "$btn-brand-disabled-color"
},
"outline-brand": {
"value": "{color.btn.hover.text.outline-brand}",
"value": "{color.btn.text.outline-brand}",
"type": "color",
"source": "$btn-brand-outline-disabled-color"
}
Expand All @@ -203,7 +193,7 @@
"source": "$btn-brand-disabled-bg"
},
"outline-brand": {
"value": "{color.brand.100}",
"value": "{color.white}",
"type": "color",
"source": "$btn-brand-outline-disabled-bg"
}
Expand Down
71 changes: 31 additions & 40 deletions tokens/src/themes/light/components/Button/primary.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,13 @@
"btn": {
"text": {
"primary": {
"value": "{color.btn.bg.primary}",
"value": "{color.white}",
"type": "color",
"source": "$btn-primary-color",
"modify": [
{
"type": "color-yiq"
}
]
"modify": null
},
"outline-primary": {
"value": "{color.btn.bg.primary}",
"value": "{color.primary.500}",
"type": "color",
"source": "$btn-primary-outline-color"
}
Expand Down Expand Up @@ -45,24 +41,15 @@
"hover": {
"text": {
"primary": {
"value": "{color.btn.hover.bg.primary}",
"value": "{color.white}",
"type": "color",
"source": "$btn-primary-hover-color",
"modify": [
{
"type": "color-yiq"
}
]
"modify": null
},
"outline-primary": {
"value": "{color.primary.500}",
"value": "{color.white}",
"type": "color",
"source": "$btn-primary-outline-hover-color",
"modify": [
{
"type": "color-yiq"
}
]
"source": "$btn-primary-outline-hover-color"
}
},
"bg": {
Expand Down Expand Up @@ -93,60 +80,64 @@
"active": {
"text": {
"primary": {
"value": "{color.btn.active.bg.primary}",
"value": "{color.white}",
"type": "color",
"source": "$btn-primary-active-color",
"modify": [
{
"type": "color-yiq"
}
]
"modify": null
},
"outline-primary": {
"value": "{color.btn.active.bg.outline-primary}",
"value": "{color.primary.500}",
"type": "color",
"source": "$btn-primary-outline-active-color",
"modify": [
{
"type": "color-yiq"
}
]
"modify": null
}
},
"bg": {
"primary": {
"value": "{color.theme.active.primary}",
"value": "{color.primary.500}",
"type": "color",
"source": "$btn-primary-active-bg"
},
"outline-primary": {
"value": "{color.btn.bg.primary}",
"value": "{color.white}",
"type": "color",
"source": "$btn-primary-outline-active-bg"
}
},
"border": {
"primary": {
"value": "{color.theme.active.primary}",
"value": "{color.primary.500}",
"type": "color",
"source": "$btn-primary-active-border-color"
},
"outline-primary": {
"value": "{color.btn.bg.primary}",
"value": "{color.primary.500}",
"type": "color",
"source": "$btn-primary-outline-active-border-color"
}
},
"outline": {
"primary": {
"value": "{color.btn.border.primary}",
"type": "color",
"source": "$btn-primary-focus-focus-outline-color"
},
"outline-primary": {
"value": "{color.btn.border.outline-primary}",
"type": "color",
"source": "$btn-primary-outline-focus-outline-color"
}
}
},
"focus": {
"text": {
"primary": {
"value": "{color.btn.text.primary}",
"value": "{color.white}",
"type": "color",
"source": "$btn-primary-focus-color"
},
"outline-primary": {
"value": "{color.btn.text.outline-primary}",
"value": "{color.primary.500}",
"type": "color",
"source": "$btn-primary-outline-focus-color"
}
Expand Down Expand Up @@ -196,7 +187,7 @@
"source": "$btn-primary-disabled-color"
},
"outline-primary": {
"value": "{color.btn.hover.text.outline-primary}",
"value": "{color.primary.500}",
"type": "color",
"source": "$btn-primary-outline-disabled-color"
}
Expand All @@ -208,7 +199,7 @@
"source": "$btn-primary-disabled-bg"
},
"outline-primary": {
"value": "{color.btn.bg.outline-primary",
"value": "{color.btn.bg.outline-primary}",
"type": "color",
"source": "$btn-primary-outline-disabled-bg"
}
Expand Down
60 changes: 57 additions & 3 deletions tokens/src/themes/light/components/Button/tertiary.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,72 @@
"color": {
"btn": {
"hover": {
"text": {
"tertiary": {
"value": "{color.white}",
"type": "color",
"source": "$btn-tertiary-hover-color"
}
},
"bg": {
"inverse-tertiary": { "value": "{color.primary.300}", "modify": null }
"tertiary": {
"value": "{color.primary.500}",
"type": "color",
"source": "$btn-inverse-tertiary-hover-bg"
}
}
},
"active": {
"text": {
"tertiary": {
"value": "{color.primary.500}",
"type": "color",
"source": "$btn-tertiary-active-color"
}
},
"bg": {
"inverse-tertiary": { "value": "{color.primary.300}" }
"tertiary": {
"value": "{color.white}",
"type": "color",
"source": "$btn-tertiary-active-bg"
}
},
"border": {
"tertiary": {
"value": "{color.primary.500}",
"type": "color",
"source": "$btn-tertiary-active-border-color"
}
}
},
"focus": {
"text": {
"tertiary": { "value": "{color.btn.text.tertiary}" }
"tertiary": {
"value": "{color.primary.500}",
"type": "color",
"source": "$btn-tertiary-focus-color"
}
},
"bg": {
"tertiary": {
"value": "{color.white}",
"type": "color",
"source": "$btn-tertiary-focus-bg"
}
},
"border": {
"tertiary": {
"value": "{color.primary.500}",
"type": "color",
"source": "$btn-tertiary-focus-border-color"
}
},
"outline": {
"tertiary": {
"value": "transparent",
"type": "color",
"source": "$btn-tertiary-focus-outline-color"
}
}
}
}
Expand Down
Loading

0 comments on commit 9c93550

Please sign in to comment.