Merge pull request #30448 from backstage/canon-fix-themes
Canon - Fix some styles in our Button, ButtonIcon and ButtonLink components
This commit is contained in:
Charles de Dreuille
@@ -0,0 +1,5 @@
|
||||
---
|
||||
'@backstage/canon': patch
|
||||
---
|
||||
|
||||
Improve Button, ButtonIcon and ButtonLink styling in Canon.
|
||||
File diff suppressed because one or more lines are too long
@@ -1 +1 @@
|
||||
@font-face{font-family:CircularSp;font-weight:700;font-display:swap;unicode-range:U+0,U+D,U+20-7E,U+A0-17E,U+18F,U+192,U+1A0-1A1,U+1AF-1B0,U+1B5-1B6,U+1C4-1C6,U+1F1-1F3,U+1FA-1FF,U+218-21B,U+237,U+259,U+2BB-2BC,U+2C6-2C7,U+2C9,U+2D8-2DD,U+300-301,U+303,U+309,U+323,U+394,U+3A9,U+3BC,U+3C0,U+1E80-1E85,U+1E8A-1E8B,U+1EA0-1EF9,U+1FD6,U+2007-2008,U+200B,U+2010-2011,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2032-2033,U+2039-203A,U+2042,U+2044,U+2051,U+2070,U+2074-2079,U+2080-2089,U+20AB-20AC,U+2113,U+2117,U+2122,U+2126,U+2160-2169,U+216C-216F,U+2190-2193,U+2196-2199,U+21A9,U+21B0-21B5,U+21C6,U+2202,U+2206,U+220F,U+2211-2212,U+2215,U+2219-221A,U+221E,U+222B,U+2248,U+2260,U+2264-2265,U+22C5,U+24C5,U+25A0-25A1,U+25AF,U+25B2-25B3,U+25CA-25CB,U+25CF,U+262E,U+2713,U+2715,U+2780-2788,U+E000,U+E002,U+F6C3,U+FB00-FB04,U+FEFF,U+FF0C,U+FF0E,U+FF1A-FF1B,U+FFFF;src:url(https://encore.scdn.co/fonts/CircularSp-Bold-602e7aefc706aa36c6ec1324b9bbc461.woff2)format("woff2"),url(https://encore.scdn.co/fonts/CircularSp-Bold-856afe2da4ba4e61239b129e2c16d633.woff)format("woff")}[data-theme=dark][data-theme-name=spotify]{--canon-font-text:CircularSp,CircularSp-Arab,CircularSp-Hebr,CircularSp-Cyrl,CircularSp-Grek,CircularSp-Deva;--canon-font-title:CircularSpTitle,CircularSp-Arab,CircularSp-Hebr,CircularSp-Cyrl,CircularSp-Grek,CircularSp-Deva;--canon-font-regular:CircularSp,CircularSp-Arab,CircularSp-Hebr,CircularSp-Cyrl,CircularSp-Grek,CircularSp-Deva;--canon-gray-1:#191919;--canon-gray-2:#242424;--canon-gray-3:#373737;--canon-gray-4:#464646;--canon-gray-5:#575757;--canon-gray-6:#7b7b7b;--canon-gray-7:#9e9e9e;--canon-gray-8:#b4b4b4;--canon-bg:#000;--canon-bg-surface-1:#191919;--canon-bg-surface-2:#242424;--canon-bg-solid:#1ed760;--canon-bg-solid-hover:#3be477;--canon-bg-solid-pressed:#1abc54;--canon-bg-solid-disabled:#0f6c30;--canon-bg-tint:#242424;--canon-bg-tint-hover:#202020;--canon-bg-tint-pressed:#292929;--canon-bg-tint-disabled:#fffc;--canon-bg-danger:#3b1219;--canon-bg-warning:#302008;--canon-bg-success:#132d21;--canon-bg-underline:#d16ecb;--canon-fg-primary:#fff;--canon-fg-secondary:#9e9e9e;--canon-fg-link:#fff;--canon-fg-link-hover:#fff;--canon-fg-disabled:#575757;--canon-fg-solid:#000;--canon-fg-solid-disabled:#083618;--canon-fg-tint:#fff;--canon-fg-tint-disabled:#575757;--canon-fg-danger:#e22b2b;--canon-fg-warning:#e36d05;--canon-fg-success:#1db954;--canon-border:var(--canon-gray-3);--canon-border-hover:#fff6;--canon-border-pressed:#ffffff80;--canon-border-disabled:#fff3;--canon-border-danger:#f87a7a;--canon-border-warning:#e36d05;--canon-border-success:#53db83;--canon-ring:#fff3}#root{padding-top:var(--header-height)}.canon-Button,.canon-IconButton{border-radius:var(--canon-radius-3);transition:background-color .2s ease-in-out,color .2s ease-in-out,box-shadow .2s ease-in-out}.canon-Button--variant-primary,.canon-IconButton--variant-primary{&:hover{box-shadow:inset 0 0 0 1px var(--canon-bg-solid);color:var(--canon-fg-primary);background-color:#0000}&:active{background-color:#1ed7601a}&:disabled{background-color:var(--canon-bg-solid-disabled);color:var(--canon-fg-solid-disabled);box-shadow:none}}.canon-Button[data-size=medium],.canon-Button[data-size=small]{padding-inline:var(--canon-space-3)}.canon-MenuTrigger{all:unset;display:inline-flex}.canon-MenuPopup{box-sizing:border-box;max-width:21.25rem}.canon-MenuSubmenuTrigger,.canon-MenuItem{height:auto;min-height:2rem}.canon-Text{font-family:var(--canon-font-text)}.canon-Heading{font-family:var(--canon-font-title)}.canon-TableRow{border-radius:var(--canon-radius-4);border:none}.canon-TableRow:hover td:first-child{border-top-left-radius:var(--canon-radius-2);border-bottom-left-radius:var(--canon-radius-2)}.canon-TableRow:hover td:last-child{border-top-right-radius:var(--canon-radius-2);border-bottom-right-radius:var(--canon-radius-2)}.canon-TableBody:before,.canon-TableBody:after{line-height:var(--canon-space-1);content:"";display:block}.canon-TableHeader .canon-TableRow{border-bottom:1px solid var(--canon-border)}.canon-TableHead{font-size:var(--canon-font-size-2);color:var(--canon-fg-secondary);font-weight:var(--canon-font-weight-regular)}.canon-ScrollAreaRoot{width:100%;height:unset}.canon-TabsIndicator{background-color:var(--canon-bg-underline)}.canon-TabsTab[data-selected]{background:radial-gradient(at bottom,#d16ecb40 0%,#0000 95%)}
|
||||
@font-face{font-family:CircularSp;font-weight:700;font-display:swap;unicode-range:U+0,U+D,U+20-7E,U+A0-17E,U+18F,U+192,U+1A0-1A1,U+1AF-1B0,U+1B5-1B6,U+1C4-1C6,U+1F1-1F3,U+1FA-1FF,U+218-21B,U+237,U+259,U+2BB-2BC,U+2C6-2C7,U+2C9,U+2D8-2DD,U+300-301,U+303,U+309,U+323,U+394,U+3A9,U+3BC,U+3C0,U+1E80-1E85,U+1E8A-1E8B,U+1EA0-1EF9,U+1FD6,U+2007-2008,U+200B,U+2010-2011,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2032-2033,U+2039-203A,U+2042,U+2044,U+2051,U+2070,U+2074-2079,U+2080-2089,U+20AB-20AC,U+2113,U+2117,U+2122,U+2126,U+2160-2169,U+216C-216F,U+2190-2193,U+2196-2199,U+21A9,U+21B0-21B5,U+21C6,U+2202,U+2206,U+220F,U+2211-2212,U+2215,U+2219-221A,U+221E,U+222B,U+2248,U+2260,U+2264-2265,U+22C5,U+24C5,U+25A0-25A1,U+25AF,U+25B2-25B3,U+25CA-25CB,U+25CF,U+262E,U+2713,U+2715,U+2780-2788,U+E000,U+E002,U+F6C3,U+FB00-FB04,U+FEFF,U+FF0C,U+FF0E,U+FF1A-FF1B,U+FFFF;src:url(https://encore.scdn.co/fonts/CircularSp-Bold-602e7aefc706aa36c6ec1324b9bbc461.woff2)format("woff2"),url(https://encore.scdn.co/fonts/CircularSp-Bold-856afe2da4ba4e61239b129e2c16d633.woff)format("woff")}[data-theme-name=spotify]{--canon-font-text:CircularSp,CircularSp-Arab,CircularSp-Hebr,CircularSp-Cyrl,CircularSp-Grek,CircularSp-Deva;--canon-font-title:CircularSpTitle,CircularSp-Arab,CircularSp-Hebr,CircularSp-Cyrl,CircularSp-Grek,CircularSp-Deva;--canon-font-regular:CircularSp,CircularSp-Arab,CircularSp-Hebr,CircularSp-Cyrl,CircularSp-Grek,CircularSp-Deva;& .canon-Button{border-radius:var(--canon-radius-3);padding-inline:var(--canon-space-3)}& .canon-ButtonIcon{padding:0}& .canon-MenuTrigger{all:unset;display:inline-flex}& .canon-MenuPopup{box-sizing:border-box;max-width:21.25rem}& .canon-MenuSubmenuTrigger,& .canon-MenuItem{height:auto;min-height:2rem}& .canon-Text{font-family:var(--canon-font-text)}& .canon-Heading{font-family:var(--canon-font-title)}& .canon-TableRow{border-radius:var(--canon-radius-4);border:none}& .canon-TableRow:hover td:first-child{border-top-left-radius:var(--canon-radius-2);border-bottom-left-radius:var(--canon-radius-2)}& .canon-TableRow:hover td:last-child{border-top-right-radius:var(--canon-radius-2);border-bottom-right-radius:var(--canon-radius-2)}& .canon-TableBody:before,& .canon-TableBody:after{line-height:var(--canon-space-1);content:"";display:block}& .canon-TableHeader .canon-TableRow{border-bottom:1px solid var(--canon-border)}& .canon-TableHead{font-size:var(--canon-font-size-2);color:var(--canon-fg-secondary);font-weight:var(--canon-font-weight-regular)}& .canon-ScrollAreaRoot{width:100%;height:unset}& .canon-TabsIndicator{background-color:var(--canon-bg-underline)}& .canon-TabsTab[data-selected]{background:radial-gradient(at bottom,#d16ecb40 0%,#0000 95%)}}[data-theme=light][data-theme-name=spotify]{--canon-bg:var(--canon-gray-1);--canon-bg-surface-1:var(--canon-white);--canon-bg-surface-2:var(--canon-gray-2);--canon-bg-solid:#1ed760;--canon-bg-solid-hover:#3be477;--canon-bg-solid-pressed:#1abc54;--canon-bg-solid-disabled:var(--canon-gray-2);--canon-fg-primary:var(--canon-black);--canon-fg-secondary:var(--canon-gray-7);--canon-fg-solid:var(--canon-black);--canon-border:var(--canon-gray-3);--canon-border-hover:#0000004d;--canon-border-pressed:#00000080;--canon-border-disabled:#0000001a;--canon-border-danger:#f87a7a;--canon-border-warning:#e36d05;--canon-border-success:#53db83;--canon-ring:#0003}[data-theme=dark][data-theme-name=spotify]{--canon-bg:var(--canon-black);--canon-bg-surface-1:var(--canon-gray-1);--canon-bg-surface-2:var(--canon-gray-2);--canon-bg-solid:#1ed760;--canon-bg-solid-hover:#3be477;--canon-bg-solid-pressed:#1abc54;--canon-bg-solid-disabled:#0f6c30;--canon-bg-tint:#242424;--canon-bg-tint-hover:#202020;--canon-bg-tint-pressed:#292929;--canon-bg-tint-disabled:#fffc;--canon-bg-danger:#3b1219;--canon-bg-warning:#302008;--canon-bg-success:#132d21;--canon-bg-underline:#d16ecb;--canon-fg-primary:var(--canon-white);--canon-fg-secondary:var(--canon-gray-7);--canon-fg-link:var(--canon-white);--canon-fg-link-hover:var(--canon-white);--canon-fg-disabled:var(--canon-gray-5);--canon-fg-solid:var(--canon-black);--canon-fg-solid-disabled:#083618;--canon-fg-tint:var(--canon-white);--canon-fg-tint-disabled:var(--canon-gray-5);--canon-fg-danger:#e22b2b;--canon-fg-warning:#e36d05;--canon-fg-success:#1db954;--canon-border:var(--canon-gray-3);--canon-border-hover:#fff6;--canon-border-pressed:#ffffff80;--canon-border-disabled:#fff3;--canon-border-danger:#f87a7a;--canon-border-warning:#e36d05;--canon-border-success:#53db83;--canon-ring:#fff3}
|
||||
@@ -22,7 +22,7 @@
|
||||
format('woff');
|
||||
}
|
||||
|
||||
[data-theme='dark'][data-theme-name='spotify'] {
|
||||
[data-theme-name='spotify'] {
|
||||
--canon-font-text: CircularSp, CircularSp-Arab, CircularSp-Hebr,
|
||||
CircularSp-Cyrl, CircularSp-Grek, CircularSp-Deva;
|
||||
--canon-font-title: CircularSpTitle, CircularSp-Arab, CircularSp-Hebr,
|
||||
@@ -30,20 +30,118 @@
|
||||
--canon-font-regular: CircularSp, CircularSp-Arab, CircularSp-Hebr,
|
||||
CircularSp-Cyrl, CircularSp-Grek, CircularSp-Deva;
|
||||
|
||||
/* Gray scale */
|
||||
--canon-gray-1: #191919;
|
||||
--canon-gray-2: #242424;
|
||||
--canon-gray-3: #373737;
|
||||
--canon-gray-4: #464646;
|
||||
--canon-gray-5: #575757;
|
||||
--canon-gray-6: #7b7b7b;
|
||||
--canon-gray-7: #9e9e9e;
|
||||
--canon-gray-8: #b4b4b4;
|
||||
.canon-Button {
|
||||
border-radius: var(--canon-radius-3);
|
||||
padding-inline: var(--canon-space-3);
|
||||
}
|
||||
|
||||
/* Background Colors */
|
||||
--canon-bg: #000000;
|
||||
--canon-bg-surface-1: #191919;
|
||||
--canon-bg-surface-2: #242424;
|
||||
.canon-ButtonIcon {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.canon-MenuTrigger {
|
||||
all: unset;
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.canon-MenuPopup {
|
||||
box-sizing: border-box;
|
||||
max-width: 21.25rem;
|
||||
}
|
||||
|
||||
.canon-MenuSubmenuTrigger,
|
||||
.canon-MenuItem {
|
||||
height: auto;
|
||||
min-height: 2rem;
|
||||
}
|
||||
|
||||
.canon-Text {
|
||||
font-family: var(--canon-font-text);
|
||||
}
|
||||
|
||||
.canon-Heading {
|
||||
font-family: var(--canon-font-title);
|
||||
}
|
||||
|
||||
.canon-TableRow {
|
||||
border: none;
|
||||
border-radius: var(--canon-radius-4);
|
||||
}
|
||||
|
||||
.canon-TableRow:hover td:first-child {
|
||||
border-top-left-radius: var(--canon-radius-2);
|
||||
border-bottom-left-radius: var(--canon-radius-2);
|
||||
}
|
||||
|
||||
.canon-TableRow:hover td:last-child {
|
||||
border-top-right-radius: var(--canon-radius-2);
|
||||
border-bottom-right-radius: var(--canon-radius-2);
|
||||
}
|
||||
|
||||
.canon-TableBody:before,
|
||||
.canon-TableBody:after {
|
||||
line-height: var(--canon-space-1);
|
||||
content: '\200C';
|
||||
display: block;
|
||||
}
|
||||
|
||||
.canon-TableHeader .canon-TableRow {
|
||||
border-bottom: 1px solid var(--canon-border);
|
||||
}
|
||||
|
||||
.canon-TableHead {
|
||||
font-size: var(--canon-font-size-2);
|
||||
color: var(--canon-fg-secondary);
|
||||
font-weight: var(--canon-font-weight-regular);
|
||||
}
|
||||
|
||||
.canon-ScrollAreaRoot {
|
||||
width: 100%;
|
||||
/* TODO: Bring this as a fix in OS */
|
||||
height: unset;
|
||||
}
|
||||
|
||||
.canon-TabsIndicator {
|
||||
background-color: var(--canon-bg-underline);
|
||||
}
|
||||
|
||||
.canon-TabsTab[data-selected] {
|
||||
background: radial-gradient(
|
||||
ellipse at bottom,
|
||||
rgba(209, 110, 203, 0.25) 0%,
|
||||
transparent 95%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
[data-theme='light'][data-theme-name='spotify'] {
|
||||
--canon-bg: var(--canon-gray-1);
|
||||
--canon-bg-surface-1: var(--canon-white);
|
||||
--canon-bg-surface-2: var(--canon-gray-2);
|
||||
--canon-bg-solid: #1ed760;
|
||||
--canon-bg-solid-hover: #3be477;
|
||||
--canon-bg-solid-pressed: #1abc54;
|
||||
--canon-bg-solid-disabled: var(--canon-gray-2);
|
||||
|
||||
--canon-fg-primary: var(--canon-black);
|
||||
--canon-fg-secondary: var(--canon-gray-7);
|
||||
--canon-fg-solid: var(--canon-black);
|
||||
|
||||
--canon-border: var(--canon-gray-3);
|
||||
--canon-border-hover: rgba(0, 0, 0, 0.3);
|
||||
--canon-border-pressed: rgba(0, 0, 0, 0.5);
|
||||
--canon-border-disabled: rgba(0, 0, 0, 0.1);
|
||||
--canon-border-danger: #f87a7a;
|
||||
--canon-border-warning: #e36d05;
|
||||
--canon-border-success: #53db83;
|
||||
|
||||
--canon-ring: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
[data-theme='dark'][data-theme-name='spotify'] {
|
||||
--canon-bg: var(--canon-black);
|
||||
--canon-bg-surface-1: var(--canon-gray-1);
|
||||
--canon-bg-surface-2: var(--canon-gray-2);
|
||||
--canon-bg-solid: #1ed760;
|
||||
--canon-bg-solid-hover: #3be477;
|
||||
--canon-bg-solid-pressed: #1abc54;
|
||||
@@ -57,21 +155,19 @@
|
||||
--canon-bg-success: #132d21;
|
||||
--canon-bg-underline: #d16ecb;
|
||||
|
||||
/* Foreground Colors */
|
||||
--canon-fg-primary: #ffffff;
|
||||
--canon-fg-secondary: #9e9e9e;
|
||||
--canon-fg-link: #ffffff;
|
||||
--canon-fg-link-hover: #ffffff;
|
||||
--canon-fg-disabled: #575757;
|
||||
--canon-fg-solid: #000000;
|
||||
--canon-fg-primary: var(--canon-white);
|
||||
--canon-fg-secondary: var(--canon-gray-7);
|
||||
--canon-fg-link: var(--canon-white);
|
||||
--canon-fg-link-hover: var(--canon-white);
|
||||
--canon-fg-disabled: var(--canon-gray-5);
|
||||
--canon-fg-solid: var(--canon-black);
|
||||
--canon-fg-solid-disabled: #083618;
|
||||
--canon-fg-tint: #ffffff;
|
||||
--canon-fg-tint-disabled: #575757;
|
||||
--canon-fg-tint: var(--canon-white);
|
||||
--canon-fg-tint-disabled: var(--canon-gray-5);
|
||||
--canon-fg-danger: #e22b2b;
|
||||
--canon-fg-warning: #e36d05;
|
||||
--canon-fg-success: #1db954;
|
||||
|
||||
/* Border Colors */
|
||||
--canon-border: var(--canon-gray-3);
|
||||
--canon-border-hover: rgba(255, 255, 255, 0.4);
|
||||
--canon-border-pressed: rgba(255, 255, 255, 0.5);
|
||||
@@ -80,115 +176,5 @@
|
||||
--canon-border-warning: #e36d05;
|
||||
--canon-border-success: #53db83;
|
||||
|
||||
/* Ring Colors */
|
||||
--canon-ring: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
#root {
|
||||
padding-top: var(--header-height);
|
||||
}
|
||||
|
||||
.canon-Button,
|
||||
.canon-IconButton {
|
||||
border-radius: var(--canon-radius-3);
|
||||
transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out,
|
||||
box-shadow 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.canon-Button--variant-primary,
|
||||
.canon-IconButton--variant-primary {
|
||||
&:hover {
|
||||
box-shadow: inset 0 0 0 1px var(--canon-bg-solid);
|
||||
background-color: transparent;
|
||||
color: var(--canon-fg-primary);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: rgba(30, 215, 96, 0.1);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background-color: var(--canon-bg-solid-disabled);
|
||||
color: var(--canon-fg-solid-disabled);
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.canon-Button[data-size='medium'],
|
||||
.canon-Button[data-size='small'] {
|
||||
padding-inline: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.canon-MenuTrigger {
|
||||
all: unset;
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.canon-MenuPopup {
|
||||
box-sizing: border-box;
|
||||
max-width: 21.25rem;
|
||||
}
|
||||
|
||||
.canon-MenuSubmenuTrigger,
|
||||
.canon-MenuItem {
|
||||
height: auto;
|
||||
min-height: 2rem;
|
||||
}
|
||||
|
||||
.canon-Text {
|
||||
font-family: var(--canon-font-text);
|
||||
}
|
||||
|
||||
.canon-Heading {
|
||||
font-family: var(--canon-font-title);
|
||||
}
|
||||
|
||||
.canon-TableRow {
|
||||
border: none;
|
||||
border-radius: var(--canon-radius-4);
|
||||
}
|
||||
|
||||
.canon-TableRow:hover td:first-child {
|
||||
border-top-left-radius: var(--canon-radius-2);
|
||||
border-bottom-left-radius: var(--canon-radius-2);
|
||||
}
|
||||
|
||||
.canon-TableRow:hover td:last-child {
|
||||
border-top-right-radius: var(--canon-radius-2);
|
||||
border-bottom-right-radius: var(--canon-radius-2);
|
||||
}
|
||||
|
||||
.canon-TableBody:before,
|
||||
.canon-TableBody:after {
|
||||
line-height: var(--canon-space-1);
|
||||
content: '\200C';
|
||||
display: block;
|
||||
}
|
||||
|
||||
.canon-TableHeader .canon-TableRow {
|
||||
border-bottom: 1px solid var(--canon-border);
|
||||
}
|
||||
|
||||
.canon-TableHead {
|
||||
font-size: var(--canon-font-size-2);
|
||||
color: var(--canon-fg-secondary);
|
||||
font-weight: var(--canon-font-weight-regular);
|
||||
}
|
||||
|
||||
.canon-ScrollAreaRoot {
|
||||
width: 100%;
|
||||
/* TODO: Bring this as a fix in OS */
|
||||
height: unset;
|
||||
}
|
||||
|
||||
.canon-TabsIndicator {
|
||||
background-color: var(--canon-bg-underline);
|
||||
}
|
||||
|
||||
.canon-TabsTab[data-selected] {
|
||||
background: radial-gradient(
|
||||
ellipse at bottom,
|
||||
rgba(209, 110, 203, 0.25) 0%,
|
||||
transparent 95%
|
||||
);
|
||||
}
|
||||
|
||||
@@ -9288,6 +9288,7 @@
|
||||
align-items: center;
|
||||
gap: var(--canon-space-1_5);
|
||||
border: none;
|
||||
flex-shrink: 0;
|
||||
padding: 0;
|
||||
display: inline-flex;
|
||||
|
||||
@@ -9299,10 +9300,10 @@
|
||||
.canon-Button[data-variant="primary"] {
|
||||
background-color: var(--canon-bg-solid);
|
||||
color: var(--canon-fg-solid);
|
||||
transition: background-color .15s, box-shadow .15s;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--canon-bg-solid-hover);
|
||||
transition: background-color .15s;
|
||||
}
|
||||
|
||||
&:active {
|
||||
@@ -9324,10 +9325,10 @@
|
||||
background-color: var(--canon-bg-surface-1);
|
||||
box-shadow: inset 0 0 0 1px var(--canon-border);
|
||||
color: var(--canon-fg-primary);
|
||||
transition: box-shadow .15s;
|
||||
|
||||
&:hover {
|
||||
box-shadow: inset 0 0 0 1px var(--canon-border-hover);
|
||||
transition: box-shadow .15s;
|
||||
}
|
||||
|
||||
&:active {
|
||||
|
||||
@@ -26,6 +26,7 @@
|
||||
cursor: pointer;
|
||||
border-radius: var(--canon-radius-2);
|
||||
gap: var(--canon-space-1_5);
|
||||
flex-shrink: 0;
|
||||
|
||||
&:disabled {
|
||||
cursor: not-allowed;
|
||||
@@ -35,10 +36,10 @@
|
||||
.canon-Button[data-variant='primary'] {
|
||||
background-color: var(--canon-bg-solid);
|
||||
color: var(--canon-fg-solid);
|
||||
transition: background-color 150ms ease, box-shadow 150ms ease;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--canon-bg-solid-hover);
|
||||
transition: background-color 150ms ease;
|
||||
}
|
||||
|
||||
&:active {
|
||||
@@ -60,10 +61,10 @@
|
||||
background-color: var(--canon-bg-surface-1);
|
||||
box-shadow: inset 0 0 0 1px var(--canon-border);
|
||||
color: var(--canon-fg-primary);
|
||||
transition: box-shadow 150ms ease;
|
||||
|
||||
&:hover {
|
||||
box-shadow: inset 0 0 0 1px var(--canon-border-hover);
|
||||
transition: box-shadow 150ms ease;
|
||||
}
|
||||
|
||||
&:active {
|
||||
|
||||
Reference in New Issue
Block a user