Skip to content

Commit

Permalink
docs: update tokens build
Browse files Browse the repository at this point in the history
  • Loading branch information
monteri authored Sep 16, 2022
1 parent b8ed882 commit 3c41002
Show file tree
Hide file tree
Showing 54 changed files with 468 additions and 468 deletions.
28 changes: 14 additions & 14 deletions src/Alert/Alert.scss
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,11 @@

.alert {
position: relative;
padding: $alert-padding-y $alert-padding-x;
margin-bottom: $alert-margin-bottom;
border: $alert-border-width solid transparent;
padding: var(--pgn-alert-padding-y) var(--pgn-alert-padding-x);
margin-bottom: var(--pgn-alert-margin-bottom);
border: var(--pgn-alert-border-width) solid transparent;

@include border-radius($alert-border-radius);
@include border-radius(var(--pgn-alert-border-radius));
@include pgn-box-shadow(1, "down");

.alert-message-content > :last-child {
Expand All @@ -25,7 +25,7 @@

.alert-icon {
float: left;
margin-inline-end: $alert-icon-space;
margin-inline-end: var(--pgn-alert-icon-space);
width: 1.5rem;
height: 1.5rem;
flex-shrink: 0;
Expand All @@ -34,17 +34,17 @@

// Headings for larger alerts
.alert-heading {
// Specified to prevent conflicts of changing $headings-color
color: $alert-title-color;
// Specified to prevent conflicts of changing var(--pgn-headings-color)
color: var(--pgn-alert-color-title);
display: flex;
}

// added to align content and icon
.alert-content {
display: flex;
font-size: $alert-font-size;
line-height: $alert-line-height;
color: $alert-content-color;
font-size: var(--pgn-alert-font-size);
line-height: var(--pgn-alert-line-height);
color: var(--pgn-alert-color-content);
text-align: start;

div {
Expand All @@ -54,7 +54,7 @@

// Provide class for links that match alerts
.alert-link {
font-weight: $alert-link-font-weight;
font-weight: var(--pgn-alert-font-weight-link);
text-decoration: underline;

&:hover {
Expand All @@ -66,16 +66,16 @@
//
// Expand the right padding and account for the close button's positioning.

// Baking in $close-font-size: $font-size-base * 1.5 !default; to avoid any dependency
// Baking in $close-font-size: var(--pgn-font-size-base) * 1.5 !default; to avoid any dependency
.alert-dismissible {
padding-right: ($font-size-base * 1.5) + $alert-padding-x * 2;
padding-right: (var(--pgn-font-size-base) * 1.5) + var(--pgn-alert-padding-x) * 2;

// Adjust close link position
.close {
position: absolute;
top: 0;
right: 0;
padding: $alert-padding-y $alert-padding-x;
padding: var(--pgn-alert-padding-y) var(--pgn-alert-padding-x);
color: inherit;
}
}
Expand Down
30 changes: 15 additions & 15 deletions src/Alert/_variables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -2,23 +2,23 @@
//
// Define alert colors, border radius, and padding.

$alert-padding-y: 1.5rem !default;
$alert-padding-x: 1.5rem !default;
$alert-margin-bottom: 1rem !default;
$alert-border-radius: $border-radius !default;
$alert-link-font-weight: $font-weight-normal !default;
$alert-border-width: 0 !default;
$alert-title-color: #000000 !default;
$alert-box-shadow: 0 1px 2px rgba(0, 0, 0, .15), 0 1px 4px rgba(0, 0, 0, .15) !default;
var(--pgn-alert-padding-y): 1.5rem !default;
var(--pgn-alert-padding-x): 1.5rem !default;
var(--pgn-alert-margin-bottom): 1rem !default;
var(--pgn-alert-border-radius): var(--pgn-border-radius-base) !default;
var(--pgn-alert-font-weight-link): var(--pgn-font-weight-normal) !default;
var(--pgn-alert-border-width): 0 !default;
var(--pgn-alert-color-title): #000000 !default;
var(--pgn-alert-box-shadow): 0 1px 2px rgba(0, 0, 0, .15), 0 1px 4px rgba(0, 0, 0, .15) !default;

$alert-bg-level: -10 !default;
$alert-border-level: -9 !default;
$alert-color-level: 6 !default;
var(--pgn-alert-level-bg): -10 !default;
var(--pgn-alert-level-border): -9 !default;
var(--pgn-alert-level-color): 6 !default;

$alert-icon-space: .8rem !default;
var(--pgn-alert-icon-space): .8rem !default;

$alert-font-size: .875rem !default;
$alert-line-height: 1.5rem !default;
$alert-content-color: $gray-700 !default;
var(--pgn-alert-font-size): .875rem !default;
var(--pgn-alert-line-height): 1.5rem !default;
var(--pgn-alert-color-content): var(--pgn-color-gray-700) !default;

$alert-actions-gap: map-get($spacers, 3);
14 changes: 7 additions & 7 deletions src/Annotation/_variables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,15 @@ $annotation-box-shadow: drop-shadow(0 2px 4px rgba(0, 0, 0, .15))
drop-shadow(0 2px 8px rgba(0, 0, 0, .15)) !default;
$annotation-border-radius: .25rem !default;
$annotation-max-width: 18.75rem !default;
$annotation-font-size: $font-size-sm !default;
$annotation-line-height: $line-height-sm !default;
$annotation-font-size: var(--pgn-font-size-sm) !default;
$annotation-line-height: var(--pgn-line-height-sm) !default;

$annotation-variants: (
"success": ( "background-color": $success, "color": $white ),
"warning": ( "background-color": $accent-b, "color": $black ),
"error": ( "background-color": $danger, "color": $white ),
"light": ( "background-color": $white, "color": $primary-500 ),
"dark": ( "background-color": $dark, "color": $white ),
"success": ( "background-color": $success, "color": var(--pgn-color-white) ),
"warning": ( "background-color": var(--pgn-color-accent-b), "color": var(--pgn-color-black) ),
"error": ( "background-color": $danger, "color": var(--pgn-color-white) ),
"light": ( "background-color": var(--pgn-color-white), "color": var(--pgn-color-primary-500) ),
"dark": ( "background-color": $dark, "color": var(--pgn-color-white) ),
) !default;

$annotation-arrow-side-margin: .25rem !default;
Expand Down
36 changes: 18 additions & 18 deletions src/Avatar/Avatar.scss
Original file line number Diff line number Diff line change
@@ -1,46 +1,46 @@
@import "variables";

.pgn__avatar {
border-radius: $avatar-border-radius;
border: $avatar-border;
border-radius: var(--pgn-avatar-border-base)-radius;
border: var(--pgn-avatar-border-base);
display: inline-block;
height: $avatar-size;
height: var(--pgn-avatar-size-base);
overflow: hidden;
width: $avatar-size;
width: var(--pgn-avatar-size-base);
object-fit: cover;

&.pgn__avatar-xs {
height: $avatar-size-xs;
width: $avatar-size-xs;
height: var(--pgn-avatar-size-base)-xs;
width: var(--pgn-avatar-size-base)-xs;
}

&.pgn__avatar-sm {
height: $avatar-size-sm;
width: $avatar-size-sm;
height: var(--pgn-avatar-size-base)-sm;
width: var(--pgn-avatar-size-base)-sm;
}

&.pgn__avatar-md {
height: $avatar-size;
width: $avatar-size;
height: var(--pgn-avatar-size-base);
width: var(--pgn-avatar-size-base);
}

&.pgn__avatar-lg {
height: $avatar-size-lg;
width: $avatar-size-lg;
height: var(--pgn-avatar-size-base)-lg;
width: var(--pgn-avatar-size-base)-lg;
}

&.pgn__avatar-xl {
height: $avatar-size-xl;
width: $avatar-size-xl;
height: var(--pgn-avatar-size-base)-xl;
width: var(--pgn-avatar-size-base)-xl;
}

&.pgn__avatar-xxl {
height: $avatar-size-xxl;
width: $avatar-size-xxl;
height: var(--pgn-avatar-size-base)-xxl;
width: var(--pgn-avatar-size-base)-xxl;
}

&.pgn__avatar-huge {
height: $avatar-size-huge;
width: $avatar-size-huge;
height: var(--pgn-avatar-size-base)-huge;
width: var(--pgn-avatar-size-base)-huge;
}
}
18 changes: 9 additions & 9 deletions src/Avatar/_variables.scss
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
$avatar-border-radius: 100% !default;
$avatar-border: solid 1px $light-300 !default;
var(--pgn-avatar-border-base)-radius: 100% !default;
var(--pgn-avatar-border-base): solid 1px var(--pgn-color-light-300) !default;

$avatar-size-xs: 1.5rem !default;
$avatar-size-sm: 2.25rem !default;
$avatar-size: 3rem !default;
$avatar-size-lg: 4rem !default;
$avatar-size-xl: 6rem !default;
$avatar-size-xxl: 11.5rem !default;
$avatar-size-huge: 18.75rem !default;
var(--pgn-avatar-size-base)-xs: 1.5rem !default;
var(--pgn-avatar-size-base)-sm: 2.25rem !default;
var(--pgn-avatar-size-base): 3rem !default;
var(--pgn-avatar-size-base)-lg: 4rem !default;
var(--pgn-avatar-size-base)-xl: 6rem !default;
var(--pgn-avatar-size-base)-xxl: 11.5rem !default;
var(--pgn-avatar-size-base)-huge: 18.75rem !default;
6 changes: 3 additions & 3 deletions src/AvatarButton/AvatarButton.scss
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
@import "variables";

.btn.pgn__avatar-button-avatar {
padding-left: $avatar-button-padding-left;
padding-left: var(--pgn-avatar-button-padding-left-base);

&.pgn__avatar-button-avatar-sm {
padding-left: $avatar-button-padding-left-sm;
padding-left: var(--pgn-avatar-button-padding-left-base)-sm;
}

&.pgn__avatar-button-avatar-lg {
padding-left: $avatar-button-padding-left-lg;
padding-left: var(--pgn-avatar-button-padding-left-base)-lg;
}

.pgn__avatar {
Expand Down
6 changes: 3 additions & 3 deletions src/AvatarButton/_variables.scss
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
$avatar-button-padding-left: .25em !default;
$avatar-button-padding-left-sm: .25em !default;
$avatar-button-padding-left-lg: .25em !default;
var(--pgn-avatar-button-padding-left-base): .25em !default;
var(--pgn-avatar-button-padding-left-base)-sm: .25em !default;
var(--pgn-avatar-button-padding-left-base)-lg: .25em !default;
4 changes: 2 additions & 2 deletions src/Badge/_variables.scss
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
// Badges

$badge-font-size: 75% !default;
$badge-font-weight: $font-weight-bold !default;
$badge-font-weight: var(--pgn-font-weight-bold) !default;
$badge-padding-y: .125rem !default;
$badge-padding-x: .5rem !default;
$badge-border-radius: .25rem !default;

$badge-transition: none !default;
$badge-focus-width: $input-btn-focus-width !default;
$badge-focus-width: var(--pgn-core-input-btn-focus-width) !default;

$badge-pill-padding-x: .6em !default;

Expand Down
16 changes: 8 additions & 8 deletions src/Breadcrumb/_variables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -14,14 +14,14 @@ $breadcrumb-border-focus-axis-y: .5rem !default;

$breadcrumb-border-focus-width: .0625rem !default;

$breadcrumb-bg: $gray-200 !default;
$breadcrumb-divider-color: $gray-600 !default;
$breadcrumb-active-color: $gray-500 !default;
$breadcrumb-inverse-active: $light-500 !default;
$breadcrumb-inverse-spacer: $light-700 !default;
$breadcrumb-color: $primary-500 !default;
$breadcrumb-inverse-color: $white !default;
$breadcrumb-bg: var(--pgn-color-gray-200) !default;
$breadcrumb-divider-color: var(--pgn-color-gray-600) !default;
$breadcrumb-active-color: var(--pgn-color-gray-500) !default;
$breadcrumb-inverse-active: var(--pgn-color-light-500) !default;
$breadcrumb-inverse-spacer: var(--pgn-color-light-700) !default;
$breadcrumb-color: var(--pgn-color-primary-500) !default;
$breadcrumb-inverse-color: var(--pgn-color-white) !default;
$breadcrumb-divider: "/" !default;

$breadcrumb-border-radius: $border-radius !default;
$breadcrumb-border-radius: var(--pgn-border-radius-base) !default;
$breadcrumb-focus-border-radius: .125rem !default;
Loading

0 comments on commit 3c41002

Please sign in to comment.