Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(link): add component tokens #8660

Merged
merged 7 commits into from
Feb 16, 2024
Merged

feat(link): add component tokens #8660

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
2bd5682
feat(fab, link): add component tokens
DitwanP Jan 25, 2024
ee90d4b
finish adding tokens for fab and link, and fix end icon demo for link.
DitwanP Jan 26, 2024
58595e0
Merge branch 'epic/7180-component-tokens' of https://github.com/Esri/…
DitwanP Jan 26, 2024
01ef92d
add missing prop info to fab
DitwanP Jan 26, 2024
58e4c88
Reverting fab changes for splitting PRs for fab and link.
DitwanP Feb 13, 2024
29ebefc
Merge branch 'epic/7180-component-tokens' of https://github.com/Esri/…
DitwanP Feb 15, 2024
c5581f6
Merge branch 'epic/7180-component-tokens' of https://github.com/Esri/…
DitwanP Feb 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 23 additions & 6 deletions packages/calcite-components/src/components/fab/fab.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,34 @@
/**
* CSS Custom Properties
*
* These properties can be overridden using the component's tag as selector.
*
* @prop --calcite-fab-shadow: Specifies the shadow of the component.
* @prop --calcite-fab-shadow-hover: Specifies the shadow of the component when in hover state.
* @prop --calcite-fab-shadow-active: Specifies the shadow of the component when in active state.
* @prop --calcite-fab-offset-shadow: Specifies the offset shadow of the component.
DitwanP marked this conversation as resolved.
Show resolved Hide resolved
*/
DitwanP marked this conversation as resolved.
Show resolved Hide resolved

:host {
@apply flex bg-transparent;
@apply flex;
--calcite-fab-shadow: 0 6px 20px -4px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.08);
--calcite-fab-shadow-active: 0 2px 12px -4px rgba(0, 0, 0, 0.2), 0 2px 4px -2px rgba(0, 0, 0, 0.16);
--calcite-fab-shadow-hover: var(--calcite-shadow-md);
--calcite-fab-offset-shadow: 0 0 #0000;
DitwanP marked this conversation as resolved.
Show resolved Hide resolved
background-color: var(--calcite-color-transparent);
}

@include disabled();

calcite-button {
@apply shadow-2;
box-shadow: var(--calcite-fab-offset-shadow), var(--calcite-fab-offset-shadow), var(--calcite-fab-shadow);
DitwanP marked this conversation as resolved.
Show resolved Hide resolved

&:hover {
@apply shadow-2-lg;
box-shadow: var(--calcite-fab-offset-shadow), var(--calcite-fab-offset-shadow), var(--calcite-fab-shadow-hover);
DitwanP marked this conversation as resolved.
Show resolved Hide resolved
}
&:active {
@apply shadow-2-sm;
box-shadow: var(--calcite-fab-offset-shadow), var(--calcite-fab-offset-shadow), var(--calcite-fab-shadow-active);
}
}

@include disabled();

@include base-component();
19 changes: 17 additions & 2 deletions packages/calcite-components/src/components/link/link.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,18 @@
/**
* CSS Custom Properties
*
* These properties can be overridden using the component's tag as selector.
*
* @prop --calcite-link-text-color: Specifies the text color of the component.
* @prop --calcite-link-icon-start-color: Specifies the color of the component's start position icon.
DitwanP marked this conversation as resolved.
Show resolved Hide resolved
* @prop --calcite-link-icon-end-color: Specifies the color of the component's end position icon.
*/

:host {
display: inline;
--calcite-link-text-color: var(--calcite-color-brand);
--calcite-link-icon-start-color: var(--calcite-color-brand);
--calcite-link-icon-end-color: var(--calcite-color-brand);
}

// link base
Expand All @@ -14,6 +27,7 @@
justify-center
rounded-none
border-none;
color: var(--calcite-link-text-color);
text-decoration: none;
line-height: inherit;
font-size: inherit;
Expand Down Expand Up @@ -47,17 +61,18 @@ calcite-icon {
// icon positioning and styles
:host .calcite-link--icon.icon-start {
margin-inline-end: theme("margin.2");
color: var(--calcite-link-icon-start-color);
}

:host .calcite-link--icon.icon-end {
margin-inline-start: theme("margin.2");
color: var(--calcite-link-icon-end-color);
}

:host {
span,
a {
@apply text-color-link
transition-default
@apply transition-default
relative
inline
border-none
Expand Down
10 changes: 5 additions & 5 deletions packages/calcite-components/src/demos/link.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@

<div class="child"><calcite-link icon-start="information" class="font-size--2">Link</calcite-link><br /></div>

<div class="child"><calcite-link icon-start="information" class="font-size--2">Link</calcite-link><br /></div>
<div class="child"><calcite-link icon-end="information" class="font-size--2">Link</calcite-link><br /></div>

<div class="child">
<calcite-link icon-start="information" icon-end="information" class="font-size--2">Link</calcite-link><br />
Expand All @@ -102,7 +102,7 @@

<div class="child"><calcite-link icon-start="information" class="font-size--1">Link</calcite-link><br /></div>

<div class="child"><calcite-link icon-start="information" class="font-size--1">Link</calcite-link><br /></div>
<div class="child"><calcite-link icon-end="information" class="font-size--1">Link</calcite-link><br /></div>

<div class="child">
<calcite-link icon-start="information" icon-end="information" class="font-size--1">Link</calcite-link><br />
Expand All @@ -119,7 +119,7 @@

<div class="child"><calcite-link icon-start="information" class="font-size-0">Link</calcite-link><br /></div>

<div class="child"><calcite-link icon-start="information" class="font-size-0">Link</calcite-link><br /></div>
<div class="child"><calcite-link icon-end="information" class="font-size-0">Link</calcite-link><br /></div>

<div class="child">
<calcite-link icon-start="information" icon-end="information" class="font-size-0">Link</calcite-link><br />
Expand All @@ -136,7 +136,7 @@

<div class="child"><calcite-link icon-start="information" class="font-size-1">Link</calcite-link><br /></div>

<div class="child"><calcite-link icon-start="information" class="font-size-1">Link</calcite-link><br /></div>
<div class="child"><calcite-link icon-end="information" class="font-size-1">Link</calcite-link><br /></div>

<div class="child">
<calcite-link icon-start="information" icon-end="information" class="font-size-1">Link</calcite-link><br />
Expand All @@ -153,7 +153,7 @@

<div class="child"><calcite-link icon-start="information" class="font-size-2">Link</calcite-link><br /></div>

<div class="child"><calcite-link icon-start="information" class="font-size-2">Link</calcite-link><br /></div>
<div class="child"><calcite-link icon-end="information" class="font-size-2">Link</calcite-link><br /></div>

<div class="child">
<calcite-link icon-start="information" icon-end="information" class="font-size-2">Link</calcite-link><br />
Expand Down
Loading