Skip to content

Commit

Permalink
update from figma mock
Browse files Browse the repository at this point in the history
  • Loading branch information
@langermank
langermank committed May 15, 2024
1 parent 7c70800 commit 447fc25
Show file tree
Hide file tree
Showing 15 changed files with 1,021 additions and 163 deletions.
4 changes: 4 additions & 0 deletions docs/storybook/stories/BorderColorTesting.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -194,6 +194,10 @@ export const BorderDemo = () => {
<Button>A default button</Button>
<Button variant="invisible">An invisible button</Button>
<Button variant="primary">A primary button</Button>
<Button variant="danger">A danger button</Button>
<button class="btn btn-outline" type="button">
Button
</button>
</Box>

<Box
Expand Down
93 changes: 93 additions & 0 deletions docs/storybook/stories/BorderTesting.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,3 +56,96 @@
[data-component='ButtonCounter'] {
background-color: var(--buttonCounter-default-bgColor-rest) !important;
}

.btn {
appearance: none;
border: solid 1px;
border-radius: var(--borderRadius-medium);
color: var(--button-default-fgColor-rest, var(--color-btn-text));
background-color: var(--button-default-bgColor-rest, var(--color-btn-bg));
border-color: var(--button-default-borderColor-rest, var(--color-btn-border));
box-shadow: var(--button-default-shadow-resting, var(--color-btn-shadow)),
var(--button-default-shadow-inset, var(--color-btn-inset-shadow));
transition: 80ms cubic-bezier(0.33, 1, 0.68, 1);
transition-property: color, background-color, box-shadow, border-color;

&:hover,
&.hover,
[open] > & {
background-color: var(--button-default-bgColor-hover, var(--color-btn-hover-bg));
border-color: var(--button-default-borderColor-hover, var(--color-btn-hover-border));
transition-duration: 0.1s;
}

&:active {
background-color: var(--button-default-bgColor-active, var(--color-btn-active-bg));
border-color: var(--button-default-borderColor-active, var(--color-btn-active-border));
transition: none;
}

&.selected,
&[aria-selected='true'] {
background-color: var(--button-default-bgColor-selected, var(--color-btn-selected-bg));
box-shadow: var(--shadow-inset, var(--color-primer-shadow-inset));
}

&:disabled,
&.disabled,
&[aria-disabled='true'] {
color: var(--fgColor-disabled, var(--color-primer-fg-disabled));
background-color: var(--button-default-bgColor-rest, var(--color-btn-bg));
border-color: var(--button-default-borderColor-rest, var(--color-btn-border));

.octicon {
color: var(--fgColor-disabled, var(--color-primer-fg-disabled));
}
}
}

.btn-outline {
color: var(--button-outline-fgColor-rest, var(--color-btn-outline-text));

&:hover,
[open] > & {
color: var(--button-outline-fgColor-hover, var(--color-btn-outline-hover-text));
background-color: var(--button-outline-bgColor-hover, var(--color-btn-outline-hover-bg));
border-color: var(--button-outline-borderColor-hover, var(--color-btn-outline-hover-border));
box-shadow: var(--shadow-resting-small, var(--color-btn-outline-hover-shadow)),
var(--shadow-highlight, var(--color-btn-outline-hover-inset-shadow));

.Counter {
background-color: var(--buttonCounter-outline-bgColor-hover, var(--color-btn-outline-hover-counter-bg));
}

.octicon {
color: inherit;
}
}

&:active,
&.selected,
&[aria-selected='true'] {
color: var(--button-outline-fgColor-active, var(--color-btn-outline-selected-text));
background-color: var(--button-outline-bgColor-active, var(--color-btn-outline-selected-bg));
border-color: var(--button-outline-borderColor-active, var(--color-btn-outline-selected-border));
box-shadow: var(--button-outline-shadow-selected, var(--color-btn-outline-selected-shadow));
}

&:disabled,
&.disabled,
&[aria-disabled='true'] {
color: var(--button-outline-fgColor-disabled, var(--color-btn-outline-disabled-text));
background-color: var(--button-outline-bgColor-disabled, var(--color-btn-outline-disabled-bg));
border-color: var(--button-default-borderColor-rest, var(--color-btn-border));
box-shadow: none;

.Counter {
background-color: var(--buttonCounter-outline-bgColor-disabled, var(--color-btn-outline-disabled-counter-bg));
}
}

.Counter {
color: inherit;
background-color: var(--buttonCounter-outline-bgColor-rest, var(--color-btn-outline-counter-bg));
}
}
6 changes: 3 additions & 3 deletions src/tokens/functional/color/dark/app-dark.json5
View file
Original file line number Diff line number Diff line change
Expand Up @@ -205,7 +205,7 @@
},
expander: {
iconColor: {
$value: '{fgColor.muted}',
$value: '{fgColor.muted.@}',
$type: 'color',
$extensions: {
'org.primer.figma': {
Expand Down Expand Up @@ -272,7 +272,7 @@
},
},
muted: {
$value: '{fgColor.muted}',
$value: '{fgColor.muted.@}',
$type: 'color',
$extensions: {
'org.primer.figma': {
Expand All @@ -287,7 +287,7 @@
},
lineNumber: {
fgColor: {
$value: '{fgColor.muted}',
$value: '{fgColor.muted.@}',
$type: 'color',
$extensions: {
'org.primer.figma': {
Expand Down
152 changes: 151 additions & 1 deletion src/tokens/functional/color/dark/overrides/dark.dimmed.json5
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,137 @@
* @description All overwrites for functional color tokens for dark dimmed color mode are in this file
*/
{
bgColor: {
default: {
$value: '{base.color.neutral.2}',
$type: 'color',
},
muted: {
$value: '{base.color.neutral.3}',
$type: 'color',
},
inset: {
$value: '{base.color.neutral.1}',
$type: 'color',
},
disabled: {
$value: '{base.color.neutral.4}',
$type: 'color',
},
neutral: {
emphasis: {
$value: '{base.color.neutral.7}',
$type: 'color',
},
},
},
borderColor: {
default: {
$value: '{base.color.neutral.5}',
$type: 'color',
},
},
fgColor: {
default: {
$value: '{base.color.neutral.13}',
$type: 'color',
},
},
control: {
bgColor: {
rest: {
$value: '{base.color.neutral.4}',
$type: 'color',
},
hover: {
$value: '{base.color.neutral.5}',
$type: 'color',
},
active: {
$value: '{base.color.neutral.6}',
$type: 'color',
},
},
borderColor: {
rest: {
$value: '{borderColor.default}',
$type: 'color',
},
},
iconColor: {
hover: {
$value: '{base.color.neutral.8}',
$type: 'color',
},
active: {
$value: '{base.color.neutral.9}',
$type: 'color',
},
},
transparent: {
bgColor: {
hover: {
$value: '{base.color.neutral.5}',
$type: 'color',
alpha: 0.7,
},
active: {
$value: '{base.color.neutral.6}',
$type: 'color',
alpha: 0.7,
},
selected: {
$value: '{base.color.neutral.5}',
$type: 'color',
alpha: 0.4,
},
},
iconColor: {
hover: {
$value: '{fgColor.muted.@}',
$type: 'color',
},
active: {
$value: '{fgColor.muted.@}',
$type: 'color',
},
selected: {
$value: '{fgColor.muted.@}',
$type: 'color',
},
},
},
},
controlTrack: {
bgColor: {
rest: {
$value: '{base.color.neutral.4}',
$type: 'color',
},
hover: {
$value: '{base.color.neutral.5}',
$type: 'color',
},
active: {
$value: '{base.color.neutral.6}',
$type: 'color',
},
},
iconColor: {
rest: {
$value: '{base.color.neutral.7}',
$type: 'color',
},
hover: {
$value: '{base.color.neutral.7}',
$type: 'color',
},
active: {
$value: '{base.color.neutral.7}',
$type: 'color',
},
},
},
diffBlob: {
expander: {
iconColor: {
Expand All @@ -12,6 +143,15 @@
},
},
},
overlay: {
backdrop: {
bgColor: {
$value: '{base.color.neutral.5}',
$type: 'color',
alpha: 0.4,
},
},
},
button: {
primary: {
bgColor: {
Expand Down Expand Up @@ -40,7 +180,7 @@
invisible: {
iconColor: {
hover: {
$value: '{fgColor.muted}',
$value: '{fgColor.muted.@}',
$type: 'color',
$extensions: {
'org.primer.figma': {
Expand All @@ -53,5 +193,15 @@
},
},
},
inactive: {
bgColor: {
$value: '{base.color.neutral.4}',
$type: 'color',
},
fgColor: {
$value: '{base.color.neutral.7}',
$type: 'color',
},
},
},
}
Loading

0 comments on commit 447fc25

Please sign in to comment.