Skip to content

Commit c98538d

Browse files
planktonicplanktonic
committed
Updates fixtures
1 parent 60f7ce7 commit c98538d

File tree

6 files changed

+116
-59
lines changed

6 files changed

+116
-59
lines changed

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -83,8 +83,8 @@
8383
"react-dom": "^18.2.0",
8484
"react-is": "^18.2.0",
8585
"rimraf": "^3.0.0",
86-
"sass": "^1.54.4",
87-
"sass-loader": "^13.0.2",
86+
"sass": "^1.61.0",
87+
"sass-loader": "^13.2.2",
8888
"storybook-addon-pseudo-states": "^1.15.5",
8989
"storybook-zeplin": "^1.7.3",
9090
"style-loader": "^3.3.1",

‎scss/bitstyles/organisms/joined-ui/_index.scss‎

Lines changed: 17 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,9 @@
55

66
/* stylelint-disable scss/dollar-variable-default */
77

8+
// prettier-ignore
9+
$button-classname: classname.get($classname-items: 'button', $layer: 'atom');
10+
811
// prettier-ignore
912
$button-border-top-left-radius-name: custom-property.get($items: ('button', 'border', 'top', 'left', 'radius'), $layer: 'atom');
1013

@@ -29,28 +32,28 @@ $button-box-shadow-name: custom-property.get($items: ('button', 'box-shadow'), $
2932
border-radius: settings.$border-radius;
3033
box-shadow: settings.$box-shadow;
3134

32-
> :first-child .a-button,
33-
> .a-button:first-child {
35+
> :first-child #{$button-classname},
36+
> #{$button-classname}:first-child {
3437
#{$button-box-shadow-name}: none;
35-
#{$button-border-top-right-radius-name}: 0;
36-
#{$button-border-bottom-right-radius-name}: 0;
38+
#{$button-border-top-right-radius-name}: #{0};
39+
#{$button-border-bottom-right-radius-name}: #{0};
3740
margin-right: calc(var(#{$button-border-width-name}) * -1);
3841
}
3942

40-
> :last-child .a-button,
41-
> .a-button:last-child {
43+
> :last-child #{$button-classname},
44+
> #{$button-classname}:last-child {
4245
#{$button-box-shadow-name}: none;
43-
#{$button-border-top-left-radius-name}: 0;
44-
#{$button-border-bottom-left-radius-name}: 0;
46+
#{$button-border-top-left-radius-name}: #{0};
47+
#{$button-border-bottom-left-radius-name}: #{0};
4548
margin-right: 0;
4649
}
4750

48-
> :not(:first-child):not(:last-child) .a-button,
49-
> .a-button:not(:first-child):not(:last-child) {
50-
#{$button-border-top-left-radius-name}: 0;
51-
#{$button-border-top-right-radius-name}: 0;
52-
#{$button-border-bottom-right-radius-name}: 0;
53-
#{$button-border-bottom-left-radius-name}: 0;
51+
> :not(:first-child):not(:last-child) #{$button-classname},
52+
> #{$button-classname}:not(:first-child):not(:last-child) {
53+
#{$button-border-top-left-radius-name}: #{0};
54+
#{$button-border-top-right-radius-name}: #{0};
55+
#{$button-border-bottom-right-radius-name}: #{0};
56+
#{$button-border-bottom-left-radius-name}: #{0};
5457
margin-right: calc(var(#{$button-border-width-name}) * -1);
5558
}
5659
}

‎scss/bitstyles/organisms/joined-ui/_settings.scss‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,4 @@
33
@use '../../tools/size';
44

55
$border-radius: size.get('s3') !default;
6-
$box-shadow: shadow.to-box-shadow(
7-
shadow.generate(
8-
$color: rgba(palette.get('brand-1', 'light-1-rgb'), 0.025),
9-
$blur-radius: size.get('s5'),
10-
)
11-
) !default;
6+
$box-shadow: none !default;

‎test/scss/fixtures/bitstyles-overrides.css‎

Lines changed: 45 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -883,11 +883,26 @@ table {
883883
content: '';
884884
}
885885
.bs-at-button {
886+
--bscpn-at-button-border-top-right-radius: var(
887+
--bscpn-at-button-border-radius
888+
);
889+
--bscpn-at-button-border-bottom-right-radius: var(
890+
--bscpn-at-button-border-radius
891+
);
892+
--bscpn-at-button-border-bottom-left-radius: var(
893+
--bscpn-at-button-border-radius
894+
);
895+
--bscpn-at-button-border-top-left-radius: var(
896+
--bscpn-at-button-border-radius
897+
);
886898
--bscpn-at-button-transition: none;
887899
--bscpn-at-button-justify-content: center;
888900
align-items: center;
889901
-webkit-appearance: none;
890-
border-radius: var(--bscpn-at-button-border-radius);
902+
border-radius: var(--bscpn-at-button-border-top-left-radius)
903+
var(--bscpn-at-button-border-top-right-radius)
904+
var(--bscpn-at-button-border-bottom-right-radius)
905+
var(--bscpn-at-button-border-bottom-left-radius);
891906
border-style: solid;
892907
border-width: var(--bscpn-at-button-border-width);
893908
cursor: pointer;
@@ -924,11 +939,19 @@ table {
924939
.bs-at-button:hover {
925940
outline-width: 0;
926941
text-decoration: none;
942+
z-index: 1;
927943
}
928944
.bs-at-button:focus-visible {
929945
outline: var(--bscpn-color-brand-2-base) solid
930946
calc(var(--bscpn-size-s7) + var(--bscpn-size-s7) / 2);
931947
outline-offset: var(--bscpn-size-s7);
948+
z-index: 3;
949+
}
950+
.bs-at-button[aria-current],
951+
.bs-at-button[aria-expanded='true'],
952+
.bs-at-button[aria-pressed='true'],
953+
.bs-at-button[aria-selected='true'] {
954+
z-index: 2;
932955
}
933956
.bs-at-button:disabled,
934957
.bs-at-button:disabled:focus,
@@ -2119,23 +2142,29 @@ table {
21192142
}
21202143
.bs-or-joined-ui {
21212144
border-radius: 10rem;
2122-
box-shadow: 0 0 calc(var(--bscpn-size-s5) / 4)
2123-
rgba(var(--bscpn-color-brand-1-light-1-rgb), 0.025),
2124-
0 0 calc(var(--bscpn-size-s5) / 3)
2125-
rgba(var(--bscpn-color-brand-1-light-1-rgb), 0.025),
2126-
0 0 calc(var(--bscpn-size-s5) / 2)
2127-
rgba(var(--bscpn-color-brand-1-light-1-rgb), 0.025),
2128-
0 0 calc(var(--bscpn-size-s5) / 1)
2129-
rgba(var(--bscpn-color-brand-1-light-1-rgb), 0.025);
2130-
}
2131-
.bs-or-joined-ui__item {
21322145
box-shadow: none;
21332146
}
2134-
.bs-or-joined-ui__item:active:not(.bs-or-joined-ui__last),
2135-
.bs-or-joined-ui__item:focus:not(.bs-or-joined-ui__last),
2136-
.bs-or-joined-ui__item:hover:not(.bs-or-joined-ui__last),
2137-
.bs-or-joined-ui__item:not(.bs-or-joined-ui__last) {
2138-
border-right: 0;
2147+
.bs-or-joined-ui > .bs-at-button:first-child,
2148+
.bs-or-joined-ui > :first-child .bs-at-button {
2149+
--bscpn-at-button-box-shadow: none;
2150+
--bscpn-at-button-border-top-right-radius: 0;
2151+
--bscpn-at-button-border-bottom-right-radius: 0;
2152+
margin-right: calc(var(--bscpn-at-button-border-width) * -1);
2153+
}
2154+
.bs-or-joined-ui > .bs-at-button:last-child,
2155+
.bs-or-joined-ui > :last-child .bs-at-button {
2156+
--bscpn-at-button-box-shadow: none;
2157+
--bscpn-at-button-border-top-left-radius: 0;
2158+
--bscpn-at-button-border-bottom-left-radius: 0;
2159+
margin-right: 0;
2160+
}
2161+
.bs-or-joined-ui > .bs-at-button:not(:first-child):not(:last-child),
2162+
.bs-or-joined-ui > :not(:first-child):not(:last-child) .bs-at-button {
2163+
--bscpn-at-button-border-top-left-radius: 0;
2164+
--bscpn-at-button-border-top-right-radius: 0;
2165+
--bscpn-at-button-border-bottom-right-radius: 0;
2166+
--bscpn-at-button-border-bottom-left-radius: 0;
2167+
margin-right: calc(var(--bscpn-at-button-border-width) * -1);
21392168
}
21402169
.bs-aspect-ratio-10-10 {
21412170
aspect-ratio: 1/1;

‎test/scss/fixtures/bitstyles.css‎

Lines changed: 37 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1215,13 +1215,20 @@ table {
12151215
content: '';
12161216
}
12171217
.a-button {
1218+
--bs-a-button-border-top-right-radius: var(--bs-a-button-border-radius);
1219+
--bs-a-button-border-bottom-right-radius: var(--bs-a-button-border-radius);
1220+
--bs-a-button-border-bottom-left-radius: var(--bs-a-button-border-radius);
1221+
--bs-a-button-border-top-left-radius: var(--bs-a-button-border-radius);
12181222
--bs-a-button-transition: color 0.075s ease-in-out,
12191223
background-color 0.075s ease-in-out, border 0.075s ease-in-out,
12201224
box-shadow 0.075s ease-in-out, outline-offset 0.075s ease-in-out;
12211225
--bs-a-button-justify-content: center;
12221226
align-items: center;
12231227
-webkit-appearance: none;
1224-
border-radius: var(--bs-a-button-border-radius);
1228+
border-radius: var(--bs-a-button-border-top-left-radius)
1229+
var(--bs-a-button-border-top-right-radius)
1230+
var(--bs-a-button-border-bottom-right-radius)
1231+
var(--bs-a-button-border-bottom-left-radius);
12251232
border-style: solid;
12261233
border-width: var(--bs-a-button-border-width);
12271234
cursor: pointer;
@@ -1258,11 +1265,19 @@ table {
12581265
.a-button:hover {
12591266
outline-width: 0;
12601267
text-decoration: none;
1268+
z-index: 1;
12611269
}
12621270
.a-button:focus-visible {
12631271
outline: var(--bs-color-brand-2-base) solid
12641272
calc(var(--bs-size-s7) + var(--bs-size-s7) / 2);
12651273
outline-offset: var(--bs-size-s7);
1274+
z-index: 3;
1275+
}
1276+
.a-button[aria-current],
1277+
.a-button[aria-expanded='true'],
1278+
.a-button[aria-pressed='true'],
1279+
.a-button[aria-selected='true'] {
1280+
z-index: 2;
12661281
}
12671282
.a-button:disabled,
12681283
.a-button:disabled:focus,
@@ -2501,23 +2516,29 @@ table {
25012516
}
25022517
.o-joined-ui {
25032518
border-radius: var(--bs-size-s3);
2504-
box-shadow: 0 0 calc(var(--bs-size-s5) / 4)
2505-
rgba(var(--bs-color-brand-1-light-1-rgb), 0.025),
2506-
0 0 calc(var(--bs-size-s5) / 3)
2507-
rgba(var(--bs-color-brand-1-light-1-rgb), 0.025),
2508-
0 0 calc(var(--bs-size-s5) / 2)
2509-
rgba(var(--bs-color-brand-1-light-1-rgb), 0.025),
2510-
0 0 calc(var(--bs-size-s5) / 1)
2511-
rgba(var(--bs-color-brand-1-light-1-rgb), 0.025);
2512-
}
2513-
.o-joined-ui__item {
25142519
box-shadow: none;
25152520
}
2516-
.o-joined-ui__item:active:not(.o-joined-ui__last),
2517-
.o-joined-ui__item:focus:not(.o-joined-ui__last),
2518-
.o-joined-ui__item:hover:not(.o-joined-ui__last),
2519-
.o-joined-ui__item:not(.o-joined-ui__last) {
2520-
border-right: 0;
2521+
.o-joined-ui > .a-button:first-child,
2522+
.o-joined-ui > :first-child .a-button {
2523+
--bs-a-button-box-shadow: none;
2524+
--bs-a-button-border-top-right-radius: 0;
2525+
--bs-a-button-border-bottom-right-radius: 0;
2526+
margin-right: calc(var(--bs-a-button-border-width) * -1);
2527+
}
2528+
.o-joined-ui > .a-button:last-child,
2529+
.o-joined-ui > :last-child .a-button {
2530+
--bs-a-button-box-shadow: none;
2531+
--bs-a-button-border-top-left-radius: 0;
2532+
--bs-a-button-border-bottom-left-radius: 0;
2533+
margin-right: 0;
2534+
}
2535+
.o-joined-ui > .a-button:not(:first-child):not(:last-child),
2536+
.o-joined-ui > :not(:first-child):not(:last-child) .a-button {
2537+
--bs-a-button-border-top-left-radius: 0;
2538+
--bs-a-button-border-top-right-radius: 0;
2539+
--bs-a-button-border-bottom-right-radius: 0;
2540+
--bs-a-button-border-bottom-left-radius: 0;
2541+
margin-right: calc(var(--bs-a-button-border-width) * -1);
25212542
}
25222543
.u-aspect-ratio-1-1 {
25232544
aspect-ratio: 1/1;

‎yarn.lock‎

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9770,15 +9770,15 @@ sane@^4.0.3:
97709770
minimist "^1.1.1"
97719771
walker "~1.0.5"
97729772

9773-
sass-loader@^13.0.2:
9774-
version "13.2.1"
9775-
resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-13.2.1.tgz#5255c9aa5ad6c8f8c869ddf5d48e71fd48ba4b81"
9776-
integrity sha512-VQUrgUa5/waIzMrzyuko3sj5WD9NMsYph91cNICx+OaODbRtLl6To2fswLx8MH2qNxXFqRtpvdPQIa7mE93YOA==
9773+
sass-loader@^13.2.2:
9774+
version "13.2.2"
9775+
resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-13.2.2.tgz#f97e803993b24012c10d7ba9676548bf7a6b18b9"
9776+
integrity sha512-nrIdVAAte3B9icfBiGWvmMhT/D+eCDwnk+yA7VE/76dp/WkHX+i44Q/pfo71NYbwj0Ap+PGsn0ekOuU1WFJ2AA==
97779777
dependencies:
97789778
klona "^2.0.6"
97799779
neo-async "^2.6.2"
97809780

9781-
sass@^1.34.1, sass@^1.54.4:
9781+
sass@^1.34.1:
97829782
version "1.59.3"
97839783
resolved "https://registry.yarnpkg.com/sass/-/sass-1.59.3.tgz#a1ddf855d75c70c26b4555df4403e1bbf8e4403f"
97849784
integrity sha512-QCq98N3hX1jfTCoUAsF3eyGuXLsY7BCnCEg9qAact94Yc21npG2/mVOqoDvE0fCbWDqiM4WlcJQla0gWG2YlxQ==
@@ -9787,6 +9787,15 @@ sass@^1.34.1, sass@^1.54.4:
97879787
immutable "^4.0.0"
97889788
source-map-js ">=0.6.2 <2.0.0"
97899789

9790+
sass@^1.61.0:
9791+
version "1.61.0"
9792+
resolved "https://registry.yarnpkg.com/sass/-/sass-1.61.0.tgz#d1f6761bb833887b8fdab32a24e052c40531d02b"
9793+
integrity sha512-PDsN7BrVkNZK2+dj/dpKQAWZavbAQ87IXqVvw2+oEYI+GwlTWkvbQtL7F2cCNbMqJEYKPh1EcjSxsnqIb/kyaQ==
9794+
dependencies:
9795+
chokidar ">=3.0.0 <4.0.0"
9796+
immutable "^4.0.0"
9797+
source-map-js ">=0.6.2 <2.0.0"
9798+
97909799
scheduler@^0.19.1:
97919800
version "0.19.1"
97929801
resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.19.1.tgz#4f3e2ed2c1a7d65681f4c854fa8c5a1ccb40f196"

0 commit comments

Comments
 (0)